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

package/src/components/Tabs.tsx

@@ -1,146 +1,139 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  type ReactNode,
-} from "react";
-import { cn } from "../utils/cn";
-
-export type TabsType = "tabs" | "pills";
-
-/** Soft = search filters (filled idle). Solid = workflow shell (ghost idle, blue active). */
-export type TabsAppearance = "soft" | "solid";
-
-type TabsContextValue = {
-  type: TabsType;
-  appearance: TabsAppearance;
-};
-
-const TabsContext = createContext<TabsContextValue>({
-  type: "tabs",
-  appearance: "soft",
-});
-
-export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
-  type?: TabsType;
-  /** Only applies when `type="pills"`. Defaults to `soft`. */
-  appearance?: TabsAppearance;
-};
-
-export const Tabs = ({
-  type = "tabs",
-  appearance = "soft",
-  className,
-  children,
-  ...props
-}: TabsProps) => (
-  <TabsContext.Provider value={{ type, appearance }}>
-    <TabsPrimitive.Root
-      className={cn("flex flex-col", className)}
-      data-type={type}
-      data-appearance={type === "pills" ? appearance : undefined}
-      {...props}
-    >
-      {children}
-    </TabsPrimitive.Root>
-  </TabsContext.Provider>
-);
-
-export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
-
-export const TabsList = forwardRef<
-  ElementRef<typeof TabsPrimitive.List>,
-  TabsListProps
->(({ className, ...props }, ref) => {
-  const { type } = useContext(TabsContext);
-
-  return (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        "flex items-center",
-        type === "tabs" && "gap-6 border-b border-divider-primary",
-        type === "pills" && "gap-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-export type TabsTriggerProps = ComponentPropsWithoutRef<
-  typeof TabsPrimitive.Trigger
-> & {
-  children: ReactNode;
-};
-
-export const TabsTrigger = forwardRef<
-  ElementRef<typeof TabsPrimitive.Trigger>,
-  TabsTriggerProps
->(({ className, children, ...props }, ref) => {
-  const { type, appearance } = useContext(TabsContext);
-
-  return (
-    <TabsPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "inline-flex items-center justify-center gap-2.5 transition-colors outline-none",
-        "disabled:pointer-events-none disabled:opacity-50",
-        type === "tabs" && [
-          "relative h-12 gap-2 px-0 py-0 text-caption-2 text-display-on-light-secondary",
-          "hover:text-display-on-light-primary",
-          "data-[state=active]:text-caption-2-em data-[state=active]:text-display-on-light-primary",
-          "data-[state=active]:after:absolute data-[state=active]:after:inset-x-0 data-[state=active]:after:-bottom-px",
-          "data-[state=active]:after:h-0.5 data-[state=active]:after:rounded-full data-[state=active]:after:bg-grey-900",
-        ],
-        type === "pills" &&
-          appearance === "soft" && [
-            "min-h-9 rounded-full px-3 py-1 text-caption-2-em",
-            "bg-grey-100 text-display-on-light-secondary",
-            "hover:bg-grey-200",
-            "data-[state=active]:bg-accent-bg-light data-[state=active]:text-display-on-light-primary",
-          ],
-        type === "pills" &&
-          appearance === "solid" && [
-            "min-h-9 rounded-full px-3 py-1 text-caption-2-em",
-            "bg-transparent text-display-on-light-tertiary",
-            "hover:bg-grey-900/[0.04] hover:text-display-on-light-primary",
-            "data-[state=active]:bg-blue-600 data-[state=active]:text-white",
-            "data-[state=active]:hover:bg-blue-600",
-          ],
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </TabsPrimitive.Trigger>
-  );
-});
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-export type TabsContentProps = ComponentPropsWithoutRef<
-  typeof TabsPrimitive.Content
->;
-
-export const TabsContent = forwardRef<
-  ElementRef<typeof TabsPrimitive.Content>,
-  TabsContentProps
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn("outline-none", className)}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-/** @deprecated Prefer Tabs + TabsTrigger. Kept for Storybook atom demos. */
-export type TabsItem = {
-  label: string;
-  value?: string;
-  count?: number;
-};
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type ReactNode,
+} from "react";
+import { cn } from "../utils/cn";
+
+export type TabsType = "tabs" | "pills";
+
+type TabsContextValue = {
+  type: TabsType;
+};
+
+const TabsContext = createContext<TabsContextValue>({ type: "tabs" });
+
+export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+  type?: TabsType;
+};
+
+export const Tabs = ({
+  type = "tabs",
+  className,
+  children,
+  ...props
+}: TabsProps) => (
+  <TabsContext.Provider value={{ type }}>
+    <TabsPrimitive.Root
+      className={cn("flex flex-col", className)}
+      data-type={type}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.Root>
+  </TabsContext.Provider>
+);
+
+export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, ...props }, ref) => {
+  const { type } = useContext(TabsContext);
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        "flex items-center",
+        type === "tabs" && "gap-1 border-b border-divider-primary",
+        type === "pills" && "gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+export type TabsTriggerProps = ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Trigger
+> & {
+  /** Optional count badge (pill variant / search filters). */
+  count?: number;
+  children: ReactNode;
+};
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, count, children, ...props }, ref) => {
+  const { type } = useContext(TabsContext);
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "inline-flex items-center justify-center transition-colors outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        type === "tabs" && [
+          "relative px-3 py-2 text-caption-2 text-display-on-light-secondary",
+          "hover:text-display-on-light-primary",
+          "data-[state=active]:text-caption-2-em data-[state=active]:text-display-on-light-primary",
+          "data-[state=active]:after:absolute data-[state=active]:after:inset-x-0 data-[state=active]:after:-bottom-px",
+          "data-[state=active]:after:h-0.5 data-[state=active]:after:rounded-full data-[state=active]:after:bg-grey-900",
+        ],
+        type === "pills" && [
+          "min-h-9 gap-2.5 rounded-full px-3 py-1 text-caption-2-em",
+          "bg-grey-100 text-display-on-light-secondary",
+          "hover:bg-grey-200",
+          "data-[state=active]:bg-accent-bg-light data-[state=active]:text-display-on-light-primary",
+        ],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {typeof count === "number" && (
+        <span
+          className={cn(
+            "inline-flex size-6 shrink-0 items-center justify-center rounded-full text-footnote-em",
+            "bg-accent-bg-light text-display-on-light-tertiary",
+          )}
+          aria-label={`Count: ${count}`}
+        >
+          {count > 99 ? "99+" : count}
+        </span>
+      )}
+    </TabsPrimitive.Trigger>
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+export type TabsContentProps = ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Content
+>;
+
+export const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("outline-none", className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+/** @deprecated Prefer Tabs + TabsTrigger. Kept for Storybook atom demos. */
+export type TabsItem = {
+  label: string;
+  value?: string;
+  count?: number;
+};

package/src/components/index.ts

@@ -1,56 +1,42 @@
-export { Input, type InputProps, type InputState } from "./Input";
-export { ReportInput, type ReportInputProps, type ReportInputState } from "./ReportInput";
-export { InputType, type InputTypeProps, type InputTypeKind, type InputTypeState } from "./InputType";
-export { Chip, type ChipProps, type ChipVariant } from "./Chip";
-export { Checkbox, type CheckboxProps } from "./Checkbox";
-export { Tab, type TabProps, type TabState } from "./Tab";
-export {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-  type TabsProps,
-  type TabsListProps,
-  type TabsTriggerProps,
-  type TabsContentProps,
-  type TabsItem,
-  type TabsType,
-  type TabsAppearance,
-} from "./Tabs";
-export { Header, type HeaderProps, type HeaderVariant } from "./Header";
-export {
-  PageHeader,
-  type PageHeaderProps,
-  type PageHeaderCrumb,
-  type PageHeaderShellProps,
-  type PageHeaderBodyProps,
-} from "./PageHeader";
-export {
-  ScrollableList,
-  type ScrollableListProps,
-  type ScrollableListHeaderProps,
-  type ScrollableListBodyProps,
-} from "./ScrollableList";
-export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from "./Entry";
-export { EmptyState, type EmptyStateProps } from "./EmptyState";
-export {
-  Modal,
-  ModalTrigger,
-  ModalClose,
-  ModalPortal,
-  ModalOverlay,
-  ModalContent,
-  ModalTitle,
-  ModalDescription,
-  ModalHeaderSlot,
-  ModalBody,
-  type ModalProps,
-  type ModalOverlayProps,
-  type ModalContentProps,
-  type ModalTitleProps,
-  type ModalDescriptionProps,
-  type ModalBodyProps,
-} from "./Modal";
-export { ModalPanel } from "./ModalPanel";
-export * from "./PdfViewer/";
-export * from "./DocumentEditor";
+export { Input, type InputProps, type InputState } from "./Input";
+export { ReportInput, type ReportInputProps, type ReportInputState } from "./ReportInput";
+export { InputType, type InputTypeProps, type InputTypeKind, type InputTypeState } from "./InputType";
+export { Chip, type ChipProps, type ChipVariant } from "./Chip";
+export { Checkbox, type CheckboxProps } from "./Checkbox";
+export { Tab, type TabProps, type TabState } from "./Tab";
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+  type TabsItem,
+  type TabsType,
+} from "./Tabs";
+export { Header, type HeaderProps, type HeaderVariant } from "./Header";
+export { Entry, type EntryProps, type EntryType, type EntryState } from "./Entry";
+export { EmptyState, type EmptyStateProps } from "./EmptyState";
+export {
+  Modal,
+  ModalTrigger,
+  ModalClose,
+  ModalPortal,
+  ModalOverlay,
+  ModalContent,
+  ModalTitle,
+  ModalDescription,
+  ModalHeaderSlot,
+  ModalBody,
+  type ModalProps,
+  type ModalOverlayProps,
+  type ModalContentProps,
+  type ModalTitleProps,
+  type ModalDescriptionProps,
+  type ModalBodyProps,
+} from "./Modal";
+export { ModalPanel } from "./ModalPanel";
+export * from "./PdfViewer/";
+export * from "./DocumentEditor";

