@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,49 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusButton from "../../components/ModusButton";
+import ModusToolbar from "../../components/ModusToolbar";
+
+export default function ToolbarDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Toolbar"
+      description="Toolbars organize actions for a focused context. Keep primary commands on the left, secondary options on the right, and maintain consistent spacing."
+    >
+      <DemoExample
+        title="Document toolbar"
+        description="Pair icon buttons with text labels when space allows."
+      >
+        <ModusToolbar
+          startContent={
+            <div className="flex items-center gap-3 text-sm text-foreground">
+              <i className="modus-icons text-primary">pencil</i>
+              <div className="font-medium">Proposal draft</div>
+            </div>
+          }
+          centerContent={
+            <div className="flex gap-2">
+              <ModusButton size="sm" icon="undo" iconPosition="left">
+                Undo
+              </ModusButton>
+              <ModusButton size="sm" icon="redo" iconPosition="left">
+                Redo
+              </ModusButton>
+            </div>
+          }
+          endContent={
+            <div className="flex gap-2">
+              <ModusButton size="sm" variant="borderless">
+                Share
+              </ModusButton>
+              <ModusButton size="sm" color="primary">
+                Publish
+              </ModusButton>
+            </div>
+          }
+        />
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,209 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusTooltip from "../../components/ModusTooltip";
+import ModusButton from "../../components/ModusButton";
+
+export default function TooltipDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Tooltip"
+      description="Tooltip components provide contextual information when users hover over or focus on elements. Use tooltips to provide helpful hints, additional context, or brief explanations."
+    >
+      <DemoExample
+        title="Basic Tooltip"
+        description="Simple tooltip with text content."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusTooltip content="This is a helpful tooltip">
+            <ModusButton color="primary">Hover me</ModusButton>
+          </ModusTooltip>
+
+          <ModusTooltip content="Click to save your changes">
+            <ModusButton
+              color="secondary"
+              icon="save_disk"
+              iconPosition="left"
+            >
+              Save
+            </ModusButton>
+          </ModusTooltip>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Tooltip Positions"
+        description="Tooltips in different positions relative to the element."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusTooltip content="Tooltip on top" position="top">
+            <ModusButton color="primary">Top</ModusButton>
+          </ModusTooltip>
+
+          <ModusTooltip content="Tooltip on right" position="right">
+            <ModusButton color="primary">Right</ModusButton>
+          </ModusTooltip>
+
+          <ModusTooltip content="Tooltip on bottom" position="bottom">
+            <ModusButton color="primary">Bottom</ModusButton>
+          </ModusTooltip>
+
+          <ModusTooltip content="Tooltip on left" position="left">
+            <ModusButton color="primary">Left</ModusButton>
+          </ModusTooltip>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Tooltip with Icons"
+        description="Tooltips on icon buttons and icon-only elements."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusTooltip content="Settings menu">
+            <ModusButton
+              color="tertiary"
+              icon="settings"
+              iconPosition="only"
+              ariaLabel="Settings"
+            />
+          </ModusTooltip>
+
+          <ModusTooltip content="Edit item">
+            <ModusButton
+              color="tertiary"
+              icon="file_edit"
+              iconPosition="only"
+              ariaLabel="Edit"
+            />
+          </ModusTooltip>
+
+          <ModusTooltip content="Delete item">
+            <ModusButton
+              color="danger"
+              icon="delete"
+              iconPosition="only"
+              ariaLabel="Delete"
+            />
+          </ModusTooltip>
+
+          <ModusTooltip content="Information icon">
+            <i
+              className="modus-icons text-lg text-primary"
+              role="img"
+              aria-label="Information"
+            >
+              info
+            </i>
+          </ModusTooltip>
+
+          <ModusTooltip content="Help and support">
+            <i
+              className="modus-icons text-lg text-primary"
+              role="img"
+              aria-label="Help"
+            >
+              help
+            </i>
+          </ModusTooltip>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Tooltip with Text Content"
+        description="Tooltips on text and other content elements."
+      >
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-2">
+            <div className="text-sm text-foreground">Hover over the</div>
+            <ModusTooltip content="This term provides additional context when hovered">
+              <div className="text-sm text-primary underline cursor-help">
+                highlighted term
+              </div>
+            </ModusTooltip>
+            <div className="text-sm text-foreground">for more information.</div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <ModusTooltip content="This is a required field that must be completed">
+              <div className="text-sm text-foreground flex items-center gap-1">
+                Required Field
+                <i
+                  className="modus-icons text-xs text-destructive"
+                  aria-hidden="true"
+                >
+                  alert
+                </i>
+              </div>
+            </ModusTooltip>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Auto Position Tooltip"
+        description="Tooltip with automatic position detection."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusTooltip
+            content="Auto position adjusts based on available space"
+            position="auto"
+          >
+            <ModusButton color="primary">Auto Position</ModusButton>
+          </ModusTooltip>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Real-World Example"
+        description="Tooltips in a typical UI context."
+      >
+        <div className="flex flex-col gap-6 p-6 rounded-lg bg-card border-default">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="text-base font-medium text-foreground">
+                Document Editor
+              </div>
+              <ModusTooltip content="Save your document (Ctrl+S)">
+                <ModusButton
+                  color="tertiary"
+                  icon="save_disk"
+                  iconPosition="only"
+                  ariaLabel="Save"
+                  size="sm"
+                />
+              </ModusTooltip>
+              <ModusTooltip content="Print document (Ctrl+P)">
+                <ModusButton
+                  color="tertiary"
+                  icon="printer"
+                  iconPosition="only"
+                  ariaLabel="Print"
+                  size="sm"
+                />
+              </ModusTooltip>
+              <ModusTooltip content="Share document">
+                <ModusButton
+                  color="tertiary"
+                  icon="share"
+                  iconPosition="only"
+                  ariaLabel="Share"
+                  size="sm"
+                />
+              </ModusTooltip>
+            </div>
+            <ModusTooltip content="Open settings menu">
+              <ModusButton
+                color="tertiary"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings"
+                size="sm"
+              />
+            </ModusTooltip>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/typography-test/page.tsx

