@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/src/demos/badge-demo/page.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusBadge from "../../components/ModusBadge";
+import ModusButton from "../../components/ModusButton";
+import ModusAvatar from "../../components/ModusAvatar";
+
+/**
+ * Demo page showcasing the Modus Badge component.
+ *
+ * Demonstrates badge features including:
+ * - Color variants (primary, secondary, tertiary, success, warning, danger, high-contrast)
+ * - Badge variants (filled, outlined, text, counter)
+ * - Different sizes (sm, md, lg)
+ * - Usage with other components (buttons, avatars)
+ */
+export default function BadgeDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Badge"
+      description="Badges are small status indicators that display counts, labels, or states. Use badges to highlight important information or indicate status."
+    >
+      <DemoExample
+        title="Badge Colors"
+        description="Different color variants for various semantic meanings."
+      >
+        <div className="flex flex-wrap items-center gap-4">
+          <ModusBadge color="primary">Primary</ModusBadge>
+          <ModusBadge color="secondary">Secondary</ModusBadge>
+          <ModusBadge color="tertiary">Tertiary</ModusBadge>
+          <ModusBadge color="success">Success</ModusBadge>
+          <ModusBadge color="warning">Warning</ModusBadge>
+          <ModusBadge color="danger">Danger</ModusBadge>
+          <ModusBadge color="high-contrast">High Contrast</ModusBadge>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Badge Variants"
+        description="Different visual styles for badges."
+      >
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <ModusBadge variant="filled" color="primary">
+              Filled
+            </ModusBadge>
+            <ModusBadge variant="outlined" color="primary">
+              Outlined
+            </ModusBadge>
+            <ModusBadge variant="text" color="primary">
+              Text
+            </ModusBadge>
+            <ModusBadge variant="counter" color="primary">
+              Counter
+            </ModusBadge>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Badge Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div className="flex flex-wrap items-center gap-4">
+          <ModusBadge size="sm" color="primary">
+            Small
+          </ModusBadge>
+          <ModusBadge size="md" color="primary">
+            Medium
+          </ModusBadge>
+          <ModusBadge size="lg" color="primary">
+            Large
+          </ModusBadge>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Badges with Numbers"
+        description="Use badges to display counts and numeric values."
+      >
+        <div className="flex flex-wrap items-center gap-4">
+          <ModusBadge color="primary">5</ModusBadge>
+          <ModusBadge color="success">12</ModusBadge>
+          <ModusBadge color="warning">99+</ModusBadge>
+          <ModusBadge color="danger">1,234</ModusBadge>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Badges on Buttons"
+        description="Combine badges with buttons to show counts or status."
+      >
+        <div className="flex flex-wrap items-center gap-4">
+          <ModusButton color="primary">
+            Notifications
+            <ModusBadge color="danger" size="sm" variant="counter">
+              3
+            </ModusBadge>
+          </ModusButton>
+          <ModusButton color="secondary">
+            Messages
+            <ModusBadge color="primary" size="sm" variant="counter">
+              12
+            </ModusBadge>
+          </ModusButton>
+          <ModusButton color="tertiary">
+            Updates
+            <ModusBadge color="success" size="sm" variant="counter">
+              5
+            </ModusBadge>
+          </ModusButton>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Badges on Avatars"
+        description="Use badges to indicate status or notifications on avatars."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="relative">
+            <ModusAvatar alt="User" initials="JD" size="md" shape="circle" />
+            <div className="absolute -top-1 -right-1">
+              <ModusBadge color="success" size="sm" variant="counter">
+                <i className="modus-icons text-xs" aria-hidden="true">
+                  circle
+                </i>
+              </ModusBadge>
+            </div>
+          </div>
+          <div className="relative">
+            <ModusAvatar alt="User" initials="JS" size="md" shape="circle" />
+            <div className="absolute -top-1 -right-1">
+              <ModusBadge color="danger" size="sm" variant="counter">
+                3
+              </ModusBadge>
+            </div>
+          </div>
+          <div className="relative">
+            <ModusAvatar alt="User" initials="BJ" size="md" shape="circle" />
+            <div className="absolute -top-1 -right-1">
+              <ModusBadge color="warning" size="sm" variant="counter">
+                !
+              </ModusBadge>
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Status Indicators"
+        description="Use badges as status indicators for different states."
+      >
+        <div className="flex flex-wrap items-center gap-4">
+          <ModusBadge color="success" variant="filled">
+            Active
+          </ModusBadge>
+          <ModusBadge color="warning" variant="filled">
+            Pending
+          </ModusBadge>
+          <ModusBadge color="danger" variant="filled">
+            Inactive
+          </ModusBadge>
+          <ModusBadge color="primary" variant="filled">
+            New
+          </ModusBadge>
+          <ModusBadge color="secondary" variant="filled">
+            Draft
+          </ModusBadge>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/breadcrumbs-demo/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusBreadcrumbs from "../../components/ModusBreadcrumbs";
+import type { BreadcrumbItem } from "../../components/ModusBreadcrumbs";
+
+const basicItems: BreadcrumbItem[] = [
+  { label: "Home", url: "/" },
+  { label: "Components", url: "/components" },
+  { label: "Breadcrumbs" },
+];
+
+const sizeItems: BreadcrumbItem[] = [
+  { label: "Home", url: "/" },
+  { label: "Library", url: "/library" },
+  { label: "Data" },
+];
+
+const deepPathItems: BreadcrumbItem[] = [
+  { label: "Home", url: "/" },
+  { label: "Projects", url: "/projects" },
+  { label: "Project Alpha", url: "/projects/alpha" },
+  { label: "Settings", url: "/projects/alpha/settings" },
+  { label: "Team" },
+];
+
+const longLabelItems: BreadcrumbItem[] = [
+  { label: "Home", url: "/" },
+  { label: "This is a very long breadcrumb label", url: "/long" },
+  { label: "Another extremely long breadcrumb item name here" },
+];
+
+export default function BreadcrumbsDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Breadcrumbs"
+      description="Breadcrumbs show the hierarchical path to the current page. Use breadcrumbs to help users understand their location and navigate back through the application structure."
+    >
+      <DemoExample
+        title="Basic Breadcrumbs"
+        description="Simple breadcrumb navigation showing the current path."
+      >
+        <ModusBreadcrumbs items={basicItems} />
+      </DemoExample>
+
+      <DemoExample
+        title="Breadcrumb Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div className="flex flex-col gap-4">
+          <div>
+            <div className="text-base font-semibold mb-2 text-foreground">
+              Small (sm)
+            </div>
+            <ModusBreadcrumbs items={sizeItems} size="sm" />
+          </div>
+          <div>
+            <div className="text-base font-semibold mb-2 text-foreground">
+              Medium (md)
+            </div>
+            <ModusBreadcrumbs items={sizeItems} size="md" />
+          </div>
+          <div>
+            <div className="text-base font-semibold mb-2 text-foreground">
+              Large (lg)
+            </div>
+            <ModusBreadcrumbs items={sizeItems} size="lg" />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Deep Navigation Path"
+        description="Breadcrumbs showing a deep navigation hierarchy."
+      >
+        <ModusBreadcrumbs items={deepPathItems} />
+      </DemoExample>
+
+      <DemoExample
+        title="Breadcrumbs with Long Labels"
+        description="Breadcrumbs handle long labels gracefully with truncation."
+      >
+        <ModusBreadcrumbs items={longLabelItems} />
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/button-demo/page.tsx