package/src/index.ts

@@ -1,85 +1,74 @@
-import "./style.css";
-
-export { theme as tailwindTheme } from "./tailwind-theme";
-
-export * from "./tokens";
-export * from "./icons";
-export * from "./primitives";
-export * from "./illustrations";
-
-export {
-  Input,
-  ReportInput,
-  InputType,
-  Chip,
-  Checkbox,
-  Tab,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-  Header,
-  PageHeader,
-  Entry,
-  EmptyState,
-  Modal,
-  ModalTrigger,
-  ModalClose,
-  ModalPortal,
-  ModalOverlay,
-  ModalContent,
-  ModalTitle,
-  ModalDescription,
-  ModalHeaderSlot,
-  ModalBody,
-  ModalPanel,
-  PdfViewer,
-  ImageViewer,
-  DocumentEditor,
-  ScrollableList,
-} from "./components";
-
-export type {
-  InputProps,
-  InputState,
-  ReportInputProps,
-  ReportInputState,
-  InputTypeProps,
-  InputTypeKind,
-  InputTypeState,
-  ChipProps,
-  ChipVariant,
-  CheckboxProps,
-  TabProps,
-  TabState,
-  TabsProps,
-  TabsListProps,
-  TabsTriggerProps,
-  TabsContentProps,
-  TabsItem,
-  TabsType,
-  TabsAppearance,
-  HeaderProps,
-  HeaderVariant,
-  PageHeaderProps,
-  PageHeaderCrumb,
-  PageHeaderShellProps,
-  PageHeaderBodyProps,
-  ScrollableListProps,
-  ScrollableListHeaderProps,
-  ScrollableListBodyProps,
-  EntryProps,
-  EntryType,
-  EntryState,
-  EntryVariant,
-  EmptyStateProps,
-  ModalProps,
-  ModalOverlayProps,
-  ModalContentProps,
-  ModalTitleProps,
-  ModalDescriptionProps,
-  ModalBodyProps,
-} from "./components";
-
-export * as Patterns from "./patterns";
-export * as Domain from "./domain";
+import "./style.css";
+
+export { theme as tailwindTheme } from "./tailwind-theme";
+
+export * from "./tokens";
+export * from "./icons";
+export * from "./primitives";
+export * from "./illustrations";
+
+export {
+  Input,
+  ReportInput,
+  InputType,
+  Chip,
+  Checkbox,
+  Tab,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Header,
+  Entry,
+  EmptyState,
+  Modal,
+  ModalTrigger,
+  ModalClose,
+  ModalPortal,
+  ModalOverlay,
+  ModalContent,
+  ModalTitle,
+  ModalDescription,
+  ModalHeaderSlot,
+  ModalBody,
+  ModalPanel,
+  PdfViewer,
+  ImageViewer,
+  DocumentEditor,
+} from "./components";
+
+export type {
+  InputProps,
+  InputState,
+  ReportInputProps,
+  ReportInputState,
+  InputTypeProps,
+  InputTypeKind,
+  InputTypeState,
+  ChipProps,
+  ChipVariant,
+  CheckboxProps,
+  TabProps,
+  TabState,
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+  TabsItem,
+  TabsType,
+  HeaderProps,
+  HeaderVariant,
+  EntryProps,
+  EntryType,
+  EntryState,
+  EmptyStateProps,
+  ModalProps,
+  ModalOverlayProps,
+  ModalContentProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+  ModalBodyProps,
+} from "./components";
+
+export * as Patterns from "./patterns";
+export * as Domain from "./domain";

