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

package/src/primitives/Button.tsx

@@ -0,0 +1,67 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+type ButtonHierarchy = "primary" | "secondary" | "tertiary" | "quaternary";
+type ButtonOutcome = "action" | "destructive";
+
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  hierarchy?: ButtonHierarchy;
+  outcome?: ButtonOutcome;
+  disabled?: boolean;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+  children: ReactNode;
+};
+
+const baseStyles =
+  "inline-flex min-h-10 items-center justify-center gap-2 rounded-control px-2 text-caption-1 transition-colors disabled:cursor-not-allowed";
+
+const actionStyles: Record<ButtonHierarchy, string> = {
+  primary:
+    "bg-action-primary-idle text-action-primary-on-idle hover:bg-action-primary-hover hover:text-action-primary-on-hover disabled:bg-action-primary-disabled disabled:text-action-primary-on-disabled",
+  secondary:
+    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle hover:bg-action-secondary-hover hover:text-action-secondary-on-hover disabled:bg-action-secondary-disabled disabled:text-action-secondary-on-disabled",
+  tertiary:
+    "bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover disabled:bg-action-tertiary-disabled disabled:text-action-tertiary-on-disabled",
+  quaternary:
+    "bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover disabled:bg-action-quaternary-disabled disabled:text-action-quaternary-on-disabled",
+};
+
+const destructiveStyles: Record<ButtonHierarchy, string> = {
+  primary:
+    "bg-action-destructive-idle text-action-destructive-on-idle hover:bg-action-destructive-hover hover:text-action-destructive-on-hover disabled:bg-action-destructive-disabled disabled:text-action-destructive-on-disabled",
+  secondary:
+    "border border-red-300 bg-grey-50 text-red-500 hover:bg-red-50 hover:text-red-700 disabled:bg-grey-50 disabled:text-red-300",
+  tertiary:
+    "bg-white text-red-500 hover:bg-red-50 hover:text-red-700 disabled:bg-white disabled:text-red-300",
+  quaternary:
+    "bg-white text-red-500 hover:bg-grey-100 hover:text-red-700 disabled:bg-white disabled:text-red-300",
+};
+
+export const Button = ({
+  hierarchy = "primary",
+  outcome = "action",
+  disabled = false,
+  startIcon,
+  endIcon,
+  children,
+  className,
+  type = "button",
+  ...props
+}: ButtonProps) => {
+  const variantStyles =
+    outcome === "destructive" ? destructiveStyles[hierarchy] : actionStyles[hierarchy];
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(baseStyles, variantStyles, className)}
+      {...props}
+    >
+      {startIcon && <span className="shrink-0 [&>svg]:size-4">{startIcon}</span>}
+      <span>{children}</span>
+      {endIcon && <span className="shrink-0 [&>svg]:size-4">{endIcon}</span>}
+    </button>
+  );
+};

package/src/primitives/Callout.tsx

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type CalloutProps = {
+  children: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+};
+
+export const Callout = ({ children, icon, className }: CalloutProps) => (
+  <div
+    className={cn(
+      "flex items-start gap-2 rounded-control bg-meta-blue px-3 py-2 text-caption-2 text-meta-on-blue",
+      className,
+    )}
+    role="note"
+  >
+    {icon && <span className="shrink-0 pt-0.5 [&>svg]:size-4">{icon}</span>}
+    <span>{children}</span>
+  </div>
+);

package/src/primitives/Count.tsx

@@ -0,0 +1,18 @@
+import { cn } from "../utils/cn";
+
+export type CountProps = {
+  value: number;
+  className?: string;
+};
+
+export const Count = ({ value, className }: CountProps) => (
+  <span
+    className={cn(
+      "inline-flex min-w-5 items-center justify-center rounded-full bg-blue-600 px-1.5 py-0.5 text-footnote-em text-white",
+      className,
+    )}
+    aria-label={`Count: ${value}`}
+  >
+    {value > 99 ? "99+" : value}
+  </span>
+);

package/src/primitives/DropdownMenu.tsx

