periplo-ui 3.15.1 → 3.17.0

package/README.md

@@ -74,6 +74,37 @@
 
    - Refer to documentation for individual component usage and API reference: https://periplo-ui.vercel.app/?path=/docs/getting-started--docs
 
+## 🔧 Local Storybook Package Installation
+
+You can test this Storybook package locally before publishing by following these steps:
+
+### 📦 In the Storybook project:
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Build the project (if needed):**
+   ```bash
+   npm run build
+   ```
+
+3. **Package the project:**
+   This will generate a .tgz file in the project root.
+   ```bash
+   npm pack
+   ```
+
+### 📥 In the target project:
+
+1. **Install the package locally** (replace the path with your .tgz file path):
+   ```bash
+   npm install /path/to/your/file/periplo-ui-1.0.0.tgz --force
+   ```
+
+⚠️ Make sure to use the correct absolute or relative path to the .tgz file generated with npm pack.
+
 ## Available Commands:
 
 | Command             | Description                                                    |

package/dist/components/Badge/Badge.d.ts

@@ -1,9 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    intent?: "neutral" | "accent" | "success" | "warning" | "error" | null | undefined;
+    color?: "neutral" | "primary" | "accent" | "success" | "warning" | "error" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | null | undefined;
+    numeric?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof badgeVariants> {
     /**
@@ -15,7 +16,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantPr
      * The color variant of the badge
      * @default 'accent'
      */
-    intent?: 'neutral' | 'accent' | 'success' | 'warning' | 'error';
+    color?: 'neutral' | 'accent' | 'primary' | 'success' | 'warning' | 'error';
     /**
      * The size of the badge
      * @default 'md'
@@ -26,6 +27,10 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantPr
      * @default 'top-right'
      */
     position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /**
+     * The number to display in the badge)
+     */
+    count?: number;
 }
 /**
  * A status indicator component that can be used to show notifications,

package/dist/components/Badge/Badge.js

@@ -9,17 +9,19 @@ const badgeVariants = cva("rounded-full", {
      * Controls the color scheme of the badge
      * @default 'accent'
      */
