@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.4

package/src/patterns/Skeleton/Skeleton.tsx

@@ -1,56 +1,56 @@
-import { cn } from "../../utils/cn";
-
-export type SkeletonVariant = "content" | "search";
-
-export type SkeletonProps = {
-  variant?: SkeletonVariant;
-  className?: string;
-};
-
-const ContentSkeleton = () => (
-  <div className="flex flex-col gap-4 p-4" aria-hidden>
-    <div className="flex items-center gap-3">
-      <div className="size-8 animate-pulse rounded-full bg-grey-200" />
-      <div className="flex flex-1 flex-col gap-2">
-        <div className="h-4 w-1/3 animate-pulse rounded bg-grey-200" />
-        <div className="h-3 w-1/4 animate-pulse rounded bg-grey-100" />
-      </div>
-    </div>
-    <div className="flex flex-col gap-2">
-      <div className="h-4 w-full animate-pulse rounded bg-grey-200" />
-      <div className="h-4 w-5/6 animate-pulse rounded bg-grey-200" />
-      <div className="h-4 w-2/3 animate-pulse rounded bg-grey-100" />
-    </div>
-    <div className="h-24 animate-pulse rounded-control bg-grey-100" />
-  </div>
-);
-
-/** Figma Search loading — 8 rows of icon + bar (no input/pills). */
-const SearchSkeleton = () => {
-  const widths = [250, 300, 220, 255, 250, 300, 220, 255];
-
-  return (
-    <div className="flex flex-col gap-1.5 p-4" aria-hidden>
-      {widths.map((width, index) => (
-        <div key={index} className="flex items-start gap-2 py-2">
-          <div className="size-3 shrink-0 animate-pulse rounded-md bg-grey-200" />
-          <div
-            className="h-3 animate-pulse rounded-md bg-grey-200"
-            style={{ width }}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export const Skeleton = ({ variant = "content", className }: SkeletonProps) => (
-  <div
-    className={cn("rounded-control bg-background-primary", className)}
-    role="status"
-    aria-label="Loading"
-    data-variant={variant}
-  >
-    {variant === "content" ? <ContentSkeleton /> : <SearchSkeleton />}
-  </div>
-);
+import { cn } from "../../utils/cn";
+
+export type SkeletonVariant = "content" | "search";
+
+export type SkeletonProps = {
+  variant?: SkeletonVariant;
+  className?: string;
+};
+
+const ContentSkeleton = () => (
+  <div className="flex flex-col gap-4 p-4" aria-hidden>
+    <div className="flex items-center gap-3">
+      <div className="size-8 animate-pulse rounded-full bg-grey-200" />
+      <div className="flex flex-1 flex-col gap-2">
+        <div className="h-4 w-1/3 animate-pulse rounded bg-grey-200" />
+        <div className="h-3 w-1/4 animate-pulse rounded bg-grey-100" />
+      </div>
+    </div>
+    <div className="flex flex-col gap-2">
+      <div className="h-4 w-full animate-pulse rounded bg-grey-200" />
+      <div className="h-4 w-5/6 animate-pulse rounded bg-grey-200" />
+      <div className="h-4 w-2/3 animate-pulse rounded bg-grey-100" />
+    </div>
+    <div className="h-24 animate-pulse rounded-control bg-grey-100" />
+  </div>
+);
+
+/** Figma Search loading — 8 rows of icon + bar (no input/pills). */
+const SearchSkeleton = () => {
+  const widths = [250, 300, 220, 255, 250, 300, 220, 255];
+
+  return (
+    <div className="flex flex-col gap-1.5 p-4" aria-hidden>
+      {widths.map((width, index) => (
+        <div key={index} className="flex items-start gap-2 py-2">
+          <div className="size-3 shrink-0 animate-pulse rounded-md bg-grey-200" />
+          <div
+            className="h-3 animate-pulse rounded-md bg-grey-200"
+            style={{ width }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Skeleton = ({ variant = "content", className }: SkeletonProps) => (
+  <div
+    className={cn("rounded-control bg-background-primary", className)}
+    role="status"
+    aria-label="Loading"
+    data-variant={variant}
+  >
+    {variant === "content" ? <ContentSkeleton /> : <SearchSkeleton />}
+  </div>
+);

package/src/stories/canvases/ContentCanvas.tsx

@@ -1,114 +1,114 @@
-import { Button } from "../../primitives";
-import {
-  EmptyState,
-  Entry,
-  Header,
-  Tab,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} 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-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">
-            <Tabs defaultValue="active" type="pills">
-              <TabsList>
-                <TabsTrigger value="active">Active</TabsTrigger>
-                <TabsTrigger value="completed" count={3}>
-                  Completed
-                </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>
-        </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 { Button } from "../../primitives";
+import {
+  EmptyState,
+  Entry,
+  Header,
+  Tab,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} 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-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">
+            <Tabs defaultValue="active" type="pills">
+              <TabsList>
+                <TabsTrigger value="active">Active</TabsTrigger>
+                <TabsTrigger value="completed" count={3}>
+                  Completed
+                </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>
+        </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>
+);

package/src/stories/canvases/SearchCanvas.tsx

@@ -1,150 +1,150 @@
-import {
-  Pill,
-  PillInfo,
-  ResultRow,
-  SearchModalPanel,
-  SectionHeader,
-} from "../../patterns/Search";
-import {
-  FigmaContent,
-  FigmaGrid,
-  FigmaPage,
-  FigmaSection,
-  FigmaVariant,
-} from "../_layout";
-import { FIGMA_WIDTHS } from "./figma-widths";
-
-const recentItems = [
-  { variant: "report" as const, title: "Engine Room Oil Leak" },
-  { variant: "chat" as const, title: "Low Water Pressure on Board" },
-  {
-    variant: "chat" as const,
-    title: "Generator Vibrating Excessively",
-    state: "active" as const,
-  },
-  {
-    variant: "issue" as const,
-    title:
-      "Intermittent Flickering of Navigation Lights Possibly Due to Bulb Failure or Signal Unit Errors",
-  },
-];
-
-const resultItems = [
-  {
-    variant: "report" as const,
-    title: "Persistent Engine Room Oil Leak",
-    subtitle: (
-      <>
-        We’ve got a persistent oil leak from the{" "}
-        <span className="text-caption-2-em text-display-on-light-primary">
-          fuel pump
-        </span>
-        . I’ve tightened what I could, but it keeps seeping.
-      </>
-    ),
-  },
-  {
-    variant: "chat" as const,
-    title: "Ballast Pump Not Starting",
-    subtitle: (
-      <>
-        The{" "}
-        <span className="text-caption-2-em text-display-on-light-primary">
-          fuel pump
-        </span>{" "}
-        won’t start consistently. Sometimes it works, sometimes it doesn’t.
-      </>
-    ),
-  },
-  {
-    variant: "issue" as const,
-    title:
-      "Excessive Rust on Fuel Pump and Piping with Unclear Material Specifications and Corrosion Protection Measures",
-    subtitle: "Created by Jake Silva on March 28",
-    state: "active" as const,
-  },
-  {
-    variant: "report" as const,
-    title: "Engine Room Oil Leak",
-    subtitle: (
-      <>
-        We’ve spotted a steady oil leak near the{" "}
-        <span className="text-caption-2-em text-display-on-light-primary">
-          fuel pump
-        </span>
-        . Not sure if it’s a gasket or a cracked line.
-      </>
-    ),
-  },
-];
-
-export const SearchCanvas = () => (
-  <FigmaPage title="Search" width={FIGMA_WIDTHS.search}>
-    <FigmaContent>
-      <FigmaSection label="Pill">
-        <FigmaGrid gap={16}>
-          <Pill>All</Pill>
-          <Pill state="active">Reports</Pill>
-          <Pill size="small">Issues</Pill>
-          <Pill size="small" state="active">
-            Chats
-          </Pill>
-        </FigmaGrid>
-      </FigmaSection>
-
-      <FigmaSection label="Pill Info">
-        <FigmaGrid gap={16}>
-          <PillInfo />
-          <PillInfo type="completed" />
-        </FigmaGrid>
-      </FigmaSection>
-
-      <FigmaSection label="Result Row">
-        <div className="max-w-xl space-y-2">
-          <ResultRow />
-          <ResultRow
-            variant="chat"
-            title="Port state control discussion"
-            subtitle="2 days ago"
-          />
-          <ResultRow
-            variant="issue"
-            title="Critical valve malfunction"
-            subtitle="Open · High priority"
-          />
-        </div>
-      </FigmaSection>
-
-      <FigmaSection label="Section Header">
-        <div className="max-w-xl">
-          <SectionHeader label="Reports" />
-        </div>
-      </FigmaSection>
-
-      <FigmaSection label="Search Modal">
-        <FigmaGrid gap={32}>
-          <FigmaVariant label="Idle">
-            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
-              <SearchModalPanel state="idle" recentItems={recentItems} />
-            </div>
-          </FigmaVariant>
-          <FigmaVariant label="Loading">
-            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
-              <SearchModalPanel state="loading" query="fuel pump" />
-            </div>
-          </FigmaVariant>
-          <FigmaVariant label="Results">
-            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
-              <SearchModalPanel
-                state="results"
-                query="fuel pump"
-                filter="all"
-                resultItems={resultItems}
-              />
-            </div>
-          </FigmaVariant>
-        </FigmaGrid>
-      </FigmaSection>
-    </FigmaContent>
-  </FigmaPage>
-);
+import {
+  Pill,
+  PillInfo,
+  ResultRow,
+  SearchModalPanel,
+  SectionHeader,
+} from "../../patterns/Search";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const recentItems = [
+  { variant: "report" as const, title: "Engine Room Oil Leak" },
+  { variant: "chat" as const, title: "Low Water Pressure on Board" },
+  {
+    variant: "chat" as const,
+    title: "Generator Vibrating Excessively",
+    state: "active" as const,
+  },
+  {
+    variant: "issue" as const,
+    title:
+      "Intermittent Flickering of Navigation Lights Possibly Due to Bulb Failure or Signal Unit Errors",
+  },
+];
+
+const resultItems = [
+  {
+    variant: "report" as const,
+    title: "Persistent Engine Room Oil Leak",
+    subtitle: (
+      <>
+        We’ve got a persistent oil leak from the{" "}
+        <span className="text-caption-2-em text-display-on-light-primary">
+          fuel pump
+        </span>
+        . I’ve tightened what I could, but it keeps seeping.
+      </>
+    ),
+  },
+  {
+    variant: "chat" as const,
+    title: "Ballast Pump Not Starting",
+    subtitle: (
+      <>
+        The{" "}
+        <span className="text-caption-2-em text-display-on-light-primary">
+          fuel pump
+        </span>{" "}
+        won’t start consistently. Sometimes it works, sometimes it doesn’t.
+      </>
+    ),
+  },
+  {
+    variant: "issue" as const,
+    title:
+      "Excessive Rust on Fuel Pump and Piping with Unclear Material Specifications and Corrosion Protection Measures",
+    subtitle: "Created by Jake Silva on March 28",
+    state: "active" as const,
+  },
+  {
+    variant: "report" as const,
+    title: "Engine Room Oil Leak",
+    subtitle: (
+      <>
+        We’ve spotted a steady oil leak near the{" "}
+        <span className="text-caption-2-em text-display-on-light-primary">
+          fuel pump
+        </span>
+        . Not sure if it’s a gasket or a cracked line.
+      </>
+    ),
+  },
+];
+
+export const SearchCanvas = () => (
+  <FigmaPage title="Search" width={FIGMA_WIDTHS.search}>
+    <FigmaContent>
+      <FigmaSection label="Pill">
+        <FigmaGrid gap={16}>
+          <Pill>All</Pill>
+          <Pill state="active">Reports</Pill>
+          <Pill size="small">Issues</Pill>
+          <Pill size="small" state="active">
+            Chats
+          </Pill>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Pill Info">
+        <FigmaGrid gap={16}>
+          <PillInfo />
+          <PillInfo type="completed" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Result Row">
+        <div className="max-w-xl space-y-2">
+          <ResultRow />
+          <ResultRow
+            variant="chat"
+            title="Port state control discussion"
+            subtitle="2 days ago"
+          />
+          <ResultRow
+            variant="issue"
+            title="Critical valve malfunction"
+            subtitle="Open · High priority"
+          />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Section Header">
+        <div className="max-w-xl">
+          <SectionHeader label="Reports" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Search Modal">
+        <FigmaGrid gap={32}>
+          <FigmaVariant label="Idle">
+            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
+              <SearchModalPanel state="idle" recentItems={recentItems} />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Loading">
+            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
+              <SearchModalPanel state="loading" query="fuel pump" />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Results">
+            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
+              <SearchModalPanel
+                state="results"
+                query="fuel pump"
+                filter="all"
+                resultItems={resultItems}
+              />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/tailwind-theme.ts

@@ -148,10 +148,10 @@ export const theme = {
       },
     },
     accent: {
-      onLight: "var(--accent-on-light)",
-      onDark: "var(--accent-on-dark)",
-      bgLight: "var(--accent-bg-light)",
-      bgLighter: "var(--accent-bg-lighter)",
+      "on-light": "var(--accent-on-light)",
+      "on-dark": "var(--accent-on-dark)",
+      "bg-light": "var(--accent-bg-light)",
+      "bg-lighter": "var(--accent-bg-lighter)",
     },
     divider: {
       primary: "var(--divider-primary)",