@indico-data/design-system 3.21.0 → 3.22.0

package/lib/index.d.ts

@@ -229,18 +229,30 @@ type IconProps = PermafrostComponent & {
 };
 
 type PillSize = 'sm' | 'md' | 'lg';
-type PillColor = ChromaticColor;
-type PillShade = 1 | 2 | 3 | 4 | 5;
-interface PillProps {
+type PillColor = ChromaticColor | 'soft';
+type PillVariant = 'solid' | 'outline';
+type PillType = 'pill' | 'badge';
+interface PillProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** The content displayed inside the pill */
-    children: React$1.ReactNode | React$1.ReactNode[];
-    /** Applies a CSS class to change the style of the pill */
+    children?: React$1.ReactNode;
+    /** The color scheme, maps to component token color groups */
     color?: PillColor;
-    /** Applies a CSS class to change the size of the pill */
+    /** Controls the overall size (padding + font size) */
     size?: PillSize;
-    /** Applies a CSS class to change the shade of the pill */
-    shade?: PillShade;
-    className?: string;
+    /** Solid (filled) or outline (bordered) appearance */
+    variant?: PillVariant;
+    /** Badge has a small border-radius; pill is fully rounded */
+    type?: PillType;
+    /** Optional left icon (pass an IconName string, sizing is automatic) */
+    iconLeft?: IconName;
+    /** Optional right icon (pass an IconName string, sizing is automatic) */
+    iconRight?: IconName;
+    /** When true, renders a small colored dot indicator before the content */
+    dot?: boolean;
+    /** When provided, renders a close button that calls this handler */
+    onClose?: () => void;
+    /** Accessible label for the close button (for i18n) */
+    closeAriaLabel?: string;
 }
 
 type Direction = `${Direction$1}`;
@@ -840,7 +852,7 @@ type MenuProps = {
 };
 declare function Menu({ children, className, ...rest }: MenuProps): react_jsx_runtime.JSX.Element;
 
-declare const Pill: ({ children, className, color, size, shade, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
+declare const Pill: ({ children, color, size, variant, type, iconLeft, iconRight, dot, onClose, closeAriaLabel, className, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
 
 type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface BadgeProps {