@@ -0,0 +1,28 @@
+export default function TypographyTest() {
+  return (
+    <div className="max-w-4xl mx-auto p-8 bg-background text-foreground">
+      <div className="mb-8">
+        <div className="text-2xl font-semibold mb-6 text-foreground">
+          Typography Scale Test
+        </div>
+
+        <div className="space-y-4">
+          <div className="text-xs text-foreground">text-xs - 10px</div>
+          <div className="text-sm text-foreground">text-sm - 12px</div>
+          <div className="text-md text-foreground">text-md - 14px</div>
+          <div className="text-base text-foreground">text-base - 14px</div>
+          <div className="text-lg text-foreground">text-lg - 16px</div>
+          <div className="text-xl text-foreground">text-xl - 18px</div>
+          <div className="text-2xl text-foreground">text-2xl - 20px</div>
+          <div className="text-3xl text-foreground">text-3xl - 24px</div>
+          <div className="text-4xl text-foreground">text-4xl - 36px</div>
+          <div className="text-5xl text-foreground">text-5xl - 48px</div>
+          <div className="text-6xl text-foreground">text-6xl - 60px</div>
+          <div className="text-7xl text-foreground">text-7xl - 72px</div>
+          <div className="text-8xl text-foreground">text-8xl - 96px</div>
+          <div className="text-9xl text-foreground">text-9xl - 128px</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react/src/demos/utility-panel-demo/page.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusButton from "../../components/ModusButton";
+import ModusTextInput from "../../components/ModusTextInput";
+import ModusSwitch from "../../components/ModusSwitch";
+import ModusUtilityPanel from "../../components/ModusUtilityPanel";
+
+export default function UtilityPanelDemoPage() {
+  const [expanded, setExpanded] = useState(false);
+  const [formData, setFormData] = useState({
+    projectName: "",
+    email: "",
+    notifications: true,
+    autoSave: false,
+  });
+
+  const handleToggle = (collapsed: boolean) => {
+    setExpanded(!collapsed);
+    console.log("Panel toggled:", collapsed ? "collapsed" : "expanded");
+  };
+
+  const handleInputChange =
+    (field: string) => (event: CustomEvent<InputEvent>) => {
+      const target = event.target as HTMLInputElement;
+      setFormData((prev) => ({
+        ...prev,
+        [field]: target.value,
+      }));
+    };
+
+  const handleSwitchChange =
+    (field: string) => (event: CustomEvent<InputEvent>) => {
+      const target = event.target as HTMLInputElement;
+      setFormData((prev) => ({
+        ...prev,
+        [field]: target.checked,
+      }));
+    };
+
+  const handleSave = () => {
+    console.log("Saving form data:", formData);
+    alert("Form data saved! Check console for details.");
+  };
+
+  return (
+    <DemoPage
+      title="Modus Utility Panel"
+      description="Utility panels slide in contextual information or controls without leaving the page. Keep content focused and provide clear actions."
+    >
+      <DemoExample
+        title="Settings Panel with Form Controls"
+        description="A utility panel containing form inputs and controls. The panel can be toggled to show/hide additional settings without leaving the main workspace."
+      >
+        <div className="space-y-6">
+          {/* Controls */}
+          <div className="flex gap-4 items-center">
+            <ModusButton
+              color="primary"
+              size="sm"
+              onButtonClick={() => setExpanded(!expanded)}
+            >
+              {expanded ? "Close" : "Open"} Settings Panel
+            </ModusButton>
+            <div className="text-sm text-muted-foreground">
+              Panel state: {expanded ? "Open" : "Closed"}
+            </div>
+          </div>
+
+          {/* Main content with utility panel */}
+          <div className="flex gap-4 items-start">
+            <div
+              className="flex-1 p-6 bg-card rounded-lg"
+              style={{
+                border: "1px solid var(--border)",
+                marginRight: expanded ? "312px" : "0px",
+                transition: "margin-right 0.2s ease-out",
+              }}
+            >
+              <div className="text-xl font-semibold text-foreground mb-3">
+                Main Workspace
+              </div>
+              <div className="text-muted-foreground mb-4">
+                This is the primary content area. The utility panel slides in
+                from the right to provide additional controls and settings
+                without leaving this workspace.
+              </div>
+              <div className="space-y-2 text-sm">
+                <div>
+                  <strong>Panel Position:</strong> Right side (default)
+                </div>
+                <div>
+                  <strong>Panel Width:</strong> 312px (default)
+                </div>
+                <div>
+                  <strong>Content Push:</strong> {expanded ? "Yes" : "No"}
+                </div>
+                <div>
+                  <strong>Current Form Data:</strong>{" "}
+                  {JSON.stringify(formData, null, 2)}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex-shrink-0">
+              <ModusUtilityPanel
+                expanded={expanded}
+                headerSlot={
+                  <div className="flex items-center justify-between w-full min-w-full max-w-full">
+                    <div className="text-xl font-bold text-foreground">
+                      Project Settings
+                    </div>
+                    <ModusButton
+                      size="sm"
+                      color="secondary"
+                      variant="borderless"
+                      shape="circle"
+                      icon="close"
+                      iconPosition="only"
+                      ariaLabel="Close panel"
+                      onButtonClick={() => setExpanded(false)}
+                    />
+                  </div>
+                }
+                position="right"
+                panelWidth="312px"
+                pushContent={true}
+                onToggle={handleToggle}
+                footerSlot={
+                  <div className="flex gap-2 justify-end">
+                    <ModusButton
+                      size="md"
+                      color="secondary"
+                      onButtonClick={() => setExpanded(false)}
+                    >
+                      Close
+                    </ModusButton>
+                    <ModusButton
+                      size="md"
+                      color="primary"
+                      onButtonClick={handleSave}
+                    >
+                      Save Settings
+                    </ModusButton>
+                  </div>
+                }
+              >
+                <div className="space-y-4">
+                  <div>
+                    <ModusTextInput
+                      label="Project Name"
+                      value={formData.projectName}
+                      placeholder="Enter project name"
+                      onInputChange={handleInputChange("projectName")}
+                    />
+                  </div>
+
+                  <div>
+                    <ModusTextInput
+                      label="Email"
+                      type="email"
+                      value={formData.email}
+                      placeholder="Enter email address"
+                      onInputChange={handleInputChange("email")}
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <ModusSwitch
+                      label="Enable Notifications"
+                      value={formData.notifications}
+                      onInputChange={handleSwitchChange("notifications")}
+                    />
+
+                    <ModusSwitch
+                      label="Auto-save Changes"
+                      value={formData.autoSave}
+                      onInputChange={handleSwitchChange("autoSave")}
+                    />
+                  </div>
+
+                  <div className="pt-2 text-xs text-muted-foreground">
+                    <div>• Panel slides over main content</div>
+                    <div>• Form state is preserved when toggling</div>
+                    <div>• Settings are applied immediately</div>
+                  </div>
+                </div>
+              </ModusUtilityPanel>
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}