periplo-ui 3.13.3 → 3.15.0

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { CaretDown } from '@phosphor-icons/react'\n\nimport { cn } from '@/lib/utils'\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline md:py-6 [&[data-state=open]>svg]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <CaretDown className=\"h-6 w-6 shrink-0 text-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn('pb-6 pt-0', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,YAAY,kBAAmB,CAAA;AAE/B,MAAA,aAAA,GAAgB,MAAM,UAG1B,CAAA,CAAC,EAAE,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAC1B,qBAAA,GAAA,CAAC,mBAAmB,IAAnB,EAAA,EAAwB,KAAU,SAAW,EAAA,EAAA,CAAG,YAAY,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CACrF;AACD,aAAA,CAAc,WAAc,GAAA,eAAA;AAE5B,MAAM,mBAAmB,KAAM,CAAA,UAAA,CAG7B,CAAC,EAAE,WAAW,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,wBACnC,GAAA,CAAA,kBAAA,CAAmB,MAAnB,EAAA,EAA0B,WAAU,MACnC,EAAA,QAAA,kBAAA,IAAA;AAAA,EAAC,kBAAmB,CAAA,OAAA;AAAA,EAAnB;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,EAAA;AAAA,MACT,sIAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,SAAU,EAAA,EAAA,SAAA,EAAU,oEAAqE,EAAA;AAAA;AAAA;AAC5F,CAAA,EACF,CACD;AACD,gBAAiB,CAAA,WAAA,GAAc,mBAAmB,OAAQ,CAAA,WAAA;AAEpD,MAAA,gBAAA,GAAmB,KAAM,CAAA,UAAA,CAG7B,CAAC,EAAE,WAAW,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,GACpC,qBAAA,GAAA;AAAA,EAAC,kBAAmB,CAAA,OAAA;AAAA,EAAnB;AAAA,IACC,GAAA;AAAA,IACA,SAAU,EAAA,0HAAA;AAAA,IACT,GAAG,KAAA;AAAA,IAEJ,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,WAAa,EAAA,SAAS,GAAI,QAAS,EAAA;AAAA;AACxD,CACD;AAED,gBAAiB,CAAA,WAAA,GAAc,mBAAmB,OAAQ,CAAA,WAAA;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { CaretDown } from '@phosphor-icons/react'\n\nimport { cn } from '@/lib/utils'\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline md:py-6 [&[data-state=open]>svg]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <CaretDown className=\"h-6 w-6 shrink-0 text-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn('pb-6 pt-0', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,YAAY,kBAAmB,CAAA;AAE/B,MAAA,aAAA,GAAgB,MAAM,UAG1B,CAAA,CAAC,EAAE,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAC1B,qBAAA,GAAA,CAAC,mBAAmB,IAAnB,EAAA,EAAwB,KAAU,SAAW,EAAA,EAAA,CAAG,YAAY,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CACrF;AACD,aAAA,CAAc,WAAc,GAAA,eAAA;AAE5B,MAAM,mBAAmB,KAAM,CAAA,UAAA,CAG7B,CAAC,EAAE,WAAW,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,wBACnC,GAAA,CAAA,kBAAA,CAAmB,MAAnB,EAAA,EAA0B,WAAU,MACnC,EAAA,QAAA,kBAAA,IAAA;AAAA,EAAC,kBAAmB,CAAA,OAAA;AAAA,EAAnB;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,EAAA;AAAA,MACT,sIAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,SAAU,EAAA,EAAA,SAAA,EAAU,oEAAqE,EAAA;AAAA;AAAA;AAC5F,CAAA,EACF,CACD;AACD,gBAAiB,CAAA,WAAA,GAAc,mBAAmB,OAAQ,CAAA,WAAA;AAEpD,MAAA,gBAAA,GAAmB,KAAM,CAAA,UAAA,CAG7B,CAAC,EAAE,WAAW,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,GACpC,qBAAA,GAAA;AAAA,EAAC,kBAAmB,CAAA,OAAA;AAAA,EAAnB;AAAA,IACC,GAAA;AAAA,IACA,SAAU,EAAA,0HAAA;AAAA,IACT,GAAG,KAAA;AAAA,IAEJ,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,WAAa,EAAA,SAAS,GAAI,QAAS,EAAA;AAAA;AACxD,CACD;AAED,gBAAiB,CAAA,WAAA,GAAc,mBAAmB,OAAQ,CAAA,WAAA;;;;"}

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../../lib/utils'\n\nconst avatarVariants = cva('h-10 w-10 relative flex shrink-0 rounded-full', {\n  variants: {\n    /**\n     * Controls the size of the avatar\n     * @default \"md\"\n     */\n    size: {\n      /** Small size - 32x32px */\n      sm: 'h-8 w-8',\n      /** Medium size - 40x40px */\n      md: 'h-10 w-10',\n      /** Large size - 48x48px */\n      lg: 'h-12 w-12',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\nexport interface AvatarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof avatarVariants> {}\n\n/**\n * Root avatar component that serves as a container for AvatarImage and AvatarFallback\n * @param props.size - Controls the size of the avatar (\"sm\" | \"md\" | \"lg\")\n * @param props.className - Additional CSS classes to apply\n */\nconst Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, size, ...props }, ref) => (\n    <AvatarPrimitive.Root ref={ref} className={cn(avatarVariants({ size, className }))} {...props} />\n  ),\n)\nAvatar.displayName = 'Avatar'\n\n/**\n * Component for displaying the actual avatar image\n * @param props.src - The source URL of the image\n * @param props.alt - Alt text for the image\n * @param props.className - Additional CSS classes to apply\n */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('aspect-square h-full w-full shrink-0 overflow-hidden rounded-full', className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = 'AvatarImage'\n\n/**\n * Fallback component displayed when the image fails to load or isn't provided\n * @param props.className - Additional CSS classes to apply\n * @param props.children - Content to display as fallback (typically initials or an icon)\n */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}\n    {...props}\n  />\n))\nAvatarFallback.displayName = 'AvatarFallback'\n\ninterface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Optional custom className */\n  className?: string\n  /** Children should be Avatar components */\n  children: React.ReactNode\n}\n\n/**\n * Container component for grouping multiple avatars with an overlapping effect\n * @param props.className - Additional CSS classes to apply\n * @param props.children - Avatar components to be grouped\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(({ className, children, ...props }, ref) => {\n  const modifiedChildren = React.Children.map(children, (child) => {\n    if (React.isValidElement<AvatarProps>(child) && child.type === Avatar) {\n      return React.cloneElement(child, {\n        className: cn('ring-2 ring-white dark:ring-gray-800', child.props.className),\n      })\n    }\n    return child\n  })\n\n  return (\n    <div ref={ref} className={cn('flex -space-x-4', className)} {...props}>\n      {modifiedChildren}\n    </div>\n  )\n})\n\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup }\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,cAAA,GAAiB,IAAI,+CAAiD,EAAA;AAAA,EAC1E,QAAU,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,IAAM,EAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,SAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,WAAA;AAAA;AAAA,MAEJ,EAAI,EAAA;AAAA;AACN,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA;AAAA;AAEV,CAAC,CAAA;AAQD,MAAM,SAASA,cAAM,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAW,EAAA,IAAA,EAAM,GAAG,KAAM,EAAA,EAAG,GAC9B,qBAAA,GAAA,CAAC,eAAgB,CAAA,IAAA,EAAhB,EAAqB,GAAU,EAAA,SAAA,EAAW,EAAG,CAAA,cAAA,CAAe,EAAE,IAAA,EAAM,WAAW,CAAC,CAAI,EAAA,GAAG,KAAO,EAAA;AAEnG;AACA,MAAA,CAAO,WAAc,GAAA,QAAA;AAQf,MAAA,WAAA,GAAcA,eAAM,UAGxB,CAAA,CAAC,EAAE,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAC1B,qBAAA,GAAA;AAAA,EAAC,eAAgB,CAAA,KAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAG,CAAA,mEAAA,EAAqE,SAAS,CAAA;AAAA,IAC3F,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAc,GAAA,aAAA;AAOpB,MAAA,cAAA,GAAiBA,eAAM,UAG3B,CAAA,CAAC,EAAE,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAC1B,qBAAA,GAAA;AAAA,EAAC,eAAgB,CAAA,QAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAG,CAAA,sEAAA,EAAwE,SAAS,CAAA;AAAA,IAC9F,GAAG;AAAA;AACN,CACD;AACD,cAAA,CAAe,WAAc,GAAA,gBAAA;AAcvB,MAAA,WAAA,GAAcA,cAAM,CAAA,UAAA,CAA6C,CAAC,EAAE,WAAW,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACjH,EAAA,MAAM,mBAAmBA,cAAM,CAAA,QAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC/D,IAAA,IAAIA,eAAM,cAA4B,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,SAAS,MAAQ,EAAA;AACrE,MAAO,OAAAA,cAAA,CAAM,aAAa,KAAO,EAAA;AAAA,QAC/B,SAAW,EAAA,EAAA,CAAG,sCAAwC,EAAA,KAAA,CAAM,MAAM,SAAS;AAAA,OAC5E,CAAA;AAAA;AAEH,IAAO,OAAA,KAAA;AAAA,GACR,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,EAAA,CAAG,mBAAmB,SAAS,CAAA,EAAI,GAAG,KAAA,EAC7D,QACH,EAAA,gBAAA,EAAA,CAAA;AAEJ,CAAC;AAED,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../../lib/utils'\n\nconst avatarVariants = cva('h-10 w-10 relative flex shrink-0 rounded-full', {\n  variants: {\n    /**\n     * Controls the size of the avatar\n     * @default \"md\"\n     */\n    size: {\n      /** Small size - 32x32px */\n      sm: 'h-8 w-8',\n      /** Medium size - 40x40px */\n      md: 'h-10 w-10',\n      /** Large size - 48x48px */\n      lg: 'h-12 w-12',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\nexport interface AvatarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof avatarVariants> {}\n\n/**\n * Root avatar component that serves as a container for AvatarImage and AvatarFallback\n * @param props.size - Controls the size of the avatar (\"sm\" | \"md\" | \"lg\")\n * @param props.className - Additional CSS classes to apply\n */\nconst Avatar = React.forwardRef<React.ComponentRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, size, ...props }, ref) => (\n    <AvatarPrimitive.Root ref={ref} className={cn(avatarVariants({ size, className }))} {...props} />\n  ),\n)\nAvatar.displayName = 'Avatar'\n\n/**\n * Component for displaying the actual avatar image\n * @param props.src - The source URL of the image\n * @param props.alt - Alt text for the image\n * @param props.className - Additional CSS classes to apply\n */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('aspect-square h-full w-full shrink-0 overflow-hidden rounded-full', className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = 'AvatarImage'\n\n/**\n * Fallback component displayed when the image fails to load or isn't provided\n * @param props.className - Additional CSS classes to apply\n * @param props.children - Content to display as fallback (typically initials or an icon)\n */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}\n    {...props}\n  />\n))\nAvatarFallback.displayName = 'AvatarFallback'\n\ninterface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Optional custom className */\n  className?: string\n  /** Children should be Avatar components */\n  children: React.ReactNode\n}\n\n/**\n * Container component for grouping multiple avatars with an overlapping effect\n * @param props.className - Additional CSS classes to apply\n * @param props.children - Avatar components to be grouped\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(({ className, children, ...props }, ref) => {\n  const modifiedChildren = React.Children.map(children, (child) => {\n    if (React.isValidElement<AvatarProps>(child) && child.type === Avatar) {\n      return React.cloneElement(child, {\n        className: cn('ring-2 ring-white dark:ring-gray-800', child.props.className),\n      })\n    }\n    return child\n  })\n\n  return (\n    <div ref={ref} className={cn('flex -space-x-4', className)} {...props}>\n      {modifiedChildren}\n    </div>\n  )\n})\n\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup }\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,cAAA,GAAiB,IAAI,+CAAiD,EAAA;AAAA,EAC1E,QAAU,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,IAAM,EAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,SAAA;AAAA;AAAA,MAEJ,EAAI,EAAA,WAAA;AAAA;AAAA,MAEJ,EAAI,EAAA;AAAA;AACN,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA;AAAA;AAEV,CAAC,CAAA;AAQD,MAAM,SAASA,cAAM,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAW,EAAA,IAAA,EAAM,GAAG,KAAM,EAAA,EAAG,GAC9B,qBAAA,GAAA,CAAC,eAAgB,CAAA,IAAA,EAAhB,EAAqB,GAAU,EAAA,SAAA,EAAW,EAAG,CAAA,cAAA,CAAe,EAAE,IAAA,EAAM,WAAW,CAAC,CAAI,EAAA,GAAG,KAAO,EAAA;AAEnG;AACA,MAAA,CAAO,WAAc,GAAA,QAAA;AAQf,MAAA,WAAA,GAAcA,eAAM,UAGxB,CAAA,CAAC,EAAE,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAC1B,qBAAA,GAAA;AAAA,EAAC,eAAgB,CAAA,KAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAG,CAAA,mEAAA,EAAqE,SAAS,CAAA;AAAA,IAC3F,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAc,GAAA,aAAA;AAOpB,MAAA,cAAA,GAAiBA,eAAM,UAG3B,CAAA,CAAC,EAAE,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAC1B,qBAAA,GAAA;AAAA,EAAC,eAAgB,CAAA,QAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAG,CAAA,sEAAA,EAAwE,SAAS,CAAA;AAAA,IAC9F,GAAG;AAAA;AACN,CACD;AACD,cAAA,CAAe,WAAc,GAAA,gBAAA;AAcvB,MAAA,WAAA,GAAcA,cAAM,CAAA,UAAA,CAA6C,CAAC,EAAE,WAAW,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACjH,EAAA,MAAM,mBAAmBA,cAAM,CAAA,QAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC/D,IAAA,IAAIA,eAAM,cAA4B,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,SAAS,MAAQ,EAAA;AACrE,MAAO,OAAAA,cAAA,CAAM,aAAa,KAAO,EAAA;AAAA,QAC/B,SAAW,EAAA,EAAA,CAAG,sCAAwC,EAAA,KAAA,CAAM,MAAM,SAAS;AAAA,OAC5E,CAAA;AAAA;AAEH,IAAO,OAAA,KAAA;AAAA,GACR,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,EAAA,CAAG,mBAAmB,SAAS,CAAA,EAAI,GAAG,KAAA,EAC7D,QACH,EAAA,gBAAA,EAAA,CAAA;AAEJ,CAAC;AAED,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\ninterface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Additional CSS classes to be applied to the checkbox */\n  className?: string\n  /** The controlled checked state of the checkbox */\n  checked?: boolean\n  /** The default checked state when initially rendered */\n  defaultChecked?: boolean\n  /** Whether the checkbox is disabled */\n  disabled?: boolean\n  /** Whether the checkbox is required in a form */\n  required?: boolean\n  /** The name of the checkbox when used in a form */\n  name?: string\n  /** The value of the checkbox when used in a form */\n  value?: string\n  /** Handler called when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void\n}\n\n/**\n * A controlled checkbox component built on top of Radix UI Checkbox.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Checkbox />\n *\n * // With controlled state\n * <Checkbox checked={checked} onCheckedChange={setChecked} />\n *\n * // With form integration\n * <Checkbox name=\"terms\" required />\n *\n * // With label\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <label htmlFor=\"terms\">Accept terms</label>\n * </div>\n * ```\n */\nconst Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        'peer relative h-5 w-5 shrink-0 rounded-[5px] border border-neutral-300 transition-colors',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50',\n        'data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500',\n        'hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={cn(\n          'absolute inset-0 flex items-center justify-center',\n          'data-[state=checked]:animate-in data-[state=unchecked]:animate-out',\n          'data-[state=checked]:fade-in-0 data-[state=unchecked]:fade-out-0',\n        )}\n      >\n        <Check className=\"h-3.5 w-3.5 text-white\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport type { CheckboxProps }\nexport { Checkbox }\n"],"names":[],"mappings":";;;;;;AA6CA,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,iBAAkB,CAAA,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,QACT,0FAAA;AAAA,QACA,4GAAA;AAAA,QACA,yEAAA;AAAA,QACA,6EAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,iBAAkB,CAAA,SAAA;AAAA,QAAlB;AAAA,UACC,SAAW,EAAA,EAAA;AAAA,YACT,mDAAA;AAAA,YACA,oEAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEA,QAAA,kBAAA,GAAA,CAAC,KAAM,EAAA,EAAA,SAAA,EAAU,wBAAyB,EAAA;AAAA;AAAA;AAC5C;AAAA;AAGN;AAEA,QAAA,CAAS,WAAc,GAAA,UAAA;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\ninterface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Additional CSS classes to be applied to the checkbox */\n  className?: string\n  /** The controlled checked state of the checkbox */\n  checked?: boolean\n  /** The default checked state when initially rendered */\n  defaultChecked?: boolean\n  /** Whether the checkbox is disabled */\n  disabled?: boolean\n  /** Whether the checkbox is required in a form */\n  required?: boolean\n  /** The name of the checkbox when used in a form */\n  name?: string\n  /** The value of the checkbox when used in a form */\n  value?: string\n  /** Handler called when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void\n}\n\n/**\n * A controlled checkbox component built on top of Radix UI Checkbox.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Checkbox />\n *\n * // With controlled state\n * <Checkbox checked={checked} onCheckedChange={setChecked} />\n *\n * // With form integration\n * <Checkbox name=\"terms\" required />\n *\n * // With label\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <label htmlFor=\"terms\">Accept terms</label>\n * </div>\n * ```\n */\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        'peer relative h-5 w-5 shrink-0 rounded-[5px] border border-neutral-300 transition-colors',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50',\n        'data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500',\n        'hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={cn(\n          'absolute inset-0 flex items-center justify-center',\n          'data-[state=checked]:animate-in data-[state=unchecked]:animate-out',\n          'data-[state=checked]:fade-in-0 data-[state=unchecked]:fade-out-0',\n        )}\n      >\n        <Check className=\"h-3.5 w-3.5 text-white\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport type { CheckboxProps }\nexport { Checkbox }\n"],"names":[],"mappings":";;;;;;AA6CA,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,iBAAkB,CAAA,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,QACT,0FAAA;AAAA,QACA,4GAAA;AAAA,QACA,yEAAA;AAAA,QACA,6EAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,iBAAkB,CAAA,SAAA;AAAA,QAAlB;AAAA,UACC,SAAW,EAAA,EAAA;AAAA,YACT,mDAAA;AAAA,YACA,oEAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEA,QAAA,kBAAA,GAAA,CAAC,KAAM,EAAA,EAAA,SAAA,EAAU,wBAAyB,EAAA;AAAA;AAAA;AAC5C;AAAA;AAGN;AAEA,QAAA,CAAS,WAAc,GAAA,UAAA;;;;"}

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\n\nimport { cn } from '@/lib/utils'\nimport { Dialog, DialogContent } from '../Dialog'\nimport { MagnifyingGlass } from '@phosphor-icons/react'\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-popover-foreground', className)}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <MagnifyingGlass className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n    {children && <div className=\"ml-2\">{children}</div>}\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      '[&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-50 data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"],"names":[],"mappings":";;;;;;;;AAUM;AAIJ;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAA8D;AAC9D;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AAIjD;AAEM;AAIJ;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEM;AAIJ;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEM;AAMN;AAEM;AAIJ;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}
+{"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\n\nimport { cn } from '@/lib/utils'\nimport { Dialog, DialogContent } from '../Dialog'\nimport { MagnifyingGlass } from '@phosphor-icons/react'\n\nconst Command = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-popover-foreground', className)}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <MagnifyingGlass className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n    {children && <div className=\"ml-2\">{children}</div>}\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      '[&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-50 data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"],"names":[],"mappings":";;;;;;;;AAUM;AAIJ;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAA8D;AAC9D;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AAIjD;AAEM;AAIJ;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEM;AAIJ;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEM;AAMN;AAEM;AAIJ;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}

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

