@lateralus-ai/shipping-ui 2.0.0-dev.25 → 2.0.0-dev.27

package/dist/primitives/Button.d.ts

@@ -13,10 +13,12 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "childre
     disabled?: boolean;
     icon?: ComponentType<IconProps> | ReactNode;
     startIcon?: ComponentType<IconProps> | ReactNode;
+    /** Renders after the label, inside the same button (no split/dropdown segment). */
+    endIcon?: ComponentType<IconProps> | ReactNode;
     dropdownOptions?: ButtonDropdownOption[];
     dropdownOpen?: boolean;
     onDropdownOpenChange?: (open: boolean) => void;
     forcedState?: ButtonAppearance;
     children: ReactNode;
 };
-export declare const Button: ({ hierarchy, disabled, icon, startIcon, dropdownOptions, dropdownOpen, onDropdownOpenChange, forcedState, children, className, type, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ hierarchy, disabled, icon, startIcon, endIcon, dropdownOptions, dropdownOpen, onDropdownOpenChange, forcedState, children, className, type, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/primitives/Switch.d.ts

@@ -6,7 +6,7 @@ export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChang
 };
 /**
  * On/off control — Figma Switch (3068:65681).
- * Track: 36×16. Thumb: 24×24 (overhangs track). Off left / on right, edges flush.
- * Raise-2 on thumb.
+ * Track: 36×16 (grey-400 off / grey-900 on). Thumb: 24×24 white (grey-50 off),
+ * 1px border matching track, Raise-2 shadow. Off left / on right, edges flush.
  */
 export declare const Switch: ({ checked, onChange, disabled, className, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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

package/src/primitives/Button.tsx

@@ -34,6 +34,8 @@ export type ButtonProps = Omit<
   disabled?: boolean;
   icon?: ComponentType<IconProps> | ReactNode;
   startIcon?: ComponentType<IconProps> | ReactNode;
+  /** Renders after the label, inside the same button (no split/dropdown segment). */
+  endIcon?: ComponentType<IconProps> | ReactNode;
   dropdownOptions?: ButtonDropdownOption[];
   dropdownOpen?: boolean;
   onDropdownOpenChange?: (open: boolean) => void;
@@ -110,6 +112,7 @@ export const Button = ({
   disabled = false,
   icon,
   startIcon,
+  endIcon,
   dropdownOptions,
   dropdownOpen,
   onDropdownOpenChange,
@@ -122,7 +125,8 @@ export const Button = ({
 }: ButtonProps) => {
   const resolvedIcon = icon ?? startIcon;
   const renderedIcon = renderIcon(resolvedIcon);
-  const hasIcon = renderedIcon != null;
+  const renderedEndIcon = renderIcon(endIcon);
+  const hasIcon = renderedIcon != null || renderedEndIcon != null;
   const hasDropdown = Boolean(dropdownOptions?.length);
   const dropdownDisabled = !dropdownOptions?.some((option) => !option.disabled);
   const mainAppearance = getAppearance(disabled, forcedState);
@@ -148,6 +152,7 @@ export const Button = ({
     >
       {renderedIcon}
       <span>{children}</span>
+      {renderedEndIcon}
     </span>
   );
 

package/src/primitives/Switch.tsx

@@ -12,8 +12,8 @@ export type SwitchProps = Omit<
 
 /**
  * On/off control — Figma Switch (3068:65681).
- * Track: 36×16. Thumb: 24×24 (overhangs track). Off left / on right, edges flush.
- * Raise-2 on thumb.
+ * Track: 36×16 (grey-400 off / grey-900 on). Thumb: 24×24 white (grey-50 off),
+ * 1px border matching track, Raise-2 shadow. Off left / on right, edges flush.
  */
 export const Switch = ({
   checked,
@@ -42,14 +42,16 @@ export const Switch = ({
       aria-hidden
       className={cn(
         "pointer-events-none absolute inset-x-0 top-1/2 h-4 -translate-y-1/2 rounded-full transition-colors",
-        checked ? "bg-grey-900" : "bg-grey-200",
+        checked ? "bg-grey-900" : "bg-grey-400",
       )}
     />
     <span
       aria-hidden
       className={cn(
-        "relative inline-block size-6 rounded-full bg-white shadow-raise2 transition-transform",
-        checked ? "translate-x-3" : "translate-x-0",
+        "relative inline-block size-6 rounded-full border border-solid shadow-raise2 transition-[transform,border-color,background-color]",
+        checked
+          ? "translate-x-3 border-grey-900 bg-white"
+          : "translate-x-0 border-grey-400 bg-grey-50",
       )}
     />
   </button>