initial

ts_web/elements/00group-ui/dees-mobile-button/dees-mobile-button.demo.ts

@@ -0,0 +1,72 @@
+import { html } from '@design.estate/dees-element';
+import { injectCssVariables } from '../../00variables.js';
+
+export const demoFunc = () => {
+  injectCssVariables();
+  return html`
+  <style>
+    .demo-section {
+      margin-bottom: 2rem;
+    }
+    .demo-section h3 {
+      margin: 0 0 1rem 0;
+      font-size: 0.875rem;
+      color: var(--dees-muted-foreground);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .demo-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      align-items: center;
+    }
+  </style>
+
+  <div class="demo-section">
+    <h3>Variants</h3>
+    <div class="demo-row">
+      <dees-mobile-button variant="default">Default</dees-mobile-button>
+      <dees-mobile-button variant="primary">Primary</dees-mobile-button>
+      <dees-mobile-button variant="secondary">Secondary</dees-mobile-button>
+      <dees-mobile-button variant="outline">Outline</dees-mobile-button>
+      <dees-mobile-button variant="ghost">Ghost</dees-mobile-button>
+      <dees-mobile-button variant="destructive">Destructive</dees-mobile-button>
+      <dees-mobile-button variant="link">Link</dees-mobile-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Sizes</h3>
+    <div class="demo-row">
+      <dees-mobile-button size="sm">Small</dees-mobile-button>
+      <dees-mobile-button size="md">Medium</dees-mobile-button>
+      <dees-mobile-button size="lg">Large</dees-mobile-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>States</h3>
+    <div class="demo-row">
+      <dees-mobile-button>Normal</dees-mobile-button>
+      <dees-mobile-button disabled>Disabled</dees-mobile-button>
+      <dees-mobile-button loading>Loading</dees-mobile-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Icon Buttons</h3>
+    <div class="demo-row">
+      <dees-mobile-button icon size="sm">
+        <dees-mobile-icon icon="plus" size="16"></dees-mobile-icon>
+      </dees-mobile-button>
+      <dees-mobile-button icon>
+        <dees-mobile-icon icon="settings" size="18"></dees-mobile-icon>
+      </dees-mobile-button>
+      <dees-mobile-button icon size="lg">
+        <dees-mobile-icon icon="menu" size="20"></dees-mobile-icon>
+      </dees-mobile-button>
+    </div>
+  </div>
+`;
+};