@lateralus-ai/shipping-ui 2.0.0-dev.8 → 2.0.0-dev.9

package/dist/primitives/Badge.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
-type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
-type BadgeType = "label" | "icon";
+export type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+export type BadgeType = "label" | "icon";
 export type BadgeProps = {
     color: BadgeColor;
+    /** `label` grows with content (pill). `icon` is a compact circle for a glyph/digit. */
     type?: BadgeType;
     children: ReactNode;
     className?: string;
 };
-export declare const Badge: ({ color, type, children, className }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * Figma Badge (4365:74363) — padding + rounded-full; no fixed width on labels.
+ */
+export declare const Badge: ({ color, type, children, className, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/primitives/index.d.ts

@@ -11,5 +11,5 @@ export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from '.
 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 { Badge, type BadgeProps, type BadgeColor, type BadgeType } from './Badge';
 export { Callout, type CalloutProps } from './Callout';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.8",
+  "version": "2.0.0-dev.9",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/Tabs.tsx

@@ -11,26 +11,37 @@ 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" });
+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 }}>
+  <TabsContext.Provider value={{ type, appearance }}>
     <TabsPrimitive.Root
       className={cn("flex flex-col", className)}
       data-type={type}
+      data-appearance={type === "pills" ? appearance : undefined}
       {...props}
     >
       {children}
@@ -64,22 +75,20 @@ 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);
+>(({ className, children, ...props }, ref) => {
+  const { type, appearance } = useContext(TabsContext);
 
   return (
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center transition-colors outline-none",
+        "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",
@@ -88,37 +97,26 @@ export const TabsTrigger = forwardRef<
           "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" && [
-          "group 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",
-        ],
+        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-primary",
+            "hover:bg-grey-900/[0.04]",
+            "data-[state=active]:bg-blue-600 data-[state=active]:text-white",
+            "data-[state=active]:hover:bg-blue-600",
+          ],
         className,
       )}
       {...props}
     >
       {children}
-      {typeof count === "number" &&
-        (type === "pills" ? (
-          <span
-            className={cn(
-              "inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-0.5 text-footnote-em leading-none",
-              "bg-accent-bg-light text-display-on-light-secondary",
-              "group-data-[state=active]:text-display-on-light-tertiary",
-            )}
-            aria-label={`Count: ${count}`}
-          >
-            {count > 99 ? "99+" : count}
-          </span>
-        ) : (
-          <span
-            className="px-1 text-caption-2 text-display-on-light-secondary"
-            aria-label={`Count: ${count}`}
-          >
-            {count > 99 ? "99+" : count}
-          </span>
-        ))}
     </TabsPrimitive.Trigger>
   );
 });

package/src/components/index.ts

@@ -15,6 +15,7 @@ export {
   type TabsContentProps,
   type TabsItem,
   type TabsType,
+  type TabsAppearance,
 } from "./Tabs";
 export { Header, type HeaderProps, type HeaderVariant } from "./Header";
 export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from "./Entry";

package/src/index.ts

