@indico-data/design-system 3.21.0 → 3.22.0

package/lib/components/index.d.ts

@@ -20,6 +20,7 @@ export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal, ConfirmationModal } from './modal';
 export { Badge } from './badge';
+export { Pill } from './pill';
 export { Pagination } from './pagination';
 export { TanstackTable } from './tanstackTable';
 export { Tooltip } from './tooltip';

package/lib/components/pill/Pill.d.ts

@@ -1,2 +1,2 @@
 import { type PillProps } from './types';
-export declare const Pill: ({ children, className, color, size, shade, ...rest }: PillProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pill: ({ children, color, size, variant, type, iconLeft, iconRight, dot, onClose, closeAriaLabel, className, ...rest }: PillProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/pill/Pill.stories.d.ts

@@ -1,9 +1,19 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Pill } from './Pill';
-declare const meta: Meta;
+declare const meta: Meta<typeof Pill>;
 export default meta;
 type Story = StoryObj<typeof Pill>;
 export declare const Default: Story;
 export declare const AllSizes: Story;
-export declare const AllDefaultColors: Story;
-export declare const AllShades: Story;
+export declare const SolidColors: Story;
+export declare const OutlineColors: Story;
+export declare const BadgeVsPill: Story;
+export declare const WithIconLeft: Story;
+export declare const WithIconRight: Story;
+export declare const WithDot: Story;
+export declare const IconOnly: Story;
+export declare const Closeable: Story;
+export declare const Combined: Story;
+export declare const FullMatrix: Story;
+export declare const CloseableMatrix: Story;
+export declare const FigmaMatrix: Story;

package/lib/components/pill/types.d.ts

@@ -1,16 +1,29 @@
 import { type ChromaticColor } from '../../types';
+import { type IconName } from '../icons/types';
 import type React from 'react';
 export type PillSize = 'sm' | 'md' | 'lg';
-export type PillColor = ChromaticColor;
-export type PillShade = 1 | 2 | 3 | 4 | 5;
-export interface PillProps {
+export type PillColor = ChromaticColor | 'soft';
+export type PillVariant = 'solid' | 'outline';
+export type PillType = 'pill' | 'badge';
+export interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The content displayed inside the pill */
-    children: React.ReactNode | React.ReactNode[];
-    /** Applies a CSS class to change the style of the pill */
+    children?: React.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;
 }