@@ -46,14 +46,23 @@ export type DataTableProps<TData> = {
     readonly data: Array<TData>;
     /** Whether to show the column visibility toggle menu */
     readonly showColumnVisibilityControls?: boolean;
-    /** Custom text for the column visibility button */
-    readonly columnVisibilityButtonLabel?: string;
     /** Whether the table is in a loading state */
     readonly isLoading?: boolean;
     /** Pagination configuration. If not provided, pagination is disabled */
     readonly pagination?: BasePaginationProps | BackendPaginationProps;
-    /** Optional component to render filters */
-    readonly Filters?: React.ReactNode;
+    /** Primary filters that appear directly above the table */
+    readonly primaryFilters?: React.ReactNode;
+    /** Secondary filters that appear in the filters dropdown */
+    readonly secondaryFilters?: React.ReactNode;
+    /** Text customization for filters */
+    readonly customLabels?: {
+        /** Text for the column visibility button (default: "Hide columns") */
+        columnVisibilityButton?: string;
+        /** Text for the filters button when only secondary filters are present (default: "Filters") */
+        filters?: string;
+        /** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
+        moreFilters?: string;
+    };
     /** Callback when all rows are selected */
     readonly onSelectAll?: (selected: boolean) => void;
     /** Callback when a row is selected */
@@ -106,5 +115,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, columnVisibilityButtonLabel, isLoading, pagination, onSelectAll, onSelect, Filters, 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, customLabels, onSelectAll, onSelect, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/DataTable.js

@@ -19,12 +19,17 @@ function DataTable({
   data,
   getRowId = (row) => row?.id,
   showColumnVisibilityControls = true,
-  columnVisibilityButtonLabel = "Hide columns",
   isLoading = false,
   pagination,
+  primaryFilters,
+  secondaryFilters,
+  customLabels = {
+    columnVisibilityButton: "Hide columns",
+    filters: "Filters",
+    moreFilters: "More filters"
+  },
   onSelectAll,
   onSelect,
-  Filters,
   className,
   tableClassName
 }) {
@@ -149,40 +154,45 @@ function DataTable({
     });
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden", className), children: [
-    (showColumnVisibilityControls || Filters) && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-end justify-between p-1", children: [
-      !isMobile && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: Filters }),
-      isMobile && /* @__PURE__ */ jsx("div", { className: "flex w-full justify-end", children: Filters && /* @__PURE__ */ jsxs(PopoverRoot, { children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", StartIcon: FunnelSimple, children: "Filters" }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { align: "center", className: "w-fit p-4", children: Filters })
-      ] }) }),
-      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: columnVisibilityButtonLabel }) }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
-          /* @__PURE__ */ jsx(
-            DropdownMenuCheckboxItem,
-            {
-              className: "capitalize",
-              checked: table.getAllColumns().every((column) => column.getIsVisible()),
-              onSelect: (event) => event.preventDefault(),
-              onCheckedChange: (value) => table.getAllColumns().forEach((column) => column.toggleVisibility(!!value)),
-              children: "Select all"
-            },
-            "all-columns"
-          ),
-          /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "bg-neutral-100" }),
-          table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
-            return /* @__PURE__ */ jsx(
+    (showColumnVisibilityControls || primaryFilters || secondaryFilters) && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-end justify-between p-1", children: [
+      !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(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__ */ jsxs(DropdownMenuContent, { children: [
+            /* @__PURE__ */ jsx(
               DropdownMenuCheckboxItem,
               {
                 className: "capitalize",
-                checked: column.getIsVisible(),
+                checked: table.getAllColumns().every((column) => column.getIsVisible()),
                 onSelect: (event) => event.preventDefault(),
-                onCheckedChange: (value) => column.toggleVisibility(!!value),
-                children: column.columnDef.header?.toString()
+                onCheckedChange: (value) => table.getAllColumns().forEach((column) => column.toggleVisibility(!!value)),
+                children: "Select all"
               },
-              column.id
-            );
-          })
+              "all-columns"
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "bg-neutral-100" }),
+            table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
+              return /* @__PURE__ */ jsx(
+                DropdownMenuCheckboxItem,
+                {
+                  className: "capitalize",
+                  checked: column.getIsVisible(),
+                  onSelect: (event) => event.preventDefault(),
+                  onCheckedChange: (value) => column.toggleVisibility(!!value),
+                  children: column.columnDef.header?.toString()
+                },
+                column.id
+              );
+            })
+          ] })
         ] })
       ] })
     ] }),

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  /** Custom text for the column visibility button */\n  readonly columnVisibilityButtonLabel?: string\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  /** Optional component to render filters */\n  readonly Filters?: React.ReactNode\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  columnVisibilityButtonLabel = 'Hide columns',\n  isLoading = false,\n  pagination,\n  onSelectAll,\n  onSelect,\n  Filters,\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 || Filters) && (\n        <div className=\"flex flex-shrink-0 items-end justify-between p-1\">\n          {!isMobile && <div className=\"flex items-center gap-2\">{Filters}</div>}\n          {isMobile && (\n            <div className=\"flex w-full justify-end\">\n              {Filters && (\n                <PopoverRoot>\n                  <PopoverTrigger asChild>\n                    <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple}>\n                      Filters\n                    </Button>\n                  </PopoverTrigger>\n                  <PopoverContent align=\"center\" className=\"w-fit p-4\">\n                    {Filters}\n                  </PopoverContent>\n                </PopoverRoot>\n              )}\n            </div>\n          )}\n          {showColumnVisibilityControls && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                  {columnVisibilityButtonLabel}\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      )}\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":";;;;;;;;;;;;;;;;AA6IO;AAA+C;AAC3C;AACT;AACoD;AACrB;AACD;AAClB;AACZ;AACA;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;AAA+D;AAKxD;AAIA;AAGA;AAGN;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;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'\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;;"}

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

