@karakuri-ui/react 0.3.9 → 0.3.10
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/dist/components/ui/alert.d.mts +1 -1
- package/dist/components/ui/alert.d.ts +1 -1
- package/dist/components/ui/avatar.d.mts +2 -2
- package/dist/components/ui/avatar.d.ts +2 -2
- package/dist/components/ui/breadcrumb.js +15 -9
- package/dist/components/ui/breadcrumb.js.map +1 -1
- package/dist/components/ui/breadcrumb.mjs +15 -9
- package/dist/components/ui/breadcrumb.mjs.map +1 -1
- package/dist/components/ui/button.d.mts +3 -3
- package/dist/components/ui/button.d.ts +3 -3
- package/dist/components/ui/card.d.mts +1 -1
- package/dist/components/ui/card.d.ts +1 -1
- package/dist/components/ui/drawer.d.mts +2 -2
- package/dist/components/ui/drawer.d.ts +2 -2
- package/dist/components/ui/field.d.mts +1 -1
- package/dist/components/ui/field.d.ts +1 -1
- package/dist/components/ui/icon-button.d.mts +2 -2
- package/dist/components/ui/icon-button.d.ts +2 -2
- package/dist/components/ui/input.d.mts +3 -3
- package/dist/components/ui/input.d.ts +3 -3
- package/dist/components/ui/metric-card.d.mts +1 -1
- package/dist/components/ui/metric-card.d.ts +1 -1
- package/dist/components/ui/modal.d.mts +2 -2
- package/dist/components/ui/modal.d.ts +2 -2
- package/dist/components/ui/pagination.d.mts +1 -1
- package/dist/components/ui/pagination.d.ts +1 -1
- package/dist/components/ui/segmented.d.mts +3 -3
- package/dist/components/ui/segmented.d.ts +3 -3
- package/dist/components/ui/textarea.d.mts +2 -2
- package/dist/components/ui/textarea.d.ts +2 -2
- package/dist/components/ui/toggle-group.d.mts +2 -2
- package/dist/components/ui/toggle-group.d.ts +2 -2
- package/dist/components/ui/toggle.d.mts +2 -2
- package/dist/components/ui/toggle.d.ts +2 -2
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
4
4
|
|
|
5
5
|
declare const alertVariants: (props?: ({
|
|
6
6
|
size?: "sm" | "default" | "lg" | null | undefined;
|
|
7
|
-
radius?: "sm" | "lg" | "
|
|
7
|
+
radius?: "sm" | "lg" | "none" | "base" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
type AlertVariant = 'default' | 'outline' | 'filled';
|
|
10
10
|
type AlertColor = 'info' | 'success' | 'warning' | 'error';
|
|
@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
4
4
|
|
|
5
5
|
declare const alertVariants: (props?: ({
|
|
6
6
|
size?: "sm" | "default" | "lg" | null | undefined;
|
|
7
|
-
radius?: "sm" | "lg" | "
|
|
7
|
+
radius?: "sm" | "lg" | "none" | "base" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
type AlertVariant = 'default' | 'outline' | 'filled';
|
|
10
10
|
type AlertColor = 'info' | 'success' | 'warning' | 'error';
|
|
@@ -4,8 +4,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
|
|
6
6
|
declare const avatarVariants: (props?: ({
|
|
7
|
-
size?: "
|
|
8
|
-
shape?: "
|
|
7
|
+
size?: "sm" | "default" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
|
|
8
|
+
shape?: "square" | "circle" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const avatarColors: readonly [{
|
|
11
11
|
readonly vivid: {
|
|
@@ -4,8 +4,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
|
|
6
6
|
declare const avatarVariants: (props?: ({
|
|
7
|
-
size?: "
|
|
8
|
-
shape?: "
|
|
7
|
+
size?: "sm" | "default" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
|
|
8
|
+
shape?: "square" | "circle" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const avatarColors: readonly [{
|
|
11
11
|
readonly vivid: {
|
|
@@ -203,24 +203,30 @@ function flattenFragments(children) {
|
|
|
203
203
|
) : [node]
|
|
204
204
|
);
|
|
205
205
|
}
|
|
206
|
+
function classifyNodes(nodes) {
|
|
207
|
+
const known = nodes.map((node) => {
|
|
208
|
+
const type = React.isValidElement(node) ? node.type : null;
|
|
209
|
+
return type === BreadcrumbSeparator ? "separator" : type === BreadcrumbItem ? "item" : null;
|
|
210
|
+
});
|
|
211
|
+
if (known.every((kind) => kind === null)) {
|
|
212
|
+
return nodes.map((_, i) => i % 2 === 0 ? "item" : "separator");
|
|
213
|
+
}
|
|
214
|
+
return known.map((kind) => kind ?? "item");
|
|
215
|
+
}
|
|
206
216
|
function collapseItems(children, maxItems, before, after) {
|
|
207
217
|
if (maxItems === void 0) return children;
|
|
208
218
|
const nodes = flattenFragments(children);
|
|
219
|
+
const kinds = classifyNodes(nodes);
|
|
209
220
|
const segments = [];
|
|
210
221
|
let pendingSeparator = null;
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
if (type === BreadcrumbSeparator) {
|
|
222
|
+
nodes.forEach((node, i) => {
|
|
223
|
+
if (kinds[i] === "separator") {
|
|
214
224
|
pendingSeparator = node;
|
|
215
|
-
} else
|
|
225
|
+
} else {
|
|
216
226
|
segments.push({ separator: pendingSeparator, nodes: [node] });
|
|
217
227
|
pendingSeparator = null;
|
|
218
|
-
} else if (segments.length > 0) {
|
|
219
|
-
segments[segments.length - 1].nodes.push(node);
|
|
220
|
-
} else {
|
|
221
|
-
segments.push({ separator: null, nodes: [node] });
|
|
222
228
|
}
|
|
223
|
-
}
|
|
229
|
+
});
|
|
224
230
|
if (segments.length <= maxItems || before + after >= segments.length) return children;
|
|
225
231
|
const head = segments.slice(0, before);
|
|
226
232
|
const tail = segments.slice(segments.length - after);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n size?: 'sm' | 'default' | 'lg'\n separator?: React.ReactNode\n maxItems?: number\n itemsBeforeCollapse?: number\n itemsAfterCollapse?: number\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /** Separator element between items */\n separator?: React.ReactNode\n /** Size of the breadcrumb */\n size?: 'sm' | 'default' | 'lg'\n /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */\n maxItems?: number\n /** Items kept before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items kept after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>\n <nav\n ref={ref}\n aria-label=\"breadcrumb\"\n className={cn('', className)}\n {...props}\n />\n </BreadcrumbContext.Provider>\n )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, children, ...props }, ref) => {\n const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center',\n sizeClass.gap,\n sizeClass.text,\n 'text-text-muted',\n className\n )}\n {...props}\n >\n {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}\n </ol>\n )\n }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n /** Use Radix Slot to compose with custom link components */\n asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n return (\n <Comp\n ref={ref}\n className={cn(\n 'transition-colors duration-fast hover:text-foreground',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground', className)}\n {...props}\n />\n )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ children, className, ...props }, ref) => {\n const { separator, size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <li\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center text-text-subtle', className)}\n {...props}\n >\n {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n </li>\n )\n }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <span\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center justify-center', className)}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More</span>\n </span>\n )\n }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Collapse ─────────────────────────────────────────────\n\n// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,\n// so fragments are unwrapped before counting.\nfunction flattenFragments(children: React.ReactNode): React.ReactNode[] {\n return React.Children.toArray(children).flatMap((node) =>\n React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment\n ? flattenFragments(node.props.children).map((child) =>\n // Prefix keys so children of different fragments stay unique\n React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child\n )\n : [node]\n )\n}\n\n// Groups children into segments (the separator before an item + the item),\n// then keeps the first `before` and last `after` segments around one ellipsis\n// item. The user's own separators are reused, so custom separators survive.\nfunction collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {\n if (maxItems === undefined) return children\n\n const nodes = flattenFragments(children)\n const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []\n let pendingSeparator: React.ReactNode = null\n for (const node of nodes) {\n const type = React.isValidElement(node) ? node.type : null\n if (type === BreadcrumbSeparator) {\n pendingSeparator = node\n } else if (type === BreadcrumbItem) {\n segments.push({ separator: pendingSeparator, nodes: [node] })\n pendingSeparator = null\n } else if (segments.length > 0) {\n segments[segments.length - 1].nodes.push(node)\n } else {\n segments.push({ separator: null, nodes: [node] })\n }\n }\n\n if (segments.length <= maxItems || before + after >= segments.length) return children\n\n const head = segments.slice(0, before)\n const tail = segments.slice(segments.length - after)\n const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))\n const ellipsisSeparator = segments[before].separator\n\n return [\n ...render(head),\n ...(ellipsisSeparator ? [ellipsisSeparator] : []),\n <BreadcrumbItem key=\"breadcrumb-collapsed\">\n <BreadcrumbEllipsis />\n </BreadcrumbItem>,\n ...render(tail),\n ]\n}\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n breadcrumbSizeMap,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n size?: 'sm' | 'default' | 'lg'\n separator?: React.ReactNode\n maxItems?: number\n itemsBeforeCollapse?: number\n itemsAfterCollapse?: number\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /** Separator element between items */\n separator?: React.ReactNode\n /** Size of the breadcrumb */\n size?: 'sm' | 'default' | 'lg'\n /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */\n maxItems?: number\n /** Items kept before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items kept after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>\n <nav\n ref={ref}\n aria-label=\"breadcrumb\"\n className={cn('', className)}\n {...props}\n />\n </BreadcrumbContext.Provider>\n )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, children, ...props }, ref) => {\n const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center',\n sizeClass.gap,\n sizeClass.text,\n 'text-text-muted',\n className\n )}\n {...props}\n >\n {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}\n </ol>\n )\n }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n /** Use Radix Slot to compose with custom link components */\n asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n return (\n <Comp\n ref={ref}\n className={cn(\n 'transition-colors duration-fast hover:text-foreground',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground', className)}\n {...props}\n />\n )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ children, className, ...props }, ref) => {\n const { separator, size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <li\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center text-text-subtle', className)}\n {...props}\n >\n {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n </li>\n )\n }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <span\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center justify-center', className)}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More</span>\n </span>\n )\n }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Collapse ─────────────────────────────────────────────\n\n// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,\n// so fragments are unwrapped before counting.\nfunction flattenFragments(children: React.ReactNode): React.ReactNode[] {\n return React.Children.toArray(children).flatMap((node) =>\n React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment\n ? flattenFragments(node.props.children).map((child) =>\n // Prefix keys so children of different fragments stay unique\n React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child\n )\n : [node]\n )\n}\n\n// Children passed from a Server Component arrive with lazy element types, so\n// `node.type === BreadcrumbItem` cannot tell them apart. When no child can be\n// identified, the list is read as the alternating item / separator order every\n// breadcrumb uses. Unidentified children next to identified separators (items\n// wrapped in the caller's own component) count as items.\nfunction classifyNodes(nodes: React.ReactNode[]): ('item' | 'separator')[] {\n const known = nodes.map((node) => {\n const type = React.isValidElement(node) ? node.type : null\n return type === BreadcrumbSeparator ? 'separator' : type === BreadcrumbItem ? 'item' : null\n })\n if (known.every((kind) => kind === null)) {\n return nodes.map((_, i) => (i % 2 === 0 ? 'item' : 'separator'))\n }\n return known.map((kind) => kind ?? 'item')\n}\n\n// Groups children into segments (the separator before an item + the item),\n// then keeps the first `before` and last `after` segments around one ellipsis\n// item. The user's own separators are reused, so custom separators survive.\nfunction collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {\n if (maxItems === undefined) return children\n\n const nodes = flattenFragments(children)\n const kinds = classifyNodes(nodes)\n const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []\n let pendingSeparator: React.ReactNode = null\n nodes.forEach((node, i) => {\n if (kinds[i] === 'separator') {\n pendingSeparator = node\n } else {\n segments.push({ separator: pendingSeparator, nodes: [node] })\n pendingSeparator = null\n }\n })\n\n if (segments.length <= maxItems || before + after >= segments.length) return children\n\n const head = segments.slice(0, before)\n const tail = segments.slice(segments.length - after)\n const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))\n const ellipsisSeparator = segments[before].separator\n\n return [\n ...render(head),\n ...(ellipsisSeparator ? [ellipsisSeparator] : []),\n <BreadcrumbItem key=\"breadcrumb-collapsed\">\n <BreadcrumbEllipsis />\n </BreadcrumbItem>,\n ...render(tail),\n ]\n}\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n breadcrumbSizeMap,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -163,24 +163,30 @@ function flattenFragments(children) {
|
|
|
163
163
|
) : [node]
|
|
164
164
|
);
|
|
165
165
|
}
|
|
166
|
+
function classifyNodes(nodes) {
|
|
167
|
+
const known = nodes.map((node) => {
|
|
168
|
+
const type = React.isValidElement(node) ? node.type : null;
|
|
169
|
+
return type === BreadcrumbSeparator ? "separator" : type === BreadcrumbItem ? "item" : null;
|
|
170
|
+
});
|
|
171
|
+
if (known.every((kind) => kind === null)) {
|
|
172
|
+
return nodes.map((_, i) => i % 2 === 0 ? "item" : "separator");
|
|
173
|
+
}
|
|
174
|
+
return known.map((kind) => kind ?? "item");
|
|
175
|
+
}
|
|
166
176
|
function collapseItems(children, maxItems, before, after) {
|
|
167
177
|
if (maxItems === void 0) return children;
|
|
168
178
|
const nodes = flattenFragments(children);
|
|
179
|
+
const kinds = classifyNodes(nodes);
|
|
169
180
|
const segments = [];
|
|
170
181
|
let pendingSeparator = null;
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
if (type === BreadcrumbSeparator) {
|
|
182
|
+
nodes.forEach((node, i) => {
|
|
183
|
+
if (kinds[i] === "separator") {
|
|
174
184
|
pendingSeparator = node;
|
|
175
|
-
} else
|
|
185
|
+
} else {
|
|
176
186
|
segments.push({ separator: pendingSeparator, nodes: [node] });
|
|
177
187
|
pendingSeparator = null;
|
|
178
|
-
} else if (segments.length > 0) {
|
|
179
|
-
segments[segments.length - 1].nodes.push(node);
|
|
180
|
-
} else {
|
|
181
|
-
segments.push({ separator: null, nodes: [node] });
|
|
182
188
|
}
|
|
183
|
-
}
|
|
189
|
+
});
|
|
184
190
|
if (segments.length <= maxItems || before + after >= segments.length) return children;
|
|
185
191
|
const head = segments.slice(0, before);
|
|
186
192
|
const tail = segments.slice(segments.length - after);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n size?: 'sm' | 'default' | 'lg'\n separator?: React.ReactNode\n maxItems?: number\n itemsBeforeCollapse?: number\n itemsAfterCollapse?: number\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /** Separator element between items */\n separator?: React.ReactNode\n /** Size of the breadcrumb */\n size?: 'sm' | 'default' | 'lg'\n /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */\n maxItems?: number\n /** Items kept before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items kept after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>\n <nav\n ref={ref}\n aria-label=\"breadcrumb\"\n className={cn('', className)}\n {...props}\n />\n </BreadcrumbContext.Provider>\n )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, children, ...props }, ref) => {\n const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center',\n sizeClass.gap,\n sizeClass.text,\n 'text-text-muted',\n className\n )}\n {...props}\n >\n {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}\n </ol>\n )\n }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n /** Use Radix Slot to compose with custom link components */\n asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n return (\n <Comp\n ref={ref}\n className={cn(\n 'transition-colors duration-fast hover:text-foreground',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground', className)}\n {...props}\n />\n )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ children, className, ...props }, ref) => {\n const { separator, size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <li\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center text-text-subtle', className)}\n {...props}\n >\n {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n </li>\n )\n }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <span\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center justify-center', className)}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More</span>\n </span>\n )\n }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Collapse ─────────────────────────────────────────────\n\n// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,\n// so fragments are unwrapped before counting.\nfunction flattenFragments(children: React.ReactNode): React.ReactNode[] {\n return React.Children.toArray(children).flatMap((node) =>\n React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment\n ? flattenFragments(node.props.children).map((child) =>\n // Prefix keys so children of different fragments stay unique\n React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child\n )\n : [node]\n )\n}\n\n// Groups children into segments (the separator before an item + the item),\n// then keeps the first `before` and last `after` segments around one ellipsis\n// item. The user's own separators are reused, so custom separators survive.\nfunction collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {\n if (maxItems === undefined) return children\n\n const nodes = flattenFragments(children)\n const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []\n let pendingSeparator: React.ReactNode = null\n for (const node of nodes) {\n const type = React.isValidElement(node) ? node.type : null\n if (type === BreadcrumbSeparator) {\n pendingSeparator = node\n } else if (type === BreadcrumbItem) {\n segments.push({ separator: pendingSeparator, nodes: [node] })\n pendingSeparator = null\n } else if (segments.length > 0) {\n segments[segments.length - 1].nodes.push(node)\n } else {\n segments.push({ separator: null, nodes: [node] })\n }\n }\n\n if (segments.length <= maxItems || before + after >= segments.length) return children\n\n const head = segments.slice(0, before)\n const tail = segments.slice(segments.length - after)\n const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))\n const ellipsisSeparator = segments[before].separator\n\n return [\n ...render(head),\n ...(ellipsisSeparator ? [ellipsisSeparator] : []),\n <BreadcrumbItem key=\"breadcrumb-collapsed\">\n <BreadcrumbEllipsis />\n </BreadcrumbItem>,\n ...render(tail),\n ]\n}\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n breadcrumbSizeMap,\n}\n"],"mappings":";AA+BM,cASF,YATE;AA7BN,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,UAAU;AAYnB,MAAM,oBAAoB,MAAM,cAAsC,CAAC,CAAC;AACxE,MAAM,uBAAuB,MAAM,MAAM,WAAW,iBAAiB;AAIrE,SAAS,iBAAiB,EAAE,UAAU,GAA2B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA,MAEb,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,gBAAe;AAAA;AAAA,EACtE;AAEJ;AAIA,SAAS,aAAa,EAAE,UAAU,GAA2B;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MAER;AAAA,4BAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,QAC/B,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,QAChC,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA;AAAA;AAAA,EAClC;AAEJ;AAIA,MAAM,oBAAoB;AAAA,EACxB,IAAI,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,UAAU;AAAA,EACvD,SAAS,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,QAAQ;AAAA,EAC1D,IAAI,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,QAAQ;AACvD;AAeA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,WAAW,OAAO,WAAW,UAAU,sBAAsB,GAAG,qBAAqB,GAAG,GAAG,MAAM,GAAG,QAChH,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,WAAW,UAAU,qBAAqB,mBAAmB,GACtG;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAW;AAAA,MACX,WAAW,GAAG,IAAI,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AACA,WAAW,cAAc;AAIzB,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,OAAO,WAAW,UAAU,sBAAsB,GAAG,qBAAqB,EAAE,IAAI,qBAAqB;AAC7G,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,wBAAc,UAAU,UAAU,qBAAqB,kBAAkB;AAAA;AAAA,IAC5E;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,eAAe,cAAc;AAS7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,SAAS,WAAW,GAAG,MAAM,GAAG,QAAQ;AACzC,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,gBAAa;AAAA,MACb,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,eAAe,cAAc;AAI7B,MAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,WAAW,OAAO,UAAU,IAAI,qBAAqB;AAC7D,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG;AAAA,QAEH,sBAAY,aAAa,oBAAC,oBAAiB,WAAW,UAAU,MAAM;AAAA;AAAA,IACzE;AAAA,EAEJ;AACF;AACA,oBAAoB,cAAc;AAMlC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,OAAO,UAAU,IAAI,qBAAqB;AAClD,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,oCAAoC,SAAS;AAAA,QAC1D,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,WAAW,UAAU,MAAM;AAAA,UACzC,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,IAChC;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAMjC,SAAS,iBAAiB,UAA8C;AACtE,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAAQ,CAAC,SAC/C,MAAM,eAA+C,IAAI,KAAK,KAAK,SAAS,MAAM,WAC9E,iBAAiB,KAAK,MAAM,QAAQ,EAAE;AAAA,MAAI,CAAC;AAAA;AAAA,QAEzC,MAAM,eAAe,KAAK,IAAI,MAAM,aAAa,OAAO,EAAE,KAAK,GAAG,KAAK,GAAG,GAAG,MAAM,GAAG,GAAG,CAAC,IAAI;AAAA;AAAA,IAChG,IACA,CAAC,IAAI;AAAA,EACX;AACF;AAKA,SAAS,cAAc,UAA2B,UAA8B,QAAgB,OAAe;AAC7G,MAAI,aAAa,OAAW,QAAO;AAEnC,QAAM,QAAQ,iBAAiB,QAAQ;AACvC,QAAM,WAAuE,CAAC;AAC9E,MAAI,mBAAoC;AACxC,aAAW,QAAQ,OAAO;AACxB,UAAM,OAAO,MAAM,eAAe,IAAI,IAAI,KAAK,OAAO;AACtD,QAAI,SAAS,qBAAqB;AAChC,yBAAmB;AAAA,IACrB,WAAW,SAAS,gBAAgB;AAClC,eAAS,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,IAAI,EAAE,CAAC;AAC5D,yBAAmB;AAAA,IACrB,WAAW,SAAS,SAAS,GAAG;AAC9B,eAAS,SAAS,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI;AAAA,IAC/C,OAAO;AACL,eAAS,KAAK,EAAE,WAAW,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC;AAAA,IAClD;AAAA,EACF;AAEA,MAAI,SAAS,UAAU,YAAY,SAAS,SAAS,SAAS,OAAQ,QAAO;AAE7E,QAAM,OAAO,SAAS,MAAM,GAAG,MAAM;AACrC,QAAM,OAAO,SAAS,MAAM,SAAS,SAAS,KAAK;AACnD,QAAM,SAAS,CAAC,SAA0B,KAAK,QAAQ,CAAC,QAAS,IAAI,YAAY,CAAC,IAAI,WAAW,GAAG,IAAI,KAAK,IAAI,IAAI,KAAM;AAC3H,QAAM,oBAAoB,SAAS,MAAM,EAAE;AAE3C,SAAO;AAAA,IACL,GAAG,OAAO,IAAI;AAAA,IACd,GAAI,oBAAoB,CAAC,iBAAiB,IAAI,CAAC;AAAA,IAC/C,oBAAC,kBACC,8BAAC,sBAAmB,KADF,sBAEpB;AAAA,IACA,GAAG,OAAO,IAAI;AAAA,EAChB;AACF;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n size?: 'sm' | 'default' | 'lg'\n separator?: React.ReactNode\n maxItems?: number\n itemsBeforeCollapse?: number\n itemsAfterCollapse?: number\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /** Separator element between items */\n separator?: React.ReactNode\n /** Size of the breadcrumb */\n size?: 'sm' | 'default' | 'lg'\n /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */\n maxItems?: number\n /** Items kept before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items kept after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>\n <nav\n ref={ref}\n aria-label=\"breadcrumb\"\n className={cn('', className)}\n {...props}\n />\n </BreadcrumbContext.Provider>\n )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, children, ...props }, ref) => {\n const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center',\n sizeClass.gap,\n sizeClass.text,\n 'text-text-muted',\n className\n )}\n {...props}\n >\n {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}\n </ol>\n )\n }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n /** Use Radix Slot to compose with custom link components */\n asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n return (\n <Comp\n ref={ref}\n className={cn(\n 'transition-colors duration-fast hover:text-foreground',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground', className)}\n {...props}\n />\n )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ children, className, ...props }, ref) => {\n const { separator, size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <li\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center text-text-subtle', className)}\n {...props}\n >\n {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n </li>\n )\n }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <span\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center justify-center', className)}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More</span>\n </span>\n )\n }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Collapse ─────────────────────────────────────────────\n\n// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,\n// so fragments are unwrapped before counting.\nfunction flattenFragments(children: React.ReactNode): React.ReactNode[] {\n return React.Children.toArray(children).flatMap((node) =>\n React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment\n ? flattenFragments(node.props.children).map((child) =>\n // Prefix keys so children of different fragments stay unique\n React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child\n )\n : [node]\n )\n}\n\n// Children passed from a Server Component arrive with lazy element types, so\n// `node.type === BreadcrumbItem` cannot tell them apart. When no child can be\n// identified, the list is read as the alternating item / separator order every\n// breadcrumb uses. Unidentified children next to identified separators (items\n// wrapped in the caller's own component) count as items.\nfunction classifyNodes(nodes: React.ReactNode[]): ('item' | 'separator')[] {\n const known = nodes.map((node) => {\n const type = React.isValidElement(node) ? node.type : null\n return type === BreadcrumbSeparator ? 'separator' : type === BreadcrumbItem ? 'item' : null\n })\n if (known.every((kind) => kind === null)) {\n return nodes.map((_, i) => (i % 2 === 0 ? 'item' : 'separator'))\n }\n return known.map((kind) => kind ?? 'item')\n}\n\n// Groups children into segments (the separator before an item + the item),\n// then keeps the first `before` and last `after` segments around one ellipsis\n// item. The user's own separators are reused, so custom separators survive.\nfunction collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {\n if (maxItems === undefined) return children\n\n const nodes = flattenFragments(children)\n const kinds = classifyNodes(nodes)\n const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []\n let pendingSeparator: React.ReactNode = null\n nodes.forEach((node, i) => {\n if (kinds[i] === 'separator') {\n pendingSeparator = node\n } else {\n segments.push({ separator: pendingSeparator, nodes: [node] })\n pendingSeparator = null\n }\n })\n\n if (segments.length <= maxItems || before + after >= segments.length) return children\n\n const head = segments.slice(0, before)\n const tail = segments.slice(segments.length - after)\n const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))\n const ellipsisSeparator = segments[before].separator\n\n return [\n ...render(head),\n ...(ellipsisSeparator ? [ellipsisSeparator] : []),\n <BreadcrumbItem key=\"breadcrumb-collapsed\">\n <BreadcrumbEllipsis />\n </BreadcrumbItem>,\n ...render(tail),\n ]\n}\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n breadcrumbSizeMap,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -10,9 +10,9 @@ declare const solidColorMap: {
|
|
|
10
10
|
};
|
|
11
11
|
type ButtonColor = keyof typeof solidColorMap;
|
|
12
12
|
declare const buttonVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
14
|
-
size?: "
|
|
15
|
-
radius?: "sm" | "default" | "lg" | "
|
|
13
|
+
variant?: "outline" | "link" | "solid" | "ghost" | null | undefined;
|
|
14
|
+
size?: "sm" | "default" | "lg" | "md" | "icon" | "xs" | null | undefined;
|
|
15
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
16
16
|
fullWidth?: boolean | null | undefined;
|
|
17
17
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
18
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -10,9 +10,9 @@ declare const solidColorMap: {
|
|
|
10
10
|
};
|
|
11
11
|
type ButtonColor = keyof typeof solidColorMap;
|
|
12
12
|
declare const buttonVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
14
|
-
size?: "
|
|
15
|
-
radius?: "sm" | "default" | "lg" | "
|
|
13
|
+
variant?: "outline" | "link" | "solid" | "ghost" | null | undefined;
|
|
14
|
+
size?: "sm" | "default" | "lg" | "md" | "icon" | "xs" | null | undefined;
|
|
15
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
16
16
|
fullWidth?: boolean | null | undefined;
|
|
17
17
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
18
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -7,7 +7,7 @@ type CardDirection = 'vertical' | 'horizontal';
|
|
|
7
7
|
declare const cardVariants: (props?: ({
|
|
8
8
|
variant?: "default" | "outline" | "ghost" | null | undefined;
|
|
9
9
|
size?: "sm" | "default" | "lg" | null | undefined;
|
|
10
|
-
radius?: "sm" | "lg" | "
|
|
10
|
+
radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
|
|
11
11
|
direction?: "horizontal" | "vertical" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
13
|
type CardVariant = 'default' | 'outline' | 'ghost';
|
|
@@ -7,7 +7,7 @@ type CardDirection = 'vertical' | 'horizontal';
|
|
|
7
7
|
declare const cardVariants: (props?: ({
|
|
8
8
|
variant?: "default" | "outline" | "ghost" | null | undefined;
|
|
9
9
|
size?: "sm" | "default" | "lg" | null | undefined;
|
|
10
|
-
radius?: "sm" | "lg" | "
|
|
10
|
+
radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
|
|
11
11
|
direction?: "horizontal" | "vertical" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
13
|
type CardVariant = 'default' | 'outline' | 'ghost';
|
|
@@ -5,10 +5,10 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
|
5
5
|
type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
|
|
6
6
|
type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
7
7
|
declare const drawerSizeHorizontal: (props?: ({
|
|
8
|
-
size?: "sm" | "lg" | "
|
|
8
|
+
size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const drawerSizeVertical: (props?: ({
|
|
11
|
-
size?: "sm" | "lg" | "
|
|
11
|
+
size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
13
|
declare function Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
|
|
14
14
|
declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -5,10 +5,10 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
|
5
5
|
type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
|
|
6
6
|
type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
7
7
|
declare const drawerSizeHorizontal: (props?: ({
|
|
8
|
-
size?: "sm" | "lg" | "
|
|
8
|
+
size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const drawerSizeVertical: (props?: ({
|
|
11
|
-
size?: "sm" | "lg" | "
|
|
11
|
+
size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
13
|
declare function Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
|
|
14
14
|
declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -22,7 +22,7 @@ type FieldControlKind = 'single' | 'group' | 'labelled';
|
|
|
22
22
|
declare function useFieldContext(): FieldContextValue | null;
|
|
23
23
|
declare function useFieldControl(kind: FieldControlKind, enabled: boolean): void;
|
|
24
24
|
declare const fieldVariants: (props?: ({
|
|
25
|
-
gap?: "
|
|
25
|
+
gap?: "sm" | "default" | "lg" | "none" | "xs" | null | undefined;
|
|
26
26
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
27
27
|
interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
|
|
28
28
|
error?: boolean;
|
|
@@ -22,7 +22,7 @@ type FieldControlKind = 'single' | 'group' | 'labelled';
|
|
|
22
22
|
declare function useFieldContext(): FieldContextValue | null;
|
|
23
23
|
declare function useFieldControl(kind: FieldControlKind, enabled: boolean): void;
|
|
24
24
|
declare const fieldVariants: (props?: ({
|
|
25
|
-
gap?: "
|
|
25
|
+
gap?: "sm" | "default" | "lg" | "none" | "xs" | null | undefined;
|
|
26
26
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
27
27
|
interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
|
|
28
28
|
error?: boolean;
|
|
@@ -5,8 +5,8 @@ import { ButtonColor } from './button.mjs';
|
|
|
5
5
|
|
|
6
6
|
declare const iconButtonVariants: (props?: ({
|
|
7
7
|
variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
|
|
8
|
-
size?: "
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
8
|
+
size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
10
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
11
|
interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
|
|
12
12
|
/** Solid variant color */
|
|
@@ -5,8 +5,8 @@ import { ButtonColor } from './button.js';
|
|
|
5
5
|
|
|
6
6
|
declare const iconButtonVariants: (props?: ({
|
|
7
7
|
variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
|
|
8
|
-
size?: "
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
8
|
+
size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
10
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
11
|
interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
|
|
12
12
|
/** Solid variant color */
|
|
@@ -5,9 +5,9 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
5
5
|
declare const inputVariants: (props?: ({
|
|
6
6
|
variant?: "default" | "filled" | null | undefined;
|
|
7
7
|
focusRing?: boolean | null | undefined;
|
|
8
|
-
size?: "
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
10
|
-
state?: "
|
|
8
|
+
size?: "sm" | "default" | "lg" | "xl" | "xs" | null | undefined;
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
|
+
state?: "error" | "default" | null | undefined;
|
|
11
11
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
12
|
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
|
|
13
13
|
leftIcon?: React.ReactNode;
|
|
@@ -5,9 +5,9 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
5
5
|
declare const inputVariants: (props?: ({
|
|
6
6
|
variant?: "default" | "filled" | null | undefined;
|
|
7
7
|
focusRing?: boolean | null | undefined;
|
|
8
|
-
size?: "
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
10
|
-
state?: "
|
|
8
|
+
size?: "sm" | "default" | "lg" | "xl" | "xs" | null | undefined;
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
|
+
state?: "error" | "default" | null | undefined;
|
|
11
11
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
12
|
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
|
|
13
13
|
leftIcon?: React.ReactNode;
|
|
@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
5
5
|
declare const metricCardVariants: (props?: ({
|
|
6
6
|
variant?: "default" | "ghost" | "elevated" | null | undefined;
|
|
7
7
|
size?: "sm" | "default" | "lg" | null | undefined;
|
|
8
|
-
radius?: "sm" | "default" | "lg" | "
|
|
8
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
type MetricCardVariant = 'default' | 'elevated' | 'ghost';
|
|
11
11
|
type MetricCardSize = 'sm' | 'default' | 'lg';
|
|
@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
5
5
|
declare const metricCardVariants: (props?: ({
|
|
6
6
|
variant?: "default" | "ghost" | "elevated" | null | undefined;
|
|
7
7
|
size?: "sm" | "default" | "lg" | null | undefined;
|
|
8
|
-
radius?: "sm" | "default" | "lg" | "
|
|
8
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
type MetricCardVariant = 'default' | 'elevated' | 'ghost';
|
|
11
11
|
type MetricCardSize = 'sm' | 'default' | 'lg';
|
|
@@ -10,7 +10,7 @@ declare const ModalPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
|
10
10
|
declare const ModalClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
11
11
|
declare const ModalOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
12
|
declare const modalContentVariants: (props?: ({
|
|
13
|
-
size?: "
|
|
13
|
+
size?: "sm" | "lg" | "md" | "xl" | "full" | "xs" | null | undefined;
|
|
14
14
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
15
|
interface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof modalContentVariants> {
|
|
16
16
|
/** Scroll behavior when content overflows */
|
|
@@ -31,7 +31,7 @@ declare const AlertModalTrigger: React.ForwardRefExoticComponent<AlertDialogPrim
|
|
|
31
31
|
declare const AlertModalPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
32
32
|
declare const AlertModalOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
33
33
|
declare const alertModalContentVariants: (props?: ({
|
|
34
|
-
size?: "
|
|
34
|
+
size?: "sm" | "xs" | null | undefined;
|
|
35
35
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
36
36
|
interface AlertModalContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, VariantProps<typeof alertModalContentVariants> {
|
|
37
37
|
}
|
|
@@ -10,7 +10,7 @@ declare const ModalPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
|
10
10
|
declare const ModalClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
11
11
|
declare const ModalOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
12
|
declare const modalContentVariants: (props?: ({
|
|
13
|
-
size?: "
|
|
13
|
+
size?: "sm" | "lg" | "md" | "xl" | "full" | "xs" | null | undefined;
|
|
14
14
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
15
|
interface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof modalContentVariants> {
|
|
16
16
|
/** Scroll behavior when content overflows */
|
|
@@ -31,7 +31,7 @@ declare const AlertModalTrigger: React.ForwardRefExoticComponent<AlertDialogPrim
|
|
|
31
31
|
declare const AlertModalPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
32
32
|
declare const AlertModalOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
33
33
|
declare const alertModalContentVariants: (props?: ({
|
|
34
|
-
size?: "
|
|
34
|
+
size?: "sm" | "xs" | null | undefined;
|
|
35
35
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
36
36
|
interface AlertModalContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, VariantProps<typeof alertModalContentVariants> {
|
|
37
37
|
}
|
|
@@ -45,7 +45,7 @@ declare const paginationSizeMap: {
|
|
|
45
45
|
};
|
|
46
46
|
};
|
|
47
47
|
declare const paginationItemVariants: (props?: ({
|
|
48
|
-
radius?: "sm" | "lg" | "
|
|
48
|
+
radius?: "sm" | "lg" | "base" | "md" | "xl" | "full" | null | undefined;
|
|
49
49
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
50
50
|
interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {
|
|
51
51
|
/** Total number of pages */
|
|
@@ -45,7 +45,7 @@ declare const paginationSizeMap: {
|
|
|
45
45
|
};
|
|
46
46
|
};
|
|
47
47
|
declare const paginationItemVariants: (props?: ({
|
|
48
|
-
radius?: "sm" | "lg" | "
|
|
48
|
+
radius?: "sm" | "lg" | "base" | "md" | "xl" | "full" | null | undefined;
|
|
49
49
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
50
50
|
interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {
|
|
51
51
|
/** Total number of pages */
|
|
@@ -6,14 +6,14 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
6
6
|
declare const segmentedVariants: (props?: ({
|
|
7
7
|
variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
|
|
8
8
|
size?: "sm" | "default" | "lg" | "md" | null | undefined;
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
10
|
fontWeight?: "normal" | "semibold" | null | undefined;
|
|
11
11
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
12
|
declare const segmentedItemVariants: (props?: ({
|
|
13
13
|
variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
|
|
14
14
|
size?: "sm" | "default" | "lg" | "md" | null | undefined;
|
|
15
|
-
radius?: "sm" | "default" | "lg" | "
|
|
16
|
-
contentType?: "
|
|
15
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
16
|
+
contentType?: "icon" | "text" | "icon-text" | null | undefined;
|
|
17
17
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
18
|
interface SegmentedProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, VariantProps<typeof segmentedVariants> {
|
|
19
19
|
}
|
|
@@ -6,14 +6,14 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
6
6
|
declare const segmentedVariants: (props?: ({
|
|
7
7
|
variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
|
|
8
8
|
size?: "sm" | "default" | "lg" | "md" | null | undefined;
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
10
|
fontWeight?: "normal" | "semibold" | null | undefined;
|
|
11
11
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
12
|
declare const segmentedItemVariants: (props?: ({
|
|
13
13
|
variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
|
|
14
14
|
size?: "sm" | "default" | "lg" | "md" | null | undefined;
|
|
15
|
-
radius?: "sm" | "default" | "lg" | "
|
|
16
|
-
contentType?: "
|
|
15
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
16
|
+
contentType?: "icon" | "text" | "icon-text" | null | undefined;
|
|
17
17
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
18
|
interface SegmentedProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, VariantProps<typeof segmentedVariants> {
|
|
19
19
|
}
|
|
@@ -6,9 +6,9 @@ declare const textareaVariants: (props?: ({
|
|
|
6
6
|
variant?: "default" | "filled" | null | undefined;
|
|
7
7
|
focusRing?: boolean | null | undefined;
|
|
8
8
|
size?: "default" | "compact" | null | undefined;
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
10
|
resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
11
|
-
state?: "
|
|
11
|
+
state?: "error" | "default" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
13
|
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
14
14
|
error?: boolean;
|
|
@@ -6,9 +6,9 @@ declare const textareaVariants: (props?: ({
|
|
|
6
6
|
variant?: "default" | "filled" | null | undefined;
|
|
7
7
|
focusRing?: boolean | null | undefined;
|
|
8
8
|
size?: "default" | "compact" | null | undefined;
|
|
9
|
-
radius?: "sm" | "default" | "lg" | "
|
|
9
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
10
|
resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
11
|
-
state?: "
|
|
11
|
+
state?: "error" | "default" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
13
|
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
14
14
|
error?: boolean;
|
|
@@ -9,8 +9,8 @@ declare const toggleGroupVariants: (props?: ({
|
|
|
9
9
|
declare const toggleGroupItemVariants: (props?: ({
|
|
10
10
|
variant?: "default" | "outline" | null | undefined;
|
|
11
11
|
fontWeight?: "normal" | "semibold" | null | undefined;
|
|
12
|
-
size?: "
|
|
13
|
-
radius?: "sm" | "default" | "lg" | "
|
|
12
|
+
size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
|
|
13
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
14
14
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
15
|
type ToggleGroupSingleProps = {
|
|
16
16
|
type: 'single';
|
|
@@ -9,8 +9,8 @@ declare const toggleGroupVariants: (props?: ({
|
|
|
9
9
|
declare const toggleGroupItemVariants: (props?: ({
|
|
10
10
|
variant?: "default" | "outline" | null | undefined;
|
|
11
11
|
fontWeight?: "normal" | "semibold" | null | undefined;
|
|
12
|
-
size?: "
|
|
13
|
-
radius?: "sm" | "default" | "lg" | "
|
|
12
|
+
size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
|
|
13
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
14
14
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
15
|
type ToggleGroupSingleProps = {
|
|
16
16
|
type: 'single';
|
|
@@ -6,8 +6,8 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
6
6
|
declare const toggleVariants: (props?: ({
|
|
7
7
|
variant?: "default" | "outline" | "ghost" | "outline-ghost" | null | undefined;
|
|
8
8
|
fontWeight?: "normal" | "semibold" | null | undefined;
|
|
9
|
-
size?: "
|
|
10
|
-
radius?: "sm" | "default" | "lg" | "
|
|
9
|
+
size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
|
|
10
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
11
11
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
12
|
interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, Omit<VariantProps<typeof toggleVariants>, 'fontWeight'> {
|
|
13
13
|
iconOnly?: boolean;
|
|
@@ -6,8 +6,8 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
6
6
|
declare const toggleVariants: (props?: ({
|
|
7
7
|
variant?: "default" | "outline" | "ghost" | "outline-ghost" | null | undefined;
|
|
8
8
|
fontWeight?: "normal" | "semibold" | null | undefined;
|
|
9
|
-
size?: "
|
|
10
|
-
radius?: "sm" | "default" | "lg" | "
|
|
9
|
+
size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
|
|
10
|
+
radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
11
11
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
12
|
interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, Omit<VariantProps<typeof toggleVariants>, 'fontWeight'> {
|
|
13
13
|
iconOnly?: boolean;
|