package/src/patterns/Search/ResultRow.tsx

@@ -1,44 +1,58 @@
-import { type ReactNode } from "react";
-import {
-  Entry,
-  type EntryProps,
-  type EntryState,
-  type EntryVariant,
-} from "../../components/Entry";
-
-/** @deprecated Prefer `EntryVariant`. */
-export type ResultRowVariant = EntryVariant;
-/** @deprecated Prefer `EntryState`. */
-export type ResultRowState = EntryState;
-
-export type ResultRowProps = {
-  variant?: EntryVariant;
-  state?: EntryState;
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  onClick?: () => void;
-  className?: string;
-};
-
-/**
- * @deprecated Prefer `Entry` — ResultRow is a thin alias for search lists.
- */
-export const ResultRow = ({
-  variant = "report",
-  state = "idle",
-  title = "Search result",
-  subtitle,
-  onClick,
-  className,
-}: ResultRowProps) => (
-  <Entry
-    variant={variant}
-    state={state}
-    title={title}
-    subtitle={subtitle}
-    onClick={onClick}
-    className={className}
-  />
-);
-
-export type { EntryProps };
+import { type ReactNode } from "react";
+import { ChatIcon, IssuesIcon, ReportIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type ResultRowVariant = "report" | "chat" | "issue";
+export type ResultRowState = "idle" | "active";
+
+export type ResultRowProps = {
+  variant?: ResultRowVariant;
+  state?: ResultRowState;
+  title?: ReactNode;
+  /** Secondary line — excerpt, metadata, or highlighted query match. */
+  subtitle?: ReactNode;
+  onClick?: () => void;
+  className?: string;
+};
+
+const variantIcons: Record<ResultRowVariant, ReactNode> = {
+  report: <ReportIcon className="size-4" />,
+  chat: <ChatIcon className="size-4" />,
+  issue: <IssuesIcon className="size-4" />,
+};
+
+export const ResultRow = ({
+  variant = "report",
+  state = "idle",
+  title = "Search result",
+  subtitle,
+  onClick,
+  className,
+}: ResultRowProps) => (
+  <button
+    type="button"
+    className={cn(
+      "flex w-full items-center gap-4 rounded-control px-3 py-2.5 text-left transition-colors",
+      "hover:bg-[rgba(38,36,32,0.04)]",
+      state === "active" && "bg-[rgba(38,36,32,0.04)]",
+      className,
+    )}
+    data-variant={variant}
+    data-state={state}
+    onClick={onClick}
+  >
+    <span className="shrink-0 text-display-on-light-secondary">
+      {variantIcons[variant]}
+    </span>
+    <span className="min-w-0 flex-1">
+      <span className="block truncate text-caption-1-em text-display-on-light-primary">
+        {title}
+      </span>
+      {subtitle != null && subtitle !== false && (
+        <span className="mt-0.5 block truncate text-caption-2 text-display-on-light-secondary">
+          {subtitle}
+        </span>
+      )}
+    </span>
+  </button>
+);