@@ -1,4 +1,4 @@
-import { DateRange, PropsSingle, PropsRange, PropsBase } from 'react-day-picker';
+import { DateRange, PropsBase } from 'react-day-picker';
 type BaseDatePickerProps = {
     /**
      * Placeholder text displayed when no date is selected
@@ -10,21 +10,29 @@ type BaseDatePickerProps = {
      * @default 'MMM d, yyyy'
      */
     format?: string;
-} & PropsBase;
-type SingleDatePickerProps = BaseDatePickerProps & {
+    /**
+     * ClassName for the button
+     */
+    buttonClassName?: string;
+} & Omit<PropsBase, 'mode' | 'selected' | 'onSelect'>;
+type SingleDatePickerProps = {
     variant?: 'single';
+    value?: Date;
     initialValue?: Date;
-    buttonClassName?: string;
-    onDateChange?: (date: Date | undefined) => void;
-} & Omit<PropsSingle, 'mode' | 'selected' | 'onSelect'>;
-type RangeDatePickerProps = BaseDatePickerProps & {
+    onChange?: (date: Date | undefined) => void;
+    closeOnSelect?: boolean;
+    showYearSwitcher?: boolean;
+} & BaseDatePickerProps;
+type RangeDatePickerProps = {
     variant: 'range';
+    value?: DateRange;
     initialValue?: DateRange;
-    buttonClassName?: string;
-    onDateChange?: (date: DateRange | undefined) => void;
-} & Omit<PropsRange, 'mode' | 'selected' | 'onSelect'>;
+    onChange?: (date: DateRange | undefined) => void;
+    closeOnSelect?: never;
+    showYearSwitcher?: never;
+} & BaseDatePickerProps;
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
-declare function DatePicker({ variant, placeholder, initialValue, onDateChange, buttonClassName, ...rest }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DatePicker {
     var displayName: string;
 }

package/dist/components/DatePicker/DatePicker.js

@@ -4,43 +4,58 @@ import * as React from 'react';
 import { format } from 'date-fns';
 import { cn } from '../../lib/utils.js';
 import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
-import { Button } from '../Button/Button.js';
+import { Button, buttonVariants } from '../Button/Button.js';
 import { Calendar } from '../Calendar/Calendar.js';
 import { CalendarBlank } from '@phosphor-icons/react';
 
-function DatePicker({
-  variant = "single",
-  placeholder = variant === "single" ? "Pick a date" : "Pick a date range",
-  initialValue,
-  onDateChange,
-  buttonClassName,
-  ...rest
-}) {
-  const [singleDate, setSingleDate] = React.useState(
-    variant === "single" ? initialValue : undefined
+function isDateRange(value) {
+  return typeof value === "object" && value !== null && "from" in value;
+}
+function DatePicker(props) {
+  const {
+    variant = "single",
+    placeholder = variant === "single" ? "Pick a date" : "Pick a date range",
+    initialValue,
+    value,
+    onChange,
+    buttonClassName,
+    closeOnSelect = variant === "single",
+    showYearSwitcher = variant === "single",
+    ...rest
+  } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [internalSingleDate, setInternalSingleDate] = React.useState(
+    variant === "single" && initialValue instanceof Date ? initialValue : undefined
   );
-  const [dateRange, setDateRange] = React.useState(
-    variant === "range" ? initialValue : undefined
+  const [internalDateRange, setInternalDateRange] = React.useState(
+    variant === "range" && isDateRange(initialValue) ? initialValue : undefined
   );
-  const formatDate = () => {
-    if (variant === "single") {
-      return singleDate ? format(singleDate, rest.format ?? "MMM d, yyyy") : placeholder;
-    } else {
-      return dateRange ? `${dateRange.from ? format(dateRange.from, rest.format ?? "MMM d, yyyy") : ""} - ${dateRange.to ? format(dateRange.to, rest.format ?? "MMM d, yyyy") : ""}` : placeholder;
-    }
-  };
+  const singleDate = variant === "single" && value instanceof Date ? value : internalSingleDate;
+  const dateRange = variant === "range" && isDateRange(value) ? value : internalDateRange;
   const handleSelect = React.useCallback(
-    (date) => {
+    (selectedDate) => {
       if (variant === "single") {
-        setSingleDate(date);
-        onDateChange?.(date);
+        const date = selectedDate;
+        setInternalSingleDate(date);
+        if (onChange && typeof onChange === "function") onChange(date);
+        if (closeOnSelect) {
+          setIsOpen(false);
+        }
       } else {
-        setDateRange(date);
-        onDateChange?.(date);
+        const range = selectedDate;
+        setInternalDateRange(range);
+        if (onChange && typeof onChange === "function") onChange(range);
       }
     },
-    [variant, onDateChange]
+    [variant, onChange, closeOnSelect]
   );
+  const formatDate = () => {
+    if (variant === "single") {
+      return singleDate ? format(singleDate, rest.format ?? "MMM d, yyyy") : placeholder;
+    }
+    if (!dateRange) return placeholder;
+    return `${dateRange.from ? format(dateRange.from, rest.format ?? "MMM d, yyyy") : ""} - ${dateRange.to ? format(dateRange.to, rest.format ?? "MMM d, yyyy") : ""}`;
+  };
   const calendarProps = React.useMemo(() => {
     const baseProps = {
       ...rest,
@@ -51,39 +66,46 @@ function DatePicker({
         ...baseProps,
         mode: "single",
         selected: singleDate,
-        onSelect: handleSelect,
+        onSelect: (date) => handleSelect(date),
         defaultMonth: singleDate ?? /* @__PURE__ */ new Date()
       };
-    } else {
-      return {
-        ...baseProps,
-        mode: "range",
-        selected: dateRange,
-        onSelect: handleSelect,
-        defaultMonth: dateRange?.from ?? /* @__PURE__ */ new Date(),
-        numberOfMonths: rest.numberOfMonths ?? 2
-      };
     }
+    return {
+      ...baseProps,
+      mode: "range",
+      selected: dateRange,
+      onSelect: (range) => handleSelect(range),
+      defaultMonth: dateRange?.from ?? /* @__PURE__ */ new Date(),
+      numberOfMonths: rest.numberOfMonths ?? 2
+    };
   }, [variant, rest, singleDate, dateRange, handleSelect]);
-  return /* @__PURE__ */ jsxs(PopoverRoot, { children: [
+  return /* @__PURE__ */ jsxs(PopoverRoot, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
         id: rest.id,
         variant: "ghost",
         className: cn(
-          buttonClassName,
           "w-fit justify-start text-left font-normal",
-          !(variant === "single" ? singleDate : dateRange) && "text-muted-foreground"
+          !(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" }),
+          /* @__PURE__ */ jsx(CalendarBlank, { className: "mr-2 h-4 w-4 shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: formatDate() })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "center", children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps, className: "border-0" }) })
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "center", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        ...calendarProps,
+        className: "border-0",
+        showYearSwitcher: variant === "single" ? showYearSwitcher : false
+      }
+    ) })
   ] });
 }
 DatePicker.displayName = "DatePicker";

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, PropsSingle, PropsRange, PropsBase } from 'react-day-picker'\n\nimport { cn } from '@/lib/utils'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { Button } 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} & PropsBase\n\ntype SingleDatePickerProps = BaseDatePickerProps & {\n  variant?: 'single'\n  initialValue?: Date\n  buttonClassName?: string\n  onDateChange?: (date: Date | undefined) => void\n} & Omit<PropsSingle, 'mode' | 'selected' | 'onSelect'>\n\ntype RangeDatePickerProps = BaseDatePickerProps & {\n  variant: 'range'\n  initialValue?: DateRange\n  buttonClassName?: string\n  onDateChange?: (date: DateRange | undefined) => void\n} & Omit<PropsRange, 'mode' | 'selected' | 'onSelect'>\n\nexport type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps\n\nfunction DatePicker({\n  variant = 'single',\n  placeholder = variant === 'single' ? 'Pick a date' : 'Pick a date range',\n  initialValue,\n  onDateChange,\n  buttonClassName,\n  ...rest\n}: DatePickerProps) {\n  const [singleDate, setSingleDate] = React.useState<Date | undefined>(\n    variant === 'single' ? (initialValue as Date | undefined) : undefined,\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>(\n    variant === 'range' ? (initialValue as DateRange | undefined) : undefined,\n  )\n\n  const formatDate = () => {\n    if (variant === 'single') {\n      return singleDate ? format(singleDate, rest.format ?? 'MMM d, yyyy') : placeholder\n    } else {\n      return dateRange\n        ? `${dateRange.from ? format(dateRange.from, rest.format ?? 'MMM d, yyyy') : ''} - ${\n            dateRange.to ? format(dateRange.to, rest.format ?? 'MMM d, yyyy') : ''\n          }`\n        : placeholder\n    }\n  }\n\n  const handleSelect = React.useCallback(\n    (date: Date | DateRange | undefined) => {\n      if (variant === 'single') {\n        setSingleDate(date as Date | undefined)\n        onDateChange?.(date as Date & DateRange)\n      } else {\n        setDateRange(date as DateRange | undefined)\n        onDateChange?.(date as Date & DateRange)\n      }\n    },\n    [variant, onDateChange],\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: handleSelect as (date: Date | undefined) => void,\n        defaultMonth: singleDate ?? new Date(),\n      }\n    } else {\n      return {\n        ...baseProps,\n        mode: 'range' as const,\n        selected: dateRange,\n        onSelect: handleSelect as (date: DateRange | undefined) => void,\n        defaultMonth: dateRange?.from ?? new Date(),\n        numberOfMonths: rest.numberOfMonths ?? 2,\n      }\n    }\n  }, [variant, rest, singleDate, dateRange, handleSelect])\n\n  return (\n    <PopoverRoot>\n      <PopoverTrigger asChild>\n        <Button\n          id={rest.id}\n          variant=\"ghost\"\n          className={cn(\n            buttonClassName,\n            'w-fit justify-start text-left font-normal',\n            !(variant === 'single' ? singleDate : dateRange) && 'text-muted-foreground',\n          )}\n          disabled={typeof rest.disabled === 'boolean' ? rest.disabled : false}\n        >\n          <CalendarBlank className=\"mr-2 h-4 w-4\" />\n          <span>{formatDate()}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"center\">\n        <Calendar {...calendarProps} className=\"border-0\" />\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n"],"names":[],"mappings":";;;;;;;;;;AAyCA;AAAoB;AACR;AAC2C;AACrD;AACA;AACA;AAEF;AACE;AAA0C;AACoB;AAE9D;AAAwC;AAC0B;AAGlE;AACE;AACE;AAAuE;AAEvE;AAII;AACN;AAGF;AAA2B;AAEvB;AACE;AACA;AAAuC;AAEvC;AACA;AAAuC;AACzC;AACF;AACsB;AAGxB;AACE;AAAkB;AACb;AACW;AAGhB;AACE;AAAO;AACF;AACG;AACI;AACA;AAC2B;AACvC;AAEA;AAAO;AACF;AACG;AACI;AACA;AACgC;AACH;AACzC;AACF;AAGF;AAEI;AACE;AAAC;AAAA;AACU;AACD;AACG;AACT;AACA;AACoD;AACtD;AAC+D;AAE/D;AAAwC;AACpB;AAAA;AAAA;AAExB;AAGA;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            '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;;"}

package/dist/components/Dialog/Dialog.d.ts

@@ -5,7 +5,9 @@ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dia
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    closable?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;