@lateralus-ai/shipping-ui 2.0.0-dev.0 → 2.0.0-dev.10

package/src/primitives/button-styles.ts

@@ -0,0 +1,92 @@
+export type ButtonHierarchy =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "quaternary"
+  | "destructive";
+
+export type ButtonAppearance = "idle" | "hover" | "disabled";
+
+type HierarchyStyleMap = Record<ButtonAppearance, string>;
+
+const primaryStyles: HierarchyStyleMap = {
+  idle: "bg-action-primary-idle text-action-primary-on-idle",
+  hover: "bg-action-primary-hover text-action-primary-on-hover",
+  disabled: "bg-action-primary-disabled text-action-primary-on-disabled",
+};
+
+const secondaryStyles: HierarchyStyleMap = {
+  idle:
+    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
+  hover:
+    "border border-divider-secondary bg-action-secondary-hover text-action-secondary-on-hover",
+  disabled:
+    "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
+};
+
+const tertiaryStyles: HierarchyStyleMap = {
+  idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
+  hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
+  disabled: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
+};
+
+const quaternaryStyles: HierarchyStyleMap = {
+  idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
+  hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
+  disabled: "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
+};
+
+const destructiveStyles: HierarchyStyleMap = {
+  idle: "bg-action-destructive-idle text-action-destructive-on-idle",
+  hover: "bg-action-destructive-hover text-action-destructive-on-hover",
+  disabled:
+    "bg-action-destructive-disabled text-action-destructive-on-disabled",
+};
+
+const hierarchyStyles: Record<ButtonHierarchy, HierarchyStyleMap> = {
+  primary: primaryStyles,
+  secondary: secondaryStyles,
+  tertiary: tertiaryStyles,
+  quaternary: quaternaryStyles,
+  destructive: destructiveStyles,
+};
+
+const interactiveHierarchyStyles: Record<ButtonHierarchy, string> = {
+  primary:
+    "bg-action-primary-idle text-action-primary-on-idle hover:bg-action-primary-hover hover:text-action-primary-on-hover",
+  secondary:
+    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle hover:border-divider-secondary hover:bg-action-secondary-hover hover:text-action-secondary-on-hover",
+  tertiary:
+    "bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover",
+  quaternary:
+    "bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover",
+  destructive:
+    "bg-action-destructive-idle text-action-destructive-on-idle hover:bg-action-destructive-hover hover:text-action-destructive-on-hover",
+};
+
+const disabledHierarchyStyles: Record<ButtonHierarchy, string> = {
+  primary: "bg-action-primary-disabled text-action-primary-on-disabled",
+  secondary:
+    "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
+  tertiary: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
+  quaternary:
+    "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
+  destructive:
+    "bg-action-destructive-disabled text-action-destructive-on-disabled",
+};
+
+export const getButtonAppearanceClasses = (
+  hierarchy: ButtonHierarchy,
+  appearance: ButtonAppearance,
+) => hierarchyStyles[hierarchy][appearance];
+
+export const getButtonInteractiveClasses = (
+  hierarchy: ButtonHierarchy,
+  disabled: boolean,
+) => {
+  if (disabled) {
+    return disabledHierarchyStyles[hierarchy];
+  }
+
+  return interactiveHierarchyStyles[hierarchy];
+};

package/src/primitives/index.ts

@@ -1,4 +1,9 @@
-export { Button, type ButtonProps } from "./Button";
+export type {
+  ButtonAppearance,
+  ButtonHierarchy,
+} from "./button-styles";
+export type { ButtonProps, ButtonDropdownOption } from "./Button";
+export { Button } from "./Button";
 export { IconButton, type IconButtonProps } from "./IconButton";
 export { Logo, type LogoProps } from "./Logo";
 export { Avatar, type AvatarProps } from "./Avatar";
@@ -9,5 +14,5 @@ export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from ".
 export { ThinkingDot, type ThinkingDotProps } from "./ThinkingDot";
 export { Count, type CountProps } from "./Count";
 export { Switch, type SwitchProps } from "./Switch";
-export { Badge, type BadgeProps } from "./Badge";
+export { Badge, type BadgeProps, type BadgeColor, type BadgeType } from "./Badge";
 export { Callout, type CalloutProps } from "./Callout";

package/src/stories/canvases/ButtonsCanvas.tsx

@@ -1,57 +1,107 @@
-import {
-  FigmaContent,
-  FigmaGrid,
-  FigmaPage,
-  FigmaSection,
-} from "../_layout";
-import { ButtonSnapshot } from "./helpers";
+import { AttachmentIcon } from "../../icons";
+import { Button } from "../../primitives";
+import { FigmaContent, FigmaPage, FigmaSection } from "../_layout";
 import { FIGMA_WIDTHS } from "./figma-widths";