@@ -0,0 +1,60 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type DropdownMenuProps = {
+  trigger: ReactNode;
+  children: ReactNode;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+
+export const DropdownMenu = ({
+  trigger,
+  children,
+  side = "bottom",
+  align = "start",
+  open,
+  onOpenChange,
+  triggerClassName,
+  contentClassName,
+}: DropdownMenuProps) => (
+  <DropdownMenuPrimitive.Root open={open} onOpenChange={onOpenChange} modal={false}>
+    <DropdownMenuPrimitive.Trigger asChild>{trigger}</DropdownMenuPrimitive.Trigger>
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        side={side}
+        align={align}
+        sideOffset={4}
+        collisionPadding={8}
+        className={cn(
+          "z-[200] min-w-40 rounded-control border border-divider-primary bg-background-primary p-1 shadow-raise2",
+          contentClassName,
+        )}
+      >
+        {children}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  </DropdownMenuPrimitive.Root>
+);
+
+export const DropdownMenuItem = ({
+  className,
+  ...props
+}: DropdownMenuPrimitive.DropdownMenuItemProps) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-caption-1 text-display-on-light-primary outline-none transition-colors hover:bg-grey-100 focus:bg-grey-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const DropdownMenuSeparator = () => (
+  <DropdownMenuPrimitive.Separator className="my-1 h-px bg-divider-primary" />
+);

package/src/primitives/GroupedAvatars.tsx

@@ -0,0 +1,36 @@
+import { Avatar } from "./Avatar";
+import { cn } from "../utils/cn";
+
+type GroupCount = 1 | 2 | 3;
+
+export type GroupedAvatarsProps = {
+  count: GroupCount;
+  className?: string;
+};
+
+const groups: Record<GroupCount, Array<{ chief: "technical" | "compliance" | "initials"; initials?: string }>> = {
+  1: [{ chief: "technical" }],
+  2: [
+    { chief: "technical" },
+    { chief: "compliance" },
+  ],
+  3: [
+    { chief: "technical" },
+    { chief: "compliance" },
+    { chief: "initials", initials: "AC" },
+  ],
+};
+
+export const GroupedAvatars = ({ count, className }: GroupedAvatarsProps) => (
+  <div className={cn("inline-flex items-center", className)}>
+    {groups[count].map((avatar, index) => (
+      <Avatar
+        key={`${avatar.chief}-${index}`}
+        chief={avatar.chief}
+        initials={avatar.initials}
+        size={24}
+        className={cn("ring-2 ring-white", index > 0 && "-ml-2")}
+      />
+    ))}
+  </div>
+);

package/src/primitives/IconButton.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+type IconButtonHierarchy = "tertiary" | "quaternary";
+type IconButtonSize = "large" | "small";
+
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  hierarchy?: IconButtonHierarchy;
+  size?: IconButtonSize;
+  "aria-label": string;
+  children: ReactNode;
+};
+
+const hierarchyStyles: Record<IconButtonHierarchy, string> = {
+  tertiary:
+    "bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover disabled:bg-action-tertiary-disabled disabled:text-action-tertiary-on-disabled",
+  quaternary:
+    "bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover disabled:bg-action-quaternary-disabled disabled:text-action-quaternary-on-disabled",
+};
+
+const sizeStyles: Record<IconButtonSize, string> = {
+  large: "size-10 [&>svg]:size-6",
+  small: "size-8 [&>svg]:size-4",
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      hierarchy = "tertiary",
+      size = "large",
+      disabled = false,
+      children,
+      className,
+      type = "button",
+      ...props
+    },
+    ref,
+  ) => (
+    <button
+      ref={ref}
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-control transition-colors disabled:cursor-not-allowed",
+        hierarchyStyles[hierarchy],
+        sizeStyles[size],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+);
+
+IconButton.displayName = "IconButton";

package/src/primitives/Logo.tsx

@@ -0,0 +1,43 @@
+import { cn } from "../utils/cn";
+
+type ChiefType = "technical" | "compliance";
+
+export type LogoProps = {
+  chief: ChiefType;
+  className?: string;
+  muted?: boolean;
+};
+
+const ASK_CHIEF_A =
+  "M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z";
+
+const TechnicalGlyph = () => <path d={ASK_CHIEF_A} fill="currentColor" />;
+
+const ComplianceGlyph = () => (
+  <>
+    <path d={ASK_CHIEF_A} fill="currentColor" />
+    <path
+      d="M6.2 5.2C7.4 4.1 10.6 4.1 11.8 5.2"
+      stroke="currentColor"
+      strokeWidth="0.9"
+      fill="none"
+      strokeLinecap="round"
+    />
+  </>
+);
+
+export const Logo = ({ chief, className, muted = false }: LogoProps) => (
+  <svg
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={cn(
+      "shrink-0",
+      muted ? "text-display-on-light-quaternary" : "text-display-on-light-primary",
+      className,
+    )}
+    aria-hidden
+  >
+    {chief === "technical" ? <TechnicalGlyph /> : <ComplianceGlyph />}
+  </svg>
+);

