periplo-ui 3.65.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -0
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/Combobox/Combobox.js.map +1 -1
- package/dist/components/Combobox/ComboboxOptionWithTooltip.js.map +1 -1
- package/dist/components/Combobox/StaticComboboxList.js.map +1 -1
- package/dist/components/Combobox/VirtualizedComboboxList.js.map +1 -1
- package/dist/components/Combobox/useCombobox.js.map +1 -1
- package/dist/components/DataTable/components/DataTableBody.js.map +1 -1
- package/dist/components/DataTable/components/DataTablePagination.js.map +1 -1
- package/dist/components/DataTable/components/DataTableRowSelector.js.map +1 -1
- package/dist/components/DataTable/components/DataTableSelectHeader.js.map +1 -1
- package/dist/components/DataTable/components/DataTableToolbar.js.map +1 -1
- package/dist/components/DataTable/data.js.map +1 -1
- package/dist/components/DataTable/hooks/useSelection.js.map +1 -1
- package/dist/components/DatePicker/hooks/useLocale.js.map +1 -1
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +3 -1
- package/dist/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/InputDate/InputDate.js.map +1 -1
- package/dist/components/InputDate/manualDateFormat.js.map +1 -1
- package/dist/components/LazyDatePicker/LazyDatePicker.js.map +1 -1
- package/dist/components/Pagination/Pagination.js +2 -1
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Progress/Progress.js.map +1 -1
- package/dist/components/Progress/hooks/useFakeProgress.js.map +1 -1
- package/dist/components/Select/Select.js +3 -1
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Sheet/Sheet.js +1 -1
- package/dist/components/Sheet/Sheet.js.map +1 -1
- package/dist/components/StarRating/StarRating.js.map +1 -1
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Textarea/Textarea.js +1 -1
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.js.map +1 -1
- package/dist/components/TruncatedTypographyWithTooltip/TruncatedTypographyWithTooltip.js.map +1 -1
- package/dist/components/Typography/Typography.js.map +1 -1
- package/dist/lib/dateUtils.js +1 -1
- package/dist/lib/dateUtils.js.map +1 -1
- package/dist/lib/useMobile.js.map +1 -1
- package/package.json +168 -58
- package/dist/fonts/Onest.woff2 +0 -0
- package/dist/theme.css +0 -260
package/README.md
CHANGED
|
@@ -13,6 +13,41 @@
|
|
|
13
13
|
npm install periplo-ui
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
+
Starting in **v4.0.0**, periplo-ui declares heavy libraries as **peer dependencies** so consumers control the versions and avoid duplicates. See [MIGRATION.md](./MIGRATION.md) for upgrade steps. Install only what your app uses:
|
|
17
|
+
|
|
18
|
+
- Always required: `react`, `react-dom`
|
|
19
|
+
- When using `<Form>` and form-bound inputs (`MultiSelect`, `RadioGroup`, `InlineMultiSelect`, `DatePicker`): `react-hook-form`, `@hookform/resolvers`, `zod`
|
|
20
|
+
- Per-component peers (install only if you import the component):
|
|
21
|
+
- Calendar / DatePicker → `react-day-picker`, `date-fns`
|
|
22
|
+
- Carousel → `embla-carousel-react`
|
|
23
|
+
- Command / Combobox → `cmdk`
|
|
24
|
+
- DataTable → `@tanstack/react-table`
|
|
25
|
+
- Combobox / MultiSelect → `@tanstack/react-virtual`
|
|
26
|
+
- Toaster → `sonner`
|
|
27
|
+
- Any Radix-based component → its matching `@radix-ui/react-*`
|
|
28
|
+
- Icons used in your app → `@phosphor-icons/react`
|
|
29
|
+
|
|
30
|
+
Quick install of everything (matches v3 behavior):
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm install periplo-ui react react-dom react-hook-form @hookform/resolvers zod \
|
|
34
|
+
react-day-picker date-fns embla-carousel-react cmdk \
|
|
35
|
+
@tanstack/react-table @tanstack/react-virtual sonner @phosphor-icons/react \
|
|
36
|
+
@radix-ui/react-accordion @radix-ui/react-avatar @radix-ui/react-checkbox \
|
|
37
|
+
@radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-dropdown-menu \
|
|
38
|
+
@radix-ui/react-label @radix-ui/react-popover @radix-ui/react-progress \
|
|
39
|
+
@radix-ui/react-radio-group @radix-ui/react-select @radix-ui/react-separator \
|
|
40
|
+
@radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-toggle \
|
|
41
|
+
@radix-ui/react-toggle-group @radix-ui/react-tooltip
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
After install, run `npm dedupe` (or `pnpm dedupe`) and verify only one copy is present, e.g.:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm ls react-hook-form # must show exactly one entry
|
|
48
|
+
npm ls zod # must show exactly one entry
|
|
49
|
+
```
|
|
50
|
+
|
|
16
51
|
3. **Configuration:**
|
|
17
52
|
1. **Root Layout Setup** (Next.js):
|
|
18
53
|
|
|
@@ -1 +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 type AvatarProps = 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\ntype AvatarGroupProps = {\n /** Optional custom className */\n className?: string\n /** Children should be Avatar components */\n children: React.ReactNode\n} & React.HTMLAttributes<HTMLDivElement>\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', 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,+CAAA,EAAiD;AAAA,EAC1E,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,IAAA,EAAM;AAAA;AAAA,MAEJ,EAAA,EAAI,SAAA;AAAA;AAAA,MAEJ,EAAA,EAAI,WAAA;AAAA;AAAA,MAEJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAQD,MAAM,SAASA,cAAA,CAAM,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC9B,GAAA,CAAC,eAAA,CAAgB,IAAA,EAAhB,EAAqB,GAAA,EAAU,SAAA,EAAW,EAAA,CAAG,cAAA,CAAe,EAAE,IAAA,EAAM,WAAW,CAAC,CAAA,EAAI,GAAG,KAAA,EAAO;AAEnG;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AAQrB,MAAM,WAAA,GAAcA,eAAM,UAAA,CAGxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAAC,eAAA,CAAgB,KAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,mEAAA,EAAqE,SAAS,CAAA;AAAA,IAC3F,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAO1B,MAAM,cAAA,GAAiBA,eAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAAC,eAAA,CAAgB,QAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,sEAAA,EAAwE,SAAS,CAAA;AAAA,IAC9F,GAAG;AAAA;AACN,CACD;AACD,cAAA,CAAe,WAAA,GAAc,gBAAA;AAc7B,MAAM,WAAA,GAAcA,cAAA,CAAM,UAAA,CAA6C,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACjH,EAAA,MAAM,mBAAmBA,cAAA,CAAM,QAAA,CAAS,GAAA,CAAI,QAAA,EAAU,CAAC,KAAA,KAAU;AAC/D,IAAA,IAAIA,eAAM,cAAA,CAA4B,KAAK,CAAA,IAAK,KAAA,CAAM,SAAS,MAAA,EAAQ;AACrE,MAAA,OAAOA,cAAA,CAAM,aAAa,KAAA,EAAO;AAAA,QAC/B,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,KAAA,CAAM,MAAM,SAAS;AAAA,OACzD,CAAA;AAAA;
|
|
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 type AvatarProps = 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\ntype AvatarGroupProps = {\n /** Optional custom className */\n className?: string\n /** Children should be Avatar components */\n children: React.ReactNode\n} & React.HTMLAttributes<HTMLDivElement>\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', 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,+CAAA,EAAiD;AAAA,EAC1E,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,IAAA,EAAM;AAAA;AAAA,MAEJ,EAAA,EAAI,SAAA;AAAA;AAAA,MAEJ,EAAA,EAAI,WAAA;AAAA;AAAA,MAEJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAQD,MAAM,SAASA,cAAA,CAAM,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC9B,GAAA,CAAC,eAAA,CAAgB,IAAA,EAAhB,EAAqB,GAAA,EAAU,SAAA,EAAW,EAAA,CAAG,cAAA,CAAe,EAAE,IAAA,EAAM,WAAW,CAAC,CAAA,EAAI,GAAG,KAAA,EAAO;AAEnG;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AAQrB,MAAM,WAAA,GAAcA,eAAM,UAAA,CAGxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAAC,eAAA,CAAgB,KAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,mEAAA,EAAqE,SAAS,CAAA;AAAA,IAC3F,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAO1B,MAAM,cAAA,GAAiBA,eAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAAC,eAAA,CAAgB,QAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,sEAAA,EAAwE,SAAS,CAAA;AAAA,IAC9F,GAAG;AAAA;AACN,CACD;AACD,cAAA,CAAe,WAAA,GAAc,gBAAA;AAc7B,MAAM,WAAA,GAAcA,cAAA,CAAM,UAAA,CAA6C,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACjH,EAAA,MAAM,mBAAmBA,cAAA,CAAM,QAAA,CAAS,GAAA,CAAI,QAAA,EAAU,CAAC,KAAA,KAAU;AAC/D,IAAA,IAAIA,eAAM,cAAA,CAA4B,KAAK,CAAA,IAAK,KAAA,CAAM,SAAS,MAAA,EAAQ;AACrE,MAAA,OAAOA,cAAA,CAAM,aAAa,KAAA,EAAO;AAAA,QAC/B,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,KAAA,CAAM,MAAM,SAAS;AAAA,OACzD,CAAA;AAAA,IACH;AACA,IAAA,OAAO,KAAA;AAAA,EACT,CAAC,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,EAAA,CAAG,mBAAmB,SAAS,CAAA,EAAI,GAAG,KAAA,EAC7D,QAAA,EAAA,gBAAA,EACH,CAAA;AAEJ,CAAC;AAED,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\nconst badgeVariants = cva('rounded-full', {\n variants: {\n /**\n * Controls the color scheme of the badge\n * @default 'accent'\n */\n color: {\n /** Default gray appearance */\n neutral: 'bg-neutral text-neutral-foreground',\n /** Accent brand color */\n accent: 'bg-accent text-accent-foreground',\n /** Primary brand color */\n primary: 'bg-primary text-primary-foreground',\n /** Indicates successful or positive state */\n success: 'bg-success text-success-foreground ',\n /** Indicates warning or cautionary state */\n warning: 'bg-warning text-warning-foreground',\n /** Indicates error or critical state */\n error: 'bg-error text-error-foreground',\n },\n /**\n * Controls the size of the badge\n * @default 'md'\n */\n size: {\n /** Small size - 8px */\n sm: 'h-2 w-2',\n /** Medium size - 12px */\n md: 'h-3 w-3',\n /** Large size - 16px */\n lg: 'h-4 w-4',\n },\n /**\n * Controls the position of the badge relative to its container\n * @default 'top-right'\n */\n position: {\n /** Places the badge in the top-right corner */\n 'top-right': 'right-0 top-0',\n /** Places the badge in the top-left corner */\n 'top-left': 'left-0 top-0',\n /** Places the badge in the bottom-right corner */\n 'bottom-right': 'right-0 bottom-0',\n /** Places the badge in the bottom-left corner */\n 'bottom-left': 'left-0 bottom-0',\n },\n /**\n * Controls whether the badge displays a number\n * @default false\n */\n numeric: {\n true: 'min-w-[16px] h-4 px-1 flex items-center justify-center text-[10px] font-medium',\n false: '',\n },\n },\n defaultVariants: {\n color: 'primary',\n size: 'md',\n position: 'top-right',\n numeric: false,\n },\n})\n\nexport type BadgeProps = {\n /**\n * Controls the visibility of the pulsing animation effect\n * @default true\n */\n ping?: boolean\n\n /**\n * The color variant of the badge\n * @default 'accent'\n */\n color?: 'neutral' | 'accent' | 'primary' | 'success' | 'warning' | 'error'\n\n /**\n * The size of the badge\n * @default 'md'\n */\n size?: 'sm' | 'md' | 'lg'\n\n /**\n * The position of the badge relative to its container\n * @default 'top-right'\n */\n position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n /**\n * The number to display in the badge)\n */\n count?: number\n} & React.HTMLAttributes<HTMLElement> &\n VariantProps<typeof badgeVariants>\n\n/**\n * A status indicator component that can be used to show notifications,\n * status, or draw attention to an element.\n *\n * @example\n * ```tsx\n * // Simple notification badge\n * <div className=\"relative\">\n * <Bell className=\"h-6 w-6\" />\n * <Badge intent=\"error\" />\n * </div>\n *\n * // Custom size and position\n * <div className=\"relative\">\n * <Avatar />\n * <Badge\n * intent=\"success\"\n * size=\"sm\"\n * position=\"bottom-right\"\n * ping={false}\n * />\n * </div>\n * ```\n */\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, color = 'accent', size = 'md', position = 'top-right', ping = true, count, ...props }, ref) => {\n const sizeClasses = {\n sm: 'h-2 w-2',\n md: 'h-3 w-3',\n lg: 'h-4 w-4',\n }[size || 'md']\n\n return (\n <span\n className={cn(\n 'absolute flex',\n badgeVariants({ color, position, numeric: !!count }),\n !count && sizeClasses,\n className,\n )}\n ref={ref}\n {...props}\n >\n {ping && (\n <span\n className={cn(badgeVariants({ color }), 'absolute inline-flex h-full w-full animate-ping opacity-75')}\n />\n )}\n <span\n className={cn(badgeVariants({ color }), 'relative inline-flex h-full w-full items-center justify-center')}\n >\n {count}\n </span>\n </span>\n )\n },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;;AAKA,MAAM,aAAA,GAAgB,IAAI,cAAA,EAAgB;AAAA,EACxC,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,KAAA,EAAO;AAAA;AAAA,MAEL,OAAA,EAAS,oCAAA;AAAA;AAAA,MAET,MAAA,EAAQ,kCAAA;AAAA;AAAA,MAER,OAAA,EAAS,oCAAA;AAAA;AAAA,MAET,OAAA,EAAS,sCAAA;AAAA;AAAA,MAET,OAAA,EAAS,oCAAA;AAAA;AAAA,MAET,KAAA,EAAO;AAAA,KACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA,EAAM;AAAA;AAAA,MAEJ,EAAA,EAAI,SAAA;AAAA;AAAA,MAEJ,EAAA,EAAI,SAAA;AAAA;AAAA,MAEJ,EAAA,EAAI;AAAA,KACN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA,EAAU;AAAA;AAAA,MAER,WAAA,EAAa,eAAA;AAAA;AAAA,MAEb,UAAA,EAAY,cAAA;AAAA;AAAA,MAEZ,cAAA,EAAgB,kBAAA;AAAA;AAAA,MAEhB,aAAA,EAAe;AAAA,KACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,gFAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM,IAAA;AAAA,IACN,QAAA,EAAU,WAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb,CAAC;AA0DD,MAAM,QAAQ,KAAA,CAAM,UAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,UAAU,IAAA,GAAO,IAAA,EAAM,QAAA,GAAW,WAAA,EAAa,OAAO,IAAA,EAAM,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC3G,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN,CAAE,QAAQ,IAAI,CAAA;AAEd,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,eAAA;AAAA,UACA,aAAA,CAAc,EAAE,KAAA,EAAO,QAAA,EAAU,SAAS,CAAC,CAAC,OAAO,CAAA;AAAA,UACnD,CAAC,KAAA,IAAS,WAAA;AAAA,UACV;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,KAAA,EAAO,GAAG,4DAA4D;AAAA;AAAA,WACtG;AAAA,0BAEF,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,KAAA,EAAO,GAAG,gEAAgE,CAAA;AAAA,cAEvG,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA;
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\nconst badgeVariants = cva('rounded-full', {\n variants: {\n /**\n * Controls the color scheme of the badge\n * @default 'accent'\n */\n color: {\n /** Default gray appearance */\n neutral: 'bg-neutral text-neutral-foreground',\n /** Accent brand color */\n accent: 'bg-accent text-accent-foreground',\n /** Primary brand color */\n primary: 'bg-primary text-primary-foreground',\n /** Indicates successful or positive state */\n success: 'bg-success text-success-foreground ',\n /** Indicates warning or cautionary state */\n warning: 'bg-warning text-warning-foreground',\n /** Indicates error or critical state */\n error: 'bg-error text-error-foreground',\n },\n /**\n * Controls the size of the badge\n * @default 'md'\n */\n size: {\n /** Small size - 8px */\n sm: 'h-2 w-2',\n /** Medium size - 12px */\n md: 'h-3 w-3',\n /** Large size - 16px */\n lg: 'h-4 w-4',\n },\n /**\n * Controls the position of the badge relative to its container\n * @default 'top-right'\n */\n position: {\n /** Places the badge in the top-right corner */\n 'top-right': 'right-0 top-0',\n /** Places the badge in the top-left corner */\n 'top-left': 'left-0 top-0',\n /** Places the badge in the bottom-right corner */\n 'bottom-right': 'right-0 bottom-0',\n /** Places the badge in the bottom-left corner */\n 'bottom-left': 'left-0 bottom-0',\n },\n /**\n * Controls whether the badge displays a number\n * @default false\n */\n numeric: {\n true: 'min-w-[16px] h-4 px-1 flex items-center justify-center text-[10px] font-medium',\n false: '',\n },\n },\n defaultVariants: {\n color: 'primary',\n size: 'md',\n position: 'top-right',\n numeric: false,\n },\n})\n\nexport type BadgeProps = {\n /**\n * Controls the visibility of the pulsing animation effect\n * @default true\n */\n ping?: boolean\n\n /**\n * The color variant of the badge\n * @default 'accent'\n */\n color?: 'neutral' | 'accent' | 'primary' | 'success' | 'warning' | 'error'\n\n /**\n * The size of the badge\n * @default 'md'\n */\n size?: 'sm' | 'md' | 'lg'\n\n /**\n * The position of the badge relative to its container\n * @default 'top-right'\n */\n position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n /**\n * The number to display in the badge)\n */\n count?: number\n} & React.HTMLAttributes<HTMLElement> &\n VariantProps<typeof badgeVariants>\n\n/**\n * A status indicator component that can be used to show notifications,\n * status, or draw attention to an element.\n *\n * @example\n * ```tsx\n * // Simple notification badge\n * <div className=\"relative\">\n * <Bell className=\"h-6 w-6\" />\n * <Badge intent=\"error\" />\n * </div>\n *\n * // Custom size and position\n * <div className=\"relative\">\n * <Avatar />\n * <Badge\n * intent=\"success\"\n * size=\"sm\"\n * position=\"bottom-right\"\n * ping={false}\n * />\n * </div>\n * ```\n */\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, color = 'accent', size = 'md', position = 'top-right', ping = true, count, ...props }, ref) => {\n const sizeClasses = {\n sm: 'h-2 w-2',\n md: 'h-3 w-3',\n lg: 'h-4 w-4',\n }[size || 'md']\n\n return (\n <span\n className={cn(\n 'absolute flex',\n badgeVariants({ color, position, numeric: !!count }),\n !count && sizeClasses,\n className,\n )}\n ref={ref}\n {...props}\n >\n {ping && (\n <span\n className={cn(badgeVariants({ color }), 'absolute inline-flex h-full w-full animate-ping opacity-75')}\n />\n )}\n <span\n className={cn(badgeVariants({ color }), 'relative inline-flex h-full w-full items-center justify-center')}\n >\n {count}\n </span>\n </span>\n )\n },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;;AAKA,MAAM,aAAA,GAAgB,IAAI,cAAA,EAAgB;AAAA,EACxC,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,KAAA,EAAO;AAAA;AAAA,MAEL,OAAA,EAAS,oCAAA;AAAA;AAAA,MAET,MAAA,EAAQ,kCAAA;AAAA;AAAA,MAER,OAAA,EAAS,oCAAA;AAAA;AAAA,MAET,OAAA,EAAS,sCAAA;AAAA;AAAA,MAET,OAAA,EAAS,oCAAA;AAAA;AAAA,MAET,KAAA,EAAO;AAAA,KACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA,EAAM;AAAA;AAAA,MAEJ,EAAA,EAAI,SAAA;AAAA;AAAA,MAEJ,EAAA,EAAI,SAAA;AAAA;AAAA,MAEJ,EAAA,EAAI;AAAA,KACN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA,EAAU;AAAA;AAAA,MAER,WAAA,EAAa,eAAA;AAAA;AAAA,MAEb,UAAA,EAAY,cAAA;AAAA;AAAA,MAEZ,cAAA,EAAgB,kBAAA;AAAA;AAAA,MAEhB,aAAA,EAAe;AAAA,KACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,gFAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM,IAAA;AAAA,IACN,QAAA,EAAU,WAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb,CAAC;AA0DD,MAAM,QAAQ,KAAA,CAAM,UAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,UAAU,IAAA,GAAO,IAAA,EAAM,QAAA,GAAW,WAAA,EAAa,OAAO,IAAA,EAAM,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC3G,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN,CAAE,QAAQ,IAAI,CAAA;AAEd,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,eAAA;AAAA,UACA,aAAA,CAAc,EAAE,KAAA,EAAO,QAAA,EAAU,SAAS,CAAC,CAAC,OAAO,CAAA;AAAA,UACnD,CAAC,KAAA,IAAS,WAAA;AAAA,UACV;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,KAAA,EAAO,GAAG,4DAA4D;AAAA;AAAA,WACtG;AAAA,0BAEF,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,KAAA,EAAO,GAAG,gEAAgE,CAAA;AAAA,cAEvG,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { CaretRight } from '@phosphor-icons/react/dist/ssr/CaretRight'\nimport { DotsThree } from '@phosphor-icons/react/dist/ssr/DotsThree'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Root container for the breadcrumb navigation.\n * Provides the overall context and ARIA labeling.\n */\nconst BreadcrumbRoot = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<'nav'> & {\n /** Custom separator element to use between breadcrumb items */\n separator?: React.ReactNode\n }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumbRoot.displayName = 'BreadcrumbRoot'\n\n/**\n * Container for breadcrumb items.\n * Handles layout and spacing of the breadcrumb navigation.\n */\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',\n className,\n )}\n {...props}\n />\n ),\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n/**\n * Individual breadcrumb item container.\n * Wraps a link or the current page indicator.\n */\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />\n ),\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n/** Text transform options for breadcrumb links */\ntype TextTransformOption = 'capitalize' | 'capitalize-first' | 'uppercase' | 'none'\n\n/** Get class names for text transform styling */\nconst getTextTransformClass = (transform: TextTransformOption): string => {\n switch (transform) {\n case 'capitalize-first':\n return '[&]:has-[::first-letter]:uppercase'\n case 'capitalize':\n return 'capitalize'\n case 'uppercase':\n return 'uppercase'\n default:\n return ''\n }\n}\n\n/**\n * Interactive link element for breadcrumb navigation.\n * Can be rendered as a custom element using asChild.\n */\nconst BreadcrumbLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentPropsWithoutRef<'a'> & {\n /** When true, the component will render its children directly instead of wrapping them in an anchor tag */\n asChild?: boolean\n /** The text transformation to apply to the link text */\n textTransform?: TextTransformOption\n }\n>(({ asChild, className, textTransform = 'capitalize-first', children, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n\n // Simplify the capitalization logic using a direct string transformation\n const content =\n textTransform === 'capitalize-first' && typeof children === 'string'\n ? children.charAt(0).toUpperCase() + children.slice(1)\n : children\n\n return (\n <Typography variant=\"title-sm\" weight={'medium'}>\n <Comp\n ref={ref}\n className={cn(\n 'text-neutral-500 transition-colors hover:text-neutral-950',\n textTransform !== 'capitalize-first' && getTextTransformClass(textTransform),\n className,\n )}\n {...props}\n >\n {content}\n </Comp>\n </Typography>\n )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n/**\n * Current page indicator in the breadcrumb.\n * Non-interactive element showing the current location.\n */\nconst BreadcrumbPage = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<'span'> & {\n textTransform?: TextTransformOption\n }\n>(({ className, textTransform = 'capitalize-first', children, ...props }, ref) => {\n const content =\n textTransform === 'capitalize-first' && typeof children === 'string'\n ? children.charAt(0).toUpperCase() + children.slice(1)\n : children\n\n return (\n <Typography variant=\"title-sm\">\n <span\n ref={ref}\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn(\n 'font-medium text-neutral-950',\n textTransform !== 'capitalize-first' && getTextTransformClass(textTransform),\n className,\n )}\n {...props}\n >\n {content}\n </span>\n </Typography>\n )\n})\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n/**\n * Separator element between breadcrumb items.\n * Can be customized with different icons or characters.\n */\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'span'>) => (\n <span aria-hidden=\"true\" className={cn('text-neutral-500 [&>svg]:size-3.5', className)} {...props}>\n {children ?? <CaretRight />}\n </span>\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n/**\n * Ellipsis indicator for truncated breadcrumb paths.\n * Used to show that there are hidden items in the path.\n */\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (\n <span aria-hidden=\"true\" className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>\n <DotsThree className=\"h-4 w-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n/**\n * Sanitizes a route string by replacing hyphens with spaces.\n * @param route - The route string to sanitize.\n * @returns The sanitized route string.\n */\nconst sanitizeRoute = (route: string) => {\n return route.replace(/-/g, ' ')\n}\n\n/**\n * Transforms a kebab-case route to a camelCase translation key\n * @param route - The route segment in kebab-case\n * @returns The translation key in camelCase\n */\nconst routeToTranslationKey = (route: string): string => {\n return route\n .split('-')\n .map((word, index) => (index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)))\n .join('')\n}\n\n/**\n * Gets the routes for the breadcrumb navigation.\n * @param pathname - The current pathname.\n * @param pathMappings - Optional object containing custom path mappings.\n * @param translation - Optional translation function.\n * @param basePath - Optional base path to strip from pathname and use as home route.\n * @returns The routes for the breadcrumb navigation.\n */\nconst getRoutes = (\n pathname: string,\n pathMappings?: Record<string, string | null>,\n translation?: (key: string) => string,\n basePath?: string,\n) => {\n // Strip the base path from pathname if it exists\n let processedPathname = pathname\n if (basePath && pathname.startsWith(basePath)) {\n processedPathname = pathname.slice(basePath.length)\n // Ensure we don't start with a slash after stripping\n if (processedPathname.startsWith('/')) {\n processedPathname = processedPathname.slice(1)\n }\n }\n\n const baseRoutes = processedPathname.split('/').filter(Boolean)\n\n const routes = baseRoutes.map((route, index) => {\n if (pathMappings && route in pathMappings && pathMappings[route] === null) {\n return null\n }\n\n let displayName = route\n\n // Check if there's a custom mapping for this route\n if (pathMappings && pathMappings[route] != null) {\n displayName = pathMappings[route]\n }\n // If there's a translation function, convert route to translation key\n else if (translation) {\n const translationKey = routeToTranslationKey(route)\n displayName = translation(translationKey)\n }\n // If no mapping or translation function, sanitize the route\n else {\n displayName = sanitizeRoute(route)\n }\n\n const routeSegments = baseRoutes.slice(0, index + 1)\n const routePath = routeSegments.join('/')\n const fullHref = basePath ? `${basePath}/${routePath}` : `/${routePath}`\n\n return {\n name: displayName,\n href: fullHref,\n }\n })\n\n // Handle home translation — hide if mapped to null\n const homeKey = 'home'\n if (!(pathMappings && homeKey in pathMappings && pathMappings[homeKey] === null)) {\n const homeHref = basePath ?? '/'\n routes.unshift({\n name: pathMappings?.[homeKey] ?? translation?.(homeKey) ?? 'Home',\n href: homeHref,\n })\n }\n\n return routes.filter(Boolean) as Array<{ name: string; href: string }>\n}\n\n/**\n * Navigation breadcrumb component.\n * Displays a breadcrumb navigation for the current path.\n * @param pathname - The current pathname\n * @param pathMappings - Optional object containing custom path mappings\n * @param translation - Optional translation function\n * @param basePath - Optional base path to strip from pathname and use as home route\n * @param textTransform - Optional text transformation to apply to breadcrumb text\n */\nconst NavigationBreadcrumb = ({\n pathname,\n pathMappings,\n translation,\n basePath,\n textTransform,\n endSlash = true,\n}: {\n pathname: string\n pathMappings?: Record<string, string | null>\n translation?: (key: string) => string\n basePath?: string\n textTransform?: TextTransformOption\n endSlash?: boolean\n}) => {\n return (\n <BreadcrumbRoot>\n <BreadcrumbList>\n {getRoutes(pathname, pathMappings, translation, basePath).map((route, index, array) => (\n <React.Fragment key={index}>\n <BreadcrumbItem>\n {index === array.length - 1 ? (\n <BreadcrumbPage textTransform={textTransform}>{route.name}</BreadcrumbPage>\n ) : (\n <BreadcrumbLink href={route.href + (endSlash ? '/' : '')} textTransform={textTransform}>\n {route.name}\n </BreadcrumbLink>\n )}\n </BreadcrumbItem>\n {index < array.length - 1 && <BreadcrumbSeparator />}\n </React.Fragment>\n ))}\n </BreadcrumbList>\n </BreadcrumbRoot>\n )\n}\n\nconst PagesBreadcrumb = ({\n pages,\n currentPage,\n}: {\n pages: Array<{ link: string; text: string }>\n currentPage: string\n}) => {\n return (\n <BreadcrumbRoot>\n <BreadcrumbList>\n {pages.map((page) => (\n <BreadcrumbItem key={pages.indexOf(page)}>\n <BreadcrumbLink href={page.link}>{page.text}</BreadcrumbLink>\n <BreadcrumbSeparator />\n </BreadcrumbItem>\n ))}\n <BreadcrumbItem>\n <BreadcrumbPage>{currentPage}</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </BreadcrumbRoot>\n )\n}\n\nexport {\n BreadcrumbRoot,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n NavigationBreadcrumb,\n PagesBreadcrumb,\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { CaretRight } from '@phosphor-icons/react/dist/ssr/CaretRight'\nimport { DotsThree } from '@phosphor-icons/react/dist/ssr/DotsThree'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Root container for the breadcrumb navigation.\n * Provides the overall context and ARIA labeling.\n */\nconst BreadcrumbRoot = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<'nav'> & {\n /** Custom separator element to use between breadcrumb items */\n separator?: React.ReactNode\n }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumbRoot.displayName = 'BreadcrumbRoot'\n\n/**\n * Container for breadcrumb items.\n * Handles layout and spacing of the breadcrumb navigation.\n */\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',\n className,\n )}\n {...props}\n />\n ),\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n/**\n * Individual breadcrumb item container.\n * Wraps a link or the current page indicator.\n */\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />\n ),\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n/** Text transform options for breadcrumb links */\ntype TextTransformOption = 'capitalize' | 'capitalize-first' | 'uppercase' | 'none'\n\n/** Get class names for text transform styling */\nconst getTextTransformClass = (transform: TextTransformOption): string => {\n switch (transform) {\n case 'capitalize-first':\n return '[&]:has-[::first-letter]:uppercase'\n case 'capitalize':\n return 'capitalize'\n case 'uppercase':\n return 'uppercase'\n default:\n return ''\n }\n}\n\n/**\n * Interactive link element for breadcrumb navigation.\n * Can be rendered as a custom element using asChild.\n */\nconst BreadcrumbLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentPropsWithoutRef<'a'> & {\n /** When true, the component will render its children directly instead of wrapping them in an anchor tag */\n asChild?: boolean\n /** The text transformation to apply to the link text */\n textTransform?: TextTransformOption\n }\n>(({ asChild, className, textTransform = 'capitalize-first', children, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n\n // Simplify the capitalization logic using a direct string transformation\n const content =\n textTransform === 'capitalize-first' && typeof children === 'string'\n ? children.charAt(0).toUpperCase() + children.slice(1)\n : children\n\n return (\n <Typography variant=\"title-sm\" weight={'medium'}>\n <Comp\n ref={ref}\n className={cn(\n 'text-neutral-500 transition-colors hover:text-neutral-950',\n textTransform !== 'capitalize-first' && getTextTransformClass(textTransform),\n className,\n )}\n {...props}\n >\n {content}\n </Comp>\n </Typography>\n )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n/**\n * Current page indicator in the breadcrumb.\n * Non-interactive element showing the current location.\n */\nconst BreadcrumbPage = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<'span'> & {\n textTransform?: TextTransformOption\n }\n>(({ className, textTransform = 'capitalize-first', children, ...props }, ref) => {\n const content =\n textTransform === 'capitalize-first' && typeof children === 'string'\n ? children.charAt(0).toUpperCase() + children.slice(1)\n : children\n\n return (\n <Typography variant=\"title-sm\">\n <span\n ref={ref}\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn(\n 'font-medium text-neutral-950',\n textTransform !== 'capitalize-first' && getTextTransformClass(textTransform),\n className,\n )}\n {...props}\n >\n {content}\n </span>\n </Typography>\n )\n})\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n/**\n * Separator element between breadcrumb items.\n * Can be customized with different icons or characters.\n */\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'span'>) => (\n <span aria-hidden=\"true\" className={cn('text-neutral-500 [&>svg]:size-3.5', className)} {...props}>\n {children ?? <CaretRight />}\n </span>\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n/**\n * Ellipsis indicator for truncated breadcrumb paths.\n * Used to show that there are hidden items in the path.\n */\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (\n <span aria-hidden=\"true\" className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>\n <DotsThree className=\"h-4 w-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n/**\n * Sanitizes a route string by replacing hyphens with spaces.\n * @param route - The route string to sanitize.\n * @returns The sanitized route string.\n */\nconst sanitizeRoute = (route: string) => {\n return route.replace(/-/g, ' ')\n}\n\n/**\n * Transforms a kebab-case route to a camelCase translation key\n * @param route - The route segment in kebab-case\n * @returns The translation key in camelCase\n */\nconst routeToTranslationKey = (route: string): string => {\n return route\n .split('-')\n .map((word, index) => (index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)))\n .join('')\n}\n\n/**\n * Gets the routes for the breadcrumb navigation.\n * @param pathname - The current pathname.\n * @param pathMappings - Optional object containing custom path mappings.\n * @param translation - Optional translation function.\n * @param basePath - Optional base path to strip from pathname and use as home route.\n * @returns The routes for the breadcrumb navigation.\n */\nconst getRoutes = (\n pathname: string,\n pathMappings?: Record<string, string | null>,\n translation?: (key: string) => string,\n basePath?: string,\n) => {\n // Strip the base path from pathname if it exists\n let processedPathname = pathname\n if (basePath && pathname.startsWith(basePath)) {\n processedPathname = pathname.slice(basePath.length)\n // Ensure we don't start with a slash after stripping\n if (processedPathname.startsWith('/')) {\n processedPathname = processedPathname.slice(1)\n }\n }\n\n const baseRoutes = processedPathname.split('/').filter(Boolean)\n\n const routes = baseRoutes.map((route, index) => {\n if (pathMappings && route in pathMappings && pathMappings[route] === null) {\n return null\n }\n\n let displayName = route\n\n // Check if there's a custom mapping for this route\n if (pathMappings && pathMappings[route] != null) {\n displayName = pathMappings[route]\n }\n // If there's a translation function, convert route to translation key\n else if (translation) {\n const translationKey = routeToTranslationKey(route)\n displayName = translation(translationKey)\n }\n // If no mapping or translation function, sanitize the route\n else {\n displayName = sanitizeRoute(route)\n }\n\n const routeSegments = baseRoutes.slice(0, index + 1)\n const routePath = routeSegments.join('/')\n const fullHref = basePath ? `${basePath}/${routePath}` : `/${routePath}`\n\n return {\n name: displayName,\n href: fullHref,\n }\n })\n\n // Handle home translation — hide if mapped to null\n const homeKey = 'home'\n if (!(pathMappings && homeKey in pathMappings && pathMappings[homeKey] === null)) {\n const homeHref = basePath ?? '/'\n routes.unshift({\n name: pathMappings?.[homeKey] ?? translation?.(homeKey) ?? 'Home',\n href: homeHref,\n })\n }\n\n return routes.filter(Boolean) as Array<{ name: string; href: string }>\n}\n\n/**\n * Navigation breadcrumb component.\n * Displays a breadcrumb navigation for the current path.\n * @param pathname - The current pathname\n * @param pathMappings - Optional object containing custom path mappings\n * @param translation - Optional translation function\n * @param basePath - Optional base path to strip from pathname and use as home route\n * @param textTransform - Optional text transformation to apply to breadcrumb text\n */\nconst NavigationBreadcrumb = ({\n pathname,\n pathMappings,\n translation,\n basePath,\n textTransform,\n endSlash = true,\n}: {\n pathname: string\n pathMappings?: Record<string, string | null>\n translation?: (key: string) => string\n basePath?: string\n textTransform?: TextTransformOption\n endSlash?: boolean\n}) => {\n return (\n <BreadcrumbRoot>\n <BreadcrumbList>\n {getRoutes(pathname, pathMappings, translation, basePath).map((route, index, array) => (\n <React.Fragment key={index}>\n <BreadcrumbItem>\n {index === array.length - 1 ? (\n <BreadcrumbPage textTransform={textTransform}>{route.name}</BreadcrumbPage>\n ) : (\n <BreadcrumbLink href={route.href + (endSlash ? '/' : '')} textTransform={textTransform}>\n {route.name}\n </BreadcrumbLink>\n )}\n </BreadcrumbItem>\n {index < array.length - 1 && <BreadcrumbSeparator />}\n </React.Fragment>\n ))}\n </BreadcrumbList>\n </BreadcrumbRoot>\n )\n}\n\nconst PagesBreadcrumb = ({\n pages,\n currentPage,\n}: {\n pages: Array<{ link: string; text: string }>\n currentPage: string\n}) => {\n return (\n <BreadcrumbRoot>\n <BreadcrumbList>\n {pages.map((page) => (\n <BreadcrumbItem key={pages.indexOf(page)}>\n <BreadcrumbLink href={page.link}>{page.text}</BreadcrumbLink>\n <BreadcrumbSeparator />\n </BreadcrumbItem>\n ))}\n <BreadcrumbItem>\n <BreadcrumbPage>{currentPage}</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </BreadcrumbRoot>\n )\n}\n\nexport {\n BreadcrumbRoot,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n NavigationBreadcrumb,\n PagesBreadcrumb,\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon, IconWeight, IconProps as PhosphorIconProps } from '@phosphor-icons/react'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { typographyVariants } from '../Typography'\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n /**\n * Defines the visual style of the button\n */\n variant: {\n primary:\n 'bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200',\n secondary:\n 'bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 disabled:text-neutral-600',\n ghost:\n 'border border-neutral-500 text-primary-foreground hover:bg-neutral-100/50 active:bg-neutral-200/50 disabled:border-neutral-500 disabled:text-neutral-500',\n 'inverse-ghost':\n 'border border-neutral-50 text-neutral-50 hover:bg-neutral/50 hover:border-neutral-50 active:bg-neutral-600/50 disabled:border-neutral-300 disabled:text-neutral-300',\n text: 'hover:bg-neutral-50 active:bg-neutral-100 text-primary-foreground disabled:text-neutral-500',\n error:\n 'bg-error text-white hover:bg-error-800 active:bg-error-900 disabled:bg-error-200 disabled:text-neutral-600',\n success:\n 'bg-success text-white hover:bg-success-800 active:bg-success-900 disabled:bg-success-200 disabled:text-neutral-600',\n input:\n 'border border-neutral-200 bg-white text-neutral-950 hover:bg-neutral-50 active:bg-neutral-100 focus-visible:border-neutral-950 disabled:bg-neutral-50 focus-visible:ring-0',\n },\n /**\n * Controls the size and padding of the button\n */\n size: {\n sm: 'h-8 px-3 text-sm',\n md: 'h-10 px-4 text-sm',\n lg: 'h-12 px-6 text-base',\n },\n },\n compoundVariants: [\n {\n variant: 'input',\n size: ['sm', 'md', 'lg'],\n className: typographyVariants({ variant: 'body-lg' }),\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n },\n },\n)\n\nexport type ButtonProps = {\n /**\n * The visual style of the button.\n * @default primary\n */\n variant?: 'primary' | 'secondary' | 'ghost' | 'inverse-ghost' | 'text' | 'error' | 'success'\n\n /**\n * The size of the button, affecting height, padding, and font size.\n * @default md\n */\n size?: 'sm' | 'md' | 'lg'\n\n /**\n * Icon component to display at the start of the button content.\n * Use Phosphor icons for consistent styling.\n * @example <Button StartIcon={House}>Home</Button>\n */\n StartIcon?: Icon\n\n /**\n * Icon component to display at the end of the button content.\n * Use Phosphor icons for consistent styling.\n * @example <Button EndIcon={ArrowRight}>Next</Button>\n */\n EndIcon?: Icon\n\n /**\n * When true, displays a loading spinner and disables the button.\n * The spinner replaces the StartIcon if present.\n * @default false\n */\n loading?: boolean\n\n /**\n * When true, creates a circular button with only the StartIcon visible.\n * @default false\n */\n iconOnly?: boolean\n\n /**\n * The content to display inside the button.\n * Not displayed when iconOnly is true.\n */\n children?: React.ReactNode\n\n /**\n * Custom props to pass to the icons (StartIcon, EndIcon, SpinnerGap).\n * Allows overriding size, weight, color, etc.\n */\n iconProps?: Partial<PhosphorIconProps>\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n VariantProps<typeof buttonVariants>\n\n/**\n * A versatile button component that supports multiple variants, sizes, and icon placements.\n *\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With icon\n * <Button StartIcon={House}>Home</Button>\n *\n * // Icon only button\n * <Button StartIcon={Plus} iconOnly aria-label=\"Add item\" />\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n { className, variant = 'primary', size = 'md', StartIcon, EndIcon, loading, iconOnly, iconProps = {}, ...props },\n ref,\n ) => {\n const defaultIconProps = (): { size: number; weight: IconWeight } => {\n switch (size) {\n case 'sm':\n return { size: 16, weight: 'regular' }\n case 'lg':\n return { size: 20, weight: 'regular' }\n default:\n return { size: 18, weight: 'regular' }\n }\n }\n const mergedIconProps = { ...defaultIconProps(), ...iconProps }\n const getIconOnlyClasses = () => {\n switch (size) {\n case 'sm':\n return 'h-8 w-8'\n case 'lg':\n return 'h-12 w-12'\n default:\n return 'h-10 w-10'\n }\n }\n\n return (\n <button\n className={cn(\n buttonVariants({ variant, size, className }),\n iconOnly && 'rounded-full p-0',\n iconOnly && getIconOnlyClasses(),\n className,\n )}\n ref={ref}\n disabled={loading}\n {...props}\n >\n {loading && <SpinnerGap {...defaultIconProps()} className=\"animate-spin\" aria-label=\"Loading\" />}\n {StartIcon && !loading && <StartIcon {...mergedIconProps} className=\"shrink-0\" />}\n {iconOnly ? <span className=\"sr-only\">{props.children}</span> : props.children}\n {EndIcon && !iconOnly && <EndIcon {...mergedIconProps} className=\"shrink-0\" />}\n </button>\n )\n },\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,6OAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,MAIR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,8GAAA;AAAA,QACF,SAAA,EACE,qIAAA;AAAA,QACF,KAAA,EACE,0JAAA;AAAA,QACF,eAAA,EACE,qKAAA;AAAA,QACF,IAAA,EAAM,6FAAA;AAAA,QACN,KAAA,EACE,4GAAA;AAAA,QACF,OAAA,EACE,oHAAA;AAAA,QACF,KAAA,EACE;AAAA,OACJ;AAAA;AAAA;AAAA;AAAA,MAIA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,OAAA,EAAS,OAAA;AAAA,QACT,IAAA,EAAM,CAAC,IAAA,EAAM,IAAA,EAAM,IAAI,CAAA;AAAA,QACvB,SAAA,EAAW,kBAAA,CAAmB,EAAE,OAAA,EAAS,WAAW;AAAA;AACtD,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAwEA,MAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EACnB,CACE,EAAE,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,OAAO,IAAA,EAAM,SAAA,EAAW,OAAA,EAAS,OAAA,EAAS,UAAU,SAAA,GAAY,IAAI,GAAG,KAAA,IACzG,GAAA,KACG;AACH,IAAA,MAAM,mBAAmB,MAA4C;AACnE,MAAA,QAAQ,IAAA;AAAM,QACZ,KAAK,IAAA;AACH,UAAA,OAAO,EAAE,IAAA,EAAM,EAAA,EAAI,MAAA,EAAQ,SAAA,EAAU;AAAA,QACvC,KAAK,IAAA;AACH,UAAA,OAAO,EAAE,IAAA,EAAM,EAAA,EAAI,MAAA,EAAQ,SAAA,EAAU;AAAA,QACvC;AACE,UAAA,OAAO,EAAE,IAAA,EAAM,EAAA,EAAI,MAAA,EAAQ,SAAA,EAAU;AAAA;AACzC,
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { Icon, IconWeight, IconProps as PhosphorIconProps } from '@phosphor-icons/react'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { typographyVariants } from '../Typography'\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n /**\n * Defines the visual style of the button\n */\n variant: {\n primary:\n 'bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200',\n secondary:\n 'bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 disabled:text-neutral-600',\n ghost:\n 'border border-neutral-500 text-primary-foreground hover:bg-neutral-100/50 active:bg-neutral-200/50 disabled:border-neutral-500 disabled:text-neutral-500',\n 'inverse-ghost':\n 'border border-neutral-50 text-neutral-50 hover:bg-neutral/50 hover:border-neutral-50 active:bg-neutral-600/50 disabled:border-neutral-300 disabled:text-neutral-300',\n text: 'hover:bg-neutral-50 active:bg-neutral-100 text-primary-foreground disabled:text-neutral-500',\n error:\n 'bg-error text-white hover:bg-error-800 active:bg-error-900 disabled:bg-error-200 disabled:text-neutral-600',\n success:\n 'bg-success text-white hover:bg-success-800 active:bg-success-900 disabled:bg-success-200 disabled:text-neutral-600',\n input:\n 'border border-neutral-200 bg-white text-neutral-950 hover:bg-neutral-50 active:bg-neutral-100 focus-visible:border-neutral-950 disabled:bg-neutral-50 focus-visible:ring-0',\n },\n /**\n * Controls the size and padding of the button\n */\n size: {\n sm: 'h-8 px-3 text-sm',\n md: 'h-10 px-4 text-sm',\n lg: 'h-12 px-6 text-base',\n },\n },\n compoundVariants: [\n {\n variant: 'input',\n size: ['sm', 'md', 'lg'],\n className: typographyVariants({ variant: 'body-lg' }),\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n },\n },\n)\n\nexport type ButtonProps = {\n /**\n * The visual style of the button.\n * @default primary\n */\n variant?: 'primary' | 'secondary' | 'ghost' | 'inverse-ghost' | 'text' | 'error' | 'success'\n\n /**\n * The size of the button, affecting height, padding, and font size.\n * @default md\n */\n size?: 'sm' | 'md' | 'lg'\n\n /**\n * Icon component to display at the start of the button content.\n * Use Phosphor icons for consistent styling.\n * @example <Button StartIcon={House}>Home</Button>\n */\n StartIcon?: Icon\n\n /**\n * Icon component to display at the end of the button content.\n * Use Phosphor icons for consistent styling.\n * @example <Button EndIcon={ArrowRight}>Next</Button>\n */\n EndIcon?: Icon\n\n /**\n * When true, displays a loading spinner and disables the button.\n * The spinner replaces the StartIcon if present.\n * @default false\n */\n loading?: boolean\n\n /**\n * When true, creates a circular button with only the StartIcon visible.\n * @default false\n */\n iconOnly?: boolean\n\n /**\n * The content to display inside the button.\n * Not displayed when iconOnly is true.\n */\n children?: React.ReactNode\n\n /**\n * Custom props to pass to the icons (StartIcon, EndIcon, SpinnerGap).\n * Allows overriding size, weight, color, etc.\n */\n iconProps?: Partial<PhosphorIconProps>\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n VariantProps<typeof buttonVariants>\n\n/**\n * A versatile button component that supports multiple variants, sizes, and icon placements.\n *\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With icon\n * <Button StartIcon={House}>Home</Button>\n *\n * // Icon only button\n * <Button StartIcon={Plus} iconOnly aria-label=\"Add item\" />\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n { className, variant = 'primary', size = 'md', StartIcon, EndIcon, loading, iconOnly, iconProps = {}, ...props },\n ref,\n ) => {\n const defaultIconProps = (): { size: number; weight: IconWeight } => {\n switch (size) {\n case 'sm':\n return { size: 16, weight: 'regular' }\n case 'lg':\n return { size: 20, weight: 'regular' }\n default:\n return { size: 18, weight: 'regular' }\n }\n }\n const mergedIconProps = { ...defaultIconProps(), ...iconProps }\n const getIconOnlyClasses = () => {\n switch (size) {\n case 'sm':\n return 'h-8 w-8'\n case 'lg':\n return 'h-12 w-12'\n default:\n return 'h-10 w-10'\n }\n }\n\n return (\n <button\n className={cn(\n buttonVariants({ variant, size, className }),\n iconOnly && 'rounded-full p-0',\n iconOnly && getIconOnlyClasses(),\n className,\n )}\n ref={ref}\n disabled={loading}\n {...props}\n >\n {loading && <SpinnerGap {...defaultIconProps()} className=\"animate-spin\" aria-label=\"Loading\" />}\n {StartIcon && !loading && <StartIcon {...mergedIconProps} className=\"shrink-0\" />}\n {iconOnly ? <span className=\"sr-only\">{props.children}</span> : props.children}\n {EndIcon && !iconOnly && <EndIcon {...mergedIconProps} className=\"shrink-0\" />}\n </button>\n )\n },\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst chipVariants = cva(\n 'inline-flex items-center border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n /**\n * Defines the visual style of the chip\n */\n variant: {\n default: 'border-transparent bg-neutral-100 text-default-foreground',\n ghost: ' bg-transparent border border-neutral-500 text-primary-foreground',\n primary: 'border-transparent bg-primary text-primary-foreground',\n secondary: 'border-transparent bg-neutral-950 text-neutral-foreground',\n error: 'border-transparent bg-error-600 text-white',\n success: 'border-transparent bg-success-600 text-white',\n },\n /**\n * Controls the size and padding of the chip\n */\n size: {\n sm: 'px-2.5 py-0.5 text-sm',\n md: 'px-2.5 py-1 text-sm',\n lg: 'px-3 py-1 text-md',\n },\n rounded: {\n full: 'rounded-full',\n square: 'rounded-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n rounded: 'full',\n },\n },\n)\n\nexport type ChipProps = {\n /**\n * The visual style of the chip.\n * @default default\n */\n variant?: 'default' | 'ghost' | 'primary' | 'secondary' | 'error' | 'success'\n\n /**\n * The size of the chip, affecting padding and font size.\n * @default md\n */\n size?: 'sm' | 'md' | 'lg'\n\n /**\n * The roundedness of the chip, affecting the border radius.\n * @default full\n */\n rounded?: 'full' | 'square'\n\n /**\n * Optional callback for when the remove button is clicked.\n * When provided, displays a remove button on the chip.\n */\n onRemove?: (\n event:\n | React.KeyboardEvent<HTMLButtonElement | HTMLSpanElement>\n | React.MouseEvent<HTMLButtonElement | HTMLSpanElement, MouseEvent>,\n ) => void\n\n /**\n * The HTML element to use for the remove trigger.\n * Use 'span' when the chip is inside a button context to avoid nested buttons.\n * @default 'button'\n */\n triggerElement?: 'button' | 'span'\n\n /**\n * The content to display inside the chip.\n */\n children?: React.ReactNode\n\n /**\n * Additional CSS classes to apply to the chip.\n */\n className?: string\n} & React.HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof chipVariants>\n\n/**\n * A chip component for displaying compact information with optional remove functionality.\n *\n * @example\n * // Basic usage\n * <Chip>Label</Chip>\n *\n * // With remove button\n * <Chip onRemove={() => console.log('removed')}>Removable</Chip>\n *\n * // Different variants\n * <Chip variant=\"primary\">Primary</Chip>\n * <Chip variant=\"error\">Error</Chip>\n *\n * // Inside button context (e.g., Combobox)\n * <Chip onRemove={() => console.log('removed')} triggerElement=\"span\">\n * Inside Button\n * </Chip>\n */\nfunction Chip({\n className,\n variant = 'default',\n size = 'md',\n rounded = 'full',\n onRemove,\n triggerElement = 'button',\n children,\n ...props\n}: ChipProps) {\n const removeIconClasses =\n 'focus-visible:ring-ring inline-flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'\n\n const RemoveElement = triggerElement\n\n return (\n <div className={cn(chipVariants({ variant, size, rounded }), onRemove && 'gap-1.5 pr-1', className)} {...props}>\n {children}\n {onRemove ? (\n <RemoveElement\n {...(triggerElement === 'button' ? { type: 'button' as const } : {})}\n role={triggerElement === 'span' ? 'button' : undefined}\n tabIndex={triggerElement === 'span' ? 0 : undefined}\n onKeyDown={(event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n onRemove(event)\n }\n }}\n onMouseDown={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n onClick={onRemove}\n className={removeIconClasses}\n aria-label=\"Remove\"\n >\n <X size={16} weight=\"regular\" className=\"shrink-0\" />\n </RemoveElement>\n ) : null}\n </div>\n )\n}\nChip.displayName = 'Chip'\n\nexport { Chip, chipVariants }\n"],"names":[],"mappings":";;;;;AAMA,MAAM,YAAA,GAAe,GAAA;AAAA,EACnB,mIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,MAIR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,2DAAA;AAAA,QACT,KAAA,EAAO,mEAAA;AAAA,QACP,OAAA,EAAS,uDAAA;AAAA,QACT,SAAA,EAAW,2DAAA;AAAA,QACX,KAAA,EAAO,4CAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA;AAAA;AAAA;AAAA,MAIA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,uBAAA;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,cAAA;AAAA,QACN,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ;AAqEA,SAAS,IAAA,CAAK;AAAA,EACZ,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,MAAA;AAAA,EACV,QAAA;AAAA,EACA,cAAA,GAAiB,QAAA;AAAA,EACjB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,MAAM,iBAAA,GACJ,sMAAA;AAEF,EAAA,MAAM,aAAA,GAAgB,cAAA;AAEtB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,OAAA,EAAS,IAAA,EAAM,OAAA,EAAS,GAAG,QAAA,IAAY,cAAA,EAAgB,SAAS,CAAA,EAAI,GAAG,KAAA,EACtG,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,mBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAI,cAAA,KAAmB,QAAA,GAAW,EAAE,IAAA,EAAM,QAAA,KAAsB,EAAC;AAAA,QAClE,IAAA,EAAM,cAAA,KAAmB,MAAA,GAAS,QAAA,GAAW,MAAA;AAAA,QAC7C,QAAA,EAAU,cAAA,KAAmB,MAAA,GAAS,CAAA,GAAI,MAAA;AAAA,QAC1C,SAAA,EAAW,CAAC,KAAA,KAAU;AACpB,UAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,EAAK;AAC9C,YAAA,KAAA,CAAM,cAAA,EAAe;AACrB,YAAA,QAAA,CAAS,KAAK,CAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst chipVariants = cva(\n 'inline-flex items-center border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n /**\n * Defines the visual style of the chip\n */\n variant: {\n default: 'border-transparent bg-neutral-100 text-default-foreground',\n ghost: ' bg-transparent border border-neutral-500 text-primary-foreground',\n primary: 'border-transparent bg-primary text-primary-foreground',\n secondary: 'border-transparent bg-neutral-950 text-neutral-foreground',\n error: 'border-transparent bg-error-600 text-white',\n success: 'border-transparent bg-success-600 text-white',\n },\n /**\n * Controls the size and padding of the chip\n */\n size: {\n sm: 'px-2.5 py-0.5 text-sm',\n md: 'px-2.5 py-1 text-sm',\n lg: 'px-3 py-1 text-md',\n },\n rounded: {\n full: 'rounded-full',\n square: 'rounded-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n rounded: 'full',\n },\n },\n)\n\nexport type ChipProps = {\n /**\n * The visual style of the chip.\n * @default default\n */\n variant?: 'default' | 'ghost' | 'primary' | 'secondary' | 'error' | 'success'\n\n /**\n * The size of the chip, affecting padding and font size.\n * @default md\n */\n size?: 'sm' | 'md' | 'lg'\n\n /**\n * The roundedness of the chip, affecting the border radius.\n * @default full\n */\n rounded?: 'full' | 'square'\n\n /**\n * Optional callback for when the remove button is clicked.\n * When provided, displays a remove button on the chip.\n */\n onRemove?: (\n event:\n | React.KeyboardEvent<HTMLButtonElement | HTMLSpanElement>\n | React.MouseEvent<HTMLButtonElement | HTMLSpanElement, MouseEvent>,\n ) => void\n\n /**\n * The HTML element to use for the remove trigger.\n * Use 'span' when the chip is inside a button context to avoid nested buttons.\n * @default 'button'\n */\n triggerElement?: 'button' | 'span'\n\n /**\n * The content to display inside the chip.\n */\n children?: React.ReactNode\n\n /**\n * Additional CSS classes to apply to the chip.\n */\n className?: string\n} & React.HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof chipVariants>\n\n/**\n * A chip component for displaying compact information with optional remove functionality.\n *\n * @example\n * // Basic usage\n * <Chip>Label</Chip>\n *\n * // With remove button\n * <Chip onRemove={() => console.log('removed')}>Removable</Chip>\n *\n * // Different variants\n * <Chip variant=\"primary\">Primary</Chip>\n * <Chip variant=\"error\">Error</Chip>\n *\n * // Inside button context (e.g., Combobox)\n * <Chip onRemove={() => console.log('removed')} triggerElement=\"span\">\n * Inside Button\n * </Chip>\n */\nfunction Chip({\n className,\n variant = 'default',\n size = 'md',\n rounded = 'full',\n onRemove,\n triggerElement = 'button',\n children,\n ...props\n}: ChipProps) {\n const removeIconClasses =\n 'focus-visible:ring-ring inline-flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'\n\n const RemoveElement = triggerElement\n\n return (\n <div className={cn(chipVariants({ variant, size, rounded }), onRemove && 'gap-1.5 pr-1', className)} {...props}>\n {children}\n {onRemove ? (\n <RemoveElement\n {...(triggerElement === 'button' ? { type: 'button' as const } : {})}\n role={triggerElement === 'span' ? 'button' : undefined}\n tabIndex={triggerElement === 'span' ? 0 : undefined}\n onKeyDown={(event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n onRemove(event)\n }\n }}\n onMouseDown={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n onClick={onRemove}\n className={removeIconClasses}\n aria-label=\"Remove\"\n >\n <X size={16} weight=\"regular\" className=\"shrink-0\" />\n </RemoveElement>\n ) : null}\n </div>\n )\n}\nChip.displayName = 'Chip'\n\nexport { Chip, chipVariants }\n"],"names":[],"mappings":";;;;;AAMA,MAAM,YAAA,GAAe,GAAA;AAAA,EACnB,mIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,MAIR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,2DAAA;AAAA,QACT,KAAA,EAAO,mEAAA;AAAA,QACP,OAAA,EAAS,uDAAA;AAAA,QACT,SAAA,EAAW,2DAAA;AAAA,QACX,KAAA,EAAO,4CAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA;AAAA;AAAA;AAAA,MAIA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,uBAAA;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,cAAA;AAAA,QACN,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ;AAqEA,SAAS,IAAA,CAAK;AAAA,EACZ,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,MAAA;AAAA,EACV,QAAA;AAAA,EACA,cAAA,GAAiB,QAAA;AAAA,EACjB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,MAAM,iBAAA,GACJ,sMAAA;AAEF,EAAA,MAAM,aAAA,GAAgB,cAAA;AAEtB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,OAAA,EAAS,IAAA,EAAM,OAAA,EAAS,GAAG,QAAA,IAAY,cAAA,EAAgB,SAAS,CAAA,EAAI,GAAG,KAAA,EACtG,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,mBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAI,cAAA,KAAmB,QAAA,GAAW,EAAE,IAAA,EAAM,QAAA,KAAsB,EAAC;AAAA,QAClE,IAAA,EAAM,cAAA,KAAmB,MAAA,GAAS,QAAA,GAAW,MAAA;AAAA,QAC7C,QAAA,EAAU,cAAA,KAAmB,MAAA,GAAS,CAAA,GAAI,MAAA;AAAA,QAC1C,SAAA,EAAW,CAAC,KAAA,KAAU;AACpB,UAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,EAAK;AAC9C,YAAA,KAAA,CAAM,cAAA,EAAe;AACrB,YAAA,QAAA,CAAS,KAAK,CAAA;AAAA,UAChB;AAAA,QACF,CAAA;AAAA,QACA,WAAA,EAAa,CAAC,KAAA,KAAU;AACtB,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,KAAA,CAAM,eAAA,EAAgB;AAAA,QACxB,CAAA;AAAA,QACA,OAAA,EAAS,QAAA;AAAA,QACT,SAAA,EAAW,iBAAA;AAAA,QACX,YAAA,EAAW,QAAA;AAAA,QAEX,8BAAC,CAAA,EAAA,EAAE,IAAA,EAAM,IAAI,MAAA,EAAO,SAAA,EAAU,WAAU,UAAA,EAAW;AAAA;AAAA,KACrD,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandInput } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { StaticComboboxList } from './StaticComboboxList'\nimport { useCombobox } from './useCombobox'\nimport { VirtualizedComboboxList } from './VirtualizedComboboxList'\n\ntype ComboboxBaseProps<T> = {\n /** Unique identifier for the combobox */\n id?: string\n /** Array of options to display in the combobox */\n options: Array<T>\n /** Function to get the unique identifier from an option. */\n getOptionValue: (option: T) => string\n /** Function to get the display text from an option. */\n getOptionLabel: (option: T) => string\n /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n /** Placeholder text shown when no option is selected */\n placeholder?: string\n /** Placeholder text for the search input field */\n searchPlaceholder?: string\n /** Message shown when no options match the search query */\n emptyMessage?: string\n /** Additional CSS classes to apply to the combobox trigger */\n className?: string\n /** Additional CSS classes to apply to the popover content */\n contentClassName?: string\n /** Whether the combobox is disabled */\n disabled?: boolean\n /** Maximum height of the options list. Can be any valid CSS height value */\n maxHeight?: string | number\n /** Whether to close the dropdown when an option is selected. Defaults to `true` for single select and `false` for multi-select. */\n closeOnSelect?: boolean\n /** Whether the combobox is in a loading state */\n loading?: boolean\n /** Message to show when in loading state */\n loadingPlaceholder?: string\n /** Whether the combobox has an error */\n error?: boolean | string\n /** Custom function to filter options based on search term */\n filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>\n /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the selection. */\n onClear?: boolean | (() => void)\n /** Whether the selection can be cleared */\n clearable?: boolean\n /** Whether the combobox is inside a modal */\n modal?: boolean\n /** Placeholder text for the selected multiple options */\n selectedMultiplePlaceholder?: string\n /** Placeholder text for the multiple options */\n multipleOptionsPlaceholder?: string\n /** Special options that appear at the top with their own title. When selected, the combobox switches to single-select mode. */\n specialOptions?: Array<T>\n /** Title for the special options group */\n specialOptionsTitle?: string\n /** Container element to position the combobox relative to. */\n container?: HTMLElement\n /** Alignment of the dropdown relative to the trigger. Defaults to 'center'. */\n align?: 'start' | 'center' | 'end'\n}\n\nexport type ComboboxSingleProps<T> = ComboboxBaseProps<T> & {\n multiple?: false\n value?: string\n onChange: (value: string) => void\n /** Custom render function for the selected value display. */\n renderLabel?: (selectedOption: T) => React.ReactNode\n /**\n * Async pagination function.\n * Note: Multiple selection is not supported with virtualization.\n */\n fetchPage?: (params: {\n page: number\n search?: string\n }) => Promise<{ items: Array<T>; hasNextPage: boolean; nextPage: number }>\n}\n\nexport type ComboboxMultipleProps<T> = ComboboxBaseProps<T> & {\n multiple: true\n value?: Array<string>\n onChange: (value: Array<string>) => void\n /** Custom render function for the selected value(s) display. */\n renderLabel?: (selectedOptions: Array<T>, onRemove: (value: string) => void) => React.ReactNode\n /** fetchPage is not allowed with multiple selection */\n fetchPage?: never\n}\n\nexport type ComboboxProps<T> = ComboboxSingleProps<T> | ComboboxMultipleProps<T>\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example Basic usage\n * ```tsx\n * interface User {\n * id: string\n * name: string\n * email: string\n * }\n *\n * <Combobox<User>\n * options={users}\n * value={selectedUserId}\n * onChange={setSelectedUserId}\n * getOptionValue={(user) => user.id}\n * getOptionLabel={(user) => user.name}\n * />\n * ```\n *\n * @example Custom filtering\n * ```tsx\n * <Combobox<User>\n * options={users}\n * value={selectedUserId}\n * onChange={setSelectedUserId}\n * getOptionValue={(user) => user.id}\n * getOptionLabel={(user) => user.name}\n * filterOptions={(options, searchTerm) =>\n * options.filter(user =>\n * user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n * user.email.toLowerCase().includes(searchTerm.toLowerCase())\n * )\n * }\n * />\n * ```\n *\n * @example Virtualized infinite scrolling with pagination\n * ```tsx\n * <Combobox<User>\n * options={[]} // Initial options can be empty\n * value={selectedUserId}\n * onChange={setSelectedUserId}\n * getOptionValue={(user) => user.id}\n * getOptionLabel={(user) => user.name}\n * fetchPage={async ({ page, search }) => {\n * const response = await api.getUsers({ page, search })\n * return {\n * items: response.users,\n * hasNextPage: response.page < response.totalPages,\n * nextPage: page + 1\n * }\n * }}\n * />\n * ```\n */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n const {\n id,\n options,\n getOptionValue,\n getOptionLabel,\n searchPlaceholder = 'Search...',\n emptyMessage = 'No results found.',\n className = 'w-60',\n contentClassName,\n disabled = false,\n maxHeight = '300px',\n renderOption,\n loading = false,\n loadingPlaceholder = 'Cargando...',\n error = false,\n multiple,\n onClear,\n modal = false,\n selectedMultiplePlaceholder = 'Selected',\n multipleOptionsPlaceholder = 'Options',\n specialOptions,\n specialOptionsTitle,\n container,\n align,\n } = props\n\n const normalizedMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n const boundedListMaxHeight = `min(${normalizedMaxHeight}, max(120px, calc(var(--radix-popover-content-available-height, 100dvh) - 68px)))`\n\n const {\n open,\n setOpen,\n searchTerm,\n setSearchTerm,\n setIsHovered,\n hasNextPage,\n loadingMore,\n isVirtualized,\n filteredOptions,\n displayValue,\n hasValue,\n showClearButton,\n handleSelect,\n handleClear,\n loadNextPage,\n } = useCombobox(props)\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n <PopoverTrigger\n asChild\n onPointerDown={(event) => {\n event.stopPropagation()\n if (open) {\n setOpen(false)\n event.preventDefault()\n } else {\n setOpen(true)\n }\n }}\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n >\n <Button\n id={id}\n type=\"button\"\n disabled={disabled}\n variant=\"text\"\n className={cn(\n buttonVariants({ variant: 'input', size: 'lg' }),\n 'relative flex justify-between rounded-lg',\n multiple && 'renderLabel' in props && props.renderLabel ? 'h-auto min-h-12' : 'h-12',\n open && 'border-neutral-950',\n disabled && 'cursor-not-allowed',\n error && 'border-error-400 focus-visible:border-error-700',\n className,\n )}\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <span\n className={cn(\n 'block',\n !hasValue && 'text-neutral-300',\n !(multiple && 'renderLabel' in props && props.renderLabel) && 'truncate',\n )}\n >\n {displayValue}\n </span>\n <CaretDown\n className={cn(\n 'h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150',\n showClearButton ? 'opacity-0' : 'opacity-50',\n )}\n />\n {onClear && hasValue && (\n <X\n data-testid=\"clear-button\"\n className={cn(\n 'absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n showClearButton ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n )}\n onClick={handleClear}\n />\n )}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className={cn('overflow-hidden p-0', contentClassName)}\n container={container}\n side=\"bottom\"\n align={align}\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchPlaceholder}\n disabled={loading}\n value={searchTerm}\n onValueChange={setSearchTerm}\n />\n {isVirtualized ? (\n <VirtualizedComboboxList\n localOptions={filteredOptions}\n loading={loading}\n loadingPlaceholder={loadingPlaceholder}\n emptyMessage={emptyMessage}\n value={props.value as string}\n getOptionValue={getOptionValue}\n getOptionLabel={getOptionLabel}\n handleSelect={handleSelect}\n renderOption={renderOption}\n maxHeight={boundedListMaxHeight}\n hasNextPage={hasNextPage}\n loadingMore={loadingMore}\n onLoadMore={loadNextPage}\n />\n ) : (\n <StaticComboboxList\n filteredOptions={filteredOptions}\n loading={loading}\n loadingPlaceholder={loadingPlaceholder}\n emptyMessage={emptyMessage}\n multiple={!!multiple}\n value={props.value}\n getOptionValue={getOptionValue}\n getOptionLabel={getOptionLabel}\n handleSelect={handleSelect}\n renderOption={renderOption}\n maxHeight={boundedListMaxHeight}\n selectedMultiplePlaceholder={selectedMultiplePlaceholder}\n multipleOptionsPlaceholder={multipleOptionsPlaceholder}\n options={options}\n specialOptions={specialOptions}\n specialOptionsTitle={specialOptionsTitle}\n />\n )}\n </Command>\n </PopoverContent>\n </PopoverRoot>\n {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandInput } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { StaticComboboxList } from './StaticComboboxList'\nimport { useCombobox } from './useCombobox'\nimport { VirtualizedComboboxList } from './VirtualizedComboboxList'\n\ntype ComboboxBaseProps<T> = {\n /** Unique identifier for the combobox */\n id?: string\n /** Array of options to display in the combobox */\n options: Array<T>\n /** Function to get the unique identifier from an option. */\n getOptionValue: (option: T) => string\n /** Function to get the display text from an option. */\n getOptionLabel: (option: T) => string\n /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n /** Placeholder text shown when no option is selected */\n placeholder?: string\n /** Placeholder text for the search input field */\n searchPlaceholder?: string\n /** Message shown when no options match the search query */\n emptyMessage?: string\n /** Additional CSS classes to apply to the combobox trigger */\n className?: string\n /** Additional CSS classes to apply to the popover content */\n contentClassName?: string\n /** Whether the combobox is disabled */\n disabled?: boolean\n /** Maximum height of the options list. Can be any valid CSS height value */\n maxHeight?: string | number\n /** Whether to close the dropdown when an option is selected. Defaults to `true` for single select and `false` for multi-select. */\n closeOnSelect?: boolean\n /** Whether the combobox is in a loading state */\n loading?: boolean\n /** Message to show when in loading state */\n loadingPlaceholder?: string\n /** Whether the combobox has an error */\n error?: boolean | string\n /** Custom function to filter options based on search term */\n filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>\n /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the selection. */\n onClear?: boolean | (() => void)\n /** Whether the selection can be cleared */\n clearable?: boolean\n /** Whether the combobox is inside a modal */\n modal?: boolean\n /** Placeholder text for the selected multiple options */\n selectedMultiplePlaceholder?: string\n /** Placeholder text for the multiple options */\n multipleOptionsPlaceholder?: string\n /** Special options that appear at the top with their own title. When selected, the combobox switches to single-select mode. */\n specialOptions?: Array<T>\n /** Title for the special options group */\n specialOptionsTitle?: string\n /** Container element to position the combobox relative to. */\n container?: HTMLElement\n /** Alignment of the dropdown relative to the trigger. Defaults to 'center'. */\n align?: 'start' | 'center' | 'end'\n}\n\nexport type ComboboxSingleProps<T> = ComboboxBaseProps<T> & {\n multiple?: false\n value?: string\n onChange: (value: string) => void\n /** Custom render function for the selected value display. */\n renderLabel?: (selectedOption: T) => React.ReactNode\n /**\n * Async pagination function.\n * Note: Multiple selection is not supported with virtualization.\n */\n fetchPage?: (params: {\n page: number\n search?: string\n }) => Promise<{ items: Array<T>; hasNextPage: boolean; nextPage: number }>\n}\n\nexport type ComboboxMultipleProps<T> = ComboboxBaseProps<T> & {\n multiple: true\n value?: Array<string>\n onChange: (value: Array<string>) => void\n /** Custom render function for the selected value(s) display. */\n renderLabel?: (selectedOptions: Array<T>, onRemove: (value: string) => void) => React.ReactNode\n /** fetchPage is not allowed with multiple selection */\n fetchPage?: never\n}\n\nexport type ComboboxProps<T> = ComboboxSingleProps<T> | ComboboxMultipleProps<T>\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example Basic usage\n * ```tsx\n * interface User {\n * id: string\n * name: string\n * email: string\n * }\n *\n * <Combobox<User>\n * options={users}\n * value={selectedUserId}\n * onChange={setSelectedUserId}\n * getOptionValue={(user) => user.id}\n * getOptionLabel={(user) => user.name}\n * />\n * ```\n *\n * @example Custom filtering\n * ```tsx\n * <Combobox<User>\n * options={users}\n * value={selectedUserId}\n * onChange={setSelectedUserId}\n * getOptionValue={(user) => user.id}\n * getOptionLabel={(user) => user.name}\n * filterOptions={(options, searchTerm) =>\n * options.filter(user =>\n * user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n * user.email.toLowerCase().includes(searchTerm.toLowerCase())\n * )\n * }\n * />\n * ```\n *\n * @example Virtualized infinite scrolling with pagination\n * ```tsx\n * <Combobox<User>\n * options={[]} // Initial options can be empty\n * value={selectedUserId}\n * onChange={setSelectedUserId}\n * getOptionValue={(user) => user.id}\n * getOptionLabel={(user) => user.name}\n * fetchPage={async ({ page, search }) => {\n * const response = await api.getUsers({ page, search })\n * return {\n * items: response.users,\n * hasNextPage: response.page < response.totalPages,\n * nextPage: page + 1\n * }\n * }}\n * />\n * ```\n */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n const {\n id,\n options,\n getOptionValue,\n getOptionLabel,\n searchPlaceholder = 'Search...',\n emptyMessage = 'No results found.',\n className = 'w-60',\n contentClassName,\n disabled = false,\n maxHeight = '300px',\n renderOption,\n loading = false,\n loadingPlaceholder = 'Cargando...',\n error = false,\n multiple,\n onClear,\n modal = false,\n selectedMultiplePlaceholder = 'Selected',\n multipleOptionsPlaceholder = 'Options',\n specialOptions,\n specialOptionsTitle,\n container,\n align,\n } = props\n\n const normalizedMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n const boundedListMaxHeight = `min(${normalizedMaxHeight}, max(120px, calc(var(--radix-popover-content-available-height, 100dvh) - 68px)))`\n\n const {\n open,\n setOpen,\n searchTerm,\n setSearchTerm,\n setIsHovered,\n hasNextPage,\n loadingMore,\n isVirtualized,\n filteredOptions,\n displayValue,\n hasValue,\n showClearButton,\n handleSelect,\n handleClear,\n loadNextPage,\n } = useCombobox(props)\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n <PopoverTrigger\n asChild\n onPointerDown={(event) => {\n event.stopPropagation()\n if (open) {\n setOpen(false)\n event.preventDefault()\n } else {\n setOpen(true)\n }\n }}\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n >\n <Button\n id={id}\n type=\"button\"\n disabled={disabled}\n variant=\"text\"\n className={cn(\n buttonVariants({ variant: 'input', size: 'lg' }),\n 'relative flex justify-between rounded-lg',\n multiple && 'renderLabel' in props && props.renderLabel ? 'h-auto min-h-12' : 'h-12',\n open && 'border-neutral-950',\n disabled && 'cursor-not-allowed',\n error && 'border-error-400 focus-visible:border-error-700',\n className,\n )}\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <span\n className={cn(\n 'block',\n !hasValue && 'text-neutral-300',\n !(multiple && 'renderLabel' in props && props.renderLabel) && 'truncate',\n )}\n >\n {displayValue}\n </span>\n <CaretDown\n className={cn(\n 'h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150',\n showClearButton ? 'opacity-0' : 'opacity-50',\n )}\n />\n {onClear && hasValue && (\n <X\n data-testid=\"clear-button\"\n className={cn(\n 'absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n showClearButton ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n )}\n onClick={handleClear}\n />\n )}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className={cn('overflow-hidden p-0', contentClassName)}\n container={container}\n side=\"bottom\"\n align={align}\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchPlaceholder}\n disabled={loading}\n value={searchTerm}\n onValueChange={setSearchTerm}\n />\n {isVirtualized ? (\n <VirtualizedComboboxList\n localOptions={filteredOptions}\n loading={loading}\n loadingPlaceholder={loadingPlaceholder}\n emptyMessage={emptyMessage}\n value={props.value as string}\n getOptionValue={getOptionValue}\n getOptionLabel={getOptionLabel}\n handleSelect={handleSelect}\n renderOption={renderOption}\n maxHeight={boundedListMaxHeight}\n hasNextPage={hasNextPage}\n loadingMore={loadingMore}\n onLoadMore={loadNextPage}\n />\n ) : (\n <StaticComboboxList\n filteredOptions={filteredOptions}\n loading={loading}\n loadingPlaceholder={loadingPlaceholder}\n emptyMessage={emptyMessage}\n multiple={!!multiple}\n value={props.value}\n getOptionValue={getOptionValue}\n getOptionLabel={getOptionLabel}\n handleSelect={handleSelect}\n renderOption={renderOption}\n maxHeight={boundedListMaxHeight}\n selectedMultiplePlaceholder={selectedMultiplePlaceholder}\n multipleOptionsPlaceholder={multipleOptionsPlaceholder}\n options={options}\n specialOptions={specialOptions}\n specialOptionsTitle={specialOptionsTitle}\n />\n )}\n </Command>\n </PopoverContent>\n </PopoverRoot>\n {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxOptionWithTooltip.js","sources":["../../../src/components/Combobox/ComboboxOptionWithTooltip.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'react'\n\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\n\nexport const ComboboxOptionWithTooltip = ({ label }: { label: string }) => {\n const textRef = useRef<HTMLSpanElement>(null)\n const [isTruncated, setIsTruncated] = useState(false)\n\n useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (textRef.current) {\n setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth)\n }\n })\n\n return () => cancelAnimationFrame(frame)\n }, [label])\n\n return (\n <TooltipProvider>\n <TooltipRoot delayDuration={300}>\n <TooltipTrigger asChild>\n <span ref={textRef} className=\"block truncate\">\n {label}\n </span>\n </TooltipTrigger>\n {isTruncated && <TooltipContent>{label}</TooltipContent>}\n </TooltipRoot>\n </TooltipProvider>\n )\n}\n"],"names":[],"mappings":";;;;AAIO,MAAM,yBAAA,GAA4B,CAAC,EAAE,KAAA,EAAM,KAAyB;AACzE,EAAA,MAAM,OAAA,GAAU,OAAwB,IAAI,CAAA;AAC5C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAA,GAAQ,sBAAsB,MAAM;AACxC,MAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,QAAA,cAAA,CAAe,OAAA,CAAQ,OAAA,CAAQ,WAAA,GAAc,OAAA,CAAQ,QAAQ,WAAW,CAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"ComboboxOptionWithTooltip.js","sources":["../../../src/components/Combobox/ComboboxOptionWithTooltip.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'react'\n\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\n\nexport const ComboboxOptionWithTooltip = ({ label }: { label: string }) => {\n const textRef = useRef<HTMLSpanElement>(null)\n const [isTruncated, setIsTruncated] = useState(false)\n\n useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (textRef.current) {\n setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth)\n }\n })\n\n return () => cancelAnimationFrame(frame)\n }, [label])\n\n return (\n <TooltipProvider>\n <TooltipRoot delayDuration={300}>\n <TooltipTrigger asChild>\n <span ref={textRef} className=\"block truncate\">\n {label}\n </span>\n </TooltipTrigger>\n {isTruncated && <TooltipContent>{label}</TooltipContent>}\n </TooltipRoot>\n </TooltipProvider>\n )\n}\n"],"names":[],"mappings":";;;;AAIO,MAAM,yBAAA,GAA4B,CAAC,EAAE,KAAA,EAAM,KAAyB;AACzE,EAAA,MAAM,OAAA,GAAU,OAAwB,IAAI,CAAA;AAC5C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAA,GAAQ,sBAAsB,MAAM;AACxC,MAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,QAAA,cAAA,CAAe,OAAA,CAAQ,OAAA,CAAQ,WAAA,GAAc,OAAA,CAAQ,QAAQ,WAAW,CAAA;AAAA,MAC1E;AAAA,IACF,CAAC,CAAA;AAED,IAAA,OAAO,MAAM,qBAAqB,KAAK,CAAA;AAAA,EACzC,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,eAAe,GAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAK,OAAA,EAAS,SAAA,EAAU,gBAAA,EAC3B,QAAA,EAAA,KAAA,EACH,CAAA,EACF,CAAA;AAAA,IACC,WAAA,oBAAe,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzC,CAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StaticComboboxList.js","sources":["../../../src/components/Combobox/StaticComboboxList.tsx"],"sourcesContent":["import { CheckSquare } from '@phosphor-icons/react/dist/ssr/CheckSquare'\nimport { Square } from '@phosphor-icons/react/dist/ssr/Square'\nimport { useMemo } from 'react'\n\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { StaticComboboxListProps } from './types'\n\nexport const StaticComboboxList = <T extends object>({\n filteredOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n multiple,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n selectedMultiplePlaceholder,\n multipleOptionsPlaceholder,\n options,\n specialOptions,\n specialOptionsTitle,\n}: StaticComboboxListProps<T>) => {\n const isArrayValue = Array.isArray(value)\n const selectedValues = useMemo(() => (multiple && isArrayValue ? value : []), [multiple, isArrayValue, value])\n\n const isOptionSelected = (optionValue: string) =>\n multiple ? selectedValues.includes(optionValue) : value === optionValue\n\n const regularOptions = useMemo(() => {\n return filteredOptions.filter(\n (option) => !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [filteredOptions, specialOptions, getOptionValue])\n\n const regularSelectedOptions = useMemo(() => {\n if (!multiple || !isArrayValue) return []\n\n return options.filter(\n (option) =>\n selectedValues.includes(getOptionValue(option)) &&\n !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [options, selectedValues, specialOptions, getOptionValue, multiple, isArrayValue])\n\n const optionsToShow = useMemo(() => {\n if (specialOptions) return regularOptions\n\n if (!multiple || !isArrayValue) return regularOptions\n\n return regularOptions.filter((option) => !selectedValues.includes(getOptionValue(option)))\n }, [regularOptions, specialOptions, selectedValues, getOptionValue, multiple, isArrayValue])\n\n const groupHeading = !specialOptions && multiple ? multipleOptionsPlaceholder : undefined\n\n const renderListOption = (option: T) => {\n const optionValue = getOptionValue(option)\n const selected = isOptionSelected(optionValue)\n\n return (\n <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n {renderOption ? (\n renderOption(option, selected)\n ) : (\n <>\n {selected ? <CheckSquare className=\"mr-2 !h-6 !w-6\" /> : <Square className=\"mr-2 !h-6 !w-6\" />}\n <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n </>\n )}\n </CommandItem>\n )\n }\n\n return (\n <CommandList\n style={{ maxHeight }}\n className=\"overflow-auto overscroll-contain\"\n onWheel={(event) => event.stopPropagation()}\n >\n {loading ? (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n ) : (\n <>\n {filteredOptions.length === 0 &&\n regularOptions.length === 0 &&\n (!specialOptions || specialOptions.length === 0) && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n\n {specialOptions?.length && specialOptionsTitle ? (\n <>\n <CommandGroup heading={specialOptionsTitle}>{specialOptions.map(renderListOption)}</CommandGroup>\n\n <CommandSeparator className=\"!mx-[10px]\" />\n </>\n ) : null}\n\n {!specialOptions && multiple && isArrayValue && regularSelectedOptions.length > 0 && (\n <CommandGroup heading={selectedMultiplePlaceholder}>\n {regularSelectedOptions.map(renderListOption)}\n </CommandGroup>\n )}\n\n <CommandGroup heading={groupHeading}>{optionsToShow.map(renderListOption)}</CommandGroup>\n </>\n )}\n </CommandList>\n )\n}\n"],"names":[],"mappings":";;;;;;;AASO,MAAM,qBAAqB,CAAmB;AAAA,EACnD,eAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,2BAAA;AAAA,EACA,0BAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAAkC;AAChC,EAAA,MAAM,YAAA,GAAe,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,OAAA,CAAQ,MAAO,QAAA,IAAY,YAAA,GAAe,KAAA,GAAQ,EAAC,EAAI,CAAC,QAAA,EAAU,YAAA,EAAc,KAAK,CAAC,CAAA;AAE7G,EAAA,MAAM,gBAAA,GAAmB,CAAC,WAAA,KACxB,QAAA,GAAW,eAAe,QAAA,CAAS,WAAW,IAAI,KAAA,KAAU,WAAA;AAE9D,EAAA,MAAM,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAA,OAAO,eAAA,CAAgB,MAAA;AAAA,MACrB,CAAC,MAAA,KAAW,CAAC,cAAA,EAAgB,IAAA,CAAK,CAAC,OAAA,KAAY,cAAA,CAAe,OAAO,CAAA,KAAM,cAAA,CAAe,MAAM,CAAC;AAAA,KACnG;AAAA,
|
|
1
|
+
{"version":3,"file":"StaticComboboxList.js","sources":["../../../src/components/Combobox/StaticComboboxList.tsx"],"sourcesContent":["import { CheckSquare } from '@phosphor-icons/react/dist/ssr/CheckSquare'\nimport { Square } from '@phosphor-icons/react/dist/ssr/Square'\nimport { useMemo } from 'react'\n\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { StaticComboboxListProps } from './types'\n\nexport const StaticComboboxList = <T extends object>({\n filteredOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n multiple,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n selectedMultiplePlaceholder,\n multipleOptionsPlaceholder,\n options,\n specialOptions,\n specialOptionsTitle,\n}: StaticComboboxListProps<T>) => {\n const isArrayValue = Array.isArray(value)\n const selectedValues = useMemo(() => (multiple && isArrayValue ? value : []), [multiple, isArrayValue, value])\n\n const isOptionSelected = (optionValue: string) =>\n multiple ? selectedValues.includes(optionValue) : value === optionValue\n\n const regularOptions = useMemo(() => {\n return filteredOptions.filter(\n (option) => !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [filteredOptions, specialOptions, getOptionValue])\n\n const regularSelectedOptions = useMemo(() => {\n if (!multiple || !isArrayValue) return []\n\n return options.filter(\n (option) =>\n selectedValues.includes(getOptionValue(option)) &&\n !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [options, selectedValues, specialOptions, getOptionValue, multiple, isArrayValue])\n\n const optionsToShow = useMemo(() => {\n if (specialOptions) return regularOptions\n\n if (!multiple || !isArrayValue) return regularOptions\n\n return regularOptions.filter((option) => !selectedValues.includes(getOptionValue(option)))\n }, [regularOptions, specialOptions, selectedValues, getOptionValue, multiple, isArrayValue])\n\n const groupHeading = !specialOptions && multiple ? multipleOptionsPlaceholder : undefined\n\n const renderListOption = (option: T) => {\n const optionValue = getOptionValue(option)\n const selected = isOptionSelected(optionValue)\n\n return (\n <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n {renderOption ? (\n renderOption(option, selected)\n ) : (\n <>\n {selected ? <CheckSquare className=\"mr-2 !h-6 !w-6\" /> : <Square className=\"mr-2 !h-6 !w-6\" />}\n <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n </>\n )}\n </CommandItem>\n )\n }\n\n return (\n <CommandList\n style={{ maxHeight }}\n className=\"overflow-auto overscroll-contain\"\n onWheel={(event) => event.stopPropagation()}\n >\n {loading ? (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n ) : (\n <>\n {filteredOptions.length === 0 &&\n regularOptions.length === 0 &&\n (!specialOptions || specialOptions.length === 0) && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n\n {specialOptions?.length && specialOptionsTitle ? (\n <>\n <CommandGroup heading={specialOptionsTitle}>{specialOptions.map(renderListOption)}</CommandGroup>\n\n <CommandSeparator className=\"!mx-[10px]\" />\n </>\n ) : null}\n\n {!specialOptions && multiple && isArrayValue && regularSelectedOptions.length > 0 && (\n <CommandGroup heading={selectedMultiplePlaceholder}>\n {regularSelectedOptions.map(renderListOption)}\n </CommandGroup>\n )}\n\n <CommandGroup heading={groupHeading}>{optionsToShow.map(renderListOption)}</CommandGroup>\n </>\n )}\n </CommandList>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualizedComboboxList.js","sources":["../../../src/components/Combobox/VirtualizedComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { useRef, useEffect } from 'react'\n\nimport { CommandEmpty, CommandItem } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { VirtualizedComboboxListProps } from './types'\n\nexport const VirtualizedComboboxList = <T extends object>({\n localOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n hasNextPage,\n loadingMore,\n onLoadMore,\n}: VirtualizedComboboxListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null)\n const hasTriggeredRef = useRef(false)\n\n const totalCount = localOptions.length\n const PREFETCH_THRESHOLD = 25\n\n const rowVirtualizer = useVirtualizer({\n count: totalCount,\n getScrollElement: () => parentRef.current,\n estimateSize: () => 40,\n overscan: 10,\n })\n\n useEffect(() => {\n hasTriggeredRef.current = false\n }, [totalCount])\n\n const virtualItems = rowVirtualizer.getVirtualItems()\n\n useEffect(() => {\n if (virtualItems.length === 0 || !hasNextPage || loadingMore || loading || hasTriggeredRef.current) {\n return\n }\n\n const lastVisibleItem = virtualItems.at(-1)\n const itemsFromEnd = totalCount - (lastVisibleItem?.index ?? 0)\n\n if (itemsFromEnd <= PREFETCH_THRESHOLD) {\n hasTriggeredRef.current = true\n onLoadMore()\n }\n }, [virtualItems, totalCount, hasNextPage, loadingMore, loading, onLoadMore])\n\n if (loading && localOptions.length === 0) {\n return (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n )\n }\n\n if (localOptions.length === 0 && !loading && !loadingMore) {\n return <CommandEmpty>{emptyMessage}</CommandEmpty>\n }\n\n const getItemAtIndex = (index: number) => {\n const option = localOptions[index]\n const isSelected = value === getOptionValue(option)\n return { option, isSelected }\n }\n\n return (\n <div\n ref={parentRef}\n className=\"overflow-auto overscroll-contain\"\n style={{ maxHeight }}\n onWheel={(event) => event.stopPropagation()}\n >\n <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const { option, isSelected } = getItemAtIndex(virtualRow.index)\n const optionValue = getOptionValue(option)\n\n return (\n <div\n key={optionValue}\n data-index={virtualRow.index}\n ref={(el) => {\n if (el) rowVirtualizer.measureElement(el)\n }}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <CommandItem value={optionValue} onSelect={handleSelect}>\n {renderOption ? (\n renderOption(option, isSelected)\n ) : (\n <>\n <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n </>\n )}\n </CommandItem>\n </div>\n )\n })}\n </div>\n {loadingMore && (\n <div className=\"flex items-center justify-center py-2 text-sm text-neutral-500\">{loadingPlaceholder}</div>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;AASO,MAAM,0BAA0B,CAAmB;AAAA,EACxD,YAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAuC;AACrC,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,eAAA,GAAkB,OAAO,KAAK,CAAA;AAEpC,EAAA,MAAM,aAAa,YAAA,CAAa,MAAA;AAChC,EAAA,MAAM,kBAAA,GAAqB,EAAA;AAE3B,EAAA,MAAM,iBAAiB,cAAA,CAAe;AAAA,IACpC,KAAA,EAAO,UAAA;AAAA,IACP,gBAAA,EAAkB,MAAM,SAAA,CAAU,OAAA;AAAA,IAClC,cAAc,MAAM,EAAA;AAAA,IACpB,QAAA,EAAU;AAAA,GACX,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,OAAA,GAAU,KAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"VirtualizedComboboxList.js","sources":["../../../src/components/Combobox/VirtualizedComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { useRef, useEffect } from 'react'\n\nimport { CommandEmpty, CommandItem } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { VirtualizedComboboxListProps } from './types'\n\nexport const VirtualizedComboboxList = <T extends object>({\n localOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n hasNextPage,\n loadingMore,\n onLoadMore,\n}: VirtualizedComboboxListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null)\n const hasTriggeredRef = useRef(false)\n\n const totalCount = localOptions.length\n const PREFETCH_THRESHOLD = 25\n\n const rowVirtualizer = useVirtualizer({\n count: totalCount,\n getScrollElement: () => parentRef.current,\n estimateSize: () => 40,\n overscan: 10,\n })\n\n useEffect(() => {\n hasTriggeredRef.current = false\n }, [totalCount])\n\n const virtualItems = rowVirtualizer.getVirtualItems()\n\n useEffect(() => {\n if (virtualItems.length === 0 || !hasNextPage || loadingMore || loading || hasTriggeredRef.current) {\n return\n }\n\n const lastVisibleItem = virtualItems.at(-1)\n const itemsFromEnd = totalCount - (lastVisibleItem?.index ?? 0)\n\n if (itemsFromEnd <= PREFETCH_THRESHOLD) {\n hasTriggeredRef.current = true\n onLoadMore()\n }\n }, [virtualItems, totalCount, hasNextPage, loadingMore, loading, onLoadMore])\n\n if (loading && localOptions.length === 0) {\n return (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n )\n }\n\n if (localOptions.length === 0 && !loading && !loadingMore) {\n return <CommandEmpty>{emptyMessage}</CommandEmpty>\n }\n\n const getItemAtIndex = (index: number) => {\n const option = localOptions[index]\n const isSelected = value === getOptionValue(option)\n return { option, isSelected }\n }\n\n return (\n <div\n ref={parentRef}\n className=\"overflow-auto overscroll-contain\"\n style={{ maxHeight }}\n onWheel={(event) => event.stopPropagation()}\n >\n <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const { option, isSelected } = getItemAtIndex(virtualRow.index)\n const optionValue = getOptionValue(option)\n\n return (\n <div\n key={optionValue}\n data-index={virtualRow.index}\n ref={(el) => {\n if (el) rowVirtualizer.measureElement(el)\n }}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <CommandItem value={optionValue} onSelect={handleSelect}>\n {renderOption ? (\n renderOption(option, isSelected)\n ) : (\n <>\n <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n </>\n )}\n </CommandItem>\n </div>\n )\n })}\n </div>\n {loadingMore && (\n <div className=\"flex items-center justify-center py-2 text-sm text-neutral-500\">{loadingPlaceholder}</div>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ComboboxProps } from './Combobox'\n\nexport const useCombobox = <T extends object>(props: ComboboxProps<T>) => {\n const {\n options,\n getOptionValue,\n getOptionLabel,\n placeholder = 'Select...',\n loading = false,\n filterOptions,\n multiple,\n clearable = true,\n onClear,\n fetchPage,\n specialOptions,\n } = props\n\n const [open, setOpen] = useState(false)\n const [searchTerm, setSearchTerm] = useState('')\n const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')\n const [isHovered, setIsHovered] = useState(false)\n\n const [page, setPage] = useState(1)\n const [localOptions, setLocalOptions] = useState<Array<T>>(options)\n const [hasNextPage, setHasNextPage] = useState(true)\n const [loadingMore, setLoadingMore] = useState(false)\n\n const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)\n\n const closeOnSelect = props.closeOnSelect ?? !props.multiple\n const isVirtualized = !!fetchPage\n\n useEffect(() => {\n if (!isVirtualized) return\n\n clearTimeout(debounceTimerRef.current)\n\n debounceTimerRef.current = setTimeout(() => {\n setDebouncedSearchTerm(searchTerm)\n }, 300)\n\n return () => {\n clearTimeout(debounceTimerRef.current)\n }\n }, [searchTerm, isVirtualized])\n\n useEffect(() => {\n if (isVirtualized) {\n setPage(1)\n setLocalOptions([])\n setHasNextPage(true)\n setLoadingMore(false)\n }\n }, [debouncedSearchTerm, isVirtualized])\n\n const loadNextPage = useCallback(async () => {\n if (!fetchPage || loadingMore || !hasNextPage || loading) return\n\n setLoadingMore(true)\n try {\n const result = await fetchPage({ page, search: debouncedSearchTerm || undefined })\n setLocalOptions((prev) => [...prev, ...result.items])\n setPage(result.nextPage)\n setHasNextPage(result.hasNextPage)\n } finally {\n setLoadingMore(false)\n }\n }, [fetchPage, loadingMore, hasNextPage, loading, page, debouncedSearchTerm])\n\n // Load initial page when combobox opens\n useEffect(() => {\n if (isVirtualized && open && localOptions.length === 0 && !loading && !loadingMore) {\n loadNextPage()\n }\n }, [isVirtualized, open, localOptions.length, loading, loadingMore, loadNextPage])\n\n const filteredOptions = useMemo(() => {\n if (isVirtualized) {\n return localOptions\n }\n\n if (!filterOptions) {\n return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n }\n\n return searchTerm ? filterOptions(options, searchTerm) : options\n }, [isVirtualized, localOptions, filterOptions, options, searchTerm, getOptionLabel])\n\n const handleSelect = useCallback(\n (currentValue: string) => {\n if (multiple) {\n const { value = [], onChange } = props\n const isRemoving = value.includes(currentValue)\n\n if (specialOptions && specialOptions.length > 0) {\n if (isRemoving) {\n onChange([])\n } else {\n onChange([currentValue])\n }\n } else {\n if (isRemoving && !clearable && value.length === 1) {\n return\n }\n\n const newValues = isRemoving ? value.filter((val) => val !== currentValue) : [...value, currentValue]\n onChange(newValues)\n }\n } else {\n const { value, onChange } = props\n const newValue = clearable && currentValue === value ? '' : currentValue\n onChange(newValue)\n }\n\n if (closeOnSelect) {\n setOpen(false)\n }\n },\n [multiple, clearable, closeOnSelect, props, specialOptions],\n )\n\n const handleRemove = useCallback(\n (valueToRemove: string) => {\n if (props.multiple) {\n const { value = [], onChange } = props\n\n if (!clearable && value.length === 1) {\n return\n }\n\n const newValues = value.filter((val) => val !== valueToRemove)\n onChange(newValues)\n }\n },\n [props, clearable],\n )\n\n const handleClear = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault()\n event.stopPropagation()\n\n if (multiple) {\n const { onChange } = props\n\n if (clearable) {\n onChange([])\n }\n } else {\n const { onChange } = props\n onChange('')\n }\n\n if (typeof onClear === 'function') {\n onClear()\n }\n },\n [multiple, clearable, onClear, props],\n )\n\n const displayValue = useMemo(() => {\n const availableOptions = isVirtualized ? localOptions : options\n const allAvailableOptions = specialOptions ? [...specialOptions, ...availableOptions] : availableOptions\n\n if (multiple) {\n const { value = [], renderLabel } = props\n if (value.length === 0) return placeholder\n\n const selectedOptions = allAvailableOptions.filter((option) => value.includes(getOptionValue(option)))\n\n if (renderLabel) {\n return renderLabel(selectedOptions, handleRemove)\n }\n\n return selectedOptions.map(getOptionLabel).join(', ')\n }\n\n const { value, renderLabel } = props\n const selectedOption = allAvailableOptions.find((option) => getOptionValue(option) === value)\n if (renderLabel && selectedOption) {\n return renderLabel(selectedOption)\n }\n return selectedOption ? getOptionLabel(selectedOption) : placeholder\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n props,\n getOptionLabel,\n getOptionValue,\n options,\n localOptions,\n isVirtualized,\n placeholder,\n multiple,\n specialOptions,\n ])\n\n const hasValue = useMemo(() => {\n if (multiple) {\n return props.value && props.value.length > 0\n }\n return !!props.value\n }, [props.value, multiple])\n\n const showClearButton = onClear && hasValue && isHovered && clearable\n\n return {\n // State\n open,\n setOpen,\n searchTerm,\n setSearchTerm,\n isHovered,\n setIsHovered,\n localOptions,\n hasNextPage,\n loadingMore,\n\n // Computed values\n isVirtualized,\n filteredOptions,\n displayValue,\n hasValue,\n showClearButton,\n\n // Handlers\n handleSelect,\n handleRemove,\n handleClear,\n loadNextPage,\n }\n}\n"],"names":["value","renderLabel"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ComboboxProps } from './Combobox'\n\nexport const useCombobox = <T extends object>(props: ComboboxProps<T>) => {\n const {\n options,\n getOptionValue,\n getOptionLabel,\n placeholder = 'Select...',\n loading = false,\n filterOptions,\n multiple,\n clearable = true,\n onClear,\n fetchPage,\n specialOptions,\n } = props\n\n const [open, setOpen] = useState(false)\n const [searchTerm, setSearchTerm] = useState('')\n const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')\n const [isHovered, setIsHovered] = useState(false)\n\n const [page, setPage] = useState(1)\n const [localOptions, setLocalOptions] = useState<Array<T>>(options)\n const [hasNextPage, setHasNextPage] = useState(true)\n const [loadingMore, setLoadingMore] = useState(false)\n\n const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)\n\n const closeOnSelect = props.closeOnSelect ?? !props.multiple\n const isVirtualized = !!fetchPage\n\n useEffect(() => {\n if (!isVirtualized) return\n\n clearTimeout(debounceTimerRef.current)\n\n debounceTimerRef.current = setTimeout(() => {\n setDebouncedSearchTerm(searchTerm)\n }, 300)\n\n return () => {\n clearTimeout(debounceTimerRef.current)\n }\n }, [searchTerm, isVirtualized])\n\n useEffect(() => {\n if (isVirtualized) {\n setPage(1)\n setLocalOptions([])\n setHasNextPage(true)\n setLoadingMore(false)\n }\n }, [debouncedSearchTerm, isVirtualized])\n\n const loadNextPage = useCallback(async () => {\n if (!fetchPage || loadingMore || !hasNextPage || loading) return\n\n setLoadingMore(true)\n try {\n const result = await fetchPage({ page, search: debouncedSearchTerm || undefined })\n setLocalOptions((prev) => [...prev, ...result.items])\n setPage(result.nextPage)\n setHasNextPage(result.hasNextPage)\n } finally {\n setLoadingMore(false)\n }\n }, [fetchPage, loadingMore, hasNextPage, loading, page, debouncedSearchTerm])\n\n // Load initial page when combobox opens\n useEffect(() => {\n if (isVirtualized && open && localOptions.length === 0 && !loading && !loadingMore) {\n loadNextPage()\n }\n }, [isVirtualized, open, localOptions.length, loading, loadingMore, loadNextPage])\n\n const filteredOptions = useMemo(() => {\n if (isVirtualized) {\n return localOptions\n }\n\n if (!filterOptions) {\n return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n }\n\n return searchTerm ? filterOptions(options, searchTerm) : options\n }, [isVirtualized, localOptions, filterOptions, options, searchTerm, getOptionLabel])\n\n const handleSelect = useCallback(\n (currentValue: string) => {\n if (multiple) {\n const { value = [], onChange } = props\n const isRemoving = value.includes(currentValue)\n\n if (specialOptions && specialOptions.length > 0) {\n if (isRemoving) {\n onChange([])\n } else {\n onChange([currentValue])\n }\n } else {\n if (isRemoving && !clearable && value.length === 1) {\n return\n }\n\n const newValues = isRemoving ? value.filter((val) => val !== currentValue) : [...value, currentValue]\n onChange(newValues)\n }\n } else {\n const { value, onChange } = props\n const newValue = clearable && currentValue === value ? '' : currentValue\n onChange(newValue)\n }\n\n if (closeOnSelect) {\n setOpen(false)\n }\n },\n [multiple, clearable, closeOnSelect, props, specialOptions],\n )\n\n const handleRemove = useCallback(\n (valueToRemove: string) => {\n if (props.multiple) {\n const { value = [], onChange } = props\n\n if (!clearable && value.length === 1) {\n return\n }\n\n const newValues = value.filter((val) => val !== valueToRemove)\n onChange(newValues)\n }\n },\n [props, clearable],\n )\n\n const handleClear = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault()\n event.stopPropagation()\n\n if (multiple) {\n const { onChange } = props\n\n if (clearable) {\n onChange([])\n }\n } else {\n const { onChange } = props\n onChange('')\n }\n\n if (typeof onClear === 'function') {\n onClear()\n }\n },\n [multiple, clearable, onClear, props],\n )\n\n const displayValue = useMemo(() => {\n const availableOptions = isVirtualized ? localOptions : options\n const allAvailableOptions = specialOptions ? [...specialOptions, ...availableOptions] : availableOptions\n\n if (multiple) {\n const { value = [], renderLabel } = props\n if (value.length === 0) return placeholder\n\n const selectedOptions = allAvailableOptions.filter((option) => value.includes(getOptionValue(option)))\n\n if (renderLabel) {\n return renderLabel(selectedOptions, handleRemove)\n }\n\n return selectedOptions.map(getOptionLabel).join(', ')\n }\n\n const { value, renderLabel } = props\n const selectedOption = allAvailableOptions.find((option) => getOptionValue(option) === value)\n if (renderLabel && selectedOption) {\n return renderLabel(selectedOption)\n }\n return selectedOption ? getOptionLabel(selectedOption) : placeholder\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n props,\n getOptionLabel,\n getOptionValue,\n options,\n localOptions,\n isVirtualized,\n placeholder,\n multiple,\n specialOptions,\n ])\n\n const hasValue = useMemo(() => {\n if (multiple) {\n return props.value && props.value.length > 0\n }\n return !!props.value\n }, [props.value, multiple])\n\n const showClearButton = onClear && hasValue && isHovered && clearable\n\n return {\n // State\n open,\n setOpen,\n searchTerm,\n setSearchTerm,\n isHovered,\n setIsHovered,\n localOptions,\n hasNextPage,\n loadingMore,\n\n // Computed values\n isVirtualized,\n filteredOptions,\n displayValue,\n hasValue,\n showClearButton,\n\n // Handlers\n handleSelect,\n handleRemove,\n handleClear,\n loadNextPage,\n }\n}\n"],"names":["value","renderLabel"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n readonly table: Table<TData>\n readonly isLoading?: boolean\n readonly pageSize: number\n readonly getRowId: RowIdentifierFn<TData>\n readonly rowSelection: Record<string, boolean>\n readonly isSelectionStarted: boolean\n readonly emptyState: {\n title: string\n description: string\n imageRoute?: string\n imageAlt?: string\n imageClassName?: string\n }\n}\n\ntype TableRowProps<TData> = {\n readonly row: Row<TData>\n readonly isSelectable: boolean\n readonly isSelected: boolean\n readonly isSelectionStarted: boolean\n readonly getRowId: (row: TData) => string\n readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n row,\n isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\n return (\n <TableRow data-selected={isSelected}>\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n <Typography>\n {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Typography>\n </TableCell>\n ))}\n </TableRow>\n )\n}\n\nexport function DataTableBody<TData>({\n table,\n isLoading,\n pageSize,\n getRowId,\n rowSelection,\n isSelectionStarted,\n emptyState,\n}: DataTableBodyProps<TData>) {\n if (isLoading) {\n return (\n <TableBody>\n {Array.from({ length: pageSize }).map((_unused, index) => (\n <TableRow key={`skeleton-row-${String(index)}`}>\n {table\n .getAllColumns()\n .filter((column) => column.getIsVisible())\n .map((column) => {\n let skeletonClass = 'h-[20px] w-full'\n if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n let justifyClass = 'justify-center'\n if (column.id === 'actions') justifyClass = 'justify-end'\n else if (column.id === 'select') justifyClass = 'justify-start'\n\n return (\n <TableCell\n key={`skeleton-cell-${String(index)}-${column.id}`}\n style={{ width: column.columnDef.size }}\n >\n <div className={cn('flex items-center', justifyClass)}>\n <Skeleton className={cn(skeletonClass)} />\n </div>\n </TableCell>\n )\n })}\n </TableRow>\n ))}\n </TableBody>\n )\n }\n\n const rows = table.getRowModel().rows\n\n if (!rows.length) {\n const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n return (\n <TableBody>\n <TableRow className=\"h-full\">\n <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n <div className=\"mt-20 flex h-full w-full flex-col items-center justify-center\">\n {emptyState.imageRoute && (\n <img\n className={cn('mb-6 w-[200px] md:w-[300px]', emptyState.imageClassName)}\n src={emptyState.imageRoute}\n alt={emptyState.imageAlt ?? 'No data available'}\n />\n )}\n <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n {emptyState.title}\n </Typography>\n <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n {emptyState.description}\n </Typography>\n </div>\n </TableCell>\n </TableRow>\n </TableBody>\n )\n }\n\n return (\n <TableBody>\n {rows.map((row) => {\n const rowId = getRowId(row.original)\n const isSelected = rowSelection[rowId] ?? false\n return (\n <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n )\n })}\n </TableBody>\n )\n}\n"],"names":[],"mappings":";;;;;;;AAkCA,SAAS,iBAAA,CAAyB;AAAA,EAChC,GAAA;AAAA,EACA;AACF,CAAA,EAA0F;AACxF,EAAA,2BACG,QAAA,EAAA,EAAS,eAAA,EAAe,UAAA,EACtB,QAAA,EAAA,GAAA,CAAI,iBAAgB,CAAE,GAAA,CAAI,CAAC,IAAA,yBACzB,SAAA,EAAA,EAAwB,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,CAAK,OAAO,SAAA,CAAU,IAAA,EAAK,EAClE,QAAA,kBAAA,GAAA,CAAC,cACE,QAAA,EAAA,IAAA,CAAK,MAAA,CAAO,UAAU,IAAA,IAAQ,UAAA,CAAW,KAAK,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM,IAAA,CAAK,YAAY,CAAA,EACzF,KAHc,IAAA,CAAK,EAIrB,CACD,CAAA,EACH,CAAA;AAEJ;AAEO,SAAS,aAAA,CAAqB;AAAA,EACnC,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAA,EAA8B;AAC5B,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,QAAA,EAAU,CAAA,CAAE,GAAA,CAAI,CAAC,OAAA,EAAS,KAAA,qBAC9C,GAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA,KAAA,CACE,aAAA,EAAc,CACd,MAAA,CAAO,CAAC,MAAA,KAAW,MAAA,CAAO,YAAA,EAAc,CAAA,CACxC,GAAA,CAAI,CAAC,MAAA,KAAW;AACf,MAAA,IAAI,aAAA,GAAgB,iBAAA;AACpB,MAAA,IAAI,MAAA,CAAO,EAAA,KAAO,SAAA,EAAW,aAAA,GAAgB,kBAAA;AAAA,WAAA,IACpC,MAAA,CAAO,EAAA,KAAO,QAAA,EAAU,aAAA,GAAgB,kBAAA;AAEjD,MAAA,IAAI,YAAA,GAAe,gBAAA;AACnB,MAAA,IAAI,MAAA,CAAO,EAAA,KAAO,SAAA,EAAW,YAAA,GAAe,aAAA;AAAA,WAAA,IACnC,MAAA,CAAO,EAAA,KAAO,QAAA,EAAU,YAAA,GAAe,eAAA;AAEhD,MAAA,uBACE,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UAEC,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,CAAO,UAAU,IAAA,EAAK;AAAA,UAEtC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,YAAY,CAAA,EAClD,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,EAAA,CAAG,aAAa,GAAG,CAAA,EAC1C;AAAA,SAAA;AAAA,QALK,iBAAiB,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA;AAAA,OAMlD;AAAA,
|
|
1
|
+
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n readonly table: Table<TData>\n readonly isLoading?: boolean\n readonly pageSize: number\n readonly getRowId: RowIdentifierFn<TData>\n readonly rowSelection: Record<string, boolean>\n readonly isSelectionStarted: boolean\n readonly emptyState: {\n title: string\n description: string\n imageRoute?: string\n imageAlt?: string\n imageClassName?: string\n }\n}\n\ntype TableRowProps<TData> = {\n readonly row: Row<TData>\n readonly isSelectable: boolean\n readonly isSelected: boolean\n readonly isSelectionStarted: boolean\n readonly getRowId: (row: TData) => string\n readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n row,\n isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\n return (\n <TableRow data-selected={isSelected}>\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n <Typography>\n {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Typography>\n </TableCell>\n ))}\n </TableRow>\n )\n}\n\nexport function DataTableBody<TData>({\n table,\n isLoading,\n pageSize,\n getRowId,\n rowSelection,\n isSelectionStarted,\n emptyState,\n}: DataTableBodyProps<TData>) {\n if (isLoading) {\n return (\n <TableBody>\n {Array.from({ length: pageSize }).map((_unused, index) => (\n <TableRow key={`skeleton-row-${String(index)}`}>\n {table\n .getAllColumns()\n .filter((column) => column.getIsVisible())\n .map((column) => {\n let skeletonClass = 'h-[20px] w-full'\n if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n let justifyClass = 'justify-center'\n if (column.id === 'actions') justifyClass = 'justify-end'\n else if (column.id === 'select') justifyClass = 'justify-start'\n\n return (\n <TableCell\n key={`skeleton-cell-${String(index)}-${column.id}`}\n style={{ width: column.columnDef.size }}\n >\n <div className={cn('flex items-center', justifyClass)}>\n <Skeleton className={cn(skeletonClass)} />\n </div>\n </TableCell>\n )\n })}\n </TableRow>\n ))}\n </TableBody>\n )\n }\n\n const rows = table.getRowModel().rows\n\n if (!rows.length) {\n const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n return (\n <TableBody>\n <TableRow className=\"h-full\">\n <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n <div className=\"mt-20 flex h-full w-full flex-col items-center justify-center\">\n {emptyState.imageRoute && (\n <img\n className={cn('mb-6 w-[200px] md:w-[300px]', emptyState.imageClassName)}\n src={emptyState.imageRoute}\n alt={emptyState.imageAlt ?? 'No data available'}\n />\n )}\n <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n {emptyState.title}\n </Typography>\n <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n {emptyState.description}\n </Typography>\n </div>\n </TableCell>\n </TableRow>\n </TableBody>\n )\n }\n\n return (\n <TableBody>\n {rows.map((row) => {\n const rowId = getRowId(row.original)\n const isSelected = rowSelection[rowId] ?? false\n return (\n <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n )\n })}\n </TableBody>\n )\n}\n"],"names":[],"mappings":"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"}
|