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

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/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

@@ -0,0 +1,18 @@
+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";
+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, type BadgeColor, type BadgeType } 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,107 @@
+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 slotProps = (visualState: ButtonVisualState) => ({
+  forcedState: visualState === "idle" ? undefined : visualState,
+  disabled: visualState === "disabled",
+});
+
+export const ButtonsCanvas = () => (
+  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttons}>
+    <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>
+
+            {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>
+        </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

@@ -0,0 +1,65 @@
+import { AddIcon } from "../../icons";
+import { Button } from "../../primitives";
+import {
+  FigmaContent,
+  FigmaPage,
+  FigmaRow,
+  FigmaSection,
+} from "../_layout";
+import { ButtonSnapshot } from "./helpers";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const hierarchies = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+  "destructive",
+] as const;
+const columnLabels = ["Primary", "Secondary", "Tertiary", "Quaternary", "Destructive"];
+const rowLabels = ["Idle", "Hover", "Disabled"];
+
+export const ButtonsMatrixCanvas = () => (
+  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttonsMatrix}>
+    <FigmaContent>
+      <FigmaSection>
+        <div className="mb-4 grid grid-cols-[104px_repeat(5,1fr)] gap-4">
+          <div />
+          {columnLabels.map((label) => (
+            <p key={label} className="text-center text-caption-1 text-display-on-light-secondary">
+              {label}
+            </p>
+          ))}
+        </div>
+
+        {rowLabels.map((rowLabel) => (
+          <FigmaRow key={rowLabel} label={rowLabel} gap={24}>
+            <div className="w-24" />
+            {hierarchies.map((hierarchy) => (
+              <ButtonSnapshot
+                key={hierarchy}
+                hierarchy={hierarchy}
+                visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
+              />
+            ))}
+          </FigmaRow>
+        ))}
+
+        <FigmaRow label="Idle" gap={24}>
+          <div className="w-24" />
+          <Button icon={<AddIcon size="small" />} className="min-w-[304px]">
+            New chat
+          </Button>
+        </FigmaRow>
+
+        <FigmaRow label="Hover" gap={24}>
+          <div className="w-24" />
+          <span className="inline-flex min-h-10 min-w-[304px] items-center justify-center gap-2 rounded-control bg-action-primary-hover px-2 text-caption-1 text-action-primary-on-hover">
+            <AddIcon />
+            New chat
+          </span>
+        </FigmaRow>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);