-    intent: {
+    color: {
       /** Default gray appearance */
-      neutral: "bg-neutral",
+      neutral: "bg-neutral text-neutral-foreground",
+      /** Accent brand color */
+      accent: "bg-accent text-accent-foreground",
       /** Primary brand color */
-      accent: "bg-accent",
+      primary: "bg-primary text-primary-foreground",
       /** Indicates successful or positive state */
-      success: "bg-success",
+      success: "bg-success text-success-foreground  ",
       /** Indicates warning or cautionary state */
-      warning: "bg-warning",
+      warning: "bg-warning text-warning-foreground",
       /** Indicates error or critical state */
-      error: "bg-error"
+      error: "bg-error text-error-foreground"
     },
     /**
      * Controls the size of the badge
@@ -46,30 +48,58 @@ const badgeVariants = cva("rounded-full", {
       "bottom-right": "right-0 bottom-0",
       /** Places the badge in the bottom-left corner */
       "bottom-left": "left-0 bottom-0"
+    },
+    /**
+     * Controls whether the badge displays a number
+     * @default false
+     */
+    numeric: {
+      true: "min-w-[16px] h-4 px-1 flex items-center justify-center text-[10px] font-medium",
+      false: ""
     }
   },
   defaultVariants: {
-    intent: "accent",
+    color: "primary",
     size: "md",
-    position: "top-right"
+    position: "top-right",
+    numeric: false
   }
 });
 const Badge = React.forwardRef(
-  ({ className, intent = "accent", size = "md", position = "top-right", ping = true, ...props }, ref) => {
+  ({ className, color = "accent", size = "md", position = "top-right", ping = true, count, ...props }, ref) => {
     const sizeClasses = {
       sm: "h-2 w-2",
       md: "h-3 w-3",
       lg: "h-4 w-4"
     }[size || "md"];
-    return /* @__PURE__ */ jsxs("span", { className: cn("absolute flex", badgeVariants({ position }), sizeClasses, className), ref, ...props, children: [
-      ping && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(badgeVariants({ intent }), "absolute inline-flex h-full w-full animate-ping opacity-75")
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ intent }), "relative inline-flex h-full w-full") })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "absolute flex",
+          badgeVariants({ color, position, numeric: !!count }),
+          !count && sizeClasses,
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          ping && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(badgeVariants({ color }), "absolute inline-flex h-full w-full animate-ping opacity-75")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(badgeVariants({ color }), "relative inline-flex h-full w-full items-center justify-center"),
+              children: count
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Badge.displayName = "Badge";

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../../lib/utils'\n\nconst badgeVariants = cva('rounded-full', {\n  variants: {\n    /**\n     * Controls the color scheme of the badge\n     * @default 'accent'\n     */\n    intent: {\n      /** Default gray appearance */\n      neutral: 'bg-neutral',\n      /** Primary brand color */\n      accent: 'bg-accent',\n      /** Indicates successful or positive state */\n      success: 'bg-success',\n      /** Indicates warning or cautionary state */\n      warning: 'bg-warning',\n      /** Indicates error or critical state */\n      error: 'bg-error',\n    },\n    /**\n     * Controls the size of the badge\n     * @default 'md'\n     */\n    size: {\n      /** Small size - 8px */\n      sm: 'h-2 w-2',\n      /** Medium size - 12px */\n      md: 'h-3 w-3',\n      /** Large size - 16px */\n      lg: 'h-4 w-4',\n    },\n    /**\n     * Controls the position of the badge relative to its container\n     * @default 'top-right'\n     */\n    position: {\n      /** Places the badge in the top-right corner */\n      'top-right': 'right-0 top-0',\n      /** Places the badge in the top-left corner */\n      'top-left': 'left-0 top-0',\n      /** Places the badge in the bottom-right corner */\n      'bottom-right': 'right-0 bottom-0',\n      /** Places the badge in the bottom-left corner */\n      'bottom-left': 'left-0 bottom-0',\n    },\n  },\n  defaultVariants: {\n    intent: 'accent',\n    size: 'md',\n    position: 'top-right',\n  },\n})\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof badgeVariants> {\n  /**\n   * Controls the visibility of the pulsing animation effect\n   * @default true\n   */\n  ping?: boolean\n\n  /**\n   * The color variant of the badge\n   * @default 'accent'\n   */\n  intent?: 'neutral' | 'accent' | 'success' | 'warning' | 'error'\n\n  /**\n   * The size of the badge\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg'\n\n  /**\n   * The position of the badge relative to its container\n   * @default 'top-right'\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n}\n\n/**\n * A status indicator component that can be used to show notifications,\n * status, or draw attention to an element.\n *\n * @example\n * ```tsx\n * // Simple notification badge\n * <div className=\"relative\">\n *   <Bell className=\"h-6 w-6\" />\n *   <Badge intent=\"error\" />\n * </div>\n *\n * // Custom size and position\n * <div className=\"relative\">\n *   <Avatar />\n *   <Badge\n *     intent=\"success\"\n *     size=\"sm\"\n *     position=\"bottom-right\"\n *     ping={false}\n *   />\n * </div>\n * ```\n */\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, intent = 'accent', size = 'md', position = 'top-right', ping = true, ...props }, ref) => {\n    const sizeClasses = {\n      sm: 'h-2 w-2',\n      md: 'h-3 w-3',\n      lg: 'h-4 w-4',\n    }[size || 'md']\n\n    return (\n      <span className={cn('absolute flex', badgeVariants({ position }), sizeClasses, className)} ref={ref} {...props}>\n        {ping && (\n          <span\n            className={cn(badgeVariants({ intent }), 'absolute inline-flex h-full w-full animate-ping opacity-75')}\n          />\n        )}\n        <span className={cn(badgeVariants({ intent }), 'relative inline-flex h-full w-full')} />\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;;AAIM,MAAA,aAAA,GAAgB,IAAI,cAAgB,EAAA;AAAA,EACxC,QAAU,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,MAAQ,EAAA;AAAA;AAAA,MAEN,OAAS,EAAA,YAAA;AAAA;AAAA,MAET,MAAQ,EAAA,WAAA;AAAA;AAAA,MAER,OAAS,EAAA,YAAA;AAAA;AAAA,MAET,OAAS,EAAA,YAAA;AAAA;AAAA,MAET,KAAO,EAAA;AAAA,KACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAM,EAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,SAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,SAAA;AAAA;AAAA,MAEJ,EAAI,EAAA;AAAA,KACN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAU,EAAA;AAAA;AAAA,MAER,WAAa,EAAA,eAAA;AAAA;AAAA,MAEb,UAAY,EAAA,cAAA;AAAA;AAAA,MAEZ,cAAgB,EAAA,kBAAA;AAAA;AAAA,MAEhB,aAAe,EAAA;AAAA;AACjB,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,MAAQ,EAAA,QAAA;AAAA,IACR,IAAM,EAAA,IAAA;AAAA,IACN,QAAU,EAAA;AAAA;AAEd,CAAC;AAoDD,MAAM,QAAQ,KAAM,CAAA,UAAA;AAAA,EAClB,CAAC,EAAE,SAAW,EAAA,MAAA,GAAS,UAAU,IAAO,GAAA,IAAA,EAAM,QAAW,GAAA,WAAA,EAAa,IAAO,GAAA,IAAA,EAAM,GAAG,KAAA,IAAS,GAAQ,KAAA;AACrG,IAAA,MAAM,WAAc,GAAA;AAAA,MAClB,EAAI,EAAA,SAAA;AAAA,MACJ,EAAI,EAAA,SAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KACN,CAAE,QAAQ,IAAI,CAAA;AAEd,IAAA,uBACG,IAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,EAAA,CAAG,iBAAiB,aAAc,CAAA,EAAE,QAAS,EAAC,GAAG,WAAa,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,KACtG,EAAA,QAAA,EAAA;AAAA,MACC,IAAA,oBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,WAAW,EAAG,CAAA,aAAA,CAAc,EAAE,MAAO,EAAC,GAAG,4DAA4D;AAAA;AAAA,OACvG;AAAA,sBAEF,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,aAAA,CAAc,EAAE,MAAO,EAAC,CAAG,EAAA,oCAAoC,CAAG,EAAA;AAAA,KACxF,EAAA,CAAA;AAAA;AAGN;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../../lib/utils'\n\nconst badgeVariants = cva('rounded-full', {\n  variants: {\n    /**\n     * Controls the color scheme of the badge\n     * @default 'accent'\n     */\n    color: {\n      /** Default gray appearance */\n      neutral: 'bg-neutral text-neutral-foreground',\n      /** Accent brand color */\n      accent: 'bg-accent text-accent-foreground',\n      /** Primary brand color */\n      primary: 'bg-primary text-primary-foreground',\n      /** Indicates successful or positive state */\n      success: 'bg-success text-success-foreground  ',\n      /** Indicates warning or cautionary state */\n      warning: 'bg-warning text-warning-foreground',\n      /** Indicates error or critical state */\n      error: 'bg-error text-error-foreground',\n    },\n    /**\n     * Controls the size of the badge\n     * @default 'md'\n     */\n    size: {\n      /** Small size - 8px */\n      sm: 'h-2 w-2',\n      /** Medium size - 12px */\n      md: 'h-3 w-3',\n      /** Large size - 16px */\n      lg: 'h-4 w-4',\n    },\n    /**\n     * Controls the position of the badge relative to its container\n     * @default 'top-right'\n     */\n    position: {\n      /** Places the badge in the top-right corner */\n      'top-right': 'right-0 top-0',\n      /** Places the badge in the top-left corner */\n      'top-left': 'left-0 top-0',\n      /** Places the badge in the bottom-right corner */\n      'bottom-right': 'right-0 bottom-0',\n      /** Places the badge in the bottom-left corner */\n      'bottom-left': 'left-0 bottom-0',\n    },\n    /**\n     * Controls whether the badge displays a number\n     * @default false\n     */\n    numeric: {\n      true: 'min-w-[16px] h-4 px-1 flex items-center justify-center text-[10px] font-medium',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    position: 'top-right',\n    numeric: false,\n  },\n})\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof badgeVariants> {\n  /**\n   * Controls the visibility of the pulsing animation effect\n   * @default true\n   */\n  ping?: boolean\n\n  /**\n   * The color variant of the badge\n   * @default 'accent'\n   */\n  color?: 'neutral' | 'accent' | 'primary' | 'success' | 'warning' | 'error'\n\n  /**\n   * The size of the badge\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg'\n\n  /**\n   * The position of the badge relative to its container\n   * @default 'top-right'\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n  /**\n   * The number to display in the badge)\n   */\n  count?: number\n}\n\n/**\n * A status indicator component that can be used to show notifications,\n * status, or draw attention to an element.\n *\n * @example\n * ```tsx\n * // Simple notification badge\n * <div className=\"relative\">\n *   <Bell className=\"h-6 w-6\" />\n *   <Badge intent=\"error\" />\n * </div>\n *\n * // Custom size and position\n * <div className=\"relative\">\n *   <Avatar />\n *   <Badge\n *     intent=\"success\"\n *     size=\"sm\"\n *     position=\"bottom-right\"\n *     ping={false}\n *   />\n * </div>\n * ```\n */\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, color = 'accent', size = 'md', position = 'top-right', ping = true, count, ...props }, ref) => {\n    const sizeClasses = {\n      sm: 'h-2 w-2',\n      md: 'h-3 w-3',\n      lg: 'h-4 w-4',\n    }[size || 'md']\n\n    return (\n      <span\n        className={cn(\n          'absolute flex',\n          badgeVariants({ color, position, numeric: !!count }),\n          !count && sizeClasses,\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {ping && (\n          <span\n            className={cn(badgeVariants({ color }), 'absolute inline-flex h-full w-full animate-ping opacity-75')}\n          />\n        )}\n        <span\n          className={cn(badgeVariants({ color }), 'relative inline-flex h-full w-full items-center justify-center')}\n        >\n          {count}\n        </span>\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;;AAIM,MAAA,aAAA,GAAgB,IAAI,cAAgB,EAAA;AAAA,EACxC,QAAU,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,KAAO,EAAA;AAAA;AAAA,MAEL,OAAS,EAAA,oCAAA;AAAA;AAAA,MAET,MAAQ,EAAA,kCAAA;AAAA;AAAA,MAER,OAAS,EAAA,oCAAA;AAAA;AAAA,MAET,OAAS,EAAA,sCAAA;AAAA;AAAA,MAET,OAAS,EAAA,oCAAA;AAAA;AAAA,MAET,KAAO,EAAA;AAAA,KACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAM,EAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,SAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,SAAA;AAAA;AAAA,MAEJ,EAAI,EAAA;AAAA,KACN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAU,EAAA;AAAA;AAAA,MAER,WAAa,EAAA,eAAA;AAAA;AAAA,MAEb,UAAY,EAAA,cAAA;AAAA;AAAA,MAEZ,cAAgB,EAAA,kBAAA;AAAA;AAAA,MAEhB,aAAe,EAAA;AAAA,KACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,gFAAA;AAAA,MACN,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,KAAO,EAAA,SAAA;AAAA,IACP,IAAM,EAAA,IAAA;AAAA,IACN,QAAU,EAAA,WAAA;AAAA,IACV,OAAS,EAAA;AAAA;AAEb,CAAC;AAyDD,MAAM,QAAQ,KAAM,CAAA,UAAA;AAAA,EAClB,CAAC,EAAE,SAAW,EAAA,KAAA,GAAQ,UAAU,IAAO,GAAA,IAAA,EAAM,QAAW,GAAA,WAAA,EAAa,OAAO,IAAM,EAAA,KAAA,EAAO,GAAG,KAAA,IAAS,GAAQ,KAAA;AAC3G,IAAA,MAAM,WAAc,GAAA;AAAA,MAClB,EAAI,EAAA,SAAA;AAAA,MACJ,EAAI,EAAA,SAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KACN,CAAE,QAAQ,IAAI,CAAA;AAEd,IACE,uBAAA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA;AAAA,UACT,eAAA;AAAA,UACA,aAAA,CAAc,EAAE,KAAO,EAAA,QAAA,EAAU,SAAS,CAAC,CAAC,OAAO,CAAA;AAAA,UACnD,CAAC,KAAS,IAAA,WAAA;AAAA,UACV;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UACC,IAAA,oBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAG,CAAA,aAAA,CAAc,EAAE,KAAM,EAAC,GAAG,4DAA4D;AAAA;AAAA,WACtG;AAAA,0BAEF,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAG,CAAA,aAAA,CAAc,EAAE,KAAM,EAAC,GAAG,gEAAgE,CAAA;AAAA,cAEvG,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA;AAGN;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}

package/dist/components/DataTable/DataTable.d.ts

@@ -54,8 +54,12 @@ export type DataTableProps<TData> = {
     readonly primaryFilters?: React.ReactNode;
     /** Secondary filters that appear in the filters dropdown */
     readonly secondaryFilters?: React.ReactNode;
+    /** Number of active primary filters */
+    readonly activePrimaryFiltersCount?: number;
+    /** Number of active secondary filters */
+    readonly activeSecondaryFiltersCount?: number;
     /** Text customization for filters */
-    readonly customLabels?: {
+    readonly labels?: {
         /** Text for the column visibility button (default: "Hide columns") */
         columnVisibilityButton?: string;
         /** Text for the filters button when only secondary filters are present (default: "Filters") */
@@ -115,5 +119,5 @@ type RowIdentifierFn<T> = (row: T) => string;
  * <DataTable columns={columns} data={data} />
  * ```
  */
-export declare function DataTable<TData extends object = any>({ columns: userColumns, data, getRowId, showColumnVisibilityControls, isLoading, pagination, primaryFilters, secondaryFilters, customLabels, onSelectAll, onSelect, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends object = any>({ columns: userColumns, data, getRowId, showColumnVisibilityControls, isLoading, pagination, primaryFilters, secondaryFilters, activePrimaryFiltersCount, activeSecondaryFiltersCount, labels, onSelectAll, onSelect, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/DataTable.js

@@ -13,6 +13,7 @@ import { cn } from '../../lib/utils.js';
 import { Typography } from '../Typography/Typography.js';
 import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 import { useIsMobile } from '../../lib/useMobile.js';
+import { Badge } from '../Badge/Badge.js';
 
 function DataTable({
   columns: userColumns,
@@ -23,7 +24,9 @@ function DataTable({
   pagination,
   primaryFilters,
   secondaryFilters,
-  customLabels = {
+  activePrimaryFiltersCount = 0,
+  activeSecondaryFiltersCount = 0,
+  labels = {
     columnVisibilityButton: "Hide columns",
     filters: "Filters",
     moreFilters: "More filters"
@@ -158,14 +161,25 @@ function DataTable({
       !isMobile && (primaryFilters ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: primaryFilters }) : /* @__PURE__ */ jsx("div", {})),
       /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", isMobile ? "w-full justify-end" : ""), children: [
         (isMobile ? primaryFilters || secondaryFilters : secondaryFilters) && /* @__PURE__ */ jsxs(PopoverRoot, { children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", StartIcon: FunnelSimple, children: !primaryFilters || isMobile ? customLabels.filters : customLabels.moreFilters }) }),
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "text", size: "sm", StartIcon: FunnelSimple, className: "relative whitespace-nowrap", children: [
+            (isMobile && activePrimaryFiltersCount + activeSecondaryFiltersCount > 0 || !isMobile && activeSecondaryFiltersCount > 0) && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                count: isMobile ? activePrimaryFiltersCount + activeSecondaryFiltersCount : activeSecondaryFiltersCount,
+                color: "primary",
+                ping: false,
+                className: "absolute -right-1 -top-1"
+              }
+            ),
+            !primaryFilters || isMobile ? labels.filters : labels.moreFilters
+          ] }) }),
           /* @__PURE__ */ jsx(PopoverContent, { align: "center", className: "w-fit p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
             isMobile && primaryFilters && primaryFilters,
             secondaryFilters
           ] }) })
         ] }),
         showColumnVisibilityControls && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", className: cn("whitespace-nowrap"), StartIcon: TextColumns, children: customLabels.columnVisibilityButton ?? "Hide columns" }) }),
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", className: cn("whitespace-nowrap"), StartIcon: TextColumns, children: labels.columnVisibilityButton ?? "Hide columns" }) }),
           /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
             /* @__PURE__ */ jsx(
               DropdownMenuCheckboxItem,

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Button } from '../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../DropdownMenu'\nimport { Skeleton } from '../Skeleton'\nimport { Table as TableComponent, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../Table'\nimport { DataTablePagination } from './DataTablePagination'\nimport { Checkbox } from '../Checkbox'\nimport { TextColumns, FunnelSimple } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\nimport { Typography } from '../Typography'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { useIsMobile } from '@/lib/useMobile'\n\ntype BasePaginationProps = {\n  /** Number of rows per page */\n  readonly pageSize: number\n  /** Whether the pagination is in a loading state */\n  readonly isLoading?: boolean\n  /** Text customization for pagination */\n  readonly labels?: {\n    /** Text shown before the page size number (default: \"Showing\") */\n    showing?: string\n    /** Text shown before the total number (default: \"of\") */\n    of?: string\n    /** Text shown after the total number (default: \"results\") */\n    results?: string\n    /** Aria label for previous page button (default: \"Previous page\") */\n    previousPage?: string\n    /** Aria label for next page button (default: \"Next page\") */\n    nextPage?: string\n    /** Aria label for page number (default: \"Page {number}\") */\n    pageLabel?: string\n  }\n}\n\ntype BackendPaginationProps = BasePaginationProps & {\n  /** Current page */\n  readonly currentPage: number\n  /** Total number of items */\n  readonly total: number\n  /** Callback when page changes */\n  readonly onPageChange: (page: number) => void\n}\n\n/**\n * Type helper to check if a type has an 'id' property\n */\ntype HasId<T> = T extends { id: string | number } ? true : false\n\n/**\n * Props for the DataTable component\n * @template TData The type of data being displayed in the table\n */\nexport type DataTableProps<TData> = {\n  /** Array of column definitions that describe the table structure */\n  readonly columns: Array<ColumnDef<TData>>\n  /** Array of data items to be displayed in the table */\n  readonly data: Array<TData>\n  /** Whether to show the column visibility toggle menu */\n  readonly showColumnVisibilityControls?: boolean\n  /** Whether the table is in a loading state */\n  readonly isLoading?: boolean\n  /** Pagination configuration. If not provided, pagination is disabled */\n  readonly pagination?: BasePaginationProps | BackendPaginationProps\n  /** Primary filters that appear directly above the table */\n  readonly primaryFilters?: React.ReactNode\n  /** Secondary filters that appear in the filters dropdown */\n  readonly secondaryFilters?: React.ReactNode\n  /** Text customization for filters */\n  readonly customLabels?: {\n    /** Text for the column visibility button (default: \"Hide columns\") */\n    columnVisibilityButton?: string\n    /** Text for the filters button when only secondary filters are present (default: \"Filters\") */\n    filters?: string\n    /** Text for the more filters button when both primary and secondary filters are present (default: \"More filters\") */\n    moreFilters?: string\n  }\n  /** Callback when all rows are selected */\n  readonly onSelectAll?: (selected: boolean) => void\n  /** Callback when a row is selected */\n  readonly onSelect?: (selected: boolean, row: TData) => void\n  /** Optional className for the table container */\n  readonly className?: string\n  /** Optional className for the table */\n  readonly tableClassName?: string\n} & (HasId<TData> extends true\n  ? {\n      /** Function to get unique identifier from a row. Not needed when data has 'id' property */\n      readonly getRowId?: never\n    }\n  : {\n      /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */\n      readonly getRowId: RowIdentifierFn<TData>\n    })\n\n/**\n * Function to get a unique identifier from a row\n */\ntype RowIdentifierFn<T> = (row: T) => string\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n *\n * @template TData The type of data being displayed in the table\n *\n * @example\n * ```tsx\n * type User = {\n *   id: string;\n *   name: string;\n *   email: string;\n * };\n *\n * const columns: ColumnDef<User>[] = [\n *   {\n *     accessorKey: 'name',\n *     header: 'Name',\n *   },\n *   {\n *     accessorKey: 'email',\n *     header: 'Email',\n *   },\n * ];\n *\n * const data: User[] = [\n *   { id: '1', name: 'John', email: 'john@example.com' },\n *   { id: '2', name: 'Jane', email: 'jane@example.com' },\n * ];\n *\n * <DataTable columns={columns} data={data} />\n * ```\n */\nexport function DataTable<TData extends object = any>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string })?.id,\n  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  customLabels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  onSelectAll,\n  onSelect,\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const isMobile = useIsMobile()\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [isAllRowsSelected, setIsAllRowsSelected] = React.useState(false)\n  const [deselectedRows, setDeselectedRows] = React.useState<Record<string, boolean>>({})\n  const [selectedRows, setSelectedRows] = React.useState<Record<string, boolean>>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const isBackendPagination = pagination && 'onPageChange' in pagination\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? data.length\n  const totalPages = Math.ceil(total / pageSize)\n\n  const isSelectable = typeof onSelectAll === 'function' || typeof onSelect === 'function'\n\n  const handleSelectAll = (checked: boolean) => {\n    setIsAllRowsSelected(checked)\n    setDeselectedRows({})\n    setSelectedRows({})\n    onSelectAll?.(checked)\n  }\n\n  const handleRowSelect = (checked: boolean, rowData: TData) => {\n    const rowId = (getRowId as (row: TData) => string)(rowData)\n\n    if (isAllRowsSelected) {\n      setDeselectedRows((prev) => {\n        const newDeselections = { ...prev }\n        if (!checked) {\n          newDeselections[rowId] = true\n        } else {\n          delete newDeselections[rowId]\n        }\n        return newDeselections\n      })\n    } else {\n      setSelectedRows((prev) => {\n        const newSelection = { ...prev }\n        if (checked) {\n          newSelection[rowId] = true\n        } else {\n          delete newSelection[rowId]\n        }\n        return newSelection\n      })\n    }\n\n    onSelect?.(checked, rowData)\n  }\n\n  const rowSelection = React.useMemo(() => {\n    if (isAllRowsSelected) {\n      return Object.fromEntries(\n        data.map((row) => [\n          (getRowId as (row: TData) => string)(row),\n          !deselectedRows[(getRowId as (row: TData) => string)(row)],\n        ]),\n      )\n    }\n    return selectedRows\n  }, [data, isAllRowsSelected, deselectedRows, selectedRows, getRowId])\n\n  const table = useReactTable({\n    data,\n    columns: userColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: pagination && !isBackendPagination ? getPaginationRowModel() : undefined,\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: isSelectable,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\n      rowSelection,\n      pagination: pagination\n        ? {\n            pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n            pageSize,\n          }\n        : undefined,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination\n      ? undefined\n      : (updater) => {\n          if (typeof updater === 'function') {\n            const newState = updater({ pageIndex, pageSize })\n            setPageIndex(newState.pageIndex)\n          }\n        },\n  })\n\n  const renderTableBody = () => {\n    if (isLoading) {\n      return Array.from({ length: pageSize ?? 10 }).map((_, rowIndex) => (\n        <TableRow key={`skeleton-row-${rowIndex.toString()}`}>\n          {isSelectable && (\n            <TableCell className=\"w-[50px]\">\n              <Checkbox checked={false} disabled />\n            </TableCell>\n          )}\n          {table\n            .getAllColumns()\n            .filter((column) => column.getIsVisible())\n            .map((column) => (\n              <TableCell\n                key={`skeleton-cell-${rowIndex.toString()}-${column.id}`}\n                style={{ width: column.columnDef.size }}\n              >\n                <div className={cn('flex items-center justify-center', column.id === 'actions' && 'justify-end')}>\n                  <Skeleton className={cn(column.id === 'actions' ? 'h-8 w-8' : 'h-[20px] w-full')} />\n                </div>\n              </TableCell>\n            ))}\n        </TableRow>\n      ))\n    }\n\n    if (data.length === 0) {\n      return (\n        <TableRow>\n          <TableCell\n            colSpan={isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length}\n            className=\"h-[200px] text-center\"\n          >\n            <Typography color=\"neutral\">No data available</Typography>\n          </TableCell>\n        </TableRow>\n      )\n    }\n\n    return table.getRowModel().rows.map((row) => {\n      const rowId = (getRowId as (row: TData) => string)(row.original)\n      const isSelected = rowSelection[rowId] ?? false\n\n      return (\n        <TableRow key={rowId} data-selected={isSelected}>\n          {isSelectable && (\n            <TableCell className=\"w-[50px]\">\n              <Checkbox\n                checked={isSelected}\n                onCheckedChange={(checked) => {\n                  const isChecked = checked === true\n                  handleRowSelect(isChecked, row.original)\n                }}\n                aria-label={`Select row ${rowId}`}\n              />\n            </TableCell>\n          )}\n          {row.getVisibleCells().map((cell) => (\n            <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n              <Typography>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Typography>\n            </TableCell>\n          ))}\n        </TableRow>\n      )\n    })\n  }\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      {(showColumnVisibilityControls || primaryFilters || secondaryFilters) && (\n        <div className=\"flex flex-shrink-0 items-end justify-between p-1\">\n          {!isMobile && (primaryFilters ? <div className=\"flex items-center gap-2\">{primaryFilters}</div> : <div />)}\n          <div className={cn('flex items-center gap-2', isMobile ? 'w-full justify-end' : '')}>\n            {(isMobile ? primaryFilters || secondaryFilters : secondaryFilters) && (\n              <PopoverRoot>\n                <PopoverTrigger asChild>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple}>\n                    {!primaryFilters || isMobile ? customLabels.filters : customLabels.moreFilters}\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"center\" className=\"w-fit p-4\">\n                  <div className=\"flex flex-col gap-4\">\n                    {isMobile && primaryFilters && primaryFilters}\n                    {secondaryFilters}\n                  </div>\n                </PopoverContent>\n              </PopoverRoot>\n            )}\n            {showColumnVisibilityControls && (\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                    {customLabels.columnVisibilityButton ?? 'Hide columns'}\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuCheckboxItem\n                    key={'all-columns'}\n                    className=\"capitalize\"\n                    checked={table.getAllColumns().every((column) => column.getIsVisible())}\n                    onSelect={(event) => event.preventDefault()}\n                    onCheckedChange={(value) =>\n                      table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n                    }\n                  >\n                    Select all\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                  {table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .map((column) => {\n                      return (\n                        <DropdownMenuCheckboxItem\n                          key={column.id}\n                          className=\"capitalize\"\n                          checked={column.getIsVisible()}\n                          onSelect={(event) => event.preventDefault()}\n                          onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                        >\n                          {column.columnDef.header?.toString()}\n                        </DropdownMenuCheckboxItem>\n                      )\n                    })}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n          </div>\n        </div>\n      )}\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <div className=\"h-full overflow-auto\">\n            <TableComponent className=\"w-full\" tableClassName={cn('table-fixed', tableClassName)}>\n              <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {isSelectable && (\n                      <TableHead className=\"w-[50px]\">\n                        <Checkbox\n                          checked={isAllRowsSelected}\n                          onCheckedChange={handleSelectAll}\n                          disabled={isLoading || !data.length}\n                          aria-label=\"Select all rows\"\n                        />\n                      </TableHead>\n                    )}\n                    {headerGroup.headers.map((header) => (\n                      <TableHead\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                        </Typography>\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody>{renderTableBody()}</TableBody>\n            </TableComponent>\n          </div>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={\n                isBackendPagination ? pagination?.currentPage : table.getState().pagination?.pageIndex + 1 || 1\n              }\n              totalPages={totalPages}\n              onPageChange={isBackendPagination ? pagination?.onPageChange : undefined}\n              isLoading={pagination?.isLoading}\n              labels={pagination?.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsJO;AAA+C;AAC3C;AACT;AACoD;AACrB;AACnB;AACZ;AACA;AACA;AACe;AACW;AACf;AACI;AACf;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACE;AACA;AACA;AACA;AAAqB;AAGvB;AACE;AAEA;AACE;AACE;AACA;AACE;AAAyB;AAEzB;AAA4B;AAE9B;AAAO;AACR;AAED;AACE;AACA;AACE;AAAsB;AAEtB;AAAyB;AAE3B;AAAO;AACR;AAGH;AAA2B;AAG7B;AACE;AACE;AAAc;AACM;AACwB;AACiB;AAC1D;AACH;AAEF;AAAO;AAGT;AAA4B;AAC1B;AACS;AACwB;AACqD;AAC5D;AACN;AACpB;AACO;AACL;AACA;AAEI;AACgE;AAC9D;AAEF;AACN;AACkB;AAIZ;AACE;AACA;AAA+B;AACjC;AACF;AAGN;AACE;AACE;AAEK;AAGC;AAME;AAAC;AAAA;AAEuC;AAItC;AAAA;AALsD;AAOzD;AAEN;AAGH;AACE;AAEI;AAAC;AAAA;AACkF;AACvE;AAEmC;AAAA;AAEjD;AAIJ;AACE;AACA;AAEA;AAEK;AAEG;AAAC;AAAA;AACU;AAEP;AACA;AAAuC;AACzC;AAC+B;AAAA;AAEnC;AAMD;AACH;AAEH;AAGH;AAEM;AAEG;AAAsG;AAEnG;AAEE;AAIA;AAGK;AAA8B;AAC9B;AAEL;AACF;AAIE;AAIA;AAEE;AAAA;AAAC;AAAA;AAEW;AAC4D;AAC5B;AAEkC;AAE7E;AAAA;AAPM;AASP;AACkD;AAK9C;AACE;AAAC;AAAA;AAEW;AACmB;AACa;AACiB;AAExB;AAAA;AANvB;AAOd;AAEH;AACL;AACF;AAEJ;AACF;AAIA;AAGM;AAGO;AAEG;AAAC;AAAA;AACU;AACQ;AACY;AAClB;AAAA;AAEf;AAGA;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAUf;AAGP;AAC8B;AAGpC;AAGI;AAAC;AAAA;AACC;AACA;AACA;AAEgG;AAEhG;AAC+D;AACxC;AACH;AAAA;AAExB;AAEJ;AAGN;;"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Button } from '../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../DropdownMenu'\nimport { Skeleton } from '../Skeleton'\nimport { Table as TableComponent, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../Table'\nimport { DataTablePagination } from './DataTablePagination'\nimport { Checkbox } from '../Checkbox'\nimport { TextColumns, FunnelSimple } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\nimport { Typography } from '../Typography'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { Badge } from '../Badge'\n\ntype BasePaginationProps = {\n  /** Number of rows per page */\n  readonly pageSize: number\n  /** Whether the pagination is in a loading state */\n  readonly isLoading?: boolean\n  /** Text customization for pagination */\n  readonly labels?: {\n    /** Text shown before the page size number (default: \"Showing\") */\n    showing?: string\n    /** Text shown before the total number (default: \"of\") */\n    of?: string\n    /** Text shown after the total number (default: \"results\") */\n    results?: string\n    /** Aria label for previous page button (default: \"Previous page\") */\n    previousPage?: string\n    /** Aria label for next page button (default: \"Next page\") */\n    nextPage?: string\n    /** Aria label for page number (default: \"Page {number}\") */\n    pageLabel?: string\n  }\n}\n\ntype BackendPaginationProps = BasePaginationProps & {\n  /** Current page */\n  readonly currentPage: number\n  /** Total number of items */\n  readonly total: number\n  /** Callback when page changes */\n  readonly onPageChange: (page: number) => void\n}\n\n/**\n * Type helper to check if a type has an 'id' property\n */\ntype HasId<T> = T extends { id: string | number } ? true : false\n\n/**\n * Props for the DataTable component\n * @template TData The type of data being displayed in the table\n */\nexport type DataTableProps<TData> = {\n  /** Array of column definitions that describe the table structure */\n  readonly columns: Array<ColumnDef<TData>>\n  /** Array of data items to be displayed in the table */\n  readonly data: Array<TData>\n  /** Whether to show the column visibility toggle menu */\n  readonly showColumnVisibilityControls?: boolean\n  /** Whether the table is in a loading state */\n  readonly isLoading?: boolean\n  /** Pagination configuration. If not provided, pagination is disabled */\n  readonly pagination?: BasePaginationProps | BackendPaginationProps\n  /** Primary filters that appear directly above the table */\n  readonly primaryFilters?: React.ReactNode\n  /** Secondary filters that appear in the filters dropdown */\n  readonly secondaryFilters?: React.ReactNode\n  /** Number of active primary filters */\n  readonly activePrimaryFiltersCount?: number\n  /** Number of active secondary filters */\n  readonly activeSecondaryFiltersCount?: number\n  /** Text customization for filters */\n  readonly labels?: {\n    /** Text for the column visibility button (default: \"Hide columns\") */\n    columnVisibilityButton?: string\n    /** Text for the filters button when only secondary filters are present (default: \"Filters\") */\n    filters?: string\n    /** Text for the more filters button when both primary and secondary filters are present (default: \"More filters\") */\n    moreFilters?: string\n  }\n  /** Callback when all rows are selected */\n  readonly onSelectAll?: (selected: boolean) => void\n  /** Callback when a row is selected */\n  readonly onSelect?: (selected: boolean, row: TData) => void\n  /** Optional className for the table container */\n  readonly className?: string\n  /** Optional className for the table */\n  readonly tableClassName?: string\n} & (HasId<TData> extends true\n  ? {\n      /** Function to get unique identifier from a row. Not needed when data has 'id' property */\n      readonly getRowId?: never\n    }\n  : {\n      /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */\n      readonly getRowId: RowIdentifierFn<TData>\n    })\n\n/**\n * Function to get a unique identifier from a row\n */\ntype RowIdentifierFn<T> = (row: T) => string\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n *\n * @template TData The type of data being displayed in the table\n *\n * @example\n * ```tsx\n * type User = {\n *   id: string;\n *   name: string;\n *   email: string;\n * };\n *\n * const columns: ColumnDef<User>[] = [\n *   {\n *     accessorKey: 'name',\n *     header: 'Name',\n *   },\n *   {\n *     accessorKey: 'email',\n *     header: 'Email',\n *   },\n * ];\n *\n * const data: User[] = [\n *   { id: '1', name: 'John', email: 'john@example.com' },\n *   { id: '2', name: 'Jane', email: 'jane@example.com' },\n * ];\n *\n * <DataTable columns={columns} data={data} />\n * ```\n */\nexport function DataTable<TData extends object = any>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string })?.id,\n  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  labels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  onSelectAll,\n  onSelect,\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const isMobile = useIsMobile()\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [isAllRowsSelected, setIsAllRowsSelected] = React.useState(false)\n  const [deselectedRows, setDeselectedRows] = React.useState<Record<string, boolean>>({})\n  const [selectedRows, setSelectedRows] = React.useState<Record<string, boolean>>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const isBackendPagination = pagination && 'onPageChange' in pagination\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? data.length\n  const totalPages = Math.ceil(total / pageSize)\n\n  const isSelectable = typeof onSelectAll === 'function' || typeof onSelect === 'function'\n\n  const handleSelectAll = (checked: boolean) => {\n    setIsAllRowsSelected(checked)\n    setDeselectedRows({})\n    setSelectedRows({})\n    onSelectAll?.(checked)\n  }\n\n  const handleRowSelect = (checked: boolean, rowData: TData) => {\n    const rowId = (getRowId as (row: TData) => string)(rowData)\n\n    if (isAllRowsSelected) {\n      setDeselectedRows((prev) => {\n        const newDeselections = { ...prev }\n        if (!checked) {\n          newDeselections[rowId] = true\n        } else {\n          delete newDeselections[rowId]\n        }\n        return newDeselections\n      })\n    } else {\n      setSelectedRows((prev) => {\n        const newSelection = { ...prev }\n        if (checked) {\n          newSelection[rowId] = true\n        } else {\n          delete newSelection[rowId]\n        }\n        return newSelection\n      })\n    }\n\n    onSelect?.(checked, rowData)\n  }\n\n  const rowSelection = React.useMemo(() => {\n    if (isAllRowsSelected) {\n      return Object.fromEntries(\n        data.map((row) => [\n          (getRowId as (row: TData) => string)(row),\n          !deselectedRows[(getRowId as (row: TData) => string)(row)],\n        ]),\n      )\n    }\n    return selectedRows\n  }, [data, isAllRowsSelected, deselectedRows, selectedRows, getRowId])\n\n  const table = useReactTable({\n    data,\n    columns: userColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: pagination && !isBackendPagination ? getPaginationRowModel() : undefined,\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: isSelectable,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\n      rowSelection,\n      pagination: pagination\n        ? {\n            pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n            pageSize,\n          }\n        : undefined,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination\n      ? undefined\n      : (updater) => {\n          if (typeof updater === 'function') {\n            const newState = updater({ pageIndex, pageSize })\n            setPageIndex(newState.pageIndex)\n          }\n        },\n  })\n\n  const renderTableBody = () => {\n    if (isLoading) {\n      return Array.from({ length: pageSize ?? 10 }).map((_, rowIndex) => (\n        <TableRow key={`skeleton-row-${rowIndex.toString()}`}>\n          {isSelectable && (\n            <TableCell className=\"w-[50px]\">\n              <Checkbox checked={false} disabled />\n            </TableCell>\n          )}\n          {table\n            .getAllColumns()\n            .filter((column) => column.getIsVisible())\n            .map((column) => (\n              <TableCell\n                key={`skeleton-cell-${rowIndex.toString()}-${column.id}`}\n                style={{ width: column.columnDef.size }}\n              >\n                <div className={cn('flex items-center justify-center', column.id === 'actions' && 'justify-end')}>\n                  <Skeleton className={cn(column.id === 'actions' ? 'h-8 w-8' : 'h-[20px] w-full')} />\n                </div>\n              </TableCell>\n            ))}\n        </TableRow>\n      ))\n    }\n\n    if (data.length === 0) {\n      return (\n        <TableRow>\n          <TableCell\n            colSpan={isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length}\n            className=\"h-[200px] text-center\"\n          >\n            <Typography color=\"neutral\">No data available</Typography>\n          </TableCell>\n        </TableRow>\n      )\n    }\n\n    return table.getRowModel().rows.map((row) => {\n      const rowId = (getRowId as (row: TData) => string)(row.original)\n      const isSelected = rowSelection[rowId] ?? false\n\n      return (\n        <TableRow key={rowId} data-selected={isSelected}>\n          {isSelectable && (\n            <TableCell className=\"w-[50px]\">\n              <Checkbox\n                checked={isSelected}\n                onCheckedChange={(checked) => {\n                  const isChecked = checked === true\n                  handleRowSelect(isChecked, row.original)\n                }}\n                aria-label={`Select row ${rowId}`}\n              />\n            </TableCell>\n          )}\n          {row.getVisibleCells().map((cell) => (\n            <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n              <Typography>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Typography>\n            </TableCell>\n          ))}\n        </TableRow>\n      )\n    })\n  }\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      {(showColumnVisibilityControls || primaryFilters || secondaryFilters) && (\n        <div className=\"flex flex-shrink-0 items-end justify-between p-1\">\n          {!isMobile && (primaryFilters ? <div className=\"flex items-center gap-2\">{primaryFilters}</div> : <div />)}\n          <div className={cn('flex items-center gap-2', isMobile ? 'w-full justify-end' : '')}>\n            {(isMobile ? primaryFilters || secondaryFilters : secondaryFilters) && (\n              <PopoverRoot>\n                <PopoverTrigger asChild>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                    {((isMobile && activePrimaryFiltersCount + activeSecondaryFiltersCount > 0) ||\n                      (!isMobile && activeSecondaryFiltersCount > 0)) && (\n                      <Badge\n                        count={\n                          isMobile\n                            ? activePrimaryFiltersCount + activeSecondaryFiltersCount\n                            : activeSecondaryFiltersCount\n                        }\n                        color=\"primary\"\n                        ping={false}\n                        className=\"absolute -right-1 -top-1\"\n                      />\n                    )}\n                    {!primaryFilters || isMobile ? labels.filters : labels.moreFilters}\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"center\" className=\"w-fit p-4\">\n                  <div className=\"flex flex-col gap-4\">\n                    {isMobile && primaryFilters && primaryFilters}\n                    {secondaryFilters}\n                  </div>\n                </PopoverContent>\n              </PopoverRoot>\n            )}\n            {showColumnVisibilityControls && (\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                    {labels.columnVisibilityButton ?? 'Hide columns'}\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuCheckboxItem\n                    key={'all-columns'}\n                    className=\"capitalize\"\n                    checked={table.getAllColumns().every((column) => column.getIsVisible())}\n                    onSelect={(event) => event.preventDefault()}\n                    onCheckedChange={(value) =>\n                      table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n                    }\n                  >\n                    Select all\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                  {table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .map((column) => {\n                      return (\n                        <DropdownMenuCheckboxItem\n                          key={column.id}\n                          className=\"capitalize\"\n                          checked={column.getIsVisible()}\n                          onSelect={(event) => event.preventDefault()}\n                          onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                        >\n                          {column.columnDef.header?.toString()}\n                        </DropdownMenuCheckboxItem>\n                      )\n                    })}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n          </div>\n        </div>\n      )}\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <div className=\"h-full overflow-auto\">\n            <TableComponent className=\"w-full\" tableClassName={cn('table-fixed', tableClassName)}>\n              <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {isSelectable && (\n                      <TableHead className=\"w-[50px]\">\n                        <Checkbox\n                          checked={isAllRowsSelected}\n                          onCheckedChange={handleSelectAll}\n                          disabled={isLoading || !data.length}\n                          aria-label=\"Select all rows\"\n                        />\n                      </TableHead>\n                    )}\n                    {headerGroup.headers.map((header) => (\n                      <TableHead\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                        </Typography>\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody>{renderTableBody()}</TableBody>\n            </TableComponent>\n          </div>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={\n                isBackendPagination ? pagination?.currentPage : table.getState().pagination?.pageIndex + 1 || 1\n              }\n              totalPages={totalPages}\n              onPageChange={isBackendPagination ? pagination?.onPageChange : undefined}\n              isLoading={pagination?.isLoading}\n              labels={pagination?.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2JO;AAA+C;AAC3C;AACT;AACoD;AACrB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AACrB;AACiB;AACf;AACI;AACf;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACE;AACA;AACA;AACA;AAAqB;AAGvB;AACE;AAEA;AACE;AACE;AACA;AACE;AAAyB;AAEzB;AAA4B;AAE9B;AAAO;AACR;AAED;AACE;AACA;AACE;AAAsB;AAEtB;AAAyB;AAE3B;AAAO;AACR;AAGH;AAA2B;AAG7B;AACE;AACE;AAAc;AACM;AACwB;AACiB;AAC1D;AACH;AAEF;AAAO;AAGT;AAA4B;AAC1B;AACS;AACwB;AACqD;AAC5D;AACN;AACpB;AACO;AACL;AACA;AAEI;AACgE;AAC9D;AAEF;AACN;AACkB;AAIZ;AACE;AACA;AAA+B;AACjC;AACF;AAGN;AACE;AACE;AAEK;AAGC;AAME;AAAC;AAAA;AAEuC;AAItC;AAAA;AALsD;AAOzD;AAEN;AAGH;AACE;AAEI;AAAC;AAAA;AACkF;AACvE;AAEmC;AAAA;AAEjD;AAIJ;AACE;AACA;AAEA;AAEK;AAEG;AAAC;AAAA;AACU;AAEP;AACA;AAAuC;AACzC;AAC+B;AAAA;AAEnC;AAMD;AACH;AAEH;AAGH;AAEM;AAEG;AAAsG;AAEnG;AAEE;AAEO;AAED;AAAC;AAAA;AAIO;AAEA;AACA;AACI;AAAA;AACZ;AAEqD;AAE3D;AAGK;AAA8B;AAC9B;AAEL;AACF;AAIE;AAIA;AAEE;AAAA;AAAC;AAAA;AAEW;AAC4D;AAC5B;AAEkC;AAE7E;AAAA;AAPM;AASP;AACkD;AAK9C;AACE;AAAC;AAAA;AAEW;AACmB;AACa;AACiB;AAExB;AAAA;AANvB;AAOd;AAEH;AACL;AACF;AAEJ;AACF;AAIA;AAGM;AAGO;AAEG;AAAC;AAAA;AACU;AACQ;AACY;AAClB;AAAA;AAEf;AAGA;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAUf;AAGP;AAC8B;AAGpC;AAGI;AAAC;AAAA;AACC;AACA;AACA;AAEgG;AAEhG;AAC+D;AACxC;AACH;AAAA;AAExB;AAEJ;AAGN;;"}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -37,3 +37,4 @@ declare namespace DatePicker {
     var displayName: string;
 }
 export { DatePicker };
+export type { DateRange };

package/dist/components/DatePicker/DatePicker.js

@@ -86,15 +86,15 @@ function DatePicker(props) {
         id: rest.id,
         variant: "ghost",
         className: cn(
-          "w-fit justify-start text-left font-normal",
+          "relative flex w-fit items-center justify-start text-left font-normal",
           !(variant === "single" ? singleDate : dateRange) && "text-muted-foreground",
           buttonVariants({ variant: "input" }),
           buttonClassName
         ),
         disabled: typeof rest.disabled === "boolean" ? rest.disabled : false,
         children: [
-          /* @__PURE__ */ jsx(CalendarBlank, { className: "mr-2 h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { children: formatDate() })
+          /* @__PURE__ */ jsx(CalendarBlank, { className: "absolute left-4 h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "w-full pl-7 text-center", children: formatDate() })
         ]
       }
     ) }),

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { format } from 'date-fns'\nimport { DateRange, PropsBase } from 'react-day-picker'\n\nimport { cn } from '@/lib/utils'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { Button, buttonVariants } from '../Button'\nimport { Calendar } from '../Calendar'\nimport { CalendarBlank } from '@phosphor-icons/react'\n\ntype BaseDatePickerProps = {\n  /**\n   * Placeholder text displayed when no date is selected\n   * @default 'Pick a date'\n   */\n  placeholder?: string\n  /**\n   * Format string to use when displaying the selected date\n   * @default 'MMM d, yyyy'\n   */\n  format?: string\n  /**\n   * ClassName for the button\n   */\n  buttonClassName?: string\n} & Omit<PropsBase, 'mode' | 'selected' | 'onSelect'>\n\ntype SingleDatePickerProps = {\n  variant?: 'single'\n  value?: Date\n  initialValue?: Date\n  onChange?: (date: Date | undefined) => void\n  closeOnSelect?: boolean\n  showYearSwitcher?: boolean\n} & BaseDatePickerProps\n\ntype RangeDatePickerProps = {\n  variant: 'range'\n  value?: DateRange\n  initialValue?: DateRange\n  onChange?: (date: DateRange | undefined) => void\n  closeOnSelect?: never\n  showYearSwitcher?: never\n} & BaseDatePickerProps\n\nexport type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps\n\nfunction isDateRange(value: any): value is DateRange {\n  return typeof value === 'object' && value !== null && 'from' in value\n}\n\nfunction DatePicker(props: DatePickerProps) {\n  const {\n    variant = 'single',\n    placeholder = variant === 'single' ? 'Pick a date' : 'Pick a date range',\n    initialValue,\n    value,\n    onChange,\n    buttonClassName,\n    closeOnSelect = variant === 'single',\n    showYearSwitcher = variant === 'single',\n    ...rest\n  } = props\n\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const [internalSingleDate, setInternalSingleDate] = React.useState<Date | undefined>(\n    variant === 'single' && initialValue instanceof Date ? initialValue : undefined,\n  )\n  const [internalDateRange, setInternalDateRange] = React.useState<DateRange | undefined>(\n    variant === 'range' && isDateRange(initialValue) ? initialValue : undefined,\n  )\n\n  const singleDate = variant === 'single' && value instanceof Date ? value : internalSingleDate\n  const dateRange = variant === 'range' && isDateRange(value) ? value : internalDateRange\n\n  const handleSelect = React.useCallback(\n    (selectedDate: Date | DateRange | undefined) => {\n      if (variant === 'single') {\n        const date = selectedDate as Date | undefined\n        setInternalSingleDate(date)\n        if (onChange && typeof onChange === 'function') (onChange as (date: Date | undefined) => void)(date)\n        if (closeOnSelect) {\n          setIsOpen(false)\n        }\n      } else {\n        const range = selectedDate as DateRange | undefined\n        setInternalDateRange(range)\n        if (onChange && typeof onChange === 'function') (onChange as (range: DateRange | undefined) => void)(range)\n      }\n    },\n    [variant, onChange, closeOnSelect],\n  )\n\n  const formatDate = () => {\n    if (variant === 'single') {\n      return singleDate ? format(singleDate, rest.format ?? 'MMM d, yyyy') : placeholder\n    }\n\n    if (!dateRange) return placeholder\n    return `${dateRange.from ? format(dateRange.from, rest.format ?? 'MMM d, yyyy') : ''} - ${\n      dateRange.to ? format(dateRange.to, rest.format ?? 'MMM d, yyyy') : ''\n    }`\n  }\n\n  const calendarProps = React.useMemo(() => {\n    const baseProps = {\n      ...rest,\n      initialFocus: true,\n    }\n\n    if (variant === 'single') {\n      return {\n        ...baseProps,\n        mode: 'single' as const,\n        selected: singleDate,\n        onSelect: (date: Date | undefined) => handleSelect(date),\n        defaultMonth: singleDate ?? new Date(),\n      }\n    }\n\n    return {\n      ...baseProps,\n      mode: 'range' as const,\n      selected: dateRange,\n      onSelect: (range: DateRange | undefined) => handleSelect(range),\n      defaultMonth: dateRange?.from ?? new Date(),\n      numberOfMonths: rest.numberOfMonths ?? 2,\n    }\n  }, [variant, rest, singleDate, dateRange, handleSelect])\n\n  return (\n    <PopoverRoot open={isOpen} onOpenChange={setIsOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={rest.id}\n          variant=\"ghost\"\n          className={cn(\n            'w-fit justify-start text-left font-normal',\n            !(variant === 'single' ? singleDate : dateRange) && 'text-muted-foreground',\n            buttonVariants({ variant: 'input' }),\n            buttonClassName,\n          )}\n          disabled={typeof rest.disabled === 'boolean' ? rest.disabled : false}\n        >\n          <CalendarBlank className=\"mr-2 h-4 w-4 shrink-0\" />\n          <span>{formatDate()}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"center\">\n        <Calendar\n          {...calendarProps}\n          className=\"border-0\"\n          showYearSwitcher={variant === 'single' ? showYearSwitcher : false}\n        />\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n"],"names":[],"mappings":";;;;;;;;;;AAiDA;AACE;AACF;AAEA;AACE;AAAM;AACM;AAC2C;AACrD;AACA;AACA;AACA;AAC4B;AACG;AAC5B;AAGL;AAEA;AAA0D;AACc;AAExE;AAAwD;AACY;AAGpE;AACA;AAEA;AAA2B;AAEvB;AACE;AACA;AACA;AACA;AACE;AAAe;AACjB;AAEA;AACA;AACA;AAA0G;AAC5G;AACF;AACiC;AAGnC;AACE;AACE;AAAuE;AAGzE;AACA;AAEA;AAGF;AACE;AAAkB;AACb;AACW;AAGhB;AACE;AAAO;AACF;AACG;AACI;AAC6C;AAClB;AACvC;AAGF;AAAO;AACF;AACG;AACI;AACoD;AACpB;AACH;AACzC;AAGF;AAEI;AACE;AAAC;AAAA;AACU;AACD;AACG;AACT;AACoD;AACjB;AACnC;AACF;AAC+D;AAE/D;AAAiD;AAC7B;AAAA;AAAA;AAExB;AAEE;AAAC;AAAA;AACK;AACM;AACkD;AAAA;AAEhE;AAGN;AAEA;;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { format } from 'date-fns'\nimport { DateRange, PropsBase } from 'react-day-picker'\n\nimport { cn } from '@/lib/utils'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { Button, buttonVariants } from '../Button'\nimport { Calendar } from '../Calendar'\nimport { CalendarBlank } from '@phosphor-icons/react'\n\ntype BaseDatePickerProps = {\n  /**\n   * Placeholder text displayed when no date is selected\n   * @default 'Pick a date'\n   */\n  placeholder?: string\n  /**\n   * Format string to use when displaying the selected date\n   * @default 'MMM d, yyyy'\n   */\n  format?: string\n  /**\n   * ClassName for the button\n   */\n  buttonClassName?: string\n} & Omit<PropsBase, 'mode' | 'selected' | 'onSelect'>\n\ntype SingleDatePickerProps = {\n  variant?: 'single'\n  value?: Date\n  initialValue?: Date\n  onChange?: (date: Date | undefined) => void\n  closeOnSelect?: boolean\n  showYearSwitcher?: boolean\n} & BaseDatePickerProps\n\ntype RangeDatePickerProps = {\n  variant: 'range'\n  value?: DateRange\n  initialValue?: DateRange\n  onChange?: (date: DateRange | undefined) => void\n  closeOnSelect?: never\n  showYearSwitcher?: never\n} & BaseDatePickerProps\n\nexport type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps\n\nfunction isDateRange(value: any): value is DateRange {\n  return typeof value === 'object' && value !== null && 'from' in value\n}\n\nfunction DatePicker(props: DatePickerProps) {\n  const {\n    variant = 'single',\n    placeholder = variant === 'single' ? 'Pick a date' : 'Pick a date range',\n    initialValue,\n    value,\n    onChange,\n    buttonClassName,\n    closeOnSelect = variant === 'single',\n    showYearSwitcher = variant === 'single',\n    ...rest\n  } = props\n\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const [internalSingleDate, setInternalSingleDate] = React.useState<Date | undefined>(\n    variant === 'single' && initialValue instanceof Date ? initialValue : undefined,\n  )\n  const [internalDateRange, setInternalDateRange] = React.useState<DateRange | undefined>(\n    variant === 'range' && isDateRange(initialValue) ? initialValue : undefined,\n  )\n\n  const singleDate = variant === 'single' && value instanceof Date ? value : internalSingleDate\n  const dateRange = variant === 'range' && isDateRange(value) ? value : internalDateRange\n\n  const handleSelect = React.useCallback(\n    (selectedDate: Date | DateRange | undefined) => {\n      if (variant === 'single') {\n        const date = selectedDate as Date | undefined\n        setInternalSingleDate(date)\n        if (onChange && typeof onChange === 'function') (onChange as (date: Date | undefined) => void)(date)\n        if (closeOnSelect) {\n          setIsOpen(false)\n        }\n      } else {\n        const range = selectedDate as DateRange | undefined\n        setInternalDateRange(range)\n        if (onChange && typeof onChange === 'function') (onChange as (range: DateRange | undefined) => void)(range)\n      }\n    },\n    [variant, onChange, closeOnSelect],\n  )\n\n  const formatDate = () => {\n    if (variant === 'single') {\n      return singleDate ? format(singleDate, rest.format ?? 'MMM d, yyyy') : placeholder\n    }\n\n    if (!dateRange) return placeholder\n    return `${dateRange.from ? format(dateRange.from, rest.format ?? 'MMM d, yyyy') : ''} - ${\n      dateRange.to ? format(dateRange.to, rest.format ?? 'MMM d, yyyy') : ''\n    }`\n  }\n\n  const calendarProps = React.useMemo(() => {\n    const baseProps = {\n      ...rest,\n      initialFocus: true,\n    }\n\n    if (variant === 'single') {\n      return {\n        ...baseProps,\n        mode: 'single' as const,\n        selected: singleDate,\n        onSelect: (date: Date | undefined) => handleSelect(date),\n        defaultMonth: singleDate ?? new Date(),\n      }\n    }\n\n    return {\n      ...baseProps,\n      mode: 'range' as const,\n      selected: dateRange,\n      onSelect: (range: DateRange | undefined) => handleSelect(range),\n      defaultMonth: dateRange?.from ?? new Date(),\n      numberOfMonths: rest.numberOfMonths ?? 2,\n    }\n  }, [variant, rest, singleDate, dateRange, handleSelect])\n\n  return (\n    <PopoverRoot open={isOpen} onOpenChange={setIsOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={rest.id}\n          variant=\"ghost\"\n          className={cn(\n            'relative flex w-fit items-center justify-start text-left font-normal',\n            !(variant === 'single' ? singleDate : dateRange) && 'text-muted-foreground',\n            buttonVariants({ variant: 'input' }),\n            buttonClassName,\n          )}\n          disabled={typeof rest.disabled === 'boolean' ? rest.disabled : false}\n        >\n          <CalendarBlank className=\"absolute left-4 h-4 w-4 shrink-0\" />\n          <span className=\"w-full pl-7 text-center\">{formatDate()}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"center\">\n        <Calendar\n          {...calendarProps}\n          className=\"border-0\"\n          showYearSwitcher={variant === 'single' ? showYearSwitcher : false}\n        />\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\nexport type { DateRange }\n"],"names":[],"mappings":";;;;;;;;;;AAiDA;AACE;AACF;AAEA;AACE;AAAM;AACM;AAC2C;AACrD;AACA;AACA;AACA;AAC4B;AACG;AAC5B;AAGL;AAEA;AAA0D;AACc;AAExE;AAAwD;AACY;AAGpE;AACA;AAEA;AAA2B;AAEvB;AACE;AACA;AACA;AACA;AACE;AAAe;AACjB;AAEA;AACA;AACA;AAA0G;AAC5G;AACF;AACiC;AAGnC;AACE;AACE;AAAuE;AAGzE;AACA;AAEA;AAGF;AACE;AAAkB;AACb;AACW;AAGhB;AACE;AAAO;AACF;AACG;AACI;AAC6C;AAClB;AACvC;AAGF;AAAO;AACF;AACG;AACI;AACoD;AACpB;AACH;AACzC;AAGF;AAEI;AACE;AAAC;AAAA;AACU;AACD;AACG;AACT;AACoD;AACjB;AACnC;AACF;AAC+D;AAE/D;AAA4D;AACJ;AAAA;AAAA;AAE5D;AAEE;AAAC;AAAA;AACK;AACM;AACkD;AAAA;AAEhE;AAGN;AAEA;;"}

package/dist/components/InlineMultiSelect/InlineMultiSelect.d.ts

@@ -0,0 +1,62 @@
+import { ControllerFieldState } from 'react-hook-form';
+import * as React from 'react';
+/** Represents a selectable option in the InlineMultiSelect */
+type Option = {
+    value: string;
+    label: string;
+};
+/** Props for the InlineMultiSelect component */
+export type InlineMultiSelectProps = {
+    /** Array of options to display in the select */
+    options: Array<Option>;
+    /** Currently selected values (controlled) */
+    value?: Array<string>;
+    /** Callback fired when selection changes */
+    onChange?: (value: string[]) => void;
+    /** Form field state from react-hook-form */
+    fieldState?: ControllerFieldState;
+    /** Default selected values (uncontrolled) */
+    defaultValue?: Array<string>;
+    /** Placeholder text when no items are selected */
+    placeholder?: string;
+    /** Text to show when no options match the search */
+    notFoundText?: string;
+    /** Placeholder for the search input */
+    commandInputPlaceholder?: string;
+    /** Maximum number of items that can be selected */
+    max?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * InlineMultiSelect Component
+ *
+ * A controlled multi-select component that displays selected items inline with search functionality.
+ * Supports keyboard navigation, maximum selection limit, and custom styling.
+ *
+ * @example
+ * ```tsx
+ * // Controlled usage
+ * const [value, setValue] = useState<string[]>([])
+ * <InlineMultiSelect
+ *   options={[{ value: '1', label: 'Option 1' }]}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ *
+ * // With react-hook-form
+ * const { control } = useForm()
+ * <Controller
+ *   name="myField"
+ *   control={control}
+ *   render={({ field }) => (
+ *     <InlineMultiSelect
+ *       {...field}
+ *       options={options}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare const InlineMultiSelect: React.ForwardRefExoticComponent<InlineMultiSelectProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/InlineMultiSelect/InlineMultiSelect.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
+import { X, CaretUpDown, Check } from '@phosphor-icons/react';
+import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../Button/Button.js';
+
+const InlineMultiSelect = React.forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    defaultValue,
+    placeholder,
+    notFoundText,
+    fieldState,
+    commandInputPlaceholder,
+    max,
+    className
+  }, _ref) => {
+    const inputRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const [visibleItems, setVisibleItems] = React.useState([]);
+    const [hiddenCount, setHiddenCount] = React.useState(0);
+    const [internalSelected, setInternalSelected] = React.useState(
+      options.filter((option) => defaultValue?.includes(option.value) ?? [])
+    );
+    const selected = value ? options.filter((option) => value.includes(option.value)) : internalSelected;
+    const handleSelectionChange = React.useCallback(
+      (newSelected) => {
+        if (!value) {
+          setInternalSelected(newSelected);
+        }
+        onChange?.(newSelected.map((s) => s.value));
+      },
+      [value, onChange]
+    );
+    const removeItem = React.useCallback(
+      (itemToRemove) => {
+        const newSelected = itemToRemove ? selected.filter((s) => s.value !== itemToRemove.value) : selected.slice(0, -1);
+        handleSelectionChange(newSelected);
+      },
+      [selected, handleSelectionChange]
+    );
+    const handleUnselect = React.useCallback(
+      (item, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        removeItem(item);
+      },
+      [removeItem]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        const input = inputRef.current;
+        if (input) {
+          if ((e.key === "Delete" || e.key === "Backspace") && input.value === "") {
+            removeItem();
+          }
+          if (e.key === "Escape") {
+            input.blur();
+          }
+        }
+      },
+      [removeItem]
+    );
+    React.useEffect(() => {
+      const updateVisibleItems = () => {
+        if (!containerRef.current || selected.length === 0) return;
+        const maxVisibleItems = 2;
+        const visibleCount = Math.min(selected.length, maxVisibleItems);
+        setVisibleItems(selected.slice(0, visibleCount));
+        setHiddenCount(selected.length - visibleCount);
+      };
+      updateVisibleItems();
+      window.addEventListener("resize", updateVisibleItems);
+      return () => window.removeEventListener("resize", updateVisibleItems);
+    }, [selected]);
+    return /* @__PURE__ */ jsx(PopoverRoot, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(Command, { onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          "aria-expanded": open,
+          className: cn(
+            "w-full justify-between bg-[#fff] pl-2 pr-2",
+            fieldState?.invalid ? "border-error-400 focus-within:border-error-700" : "",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center whitespace-nowrap", children: selected.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              visibleItems.map((item) => /* @__PURE__ */ jsxs("div", { className: "bg-muted flex items-center gap-1 rounded px-1 py-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: (e) => handleUnselect(item, e),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        handleUnselect(item, e);
+                      }
+                    },
+                    "aria-label": `Eliminar ${item.label}`,
+                    className: "hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full",
+                    children: /* @__PURE__ */ jsx(X, { className: "text-muted-foreground h-3 w-3" })
+                  }
+                )
+              ] }, item.value)),
+              hiddenCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex flex-shrink-0 items-center whitespace-nowrap text-sm", children: [
+                "+",
+                hiddenCount
+              ] })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) }) }),
+            /* @__PURE__ */ jsx(CaretUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { className: "px-0 py-0", children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            placeholder: commandInputPlaceholder ?? "Search...",
+            value: inputValue,
+            onValueChange: setInputValue,
+            children: max && /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-md px-2 py-1 text-sm", children: [
+              selected.length,
+              " / ",
+              max
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(CommandList, { children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: notFoundText ?? "Options not found" }),
+          open && options.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { children: options.map((item) => /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onSelect: () => {
+                const isSelected = selected.find((s) => s.value === item.value);
+                if (isSelected) {
+                  handleSelectionChange(selected.filter((s) => s.value !== item.value));
+                } else {
+                  if (max && selected.length >= max) return;
+                  setInputValue("");
+                  handleSelectionChange([...selected, item]);
+                }
+              },
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "mr-2", children: selected.find((s) => s.value === item.value) ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx("div", { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx("div", { children: item.label })
+              ] })
+            },
+            `item-${item.value}`
+          )) })
+        ] })
+      ] })
+    ] }) });
+  }
+);
+InlineMultiSelect.displayName = "InlineMultiSelect";
+
+export { InlineMultiSelect };
+//# sourceMappingURL=InlineMultiSelect.js.map