package/src/primitives/MenuItem.tsx

@@ -0,0 +1,35 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type MenuItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  header?: boolean;
+  destructive?: boolean;
+  children: ReactNode;
+};
+
+export const MenuItem = ({
+  header = false,
+  destructive = false,
+  children,
+  className,
+  type = "button",
+  ...props
+}: MenuItemProps) => (
+  <button
+    type={type}
+    className={cn(
+      "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-caption-1 transition-colors",
+      header
+        ? "cursor-default text-caption-1-em text-display-on-light-tertiary hover:bg-transparent"
+        : destructive
+          ? "text-red-500 hover:bg-red-50 hover:text-red-700 disabled:text-red-300"
+          : "text-display-on-light-primary hover:bg-grey-100 disabled:text-display-on-light-quaternary",
+      "disabled:cursor-not-allowed",
+      className,
+    )}
+    disabled={header || props.disabled}
+    {...props}
+  >
+    {children}
+  </button>
+);

package/src/primitives/Switch.tsx

@@ -0,0 +1,38 @@
+import { type ButtonHTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+
+export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+};
+
+export const Switch = ({
+  checked,
+  onChange,
+  disabled = false,
+  className,
+  ...props
+}: SwitchProps) => (
+  <button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    disabled={disabled}
+    onClick={() => onChange(!checked)}
+    className={cn(
+      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed",
+      checked ? "bg-blue-600" : "bg-grey-200",
+      disabled && "opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span
+      className={cn(
+        "inline-block size-5 rounded-full bg-white shadow-raise1 transition-transform",
+        checked ? "translate-x-[18px]" : "translate-x-0.5",
+      )}
+    />
+  </button>
+);

package/src/primitives/ThinkingDot.tsx

@@ -0,0 +1,34 @@
+import { cn } from "../utils/cn";
+
+export type ThinkingDotProps = {
+  className?: string;
+};
+
+const frames = [0, 1, 2];
+
+export const ThinkingDot = ({ className }: ThinkingDotProps) => (
+  <span
+    className={cn("inline-flex items-center gap-1", className)}
+    role="status"
+    aria-label="Thinking"
+  >
+    {frames.map((frame) => (
+      <span
+        key={frame}
+        className="size-1.5 rounded-full bg-blue-600 motion-reduce:animate-none motion-reduce:opacity-60 animate-[thinking-dot_1.8s_ease-in-out_infinite]"
+        style={{ animationDelay: `${frame * 0.3}s` }}
+      />
+    ))}
+    <style>{`
+      @keyframes thinking-dot {
+        0%, 16.67%, 100% { opacity: 0.3; transform: scale(1); }
+        8.33% { opacity: 1; transform: scale(1.25); }
+        33.33% { opacity: 0.3; transform: scale(1); }
+        41.67% { opacity: 1; transform: scale(1.25); }
+        58.33% { opacity: 0.3; transform: scale(1); }
+        66.67% { opacity: 1; transform: scale(1.25); }
+        83.33% { opacity: 0.3; transform: scale(1); }
+      }
+    `}</style>
+  </span>
+);

package/src/primitives/Tooltip.tsx

@@ -0,0 +1,42 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type TooltipSide = "top" | "right" | "bottom" | "left";
+
+export type TooltipProps = {
+  children: ReactNode;
+  content: ReactNode;
+  hint?: boolean;
+  side?: TooltipSide;
+  className?: string;
+};
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export const Tooltip = ({
+  children,
+  content,
+  hint = false,
+  side = "top",
+  className,
+}: TooltipProps) => (
+  <TooltipPrimitive.Root>
+    <TooltipPrimitive.Trigger asChild>
+      <span className={cn("inline-flex", className)}>{children}</span>
+    </TooltipPrimitive.Trigger>
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        side={side}
+        sideOffset={6}
+        collisionPadding={8}
+        className={cn(
+          "z-[300] max-w-xs rounded-control bg-grey-900 px-2 py-1 text-footnote text-white shadow-raise2",
+          hint ? "whitespace-normal text-center leading-snug" : "whitespace-nowrap",
+        )}
+      >
+        {content}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  </TooltipPrimitive.Root>
+);

package/src/primitives/index.ts

@@ -0,0 +1,13 @@
+export { Button, type ButtonProps } from "./Button";
+export { IconButton, type IconButtonProps } from "./IconButton";
+export { Logo, type LogoProps } from "./Logo";
+export { Avatar, type AvatarProps } from "./Avatar";
+export { GroupedAvatars, type GroupedAvatarsProps } from "./GroupedAvatars";
+export { DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, type DropdownMenuProps } from "./DropdownMenu";
+export { MenuItem, type MenuItemProps } from "./MenuItem";
+export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from "./Tooltip";
+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 { Callout, type CalloutProps } from "./Callout";

package/src/stories/_layout/FigmaPage.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+type FigmaPageProps = {
+  title: string;
+  width: number;
+  children: ReactNode;
+  className?: string;
+};
+
+export const FigmaPage = ({ title, width, children, className }: FigmaPageProps) => (
+  <div
+    className={cn("bg-white font-sans text-display-on-light-primary", className)}
+    style={{ width }}
+    data-figma-page={title}
+  >
+    <div className="px-8 pt-8 pb-4">
+      <h1 className="font-heading text-heading text-display-on-light-primary">{title}</h1>
+      <p className="mt-2 text-caption-2 text-display-on-light-tertiary">AskChief Design System</p>
+    </div>
+    {children}
+  </div>
+);
+
+type FigmaContentProps = {
+  children: ReactNode;
+  padding?: number;
+  className?: string;
+};
+
+export const FigmaContent = ({ children, padding = 24, className }: FigmaContentProps) => (
+  <div className={cn("px-8 pb-8", className)} style={{ paddingLeft: 32, paddingRight: 32 }}>
+    <div style={{ padding }}>{children}</div>
+  </div>
+);
+
+type FigmaSectionProps = {
+  label?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const FigmaSection = ({ label, children, className }: FigmaSectionProps) => (
+  <div className={cn("mb-6", className)}>
+    {label && (
+      <p className="mb-3 text-caption-2-em text-display-on-light-tertiary">{label}</p>
+    )}
+    {children}
+  </div>
+);
+
+type FigmaGridProps = {
+  children: ReactNode;
+  gap?: number;
+  className?: string;
+};
+
+export const FigmaGrid = ({ children, gap = 16, className }: FigmaGridProps) => (
+  <div className={cn("flex flex-wrap items-center", className)} style={{ gap }}>
+    {children}
+  </div>
+);
+
+type FigmaRowProps = {
+  label?: string;
+  children: ReactNode;
+  gap?: number;
+  className?: string;
+};
+
+export const FigmaRow = ({ label, children, gap = 16, className }: FigmaRowProps) => (
+  <div className={cn("mb-4", className)}>
+    {label && (
+      <p className="mb-2 w-24 text-caption-2 text-display-on-light-quaternary">{label}</p>
+    )}
+    <FigmaGrid gap={gap}>{children}</FigmaGrid>
+  </div>
+);
+
+type FigmaVariantProps = {
+  label?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+/** Wraps a single variant for static snapshot display */
+export const FigmaVariant = ({ label, children, className }: FigmaVariantProps) => (
+  <div className={cn("flex flex-col items-center gap-1", className)}>
+    <div>{children}</div>
+    {label && (
+      <span className="text-footnote text-display-on-light-quaternary">{label}</span>
+    )}
+  </div>
+);

package/src/stories/_layout/index.ts

@@ -0,0 +1,8 @@
+export {
+  FigmaPage,
+  FigmaContent,
+  FigmaSection,
+  FigmaGrid,
+  FigmaRow,
+  FigmaVariant,
+} from "./FigmaPage";

package/src/stories/canvases/ButtonsCanvas.tsx

@@ -0,0 +1,57 @@
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+} from "../_layout";
+import { ButtonSnapshot } from "./helpers";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const hierarchies = ["primary", "secondary", "tertiary", "quaternary"] as const;
+
+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} />
+              ))}
+            </div>
+          ))}
+          <div className="flex flex-col gap-4">
+            {(["idle", "hover", "disabled"] as const).map((state) => (
+              <ButtonSnapshot
+                key={state}
+                hierarchy="primary"
+                outcome="destructive"
+                visualState={state}
+              />
+            ))}
+          </div>
+        </FigmaGrid>
+      </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>
+    </FigmaContent>
+  </FigmaPage>
+);