+import {
+  BUTTON_VARIANT_SLOTS,
+  FIGMA_BUTTON_SLOTS,
+  FIGMA_BUTTONS_CANVAS,
+  FIGMA_BUTTONS_GRID,
+  type ButtonVisualState,
+} from "./figma-buttons-layout";
+import { IconButtonSnapshot } from "./helpers";
+
+const demoDropdownOptions = [
+  { label: "Option A", onSelect: () => undefined },
+  { label: "Option B", onSelect: () => undefined },
+];
 
-const hierarchies = ["primary", "secondary", "tertiary", "quaternary"] as const;
+const slotProps = (visualState: ButtonVisualState) => ({
+  forcedState: visualState === "idle" ? undefined : visualState,
+  disabled: visualState === "disabled",
+});
 
 export const ButtonsCanvas = () => (
   <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttons}>
-    <FigmaContent>
-      <FigmaSection label="Button">
-        <FigmaGrid gap={24}>
-          {hierarchies.map((hierarchy) => (
-            <div key={hierarchy} className="flex flex-col gap-4">
-              {(["idle", "hover", "disabled"] as const).map((state) => (
-                <ButtonSnapshot key={state} hierarchy={hierarchy} visualState={state} />
+    <FigmaContent padding={0}>
+      <div className="px-8 pb-8 pt-6">
+        <FigmaSection label="Button">
+          <div
+            className="relative"
+            style={{
+              width: FIGMA_BUTTONS_CANVAS.width,
+              height: FIGMA_BUTTONS_CANVAS.height,
+            }}
+          >
+            <div
+              data-figma-buttons-grid
+              className="absolute left-0 top-0"
+              style={{
+                width: FIGMA_BUTTONS_GRID.width,
+                height: FIGMA_BUTTONS_GRID.height,
+              }}
+            >
+              {FIGMA_BUTTON_SLOTS.map((slot) => (
+                <div
+                  key={`${slot.hierarchy}-${slot.visualState}`}
+                  className="absolute"
+                  style={{ left: slot.x, top: slot.y }}
+                >
+                  <Button
+                    hierarchy={slot.hierarchy}
+                    icon={AttachmentIcon}
+                    dropdownOptions={demoDropdownOptions}
+                    {...slotProps(slot.visualState)}
+                  >
+                    Button
+                  </Button>
+                </div>
               ))}
             </div>
-          ))}
-          <div className="flex flex-col gap-4">
-            {(["idle", "hover", "disabled"] as const).map((state) => (
-              <ButtonSnapshot
-                key={state}
-                hierarchy="primary"
-                outcome="destructive"
-                visualState={state}
-              />
+
+            {BUTTON_VARIANT_SLOTS.map((slot) => (
+              <div
+                key={`${slot.hierarchy}-${slot.variant}`}
+                data-visual-test-only
+                className="absolute"
+                style={{ left: slot.x, top: slot.y }}
+              >
+                {slot.variant === "noIcon" ? (
+                  <Button
+                    hierarchy={slot.hierarchy}
+                    dropdownOptions={demoDropdownOptions}
+                  >
+                    Button
+                  </Button>
+                ) : (
+                  <Button hierarchy={slot.hierarchy} icon={AttachmentIcon}>
+                    Button
+                  </Button>
+                )}
+              </div>
             ))}
           </div>
-        </FigmaGrid>
-      </FigmaSection>
+        </FigmaSection>
 
-      <FigmaSection label="Icon Button">
-        <FigmaGrid gap={24}>
-          <ButtonSnapshot hierarchy="tertiary" visualState="idle" />
-          <ButtonSnapshot hierarchy="tertiary" visualState="hover" />
-          <ButtonSnapshot hierarchy="quaternary" visualState="idle" />
-          <ButtonSnapshot hierarchy="quaternary" visualState="hover" />
-          <span className="inline-flex size-8 items-center justify-center rounded-control bg-action-quaternary-idle text-action-quaternary-on-idle">
-            <svg viewBox="0 0 16 16" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
-              <path d="M8 3.33v9.34M3.33 8h9.34" strokeLinecap="round" />
-            </svg>
-          </span>
-          <span className="inline-flex size-8 items-center justify-center rounded-control bg-action-quaternary-hover text-action-quaternary-on-hover">
-            <svg viewBox="0 0 16 16" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
-              <path d="M8 3.33v9.34M3.33 8h9.34" strokeLinecap="round" />
-            </svg>
-          </span>
-        </FigmaGrid>
-      </FigmaSection>
+        <FigmaSection label="Icon Button" className="mt-8">
+          <div className="flex flex-wrap items-center gap-6">
+            <IconButtonSnapshot hierarchy="tertiary" visualState="idle" />
+            <IconButtonSnapshot hierarchy="tertiary" visualState="hover" />
+            <IconButtonSnapshot hierarchy="quaternary" visualState="idle" />
+            <IconButtonSnapshot hierarchy="quaternary" visualState="hover" />
+            <IconButtonSnapshot
+              hierarchy="quaternary"
+              visualState="idle"
+              size="small"
+            />
+            <IconButtonSnapshot
+              hierarchy="quaternary"
+              visualState="hover"
+              size="small"
+            />
+          </div>
+        </FigmaSection>
+      </div>
     </FigmaContent>
   </FigmaPage>
 );

package/src/stories/canvases/ButtonsMatrixCanvas.tsx

@@ -9,7 +9,13 @@ import {
 import { ButtonSnapshot } from "./helpers";
 import { FIGMA_WIDTHS } from "./figma-widths";
 
-const hierarchies = ["primary", "secondary", "tertiary", "quaternary"] as const;
+const hierarchies = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+  "destructive",
+] as const;
 const columnLabels = ["Primary", "Secondary", "Tertiary", "Quaternary", "Destructive"];
 const rowLabels = ["Idle", "Hover", "Disabled"];
 
@@ -36,17 +42,12 @@ export const ButtonsMatrixCanvas = () => (
                 visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
               />
             ))}
-            <ButtonSnapshot
-              hierarchy="primary"
-              outcome="destructive"
-              visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
-            />
           </FigmaRow>
         ))}
 
         <FigmaRow label="Idle" gap={24}>
           <div className="w-24" />