package/dist/components/InlineMultiSelect/InlineMultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineMultiSelect.js","sources":["../../../src/components/InlineMultiSelect/InlineMultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { CaretUpDown, Check, X } from '@phosphor-icons/react'\nimport { PopoverRoot, PopoverContent, PopoverTrigger } from '../Popover'\nimport { ControllerFieldState } from 'react-hook-form'\nimport { cn } from '@/lib/utils'\nimport { Button } from '../Button'\n\n/** Represents a selectable option in the InlineMultiSelect */\ntype Option = { value: string; label: string }\n\n/** Props for the InlineMultiSelect component */\nexport type InlineMultiSelectProps = {\n  /** Array of options to display in the select */\n  options: Array<Option>\n  /** Currently selected values (controlled) */\n  value?: Array<string>\n  /** Callback fired when selection changes */\n  onChange?: (value: string[]) => void\n  /** Form field state from react-hook-form */\n  fieldState?: ControllerFieldState\n  /** Default selected values (uncontrolled) */\n  defaultValue?: Array<string>\n  /** Placeholder text when no items are selected */\n  placeholder?: string\n  /** Text to show when no options match the search */\n  notFoundText?: string\n  /** Placeholder for the search input */\n  commandInputPlaceholder?: string\n  /** Maximum number of items that can be selected */\n  max?: number\n  /** Additional CSS classes */\n  className?: string\n}\n\n/**\n * InlineMultiSelect Component\n *\n * A controlled multi-select component that displays selected items inline with search functionality.\n * Supports keyboard navigation, maximum selection limit, and custom styling.\n *\n * @example\n * ```tsx\n * // Controlled usage\n * const [value, setValue] = useState<string[]>([])\n * <InlineMultiSelect\n *   options={[{ value: '1', label: 'Option 1' }]}\n *   value={value}\n *   onChange={setValue}\n * />\n *\n * // With react-hook-form\n * const { control } = useForm()\n * <Controller\n *   name=\"myField\"\n *   control={control}\n *   render={({ field }) => (\n *     <InlineMultiSelect\n *       {...field}\n *       options={options}\n *     />\n *   )}\n * />\n * ```\n */\nexport const InlineMultiSelect = React.forwardRef<HTMLInputElement, InlineMultiSelectProps>(\n  (\n    {\n      options,\n      value,\n      onChange,\n      defaultValue,\n      placeholder,\n      notFoundText,\n      fieldState,\n      commandInputPlaceholder,\n      max,\n      className,\n    },\n    _ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const [open, setOpen] = React.useState(false)\n    const [inputValue, setInputValue] = React.useState('')\n    const [visibleItems, setVisibleItems] = React.useState<Option[]>([])\n    const [hiddenCount, setHiddenCount] = React.useState(0)\n\n    // Use controlled value if provided, otherwise use internal state\n    const [internalSelected, setInternalSelected] = React.useState<InlineMultiSelectProps['options']>(\n      options.filter((option) => defaultValue?.includes(option.value) ?? []),\n    )\n\n    const selected = value ? options.filter((option) => value.includes(option.value)) : internalSelected\n\n    const handleSelectionChange = React.useCallback(\n      (newSelected: Option[]) => {\n        if (!value) {\n          // Uncontrolled mode\n          setInternalSelected(newSelected)\n        }\n        // Always call onChange with the new values\n        onChange?.(newSelected.map((s) => s.value))\n      },\n      [value, onChange],\n    )\n\n    /**\n     * Removes an item from the selection\n     * @param itemToRemove - Optional item to remove. If not provided, removes the last item\n     */\n    const removeItem = React.useCallback(\n      (itemToRemove?: Option) => {\n        const newSelected = itemToRemove\n          ? selected.filter((s) => s.value !== itemToRemove.value)\n          : selected.slice(0, -1)\n\n        handleSelectionChange(newSelected)\n      },\n      [selected, handleSelectionChange],\n    )\n\n    /**\n     * Handles the unselect action when clicking the remove button\n     * @param item - The item to remove\n     * @param e - The event object\n     */\n    const handleUnselect = React.useCallback(\n      (item: Option, e: React.MouseEvent | React.KeyboardEvent) => {\n        e.stopPropagation()\n        e.preventDefault()\n        removeItem(item)\n      },\n      [removeItem],\n    )\n\n    /**\n     * Handles keyboard events for the component\n     * - Delete/Backspace: Removes last item when input is empty\n     * - Escape: Blurs the input\n     */\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current\n        if (input) {\n          if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '') {\n            removeItem()\n          }\n          if (e.key === 'Escape') {\n            input.blur()\n          }\n        }\n      },\n      [removeItem],\n    )\n\n    /**\n     * Effect to update visible items and handle responsive behavior\n     * Shows a maximum of 2 items and displays a count for the rest\n     */\n    React.useEffect(() => {\n      const updateVisibleItems = () => {\n        if (!containerRef.current || selected.length === 0) return\n\n        const maxVisibleItems = 2\n        const visibleCount = Math.min(selected.length, maxVisibleItems)\n\n        setVisibleItems(selected.slice(0, visibleCount))\n        setHiddenCount(selected.length - visibleCount)\n      }\n\n      updateVisibleItems()\n      window.addEventListener('resize', updateVisibleItems)\n      return () => window.removeEventListener('resize', updateVisibleItems)\n    }, [selected])\n\n    return (\n      <PopoverRoot open={open} onOpenChange={setOpen}>\n        <Command onKeyDown={handleKeyDown}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              aria-expanded={open}\n              className={cn(\n                'w-full justify-between bg-[#fff] pl-2 pr-2',\n                fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : '',\n                className,\n              )}\n            >\n              <div ref={containerRef} className=\"flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2\">\n                <div className=\"flex items-center whitespace-nowrap\">\n                  {selected.length > 0 ? (\n                    <>\n                      {visibleItems.map((item) => (\n                        <div key={item.value} className=\"bg-muted flex items-center gap-1 rounded px-1 py-0.5\">\n                          <span className=\"text-sm\">{item.label}</span>\n                          <span\n                            role=\"button\"\n                            tabIndex={0}\n                            onClick={(e) => handleUnselect(item, e)}\n                            onKeyDown={(e) => {\n                              if (e.key === 'Enter' || e.key === ' ') {\n                                handleUnselect(item, e)\n                              }\n                            }}\n                            aria-label={`Eliminar ${item.label}`}\n                            className=\"hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full\"\n                          >\n                            <X className=\"text-muted-foreground h-3 w-3\" />\n                          </span>\n                        </div>\n                      ))}\n                      {hiddenCount > 0 && (\n                        <span className=\"text-muted-foreground inline-flex flex-shrink-0 items-center whitespace-nowrap text-sm\">\n                          +{hiddenCount}\n                        </span>\n                      )}\n                    </>\n                  ) : (\n                    <span className=\"text-muted-foreground\">{placeholder}</span>\n                  )}\n                </div>\n              </div>\n              <CaretUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"px-0 py-0\">\n            <CommandInput\n              placeholder={commandInputPlaceholder ?? 'Search...'}\n              value={inputValue}\n              onValueChange={setInputValue}\n            >\n              {max && (\n                <div className=\"bg-muted rounded-md px-2 py-1 text-sm\">\n                  {selected.length} / {max}\n                </div>\n              )}\n            </CommandInput>\n            <CommandList>\n              <CommandEmpty>{notFoundText ?? 'Options not found'}</CommandEmpty>\n              {open && options.length > 0 && (\n                <CommandGroup>\n                  {options.map((item) => (\n                    <CommandItem\n                      key={`item-${item.value}`}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onSelect={() => {\n                        const isSelected = selected.find((s) => s.value === item.value)\n                        if (isSelected) {\n                          handleSelectionChange(selected.filter((s) => s.value !== item.value))\n                        } else {\n                          if (max && selected.length >= max) return\n                          setInputValue('')\n                          handleSelectionChange([...selected, item])\n                        }\n                      }}\n                      className=\"cursor-pointer\"\n                    >\n                      <div className=\"flex items-center\">\n                        <div className=\"mr-2\">\n                          {selected.find((s) => s.value === item.value) ? (\n                            <Check className=\"h-4 w-4\" />\n                          ) : (\n                            <div className=\"h-4 w-4\" />\n                          )}\n                        </div>\n                        <div>{item.label}</div>\n                      </div>\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </PopoverContent>\n        </Command>\n      </PopoverRoot>\n    )\n  },\n)\n\nInlineMultiSelect.displayName = 'InlineMultiSelect'\n"],"names":[],"mappings":";;;;;;;;;AAmEO;AAAgC;AAEnC;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIF;AACA;AACA;AACA;AACA;AACA;AAGA;AAAsD;AACiB;AAGvE;AAEA;AAAoC;AAEhC;AAEE;AAA+B;AAGjC;AAA0C;AAC5C;AACgB;AAOlB;AAAyB;AAErB;AAIA;AAAiC;AACnC;AACgC;AAQlC;AAA6B;AAEzB;AACA;AACA;AAAe;AACjB;AACW;AAQb;AAA4B;AAExB;AACA;AACE;AACE;AAAW;AAEb;AACE;AAAW;AACb;AACF;AACF;AACW;AAOb;AACE;AACE;AAEA;AACA;AAEA;AACA;AAA6C;AAG/C;AACA;AACA;AAAoE;AAGtE;AAGM;AACE;AAAC;AAAA;AACS;AACO;AACJ;AACT;AACyE;AACzE;AACF;AAEA;AAIS;AAEG;AAAsC;AACtC;AAAC;AAAA;AACM;AACK;AAC4B;AAEpC;AACE;AAAsB;AACxB;AACF;AACkC;AACxB;AAEmC;AAAA;AAC/C;AAEH;AAE0G;AAAA;AACrG;AACJ;AAOV;AACqD;AAAA;AAAA;AAEzD;AAEE;AAAA;AAAC;AAAA;AACyC;AACjC;AACQ;AAIV;AAAS;AAAO;AAAI;AACvB;AAAA;AAEJ;AAEE;AAAmD;AAI7C;AAAC;AAAA;AAGG;AACA;AAAkB;AACpB;AAEE;AACA;AACE;AAAoE;AAEpE;AACA;AACA;AAAyC;AAC3C;AACF;AACU;AAGR;AAMA;AACiB;AACnB;AAAA;AA1BuB;AA6B7B;AAEJ;AACF;AAEJ;AAGN;AAEA;;"}

package/dist/components/InlineMultiSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './InlineMultiSelect';

package/dist/components/InlineMultiSelect/index.js

@@ -0,0 +1,2 @@
+export { InlineMultiSelect } from './InlineMultiSelect.js';
+//# sourceMappingURL=index.js.map

package/dist/components/InlineMultiSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -39,3 +39,4 @@ export * from './components/Combobox';
 export * from './components/Table';
 export * from './components/DataTable';
 export * from './components/Collapsible';
+export * from './components/InlineMultiSelect';

package/dist/index.js

@@ -38,4 +38,5 @@ export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, Sideba
 export { Combobox } from './components/Combobox/Combobox.js';
 export { DataTable } from './components/DataTable/DataTable.js';
 export { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from './components/Collapsible/Collapsible.js';
+export { InlineMultiSelect } from './components/InlineMultiSelect/InlineMultiSelect.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "3.15.1",
+  "version": "3.17.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",