@cytario/design 3.1.2 → 3.2.0

package/dist/index.d.ts

@@ -773,11 +773,14 @@ declare function Pill({ children, color, className, ...rest }: PillProps): react
 
 interface PathPillProps {
     children: string;
+    /** Number of trailing segments to show; earlier ones collapse to dots. Defaults to all. */
     visibleCount?: number;
+    /** Override per-segment color. Falls back to hash-based `pillColorFromName`. */
+    colorFn?: (segment: string, index: number) => PillColor;
     className?: string;
 }
 /** Renders a slash-separated path as overlapping, hash-colored pill segments. */
-declare function PathPill({ children, visibleCount, className, }: PathPillProps): react_jsx_runtime.JSX.Element | null;
+declare function PathPill({ children, visibleCount, colorFn, className, }: PathPillProps): react_jsx_runtime.JSX.Element | null;
 
 interface FormWizardContextValue {
     /** Zero-based index of the currently active step */

package/dist/index.js

@@ -614,7 +614,7 @@ function Select({
                   sizeStyles[size]
                 ),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
-                  /* @__PURE__ */ jsx7("span", { className: "truncate", children: renderItem ? renderItem(item) : item.name }),
+                  /* @__PURE__ */ jsx7("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
                   isSelected && /* @__PURE__ */ jsx7(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
                 ] })
               }
@@ -3147,12 +3147,14 @@ import { twMerge as twMerge19 } from "tailwind-merge";
 import { jsx as jsx47 } from "react/jsx-runtime";
 function PathPill({
   children,
-  visibleCount = 1,
+  visibleCount,
+  colorFn,
   className
 }) {
   const segments = children.split("/").filter(Boolean);
   if (segments.length === 0) return null;
-  const dotCount = Math.max(0, segments.length - visibleCount);
+  const effectiveVisible = visibleCount ?? segments.length;
+  const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
   return /* @__PURE__ */ jsx47(
     "div",
@@ -3163,7 +3165,7 @@ function PathPill({
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
         const cx = twMerge19(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
-        const color = pillColorFromName(segment);
+        const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
         return /* @__PURE__ */ jsx47(
           Pill,
           {