@@ -56,6 +56,7 @@ export type {
   TabsContentProps,
   TabsItem,
   TabsType,
+  TabsAppearance,
   HeaderProps,
   HeaderVariant,
   EntryProps,

package/src/patterns/Search/SearchModal.tsx

@@ -13,6 +13,7 @@ import {
   type ModalProps,
 } from "../../components/Modal";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/Tabs";
+import { Badge } from "../../primitives/Badge";
 import { cn } from "../../utils/cn";
 import { ResultRow, type ResultRowProps } from "./ResultRow";
 import { SectionHeader } from "./SectionHeader";
@@ -176,8 +177,13 @@ export const SearchModalFilters = ({
       )}
     >
       {tabs.map((tab) => (
-        <TabsTrigger key={tab.value} value={tab.value} count={tab.count}>
+        <TabsTrigger key={tab.value} value={tab.value}>
           {tab.label}
+          {typeof tab.count === "number" && (
+            <Badge color="blue">
+              {tab.count > 99 ? "99+" : tab.count}
+            </Badge>
+          )}
         </TabsTrigger>
       ))}
     </TabsList>

package/src/primitives/Badge.tsx

@@ -1,11 +1,12 @@
 import { type ReactNode } from "react";
 import { cn } from "../utils/cn";
 
-type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
-type BadgeType = "label" | "icon";
+export type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+export type BadgeType = "label" | "icon";
 
 export type BadgeProps = {
   color: BadgeColor;
+  /** `label` grows with content (pill). `icon` is a compact circle for a glyph/digit. */
   type?: BadgeType;
   children: ReactNode;
   className?: string;
@@ -20,11 +21,20 @@ const colorStyles: Record<BadgeColor, string> = {
   grey: "bg-grey-100 text-display-on-light-secondary",
 };
 
-export const Badge = ({ color, type = "label", children, className }: BadgeProps) => (
+/**
+ * Figma Badge (4365:74363) — padding + rounded-full; no fixed width on labels.
+ */
+export const Badge = ({
+  color,
+  type = "label",
+  children,
+  className,
+}: BadgeProps) => (
   <span
     className={cn(
-      "inline-flex shrink-0 items-center justify-center text-footnote-em",
-      type === "label" ? "rounded-control px-2 py-0.5" : "size-6 rounded-full",
+      "inline-flex shrink-0 items-center justify-center text-footnote-em leading-none",
+      type === "label" && "rounded-full px-1.5 py-0.5",
+      type === "icon" && "size-5 rounded-full [&>svg]:size-3",
       colorStyles[color],
       className,
     )}

package/src/primitives/index.ts

@@ -14,5 +14,5 @@ export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from ".
 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 { Badge, type BadgeProps, type BadgeColor, type BadgeType } from "./Badge";
 export { Callout, type CalloutProps } from "./Callout";

package/src/stories/canvases/ContentCanvas.tsx

@@ -1,4 +1,4 @@
-import { Button } from "../../primitives";
+import { Badge, Button } from "../../primitives";
 import {
   EmptyState,
   Entry,
@@ -9,6 +9,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../components";
+import { TickIcon } from "../../icons";
 import { WorkflowsIllustration } from "../../illustrations";
 import {
   FigmaContent,
@@ -50,12 +51,13 @@ export const ContentCanvas = () => (
               </TabsContent>
             </Tabs>
           </FigmaVariant>
-          <FigmaVariant label="Pills">
-            <Tabs defaultValue="active" type="pills">
+          <FigmaVariant label="Pills · soft">
+            <Tabs defaultValue="active" type="pills" appearance="soft">
               <TabsList>
                 <TabsTrigger value="active">Active</TabsTrigger>
-                <TabsTrigger value="completed" count={3}>
+                <TabsTrigger value="completed">
                   Completed
+                  <Badge color="blue">3</Badge>
                 </TabsTrigger>
               </TabsList>
               <TabsContent value="active" className="pt-3 text-caption-2 text-display-on-light-secondary">
@@ -66,6 +68,27 @@ export const ContentCanvas = () => (
               </TabsContent>
             </Tabs>
           </FigmaVariant>
+          <FigmaVariant label="Pills · solid">
+            <Tabs defaultValue="chat" type="pills" appearance="solid">
+              <TabsList>
+                <TabsTrigger value="chat">Chat</TabsTrigger>
+                <TabsTrigger value="questions">
+                  Questions
+                  <Badge color="grey">208</Badge>
+                </TabsTrigger>
+                <TabsTrigger value="review">
+                  Review
+                  <Badge color="green" type="icon">
+                    <TickIcon size="xs" />
+                  </Badge>
+                </TabsTrigger>
+                <TabsTrigger value="gaps">
+                  Gaps
+                  <Badge color="grey">47</Badge>
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </FigmaVariant>
         </div>
       </FigmaSection>