@ship-it-ui/ui 0.0.8 → 0.0.9

package/dist/index.d.cts

@@ -585,7 +585,7 @@ declare const AccordionContent: react.ForwardRefExoticComponent<RadixAccordion.A
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type AvatarStatus = 'ok' | 'warn' | 'err' | 'off';
-interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Display name. Used to derive initials and a deterministic background color. */
     name?: string;
     /** Image source. Falls back to initials if loading fails. */
@@ -596,6 +596,11 @@ interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     status?: AvatarStatus;
     /** Override the auto-generated initials (e.g., for non-Latin scripts). */
     initials?: string;
+    /**
+     * Override the hash-derived fallback background with a literal CSS color value.
+     * Only applies when the initials fallback is shown; image avatars are unaffected.
+     */
+    color?: string;
 }
 /**
  * Person/entity avatar. Auto-generates initials and a stable background color from
@@ -622,11 +627,21 @@ declare const badgeStyles: (props?: ({
     variant?: "outline" | "err" | "pink" | "purple" | "solid" | "warn" | "ok" | "accent" | "neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeStyles> {
+/**
+ * Variant path: use one of the DS semantic variants.
+ *   <Badge variant="ok">Done</Badge>
+ *
+ * Color path (escape hatch): pass an arbitrary CSS color. When both are set,
+ * `color` wins at runtime.
+ *   <Badge color="#7c3aed">VIP</Badge>
+ */
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof badgeStyles> {
     /** Show a colored leading dot. */
     dot?: boolean;
     /** Optional leading icon (defers to children). */
     icon?: ReactNode;
+    /** Arbitrary CSS color override. When set, replaces the `variant` tint. */
+    color?: string;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -709,7 +724,7 @@ interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
 
-interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Pill-style leading icon (typically a glyph or `@`/`#`). */
     icon?: ReactNode;
     /**
@@ -722,13 +737,10 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
      * `'touch'` swaps to a roomier 32px chip with larger text for mobile filter strips.
      */
     density?: 'comfortable' | 'touch';
+    /** Arbitrary CSS color. When set, the default neutral tint is replaced with this color. */
+    color?: string;
     children: ReactNode;
 }
-/**
- * Pill-shaped filter chip. Used in command palette tag rows, search filter strips,
- * and AI suggestion lists. Differs from `Tag` by being pill-shaped (full radius)
- * and slightly more decorative.
- */
 declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
 
 type KbdProps = HTMLAttributes<HTMLElement>;
@@ -746,7 +758,7 @@ declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttribute
  * ratings step in whole units only — half-step input is uncommon UX and the
  * keyboard model (radiogroup) doesn't map cleanly to it.
  */
-interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'role'> {
+interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue' | 'role'> {
     /** Current rating (controlled). Range `0` … `max`. */
     value?: number;
     /** Default rating (uncontrolled). */
@@ -766,6 +778,8 @@ interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' |
     readOnly?: boolean;
     /** Accessible label. For read-only this overrides the auto-generated "X out of Y stars" label. */
     'aria-label'?: string;
+    /** Override the filled-star color. Accepts any CSS color. */
+    color?: string;
 }
 declare const Rating: react.ForwardRefExoticComponent<RatingProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -848,9 +862,19 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 declare const SkeletonGroup: react.ForwardRefExoticComponent<SkeletonGroupProps & react.RefAttributes<HTMLDivElement>>;
 
 type StatusState = 'ok' | 'warn' | 'err' | 'off' | 'sync' | 'accent';
-interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Semantic status. */
+/**
+ * State path: use a semantic state.
+ *   <StatusDot state="ok" />
+ *
+ * Color path (escape hatch): pass an arbitrary CSS color. When both are set,
+ * `color` wins at runtime.
+ *   <StatusDot color="#7c3aed" />
+ */
+interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Semantic state. Default `'ok'`. */
     state?: StatusState;
+    /** Arbitrary CSS color override. When set, replaces the state-derived color. */
+    color?: string;
     /** Optional label rendered next to the dot. */
     label?: ReactNode;
     /** Pulse the dot — used for `sync` state to indicate live activity. */
@@ -860,13 +884,15 @@ interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Optional close button. When provided, a `×` rendered on the right calls it. */
     onRemove?: () => void;
     /** Optional leading icon. */
     icon?: ReactNode;
     /** Pixel height. Defaults to 22px. */
     size?: number;