@@ -0,0 +1,261 @@
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusButton from "../../components/ModusButton";
+
+export default function ButtonDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Button"
+      description="Buttons trigger actions and provide clear call-to-action elements. Use primary buttons for the main action, secondary for supporting actions, and tertiary for subtle actions."
+    >
+      <DemoExample
+        title="Button Variants"
+        description="Different button styles for various use cases and visual hierarchy."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusButton color="primary">Primary</ModusButton>
+          <ModusButton color="secondary">Secondary</ModusButton>
+          <ModusButton color="tertiary">Tertiary</ModusButton>
+          <ModusButton color="warning">Warning</ModusButton>
+          <ModusButton color="danger">Danger</ModusButton>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Button Styles"
+        description="Different visual styles to match your design needs."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusButton variant="filled">Filled</ModusButton>
+          <ModusButton variant="outlined">Outlined</ModusButton>
+          <ModusButton variant="borderless">Borderless</ModusButton>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Button Sizes"
+        description="Various sizes for different contexts and touch targets."
+      >
+        <div className="flex flex-wrap items-center gap-4">
+          <ModusButton size="xs">Extra Small</ModusButton>
+          <ModusButton size="sm">Small</ModusButton>
+          <ModusButton size="md">Medium</ModusButton>
+          <ModusButton size="lg">Large</ModusButton>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Buttons with Icons"
+        description="Enhance buttons with icons for better visual communication."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusButton icon="save_disk" iconPosition="left">
+            Save File
+          </ModusButton>
+          <ModusButton icon="download" iconPosition="right">
+            Download
+          </ModusButton>
+          <ModusButton
+            icon="settings"
+            iconPosition="only"
+            ariaLabel="Settings"
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Button Icon Sizes"
+        description="Icon sizes automatically adapt to button size, or can be explicitly controlled."
+      >
+        <div className="space-y-6">
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Automatic Icon Sizing (by Button Size)
+            </div>
+            <div className="flex flex-wrap items-center gap-4">
+              <ModusButton size="xs" icon="star" iconPosition="left">
+                Extra Small
+              </ModusButton>
+              <ModusButton size="sm" icon="star" iconPosition="left">
+                Small
+              </ModusButton>
+              <ModusButton size="md" icon="star" iconPosition="left">
+                Medium
+              </ModusButton>
+              <ModusButton size="lg" icon="star" iconPosition="left">
+                Large
+              </ModusButton>
+            </div>
+          </div>
+
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Icon-Only Buttons (Automatic Sizing)
+            </div>
+            <div className="flex flex-wrap items-center gap-4">
+              <ModusButton
+                size="xs"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (XS)"
+              />
+              <ModusButton
+                size="sm"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (SM)"
+              />
+              <ModusButton
+                size="md"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (MD)"
+              />
+              <ModusButton
+                size="lg"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (LG)"
+              />
+            </div>
+          </div>
+
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Custom Icon Sizes (Explicit Control)
+            </div>
+            <div className="flex flex-wrap items-center gap-4">
+              <ModusButton icon="star" iconSize="text-xs" iconPosition="left">
+                Tiny Icon
+              </ModusButton>
+              <ModusButton icon="star" iconSize="text-sm" iconPosition="left">
+                Small Icon
+              </ModusButton>
+              <ModusButton icon="star" iconSize="text-lg" iconPosition="left">
+                Large Icon
+              </ModusButton>
+              <ModusButton icon="star" iconSize="text-2xl" iconPosition="left">
+                XL Icon
+              </ModusButton>
+            </div>
+          </div>
+
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Size Comparison
+            </div>
+            <div className="flex flex-wrap items-center gap-4">
+              <ModusButton
+                size="lg"
+                icon="download"
+                iconSize="text-sm"
+                iconPosition="left"
+              >
+                Large Button, Small Icon
+              </ModusButton>
+              <ModusButton
+                size="sm"
+                icon="download"
+                iconSize="text-xl"
+                iconPosition="left"
+              >
+                Small Button, Large Icon
+              </ModusButton>
+              <ModusButton
+                size="md"
+                icon="check_circle"
+                iconSize="text-3xl"
+                iconPosition="only"
+                ariaLabel="Success (Huge Icon)"
+              />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Icon Sizes"
+        description="Different icon sizes using Modus font scale for various contexts."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-2xs">star</i>
+            <div className="text-xs text-muted-foreground">2xs (8px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-xs">star</i>
+            <div className="text-xs text-muted-foreground">xs (10px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-sm">star</i>
+            <div className="text-xs text-muted-foreground">sm (12px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-base">star</i>
+            <div className="text-xs text-muted-foreground">base (14px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-lg">star</i>
+            <div className="text-xs text-muted-foreground">lg (16px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-xl">star</i>
+            <div className="text-xs text-muted-foreground">xl (18px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-2xl">star</i>
+            <div className="text-xs text-muted-foreground">2xl (20px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-3xl">star</i>
+            <div className="text-xs text-muted-foreground">3xl (24px)</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-4xl">star</i>
+            <div className="text-xs text-muted-foreground">4xl (30px)</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Colored Icons"
+        description="Icons with different semantic colors from the 9-color design system."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-2xl text-primary">info</i>
+            <div className="text-xs text-muted-foreground">Primary</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-2xl text-success">check_circle</i>
+            <div className="text-xs text-muted-foreground">Success</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-2xl text-warning">warning</i>
+            <div className="text-xs text-muted-foreground">Warning</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-2xl text-destructive">alert</i>
+            <div className="text-xs text-muted-foreground">Error</div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <i className="modus-icons text-2xl text-muted-foreground">help</i>
+            <div className="text-xs text-muted-foreground">Muted</div>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}