@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,231 @@
+import { useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusButtonGroup from "../../components/ModusButtonGroup";
+import ModusButton from "../../components/ModusButton";
+
+export default function ButtonGroupDemoPage() {
+  const [selectedButtons, setSelectedButtons] = useState<string[]>([]);
+
+  return (
+    <DemoPage
+      title="Modus Button Group"
+      description="Button groups organize multiple buttons together with support for single or multiple selection modes. Use them for toolbar actions, segmented controls, and toggle groups."
+    >
+      <DemoExample
+        title="Button Variants"
+        description="Different visual styles for button groups."
+      >
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">
+              Outlined (default)
+            </div>
+            <ModusButtonGroup variant="outlined" color="primary">
+              <ModusButton>Button 1</ModusButton>
+              <ModusButton>Button 2</ModusButton>
+              <ModusButton>Button 3</ModusButton>
+            </ModusButtonGroup>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Filled</div>
+            <ModusButtonGroup variant="filled" color="primary">
+              <ModusButton>Button 1</ModusButton>
+              <ModusButton>Button 2</ModusButton>
+              <ModusButton>Button 3</ModusButton>
+            </ModusButtonGroup>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Borderless</div>
+            <ModusButtonGroup variant="borderless" color="primary">
+              <ModusButton>Button 1</ModusButton>
+              <ModusButton>Button 2</ModusButton>
+              <ModusButton>Button 3</ModusButton>
+            </ModusButtonGroup>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Button Colors"
+        description="Apply consistent colors across all buttons in the group."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusButtonGroup variant="outlined" color="primary">
+            <ModusButton>Primary</ModusButton>
+            <ModusButton>Buttons</ModusButton>
+          </ModusButtonGroup>
+          <ModusButtonGroup variant="outlined" color="secondary">
+            <ModusButton>Secondary</ModusButton>
+            <ModusButton>Buttons</ModusButton>
+          </ModusButtonGroup>
+          <ModusButtonGroup variant="outlined" color="tertiary">
+            <ModusButton>Tertiary</ModusButton>
+            <ModusButton>Buttons</ModusButton>
+          </ModusButtonGroup>
+          <ModusButtonGroup variant="outlined" color="warning">
+            <ModusButton>Warning</ModusButton>
+            <ModusButton>Buttons</ModusButton>
+          </ModusButtonGroup>
+          <ModusButtonGroup variant="outlined" color="danger">
+            <ModusButton>Danger</ModusButton>
+            <ModusButton>Buttons</ModusButton>
+          </ModusButtonGroup>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Orientation"
+        description="Button groups can be arranged horizontally or vertically."
+      >
+        <div className="flex flex-wrap gap-8">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">
+              Horizontal (default)
+            </div>
+            <ModusButtonGroup orientation="horizontal" variant="outlined">
+              <ModusButton>Option 1</ModusButton>
+              <ModusButton>Option 2</ModusButton>
+              <ModusButton>Option 3</ModusButton>
+            </ModusButtonGroup>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Vertical</div>
+            <ModusButtonGroup orientation="vertical" variant="outlined">
+              <ModusButton>Option 1</ModusButton>
+              <ModusButton>Option 2</ModusButton>
+              <ModusButton>Option 3</ModusButton>
+            </ModusButtonGroup>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Single Selection (Radio-like)"
+        description="Only one button can be selected at a time, similar to radio buttons."
+      >
+        <ModusButtonGroup
+          selectionType="single"
+          variant="outlined"
+          color="primary"
+        >
+          <ModusButton pressed>Option A</ModusButton>
+          <ModusButton>Option B</ModusButton>
+          <ModusButton>Option C</ModusButton>
+        </ModusButtonGroup>
+      </DemoExample>
+
+      <DemoExample
+        title="Multiple Selection (Checkbox-like)"
+        description="Multiple buttons can be selected simultaneously, similar to checkboxes."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusButtonGroup
+            selectionType="multiple"
+            variant="outlined"
+            color="primary"
+            onButtonSelectionChange={(e) => {
+              const buttons = e.detail.selectedButtons;
+              setSelectedButtons(
+                buttons.map((btn) => btn.textContent?.trim() || ""),
+              );
+            }}
+          >
+            <ModusButton pressed>Bold</ModusButton>
+            <ModusButton>Italic</ModusButton>
+            <ModusButton pressed>Underline</ModusButton>
+          </ModusButtonGroup>
+          <div className="text-sm text-muted-foreground">
+            Selected:{" "}
+            {selectedButtons.length > 0 ? selectedButtons.join(", ") : "None"}
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Icon-Only Buttons"
+        description="Button groups with icon-only buttons for compact toolbar actions."
+      >
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Text Alignment</div>
+            <ModusButtonGroup
+              selectionType="single"
+              variant="outlined"
+              color="primary"
+            >
+              <ModusButton
+                icon="align_left"
+                iconPosition="only"
+                ariaLabel="Align left"
+                pressed
+              />
+              <ModusButton
+                icon="text_centered"
+                iconPosition="only"
+                ariaLabel="Align center"
+              />
+              <ModusButton
+                icon="align_right"
+                iconPosition="only"
+                ariaLabel="Align right"
+              />
+            </ModusButtonGroup>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Text Formatting</div>
+            <ModusButtonGroup
+              selectionType="multiple"
+              variant="outlined"
+              color="secondary"
+            >
+              <ModusButton
+                icon="text_bold"
+                iconPosition="only"
+                ariaLabel="Bold"
+              />
+              <ModusButton
+                icon="text_italic"
+                iconPosition="only"
+                ariaLabel="Italic"
+              />
+              <ModusButton
+                icon="text_underlined"
+                iconPosition="only"
+                ariaLabel="Underline"
+              />
+            </ModusButtonGroup>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled State"
+        description="Disable all buttons in the group at once."
+      >
+        <ModusButtonGroup variant="outlined" color="primary" disabled>
+          <ModusButton>Disabled</ModusButton>
+          <ModusButton>Button</ModusButton>
+          <ModusButton>Group</ModusButton>
+        </ModusButtonGroup>
+      </DemoExample>
+
+      <DemoExample
+        title="Mixed Content"
+        description="Button groups can contain buttons with both text and icons."
+      >
+        <ModusButtonGroup variant="outlined" color="primary">
+          <ModusButton icon="save_disk" iconPosition="left">
+            Save
+          </ModusButton>
+          <ModusButton icon="download" iconPosition="left">
+            Download
+          </ModusButton>
+          <ModusButton icon="share" iconPosition="left">
+            Share
+          </ModusButton>
+        </ModusButtonGroup>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,241 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusButton from "../../components/ModusButton";
+import ModusCard from "../../components/ModusCard";
+
+export default function CardDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Card"
+      description="Cards group related information into a contained surface. Keep each card focused on a single concept and align supporting actions to the bottom."
+    >
+      <DemoExample
+        title="Project summary"
+        description="Vertical cards are ideal for key metrics or spotlighting a single project."
+      >
+        <ModusCard
+          title={
+            <div className="text-xl font-semibold text-foreground">
+              Atlas Renewal
+            </div>
+          }
+          subtitle={
+            <div className="text-sm text-foreground-80">
+              Updated 2 hours ago
+            </div>
+          }
+          actions={
+            <div className="flex gap-2">
+              <ModusButton color="primary" size="sm">
+                Open project
+              </ModusButton>
+              <ModusButton variant="outlined" size="sm">
+                Share
+              </ModusButton>
+            </div>
+          }
+        >
+          <div className="flex flex-col gap-3 text-sm text-foreground-80">
+            <div>Next milestone: Validate customer insights</div>
+            <div>Owner: Priya Malhotra</div>
+            <div>Team: Research, Field Ops</div>
+          </div>
+        </ModusCard>
+      </DemoExample>
+
+      <DemoExample
+        title="Horizontal layout"
+        description="Use horizontal cards when imagery or a quick status pairs with copy."
+      >
+        <ModusCard
+          layout="horizontal"
+          padding="compact"
+          bordered
+          title={
+            <div className="text-lg font-medium text-foreground">Field kit</div>
+          }
+          subtitle={
+            <div className="text-sm text-foreground-80">
+              Inventory: 18 units available
+            </div>
+          }
+          actions={
+            <ModusButton color="primary" size="sm">
+              Reserve
+            </ModusButton>
+          }
+        >
+          <div className="text-sm text-foreground-80">
+            Includes GPS, survey equipment, and safety checklist. Recommended
+            for teams working on remote installs.
+          </div>
+        </ModusCard>
+      </DemoExample>
+
+      <DemoExample
+        title="Card with Header Image"
+        description="Add an image or figure in the header slot to provide visual context."
+      >
+        <ModusCard
+          layout="horizontal"
+          bordered
+          header={
+            <div className="w-full md:w-48 h-48 overflow-hidden">
+              <img
+                src="https://i.pravatar.cc/300?img=12"
+                alt="User avatar"
+                className="w-full h-full object-cover"
+              />
+            </div>
+          }
+          title={
+            <div className="text-lg font-medium text-foreground">
+              Team Member
+            </div>
+          }
+          subtitle={
+            <div className="text-sm text-foreground-80">Senior Developer</div>
+          }
+          actions={
+            <ModusButton color="primary" size="sm">
+              Contact
+            </ModusButton>
+          }
+        >
+          <div className="text-sm text-foreground-80">
+            Specializes in frontend architecture and design systems. Available for
+            new projects starting next quarter.
+          </div>
+        </ModusCard>
+      </DemoExample>
+
+      <DemoExample
+        title="Background Figure Card"
+        description="Use background-figure to stretch header images across the entire card with overlaid text."
+      >
+        <ModusCard
+          backgroundFigure
+          header={
+            <div className="w-full h-64 overflow-hidden">
+              <img
+                src="https://picsum.photos/id/1045/600/400"
+                alt="Scenic view"
+                className="w-full h-full object-cover"
+              />
+            </div>
+          }
+          title={
+            <div className="text-2xl font-semibold text-white [text-shadow:1px_1px_2px_rgba(0,0,0,0.8)]">
+              Featured Project
+            </div>
+          }
+          subtitle={
+            <div className="text-base text-white/80 [text-shadow:1px_1px_2px_rgba(0,0,0,0.8)]">
+              Launching Q2 2024
+            </div>
+          }
+          actions={
+            <ModusButton color="primary" size="sm">
+              Learn More
+            </ModusButton>
+          }
+        >
+          <div className="text-base text-white/80 [text-shadow:1px_1px_2px_rgba(0,0,0,0.8)]">
+            This project showcases innovative design patterns and modern user
+            experiences. Join us for the launch event.
+          </div>
+        </ModusCard>
+      </DemoExample>
+
+      <DemoExample
+        title="Card with Footer"
+        description="Use the footer slot for metadata, tags, or additional information outside the main content area."
+      >
+        <ModusCard
+          bordered
+          title={
+            <div className="text-xl font-semibold text-foreground">
+              Document Review
+            </div>
+          }
+          subtitle={
+            <div className="text-sm text-foreground-80">
+              Last updated: 3 days ago
+            </div>
+          }
+          actions={
+            <ModusButton variant="outlined" size="sm">
+              Edit
+            </ModusButton>
+          }
+          footer={
+            <div className="flex items-center justify-between pt-4 border-t border-border">
+              <div className="flex gap-2">
+                <div className="px-2 py-1 text-xs rounded bg-muted text-muted-foreground">
+                  Draft
+                </div>
+                <div className="px-2 py-1 text-xs rounded bg-muted text-muted-foreground">
+                  Review
+                </div>
+              </div>
+              <div className="text-xs text-muted-foreground">3 reviewers</div>
+            </div>
+          }
+        >
+          <div className="text-sm text-foreground-80">
+            This document contains important project specifications and
+            requirements. Please review and provide feedback by end of week.
+          </div>
+        </ModusCard>
+      </DemoExample>
+
+      <DemoExample
+        title="Compact Padding"
+        description="Use compact padding for dense dashboards or when space is limited."
+      >
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <ModusCard
+            padding="compact"
+            bordered
+            title={
+              <div className="text-base font-medium text-foreground">
+                Active Users
+              </div>
+            }
+          >
+            <div className="text-2xl font-bold text-foreground">1,234</div>
+            <div className="text-xs text-muted-foreground">
+              +12% from last month
+            </div>
+          </ModusCard>
+          <ModusCard
+            padding="compact"
+            bordered
+            title={
+              <div className="text-base font-medium text-foreground">
+                Revenue
+              </div>
+            }
+          >
+            <div className="text-2xl font-bold text-foreground">$45.6K</div>
+            <div className="text-xs text-muted-foreground">
+              +8% from last month
+            </div>
+          </ModusCard>
+          <ModusCard
+            padding="compact"
+            bordered
+            title={
+              <div className="text-base font-medium text-foreground">Tasks</div>
+            }
+          >
+            <div className="text-2xl font-bold text-foreground">89</div>
+            <div className="text-xs text-muted-foreground">12 pending review</div>
+          </ModusCard>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,79 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusCheckbox from "../../components/ModusCheckbox";
+
+export default function CheckboxDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Checkbox"
+      description="Checkboxes allow users to select one or more options from a list. Use checkboxes for multiple selections and when users need to toggle individual options."
+    >
+      <DemoExample
+        title="Checkbox States"
+        description="Different checkbox states: unchecked, checked, and indeterminate."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusCheckbox label="Unchecked" value={false} />
+          <ModusCheckbox label="Checked" value={true} />
+          <ModusCheckbox label="Indeterminate" indeterminate={true} />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Checkbox Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusCheckbox label="Small checkbox" size="sm" value={true} />
+          <ModusCheckbox
+            label="Medium checkbox (default)"
+            size="md"
+            value={true}
+          />
+          <ModusCheckbox label="Large checkbox" size="lg" value={true} />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled State"
+        description="Checkboxes in disabled state for unavailable options."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusCheckbox
+            label="Disabled unchecked"
+            disabled={true}
+            value={false}
+          />
+          <ModusCheckbox
+            label="Disabled checked"
+            disabled={true}
+            value={true}
+          />
+          <ModusCheckbox
+            label="Disabled indeterminate"
+            disabled={true}
+            indeterminate={true}
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Required Checkbox"
+        description="Mark checkboxes as required for form validation."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusCheckbox
+            label="I agree to the terms (required)"
+            required={true}
+          />
+          <ModusCheckbox
+            label="Confirm email subscription (required)"
+            required={true}
+          />
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}