+    /** Arbitrary CSS color. When set, the default neutral tint is replaced with this color. */
+    color?: string;
     children: ReactNode;
 }
 /**

package/dist/index.d.ts

@@ -585,7 +585,7 @@ declare const AccordionContent: react.ForwardRefExoticComponent<RadixAccordion.A
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type AvatarStatus = 'ok' | 'warn' | 'err' | 'off';
-interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Display name. Used to derive initials and a deterministic background color. */
     name?: string;
     /** Image source. Falls back to initials if loading fails. */
@@ -596,6 +596,11 @@ interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     status?: AvatarStatus;
     /** Override the auto-generated initials (e.g., for non-Latin scripts). */
     initials?: string;
+    /**
+     * Override the hash-derived fallback background with a literal CSS color value.
+     * Only applies when the initials fallback is shown; image avatars are unaffected.
+     */
+    color?: string;
 }
 /**
  * Person/entity avatar. Auto-generates initials and a stable background color from
@@ -622,11 +627,21 @@ declare const badgeStyles: (props?: ({
     variant?: "outline" | "err" | "pink" | "purple" | "solid" | "warn" | "ok" | "accent" | "neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeStyles> {
+/**
+ * Variant path: use one of the DS semantic variants.
+ *   <Badge variant="ok">Done</Badge>
+ *
+ * Color path (escape hatch): pass an arbitrary CSS color. When both are set,
+ * `color` wins at runtime.
+ *   <Badge color="#7c3aed">VIP</Badge>
+ */
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof badgeStyles> {
     /** Show a colored leading dot. */
     dot?: boolean;
     /** Optional leading icon (defers to children). */
     icon?: ReactNode;
+    /** Arbitrary CSS color override. When set, replaces the `variant` tint. */
+    color?: string;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -709,7 +724,7 @@ interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
 
-interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Pill-style leading icon (typically a glyph or `@`/`#`). */
     icon?: ReactNode;
     /**
@@ -722,13 +737,10 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
      * `'touch'` swaps to a roomier 32px chip with larger text for mobile filter strips.
      */
     density?: 'comfortable' | 'touch';
+    /** Arbitrary CSS color. When set, the default neutral tint is replaced with this color. */
+    color?: string;
     children: ReactNode;
 }
-/**
- * Pill-shaped filter chip. Used in command palette tag rows, search filter strips,
- * and AI suggestion lists. Differs from `Tag` by being pill-shaped (full radius)
- * and slightly more decorative.
- */
 declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
 
 type KbdProps = HTMLAttributes<HTMLElement>;
@@ -746,7 +758,7 @@ declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttribute
  * ratings step in whole units only — half-step input is uncommon UX and the
  * keyboard model (radiogroup) doesn't map cleanly to it.
  */
-interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'role'> {
+interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue' | 'role'> {
     /** Current rating (controlled). Range `0` … `max`. */
     value?: number;
     /** Default rating (uncontrolled). */
@@ -766,6 +778,8 @@ interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' |
     readOnly?: boolean;
     /** Accessible label. For read-only this overrides the auto-generated "X out of Y stars" label. */
     'aria-label'?: string;
+    /** Override the filled-star color. Accepts any CSS color. */
+    color?: string;
 }
 declare const Rating: react.ForwardRefExoticComponent<RatingProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -848,9 +862,19 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 declare const SkeletonGroup: react.ForwardRefExoticComponent<SkeletonGroupProps & react.RefAttributes<HTMLDivElement>>;
 
 type StatusState = 'ok' | 'warn' | 'err' | 'off' | 'sync' | 'accent';
-interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Semantic status. */
+/**
+ * State path: use a semantic state.
+ *   <StatusDot state="ok" />
+ *
+ * Color path (escape hatch): pass an arbitrary CSS color. When both are set,
+ * `color` wins at runtime.
+ *   <StatusDot color="#7c3aed" />
+ */
+interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Semantic state. Default `'ok'`. */
     state?: StatusState;
+    /** Arbitrary CSS color override. When set, replaces the state-derived color. */
+    color?: string;
     /** Optional label rendered next to the dot. */
     label?: ReactNode;
     /** Pulse the dot — used for `sync` state to indicate live activity. */
@@ -860,13 +884,15 @@ interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Optional close button. When provided, a `×` rendered on the right calls it. */
     onRemove?: () => void;
     /** Optional leading icon. */
     icon?: ReactNode;
     /** Pixel height. Defaults to 22px. */
     size?: number;
+    /** Arbitrary CSS color. When set, the default neutral tint is replaced with this color. */
+    color?: string;
     children: ReactNode;
 }
 /**