@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.21

package/src/components/ScrollableList.tsx

@@ -1,61 +1,61 @@
-import { type ComponentPropsWithoutRef } from "react";
-import { cn } from "../utils/cn";
-
-export type ScrollableListProps = ComponentPropsWithoutRef<"div">;
-export type ScrollableListHeaderProps = ComponentPropsWithoutRef<"div">;
-export type ScrollableListBodyProps = ComponentPropsWithoutRef<"div">;
-
-/**
- * Fill-height list chrome — Figma `Table` (6154:152285).
- * Outer grey-100 frame + header slot + internally scrolling grey-50 body.
- * Column layout and rows are caller-owned children.
- */
-function ScrollableListRoot({ className, ...props }: ScrollableListProps) {
-  return (
-    <div
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden rounded-lg bg-grey-100 p-1",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Column title bar. Default left padding aligns with a 24px leading icon +
- * 8px gap + 8px row padding (Figma). Override `className` when rows have no icon.
- */
-function ScrollableListHeader({
-  className,
-  ...props
-}: ScrollableListHeaderProps) {
-  return (
-    <div
-      className={cn(
-        "flex shrink-0 items-start gap-8 pl-10 pr-2 py-1",
-        "text-caption-2-em text-display-on-light-secondary",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Internally scrolling row region. */
-function ScrollableListBody({ className, ...props }: ScrollableListBodyProps) {
-  return (
-    <div
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto rounded bg-grey-50 p-1",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export const ScrollableList = Object.assign(ScrollableListRoot, {
-  Header: ScrollableListHeader,
-  Body: ScrollableListBody,
-});
+import { type ComponentPropsWithoutRef } from "react";
+import { cn } from "../utils/cn";
+
+export type ScrollableListProps = ComponentPropsWithoutRef<"div">;
+export type ScrollableListHeaderProps = ComponentPropsWithoutRef<"div">;
+export type ScrollableListBodyProps = ComponentPropsWithoutRef<"div">;
+
+/**
+ * Fill-height list chrome — Figma `Table` (6154:152285).
+ * Outer grey-100 frame + header slot + internally scrolling grey-50 body.
+ * Column layout and rows are caller-owned children.
+ */
+function ScrollableListRoot({ className, ...props }: ScrollableListProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden rounded-lg bg-grey-100 p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Column title bar. Default left padding aligns with a 24px leading icon +
+ * 8px gap + 8px row padding (Figma). Override `className` when rows have no icon.
+ */
+function ScrollableListHeader({
+  className,
+  ...props
+}: ScrollableListHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-start gap-8 pl-10 pr-2 py-1",
+        "text-caption-2-em text-display-on-light-secondary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Internally scrolling row region. */
+function ScrollableListBody({ className, ...props }: ScrollableListBodyProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto rounded bg-grey-50 p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export const ScrollableList = Object.assign(ScrollableListRoot, {
+  Header: ScrollableListHeader,
+  Body: ScrollableListBody,
+});

package/src/components/Tabs.tsx

@@ -1,146 +1,146 @@
-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, light accent active). Solid = list filters (grey-100 idle, blue-600 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-grey-100 text-display-on-light-tertiary",
-            "hover:bg-grey-200 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";
+
+/** Soft = search filters (filled idle, light accent active). Solid = list filters (grey-100 idle, blue-600 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-grey-100 text-display-on-light-tertiary",
+            "hover:bg-grey-200 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;
+};

package/src/components/index.ts

@@ -1,56 +1,56 @@
-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,
+  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";