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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.4.16",
+  "version": "2.0.0-dev.10",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -14,23 +14,43 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
+    "./theme": {
+      "import": "./dist/theme.esm.js",
+      "require": "./dist/theme.cjs",
+      "types": "./dist/theme-entry.d.ts"
+    },
     "./style.css": "./dist/style.css",
     "./css": "./dist/style.css",
     "./dist/style.css": "./dist/style.css",
-    "./tailwind": "./tailwind.config.js"
+    "./tailwind": "./dist/theme.cjs"
   },
   "files": [
     "dist",
     "lib",
     "src",
-    "tailwind.config.js"
+    "tailwind.config.ts"
   ],
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "npx rimraf ./dist && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "npx release-it"
+    "test:visual": "playwright test",
+    "test:visual:ci": "npm run build-storybook && playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual:icons": "node scripts/figma-icons-baseline.mjs --check && playwright test tests/visual/icons-figma.spec.ts",
+    "test:visual:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents --check && node scripts/figma-sidebar-baseline.mjs --target layouts --check && playwright test tests/visual/sidebar-figma.spec.ts tests/visual/sidebar-layouts-figma.spec.ts",
+    "figma:baseline:icons": "node scripts/figma-icons-baseline.mjs",
+    "figma:baseline:icons:check": "node scripts/figma-icons-baseline.mjs --check",
+    "figma:baseline:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents",
+    "figma:baseline:sidebar:layouts": "node scripts/figma-sidebar-baseline.mjs --target layouts",
+    "figma:baseline:sidebar:check": "node scripts/figma-sidebar-baseline.mjs --check",
+    "postinstall": "playwright install chromium",
+    "release": "npx release-it",
+    "release:dev:init": "npx release-it --config .release-it.dev.json major --preRelease=dev",
+    "release:dev:init:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init major --preRelease=dev",
+    "release:dev": "npx release-it --config .release-it.dev.json --preRelease=dev",
+    "release:dev:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
   },
   "repository": {
     "type": "git",
@@ -38,7 +58,8 @@
   },
   "keywords": [
     "tailwind",
-    "material-tailwind",
+    "askchief",
+    "design-system",
     "theme",
     "shipping",
     "storybook"
@@ -51,13 +72,14 @@
   "homepage": "https://github.com/lateralus-ai/shipping-ui#readme",
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
-    "@material-tailwind/react": "^2.1.10",
+    "@playwright/test": "^1.49.0",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@uidotdev/usehooks": "^2.4.1",
@@ -65,10 +87,14 @@
     "ai": "^5.0.59",
     "autoprefixer": "^10.4.16",
     "clsx": "^1.2.0",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-it": "^19.0.5",
+    "serve": "^14.2.4",
+    "sharp": "^0.33.5",
     "storybook": "^8.2.9",
     "tailwind-merge": "^1.9.0",
     "tailwindcss": "^3.4.0",
@@ -84,7 +110,10 @@
     "react-textarea-autosize": "^8.5.9"
   },
   "dependencies": {
-    "@iconify/react": "^6.0.2",
+    "@radix-ui/react-dialog": "^1.1.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-tabs": "^1.1.17",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hooks-library/core": "^0.6.2",
     "docx-preview": "^0.3.7",
     "docxtemplater": "^3.66.6",

package/src/components/Checkbox.tsx

@@ -0,0 +1,77 @@
+import { type InputHTMLAttributes, useEffect, useId, useRef } from "react";
+import { MinusIcon, TickIcon } from "../icons";
+import { cn } from "../utils/cn";
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> & {
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  label?: string;
+  onChange?: (checked: boolean) => void;
+};
+
+export const Checkbox = ({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  label,
+  onChange,
+  className,
+  id: idProp,
+  ...props
+}: CheckboxProps) => {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  const isActive = checked || indeterminate;
+
+  return (
+    <label
+      htmlFor={id}
+      data-checked={checked}
+      data-indeterminate={indeterminate}
+      data-disabled={disabled}
+      className={cn(
+        "inline-flex cursor-pointer items-center gap-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      <span className="relative inline-flex shrink-0">
+        <input
+          ref={inputRef}
+          id={id}
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={(event) => onChange?.(event.target.checked)}
+          className="peer sr-only"
+          {...props}
+        />
+        <span
+          aria-hidden
+          className={cn(
+            "flex size-4 items-center justify-center rounded-sm border transition-colors",
+            "border-divider-secondary bg-white",
+            "peer-hover:border-grey-400 peer-hover:bg-grey-50",
+            isActive && "border-blue-600 bg-blue-600",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-accent-on-light peer-focus-visible:ring-offset-1",
+            "peer-disabled:border-divider-primary peer-disabled:bg-grey-50",
+          )}
+        >
+          {checked && !indeterminate && (
+            <TickIcon size="xs" className="text-white" />
+          )}
+          {indeterminate && <MinusIcon size="small" className="text-white" />}
+        </span>
+      </span>
+      {label && <span className="text-body text-display-on-light-primary">{label}</span>}
+    </label>
+  );
+};

package/src/components/Chip.tsx

@@ -0,0 +1,69 @@
+import { type ReactNode } from "react";
+import { ClearIcon } from "../icons";
+import { Avatar, type AvatarProps, GroupedAvatars } from "../primitives";
+import { IconButton } from "../primitives/IconButton";
+import { cn } from "../utils/cn";
+
+export type ChipVariant = "avatar" | "multiple" | "icon" | "dot" | "label";
+
+type ChipDotColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+
+export type ChipProps = {
+  variant: ChipVariant;
+  label: string;
+  avatar?: Pick<AvatarProps, "chief" | "initials">;
+  icon?: ReactNode;
+  dotColor?: ChipDotColor;
+  onRemove?: () => void;
+  className?: string;
+};
+
+const dotColorStyles: Record<ChipDotColor, string> = {
+  blue: "bg-meta-blue",
+  green: "bg-meta-green",
+  red: "bg-meta-red",
+  orange: "bg-meta-orange",
+  purple: "bg-meta-purple",
+  grey: "bg-grey-400",
+};
+
+export const Chip = ({
+  variant,
+  label,
+  avatar,
+  icon,
+  dotColor = "blue",
+  onRemove,
+  className,
+}: ChipProps) => (
+  <span
+    data-variant={variant}
+    className={cn(
+      "inline-flex h-8 max-w-full items-center gap-1.5 rounded-control border border-divider-primary bg-white px-2 text-caption-2 text-display-on-light-primary",
+      className,
+    )}
+  >
+    {variant === "avatar" && avatar && (
+      <Avatar chief={avatar.chief} initials={avatar.initials} size={18} />
+    )}
+    {variant === "multiple" && <GroupedAvatars count={2} />}
+    {variant === "icon" && icon && (
+      <span className="shrink-0 text-display-on-light-secondary [&>svg]:size-4">{icon}</span>
+    )}
+    {variant === "dot" && (
+      <span className={cn("size-2 shrink-0 rounded-full", dotColorStyles[dotColor])} />
+    )}
+    <span className="truncate">{label}</span>
+    {onRemove && (
+      <IconButton
+        hierarchy="quaternary"
+        size="small"
+        aria-label={`Remove ${label}`}
+        onClick={onRemove}
+        className="size-6 [&>svg]:size-3"
+      >
+        <ClearIcon size="xs" />
+      </IconButton>
+    )}
+  </span>
+);

package/src/components/EmptyState.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { Button, type ButtonProps } from "../primitives";
+import { cn } from "../utils/cn";
+
+export type EmptyStateProps = {
+  illustration?: ReactNode;
+  title: string;
+  description?: string;
+  action?: Pick<ButtonProps, "children" | "onClick" | "hierarchy" | "icon" | "startIcon">;
+  className?: string;
+};
+
+export const EmptyState = ({
+  illustration,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) => (
+  <div
+    className={cn(
+      "flex max-w-sm flex-col items-center gap-4 px-6 py-10 text-center",
+      className,
+    )}
+  >
+    {illustration && <div className="shrink-0">{illustration}</div>}
+    <div className="flex flex-col gap-1">
+      <h3 className="text-subheader-em text-display-on-light-primary">{title}</h3>
+      {description && (
+        <p className="text-body text-display-on-light-secondary">{description}</p>
+      )}
+    </div>
+    {action && (
+      <Button
+        hierarchy={action.hierarchy ?? "primary"}
+        onClick={action.onClick}
+        icon={action.icon}
+        startIcon={action.startIcon}
+      >
+        {action.children}
+      </Button>
+    )}
+  </div>
+);

package/src/components/Entry.tsx

@@ -0,0 +1,138 @@
+import {
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { ChatIcon, IssuesIcon, ReportIcon, StatusIcon } from "../icons";
+import { cn } from "../utils/cn";
+
+export type EntryVariant = "chat" | "issue" | "report";
+/** @deprecated Prefer `EntryVariant`. */
+export type EntryType = EntryVariant;
+export type EntryState = "idle" | "active";
+
+export type EntryProps = {
+  /** Visual type — drives the default leading icon. */
+  variant?: EntryVariant;
+  /** @deprecated Use `variant`. */
+  type?: EntryVariant;
+  state?: EntryState;
+  title?: ReactNode;
+  /** Secondary line — excerpt, metadata, or highlighted query match. */
+  subtitle?: ReactNode;
+  /** Unread count badge in the title row (Figma red pill). */
+  count?: number;
+  /** Trailing actions (e.g. ellipsis menu). Shown on hover / when forced. */
+  trailing?: ReactNode;
+  /** Override the default variant icon. */
+  icon?: ReactNode;
+  onClick?: () => void;
+  className?: string;
+  /** @deprecated Use `count` or `trailing`. */
+  meta?: ReactNode;
+};
+
+const variantIcons: Record<EntryVariant, ReactNode> = {
+  chat: <ChatIcon className="size-4" />,
+  issue: <StatusIcon className="size-4" />,
+  report: <ReportIcon className="size-4" />,
+};
+
+/**
+ * List entry row — Figma `Entry` (389:10001).
+ * Shared by search results and activity lists.
+ *
+ * Renders a `div` (not `<button>`) so trailing controls can be real buttons
+ * without nested-button issues. Whole-row click uses `onClick` + keyboard.
+ */
+export const Entry = ({
+  variant,
+  type,
+  state = "idle",
+  title = "Title",
+  subtitle,
+  count,
+  trailing,
+  icon,
+  onClick,
+  className,
+  meta,
+}: EntryProps) => {
+  const resolvedVariant: EntryVariant = variant ?? type ?? "chat";
+  const isInteractive = typeof onClick === "function";
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!onClick) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      role={isInteractive ? "button" : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+      data-variant={resolvedVariant}
+      data-state={state}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "group flex w-full items-center gap-4 rounded-control p-2 text-left transition-colors",
+        "hover:bg-[rgba(38,36,32,0.04)]",
+        state === "active" && "bg-[rgba(38,36,32,0.04)]",
+        isInteractive && "cursor-pointer",
+        className,
+      )}
+    >
+      <span className="shrink-0 text-display-on-light-secondary">
+        {icon ?? variantIcons[resolvedVariant] ?? (
+          <IssuesIcon className="size-4" />
+        )}
+      </span>
+
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="flex min-h-6 w-full items-center gap-4">
+          <span className="min-w-0 flex-1 truncate text-caption-1-em text-display-on-light-primary">
+            {title}
+          </span>
+          {typeof count === "number" && count > 0 && (
+            <span
+              className="inline-flex min-h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-red-600 px-0.5 text-footnote-em text-white"
+              aria-label={`${count} unread`}
+            >
+              {count > 99 ? "99+" : count}
+            </span>
+          )}
+          {meta != null && typeof count !== "number" && (
+            <span className="shrink-0 text-footnote text-display-on-light-quaternary">
+              {meta}
+            </span>
+          )}
+        </span>
+
+        {(subtitle != null && subtitle !== false) || trailing ? (
+          <span className="flex min-h-6 w-full items-center gap-4">
+            {subtitle != null && subtitle !== false ? (
+              <span className="min-w-0 flex-1 truncate text-caption-2 text-display-on-light-secondary">
+                {subtitle}
+              </span>
+            ) : (
+              <span className="min-w-0 flex-1" />
+            )}
+            {trailing != null && (
+              <span
+                className="inline-flex size-5 shrink-0 items-center justify-center"
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              >
+                {trailing}
+              </span>
+            )}
+          </span>
+        ) : null}
+      </span>
+    </div>
+  );
+};

package/src/components/Header.tsx

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type HeaderVariant = "standard" | "nested";
+
+export type HeaderProps = {
+  variant?: HeaderVariant;
+  title: string;
+  actions?: ReactNode;
+  className?: string;
+};
+
+export const Header = ({
+  variant = "standard",
+  title,
+  actions,
+  className,
+}: HeaderProps) => (
+  <header
+    data-variant={variant}
+    className={cn(
+      "flex w-full items-center justify-between gap-4",
+      variant === "standard" && "border-b border-divider-primary px-6 py-4",
+      variant === "nested" && "px-4 py-3",
+      className,
+    )}
+  >
+    <h2
+      className={cn(
+        "text-display-on-light-primary",
+        variant === "standard" && "font-heading text-heading",
+        variant === "nested" && "text-subheader-em",
+      )}
+    >
+      {title}
+    </h2>
+    {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+  </header>
+);

package/src/components/Input.tsx

@@ -0,0 +1,69 @@
+import { type InputHTMLAttributes, useId } from "react";
+import { cn } from "../utils/cn";
+
+export type InputState = "idle" | "hover" | "disabled" | "edit";
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  error?: string;
+  state?: InputState;
+  onChange?: (value: string) => void;
+};
+
+const fieldStyles: Record<InputState, string> = {
+  idle: "border-divider-primary bg-white",
+  hover: "border-grey-300 bg-white",
+  disabled: "border-divider-primary bg-grey-50 text-display-on-light-quaternary cursor-not-allowed",
+  edit: "border-accent-on-light bg-white ring-1 ring-accent-on-light",
+};
+
+export const Input = ({
+  label,
+  value = "",
+  placeholder,
+  error,
+  state = "idle",
+  onChange,
+  disabled,
+  className,
+  id: idProp,
+  ...props
+}: InputProps) => {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const isDisabled = disabled ?? state === "disabled";
+  const visualState = isDisabled ? "disabled" : state;
+  const hasError = Boolean(error);
+
+  return (
+    <div className={cn("flex w-full flex-col gap-1", className)}>
+      {label && (
+        <label htmlFor={id} className="text-caption-2-em text-display-on-light-secondary">
+          {label}
+        </label>
+      )}
+      <input
+        id={id}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        disabled={isDisabled}
+        data-state={visualState}
+        onChange={(event) => onChange?.(event.target.value)}
+        className={cn(
+          "h-10 w-full rounded-control border px-3 text-body text-display-on-light-primary outline-none transition-colors placeholder:text-display-on-light-quaternary",
+          "hover:border-grey-300 focus:border-accent-on-light focus:ring-1 focus:ring-accent-on-light",
+          "data-[state=hover]:border-grey-300",
+          "data-[state=edit]:border-accent-on-light data-[state=edit]:ring-1 data-[state=edit]:ring-accent-on-light",
+          "data-[state=disabled]:border-divider-primary data-[state=disabled]:bg-grey-50 data-[state=disabled]:text-display-on-light-quaternary",
+          hasError && "border-red-500 ring-1 ring-red-500",
+          !hasError && fieldStyles[visualState],
+        )}
+        {...props}
+      />
+      {error && <span className="text-footnote text-red-500">{error}</span>}
+    </div>
+  );
+};

package/src/components/InputType.tsx

@@ -0,0 +1,76 @@
+import { cn } from "../utils/cn";
+
+export type InputTypeKind = "text" | "binary";
+export type InputTypeState = "on" | "off";
+
+export type InputTypeProps = {
+  type: InputTypeKind;
+  state: InputTypeState;
+  onChange?: (state: InputTypeState) => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+const labels: Record<InputTypeKind, { on: string; off: string }> = {
+  text: { on: "On", off: "Off" },
+  binary: { on: "Yes", off: "No" },
+};
+
+export const InputType = ({
+  type,
+  state,
+  onChange,
+  disabled = false,
+  className,
+}: InputTypeProps) => {
+  const isOn = state === "on";
+  const { on: onLabel, off: offLabel } = labels[type];
+
+  const toggle = (next: InputTypeState) => {
+    if (disabled) return;
+    onChange?.(next);
+  };
+
+  return (
+    <div
+      role="group"
+      aria-label={`${type} input type`}
+      data-type={type}
+      data-state={state}
+      className={cn(
+        "inline-flex rounded-control border border-divider-primary bg-white p-0.5",
+        disabled && "opacity-50",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        disabled={disabled}
+        aria-pressed={!isOn}
+        onClick={() => toggle("off")}
+        className={cn(
+          "min-w-12 rounded-[6px] px-3 py-1.5 text-caption-2 transition-colors",
+          !isOn
+            ? "bg-grey-900 text-display-on-dark-primary"
+            : "text-display-on-light-secondary hover:bg-grey-100",
+        )}
+      >
+        {offLabel}
+      </button>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-pressed={isOn}
+        onClick={() => toggle("on")}
+        className={cn(
+          "min-w-12 rounded-[6px] px-3 py-1.5 text-caption-2 transition-colors",
+          isOn
+            ? "bg-grey-900 text-display-on-dark-primary"
+            : "text-display-on-light-secondary hover:bg-grey-100",
+        )}
+      >
+        {onLabel}
+      </button>
+    </div>
+  );
+};