-          <Button startIcon={<AddIcon />} className="min-w-[304px]">
+          <Button icon={<AddIcon size="small" />} className="min-w-[304px]">
             New chat
           </Button>
         </FigmaRow>

package/src/stories/canvases/ContentCanvas.tsx

@@ -1,88 +1,157 @@
-import { Button } from "../../primitives";
-import {
-  EmptyState,
-  Entry,
-  Header,
-  Tab,
-  Tabs,
-} from "../../components";
-import { WorkflowsIllustration } from "../../illustrations";
-import {
-  FigmaContent,
-  FigmaGrid,
-  FigmaPage,
-  FigmaSection,
-  FigmaVariant,
-} from "../_layout";
-import { FIGMA_WIDTHS } from "./figma-widths";
-
-export const ContentCanvas = () => (
-  <FigmaPage title="Content" width={FIGMA_WIDTHS.content}>
-    <FigmaContent>
-      <FigmaSection label="Tab">
-        <FigmaGrid gap={16}>
-          <Tab label="Overview" />
-          <Tab label="Tasks" state="active" />
-          <Tab label="Reports" className="bg-background-hover" />
-        </FigmaGrid>
-      </FigmaSection>
-
-      <FigmaSection label="Tabs">
-        <div className="max-w-xl space-y-6">
-          <Tabs
-            items={[{ label: "All" }, { label: "Reports" }, { label: "Issues" }]}
-            activeIndex={0}
-            onChange={() => {}}
-          />
-          <Tabs
-            type="pills"
-            items={[{ label: "Active" }, { label: "Completed" }]}
-            activeIndex={1}
-            onChange={() => {}}
-          />
-        </div>
-      </FigmaSection>
-
-      <FigmaSection label="Header">
-        <div className="max-w-xl space-y-4">
-          <Header title="Fleet overview" />
-          <Header
-            variant="nested"
-            title="Outstanding actions"
-            actions={<Button hierarchy="primary">Add</Button>}
-          />
-        </div>
-      </FigmaSection>
-
-      <FigmaSection label="Entry">
-        <div className="max-w-xl space-y-2">
-          <Entry type="chat" title="Hull inspection report" subtitle="2 hours ago" meta="17" />
-          <Entry type="issue" title="Critical valve malfunction" state="selected" meta="High" />
-          <Entry type="chat" title="Port state control checklist" subtitle="Yesterday" className="bg-background-hover" />
-        </div>
-      </FigmaSection>
-
-      <FigmaSection label="Empty State">
-        <FigmaGrid gap={32}>
-          <FigmaVariant label="Default">
-            <div className="w-80">
-              <EmptyState
-                title="No workflows yet"
-                description="Create your first workflow to get started."
-              />
-            </div>
-          </FigmaVariant>
-          <FigmaVariant label="With illustration">
-            <div className="w-80">
-              <EmptyState
-                title="No reports"
-                illustration={<WorkflowsIllustration className="mx-auto h-24 w-32" />}
-                action={{ children: "Create report", hierarchy: "primary" }}
-              />
-            </div>
-          </FigmaVariant>
-        </FigmaGrid>
-      </FigmaSection>
-    </FigmaContent>
-  </FigmaPage>
-);
+import { Badge, Button } from "../../primitives";
+import {
+  EmptyState,
+  Entry,
+  Header,
+  Tab,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components";
+import { TickIcon } from "../../icons";
+import { WorkflowsIllustration } from "../../illustrations";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const ContentCanvas = () => (
+  <FigmaPage title="Content" width={FIGMA_WIDTHS.content}>
+    <FigmaContent>
+      <FigmaSection label="Tab">
+        <FigmaGrid gap={16}>
+          <Tab label="Overview" />
+          <Tab label="Tasks" state="active" />
+          <Tab label="Reports" className="bg-background-hover" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Tabs">
+        <div className="max-w-xl space-y-8">
+          <FigmaVariant label="Underline">
+            <Tabs defaultValue="all" type="tabs">
+              <TabsList>
+                <TabsTrigger value="all">All</TabsTrigger>
+                <TabsTrigger value="reports">Reports</TabsTrigger>
+                <TabsTrigger value="issues">Issues</TabsTrigger>
+              </TabsList>
+              <TabsContent value="all" className="pt-3 text-caption-2 text-display-on-light-secondary">
+                All content
+              </TabsContent>
+              <TabsContent value="reports" className="pt-3 text-caption-2 text-display-on-light-secondary">
+                Reports content
+              </TabsContent>
+              <TabsContent value="issues" className="pt-3 text-caption-2 text-display-on-light-secondary">
+                Issues content
+              </TabsContent>
+            </Tabs>
+          </FigmaVariant>
+          <FigmaVariant label="Pills · soft">
+            <Tabs defaultValue="active" type="pills" appearance="soft">
+              <TabsList>
+                <TabsTrigger value="active">Active</TabsTrigger>
+                <TabsTrigger value="completed">
+                  Completed
+                  <Badge color="blue">3</Badge>
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="active" className="pt-3 text-caption-2 text-display-on-light-secondary">
+                Active content
+              </TabsContent>
+              <TabsContent value="completed" className="pt-3 text-caption-2 text-display-on-light-secondary">
+                Completed content
+              </TabsContent>
+            </Tabs>
+          </FigmaVariant>
+          <FigmaVariant label="Pills · solid">
+            <Tabs defaultValue="chat" type="pills" appearance="solid">
+              <TabsList>
+                <TabsTrigger value="chat">Chat</TabsTrigger>
+                <TabsTrigger value="questions">
+                  Questions
+                  <Badge color="grey">208</Badge>
+                </TabsTrigger>
+                <TabsTrigger value="review">
+                  Review
+                  <Badge color="green" type="icon">
+                    <TickIcon size="xs" />
+                  </Badge>
+                </TabsTrigger>
+                <TabsTrigger value="gaps">
+                  Gaps
+                  <Badge color="grey">47</Badge>
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </FigmaVariant>
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Header">
+        <div className="max-w-xl space-y-4">
+          <Header title="Fleet overview" />
+          <Header
+            variant="nested"
+            title="Outstanding actions"
+            actions={<Button hierarchy="primary">Add</Button>}
+          />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Entry">
+        <div className="max-w-xl space-y-2">
+          <Entry
+            variant="chat"
+            title="Hull inspection report"
+            subtitle="We’ve got a persistent oil leak from the fuel pump."
+          />
+          <Entry
+            variant="chat"
+            state="active"
+            title="Ballast Pump Not Starting"
+            subtitle="The fuel pump won’t start consistently."
+            trailing={<span className="text-display-on-light-secondary">···</span>}
+          />
+          <Entry
+            variant="issue"
+            title="Excessive Rust on Fuel Pump"
+            subtitle="Created by Jake Silva on March 28"
+            count={3}
+          />
+          <Entry
+            variant="report"
+            title="Engine Room Oil Leak"
+            subtitle="We’ve spotted a steady oil leak near the fuel pump."
+          />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Empty State">
+        <FigmaGrid gap={32}>
+          <FigmaVariant label="Default">
+            <div className="w-80">
+              <EmptyState
+                title="No workflows yet"
+                description="Create your first workflow to get started."
+              />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="With illustration">
+            <div className="w-80">
+              <EmptyState
+                title="No reports"
+                illustration={<WorkflowsIllustration className="mx-auto h-24 w-32" />}
+                action={{ children: "Create report", hierarchy: "primary" }}
+              />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);