@karakuri-ui/react 0.3.7 → 0.3.9
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/accordion.d.mts +1 -1
- package/dist/components/ui/accordion.d.ts +1 -1
- package/dist/components/ui/alert.d.mts +2 -2
- package/dist/components/ui/alert.d.ts +2 -2
- package/dist/components/ui/avatar.d.mts +1 -1
- package/dist/components/ui/avatar.d.ts +1 -1
- package/dist/components/ui/badge.d.mts +1 -1
- package/dist/components/ui/badge.d.ts +1 -1
- package/dist/components/ui/breadcrumb.d.mts +3 -3
- package/dist/components/ui/breadcrumb.d.ts +3 -3
- package/dist/components/ui/breadcrumb.js +45 -4
- package/dist/components/ui/breadcrumb.js.map +1 -1
- package/dist/components/ui/breadcrumb.mjs +45 -4
- package/dist/components/ui/breadcrumb.mjs.map +1 -1
- package/dist/components/ui/button.d.mts +2 -2
- package/dist/components/ui/button.d.ts +2 -2
- package/dist/components/ui/card.d.mts +2 -2
- package/dist/components/ui/card.d.ts +2 -2
- package/dist/components/ui/checkbox.d.mts +1 -1
- package/dist/components/ui/checkbox.d.ts +1 -1
- package/dist/components/ui/divider.d.mts +1 -1
- package/dist/components/ui/divider.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/dropdown.js +3 -3
- package/dist/components/ui/dropdown.js.map +1 -1
- package/dist/components/ui/dropdown.mjs +3 -3
- package/dist/components/ui/dropdown.mjs.map +1 -1
- package/dist/components/ui/field.d.mts +6 -1
- package/dist/components/ui/field.d.ts +6 -1
- package/dist/components/ui/field.js +22 -4
- package/dist/components/ui/field.js.map +1 -1
- package/dist/components/ui/field.mjs +22 -4
- package/dist/components/ui/field.mjs.map +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 +2 -2
- package/dist/components/ui/input.d.ts +2 -2
- package/dist/components/ui/input.js +2 -0
- package/dist/components/ui/input.js.map +1 -1
- package/dist/components/ui/input.mjs +2 -0
- package/dist/components/ui/input.mjs.map +1 -1
- package/dist/components/ui/metric-card.d.mts +2 -2
- package/dist/components/ui/metric-card.d.ts +2 -2
- 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/popover.d.mts +1 -1
- package/dist/components/ui/popover.d.ts +1 -1
- package/dist/components/ui/progress.d.mts +1 -1
- package/dist/components/ui/progress.d.ts +1 -1
- package/dist/components/ui/radio-group.d.mts +1 -1
- package/dist/components/ui/radio-group.d.ts +1 -1
- package/dist/components/ui/radio-group.js +1 -0
- package/dist/components/ui/radio-group.js.map +1 -1
- package/dist/components/ui/radio-group.mjs +1 -0
- package/dist/components/ui/radio-group.mjs.map +1 -1
- package/dist/components/ui/segmented.d.mts +4 -4
- package/dist/components/ui/segmented.d.ts +4 -4
- package/dist/components/ui/select.js +1 -0
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +1 -0
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/slider.d.mts +1 -1
- package/dist/components/ui/slider.d.ts +1 -1
- package/dist/components/ui/spinner.d.mts +1 -1
- package/dist/components/ui/spinner.d.ts +1 -1
- package/dist/components/ui/switch.d.mts +1 -1
- package/dist/components/ui/switch.d.ts +1 -1
- package/dist/components/ui/tabs.d.mts +1 -1
- package/dist/components/ui/tabs.d.ts +1 -1
- package/dist/components/ui/textarea.d.mts +1 -1
- package/dist/components/ui/textarea.d.ts +1 -1
- package/dist/components/ui/textarea.js +1 -0
- package/dist/components/ui/textarea.js.map +1 -1
- package/dist/components/ui/textarea.mjs +1 -0
- package/dist/components/ui/textarea.mjs.map +1 -1
- package/dist/components/ui/toast.d.mts +1 -1
- package/dist/components/ui/toast.d.ts +1 -1
- 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/dist/components/ui/tooltip.d.mts +1 -1
- package/dist/components/ui/tooltip.d.ts +1 -1
- package/package.json +1 -1
|
@@ -25,7 +25,7 @@ interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof Accor
|
|
|
25
25
|
}
|
|
26
26
|
declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
27
27
|
declare const accordionTriggerVariants: (props?: ({
|
|
28
|
-
size?: "
|
|
28
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
29
29
|
iconPosition?: "left" | "right" | null | undefined;
|
|
30
30
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
31
31
|
interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
|
|
@@ -25,7 +25,7 @@ interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof Accor
|
|
|
25
25
|
}
|
|
26
26
|
declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
27
27
|
declare const accordionTriggerVariants: (props?: ({
|
|
28
|
-
size?: "
|
|
28
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
29
29
|
iconPosition?: "left" | "right" | null | undefined;
|
|
30
30
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
31
31
|
interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
|
|
@@ -3,8 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const alertVariants: (props?: ({
|
|
6
|
-
size?: "
|
|
7
|
-
radius?: "sm" | "lg" | "
|
|
6
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
7
|
+
radius?: "sm" | "lg" | "xl" | "2xl" | "base" | "none" | "md" | "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';
|
|
@@ -3,8 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const alertVariants: (props?: ({
|
|
6
|
-
size?: "
|
|
7
|
-
radius?: "sm" | "lg" | "
|
|
6
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
7
|
+
radius?: "sm" | "lg" | "xl" | "2xl" | "base" | "none" | "md" | "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 * 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?: "
|
|
7
|
+
size?: "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | null | undefined;
|
|
8
8
|
shape?: "circle" | "square" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const avatarColors: readonly [{
|
|
@@ -4,7 +4,7 @@ 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?: "
|
|
7
|
+
size?: "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | null | undefined;
|
|
8
8
|
shape?: "circle" | "square" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const avatarColors: readonly [{
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const badgeVariants: (props?: ({
|
|
6
|
-
size?: "
|
|
6
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
7
7
|
radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
type BadgeVariant = 'solid' | 'subtle' | 'outline';
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const badgeVariants: (props?: ({
|
|
6
|
-
size?: "
|
|
6
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
7
7
|
radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
type BadgeVariant = 'solid' | 'subtle' | 'outline';
|
|
@@ -22,11 +22,11 @@ interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
|
|
|
22
22
|
separator?: React.ReactNode;
|
|
23
23
|
/** Size of the breadcrumb */
|
|
24
24
|
size?: 'sm' | 'default' | 'lg';
|
|
25
|
-
/**
|
|
25
|
+
/** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */
|
|
26
26
|
maxItems?: number;
|
|
27
|
-
/** Items
|
|
27
|
+
/** Items kept before the ellipsis when collapsed */
|
|
28
28
|
itemsBeforeCollapse?: number;
|
|
29
|
-
/** Items
|
|
29
|
+
/** Items kept after the ellipsis when collapsed */
|
|
30
30
|
itemsAfterCollapse?: number;
|
|
31
31
|
}
|
|
32
32
|
declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -22,11 +22,11 @@ interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
|
|
|
22
22
|
separator?: React.ReactNode;
|
|
23
23
|
/** Size of the breadcrumb */
|
|
24
24
|
size?: 'sm' | 'default' | 'lg';
|
|
25
|
-
/**
|
|
25
|
+
/** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */
|
|
26
26
|
maxItems?: number;
|
|
27
|
-
/** Items
|
|
27
|
+
/** Items kept before the ellipsis when collapsed */
|
|
28
28
|
itemsBeforeCollapse?: number;
|
|
29
|
-
/** Items
|
|
29
|
+
/** Items kept after the ellipsis when collapsed */
|
|
30
30
|
itemsAfterCollapse?: number;
|
|
31
31
|
}
|
|
32
32
|
declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -79,7 +79,7 @@ const breadcrumbSizeMap = {
|
|
|
79
79
|
lg: { text: "text-md", icon: "icon-sm", gap: "gap-2" }
|
|
80
80
|
};
|
|
81
81
|
const Breadcrumb = React.forwardRef(
|
|
82
|
-
({ className, separator, size = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbContext.Provider, { value: { size, separator }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
|
+
({ className, separator, size = "default", maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbContext.Provider, { value: { size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
83
|
"nav",
|
|
84
84
|
{
|
|
85
85
|
ref,
|
|
@@ -91,8 +91,8 @@ const Breadcrumb = React.forwardRef(
|
|
|
91
91
|
);
|
|
92
92
|
Breadcrumb.displayName = "Breadcrumb";
|
|
93
93
|
const BreadcrumbList = React.forwardRef(
|
|
94
|
-
({ className, ...props }, ref) => {
|
|
95
|
-
const { size = "default" } = useBreadcrumbContext();
|
|
94
|
+
({ className, children, ...props }, ref) => {
|
|
95
|
+
const { size = "default", maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext();
|
|
96
96
|
const sizeClass = breadcrumbSizeMap[size];
|
|
97
97
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
98
|
"ol",
|
|
@@ -105,7 +105,8 @@ const BreadcrumbList = React.forwardRef(
|
|
|
105
105
|
"text-text-muted",
|
|
106
106
|
className
|
|
107
107
|
),
|
|
108
|
-
...props
|
|
108
|
+
...props,
|
|
109
|
+
children: collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)
|
|
109
110
|
}
|
|
110
111
|
);
|
|
111
112
|
}
|
|
@@ -192,6 +193,46 @@ const BreadcrumbEllipsis = React.forwardRef(
|
|
|
192
193
|
}
|
|
193
194
|
);
|
|
194
195
|
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
|
|
196
|
+
function flattenFragments(children) {
|
|
197
|
+
return React.Children.toArray(children).flatMap(
|
|
198
|
+
(node) => React.isValidElement(node) && node.type === React.Fragment ? flattenFragments(node.props.children).map(
|
|
199
|
+
(child) => (
|
|
200
|
+
// Prefix keys so children of different fragments stay unique
|
|
201
|
+
React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child
|
|
202
|
+
)
|
|
203
|
+
) : [node]
|
|
204
|
+
);
|
|
205
|
+
}
|
|
206
|
+
function collapseItems(children, maxItems, before, after) {
|
|
207
|
+
if (maxItems === void 0) return children;
|
|
208
|
+
const nodes = flattenFragments(children);
|
|
209
|
+
const segments = [];
|
|
210
|
+
let pendingSeparator = null;
|
|
211
|
+
for (const node of nodes) {
|
|
212
|
+
const type = React.isValidElement(node) ? node.type : null;
|
|
213
|
+
if (type === BreadcrumbSeparator) {
|
|
214
|
+
pendingSeparator = node;
|
|
215
|
+
} else if (type === BreadcrumbItem) {
|
|
216
|
+
segments.push({ separator: pendingSeparator, nodes: [node] });
|
|
217
|
+
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
|
+
}
|
|
223
|
+
}
|
|
224
|
+
if (segments.length <= maxItems || before + after >= segments.length) return children;
|
|
225
|
+
const head = segments.slice(0, before);
|
|
226
|
+
const tail = segments.slice(segments.length - after);
|
|
227
|
+
const render = (list) => list.flatMap((seg) => seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes);
|
|
228
|
+
const ellipsisSeparator = segments[before].separator;
|
|
229
|
+
return [
|
|
230
|
+
...render(head),
|
|
231
|
+
...ellipsisSeparator ? [ellipsisSeparator] : [],
|
|
232
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, "breadcrumb-collapsed"),
|
|
233
|
+
...render(tail)
|
|
234
|
+
];
|
|
235
|
+
}
|
|
195
236
|
// Annotate the CommonJS export names for ESM import in node:
|
|
196
237
|
0 && (module.exports = {
|
|
197
238
|
Breadcrumb,
|
|
@@ -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}\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 /** Max items before collapsing (undefined = no collapse) */\n maxItems?: number\n /** Items visible before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items visible after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator }}>\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, ...props }, ref) => {\n const { size = 'default' } = 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 )\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// ─── 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// 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":[]}
|
|
@@ -39,7 +39,7 @@ const breadcrumbSizeMap = {
|
|
|
39
39
|
lg: { text: "text-md", icon: "icon-sm", gap: "gap-2" }
|
|
40
40
|
};
|
|
41
41
|
const Breadcrumb = React.forwardRef(
|
|
42
|
-
({ className, separator, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: { size, separator }, children: /* @__PURE__ */ jsx(
|
|
42
|
+
({ className, separator, size = "default", maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: { size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }, children: /* @__PURE__ */ jsx(
|
|
43
43
|
"nav",
|
|
44
44
|
{
|
|
45
45
|
ref,
|
|
@@ -51,8 +51,8 @@ const Breadcrumb = React.forwardRef(
|
|
|
51
51
|
);
|
|
52
52
|
Breadcrumb.displayName = "Breadcrumb";
|
|
53
53
|
const BreadcrumbList = React.forwardRef(
|
|
54
|
-
({ className, ...props }, ref) => {
|
|
55
|
-
const { size = "default" } = useBreadcrumbContext();
|
|
54
|
+
({ className, children, ...props }, ref) => {
|
|
55
|
+
const { size = "default", maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext();
|
|
56
56
|
const sizeClass = breadcrumbSizeMap[size];
|
|
57
57
|
return /* @__PURE__ */ jsx(
|
|
58
58
|
"ol",
|
|
@@ -65,7 +65,8 @@ const BreadcrumbList = React.forwardRef(
|
|
|
65
65
|
"text-text-muted",
|
|
66
66
|
className
|
|
67
67
|
),
|
|
68
|
-
...props
|
|
68
|
+
...props,
|
|
69
|
+
children: collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)
|
|
69
70
|
}
|
|
70
71
|
);
|
|
71
72
|
}
|
|
@@ -152,6 +153,46 @@ const BreadcrumbEllipsis = React.forwardRef(
|
|
|
152
153
|
}
|
|
153
154
|
);
|
|
154
155
|
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
|
|
156
|
+
function flattenFragments(children) {
|
|
157
|
+
return React.Children.toArray(children).flatMap(
|
|
158
|
+
(node) => React.isValidElement(node) && node.type === React.Fragment ? flattenFragments(node.props.children).map(
|
|
159
|
+
(child) => (
|
|
160
|
+
// Prefix keys so children of different fragments stay unique
|
|
161
|
+
React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child
|
|
162
|
+
)
|
|
163
|
+
) : [node]
|
|
164
|
+
);
|
|
165
|
+
}
|
|
166
|
+
function collapseItems(children, maxItems, before, after) {
|
|
167
|
+
if (maxItems === void 0) return children;
|
|
168
|
+
const nodes = flattenFragments(children);
|
|
169
|
+
const segments = [];
|
|
170
|
+
let pendingSeparator = null;
|
|
171
|
+
for (const node of nodes) {
|
|
172
|
+
const type = React.isValidElement(node) ? node.type : null;
|
|
173
|
+
if (type === BreadcrumbSeparator) {
|
|
174
|
+
pendingSeparator = node;
|
|
175
|
+
} else if (type === BreadcrumbItem) {
|
|
176
|
+
segments.push({ separator: pendingSeparator, nodes: [node] });
|
|
177
|
+
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
|
+
}
|
|
183
|
+
}
|
|
184
|
+
if (segments.length <= maxItems || before + after >= segments.length) return children;
|
|
185
|
+
const head = segments.slice(0, before);
|
|
186
|
+
const tail = segments.slice(segments.length - after);
|
|
187
|
+
const render = (list) => list.flatMap((seg) => seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes);
|
|
188
|
+
const ellipsisSeparator = segments[before].separator;
|
|
189
|
+
return [
|
|
190
|
+
...render(head),
|
|
191
|
+
...ellipsisSeparator ? [ellipsisSeparator] : [],
|
|
192
|
+
/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }, "breadcrumb-collapsed"),
|
|
193
|
+
...render(tail)
|
|
194
|
+
];
|
|
195
|
+
}
|
|
155
196
|
export {
|
|
156
197
|
Breadcrumb,
|
|
157
198
|
BreadcrumbEllipsis,
|
|
@@ -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}\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 /** Max items before collapsing (undefined = no collapse) */\n maxItems?: number\n /** Items visible before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items visible after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator }}>\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, ...props }, ref) => {\n const { size = 'default' } = 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 )\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// ─── 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// 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":[]}
|
|
@@ -11,8 +11,8 @@ declare const solidColorMap: {
|
|
|
11
11
|
type ButtonColor = keyof typeof solidColorMap;
|
|
12
12
|
declare const buttonVariants: (props?: ({
|
|
13
13
|
variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
|
|
14
|
-
size?: "
|
|
15
|
-
radius?: "
|
|
14
|
+
size?: "xs" | "sm" | "default" | "lg" | "icon" | "md" | null | undefined;
|
|
15
|
+
radius?: "sm" | "default" | "lg" | "xl" | "2xl" | "base" | "none" | "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> {
|
|
@@ -11,8 +11,8 @@ declare const solidColorMap: {
|
|
|
11
11
|
type ButtonColor = keyof typeof solidColorMap;
|
|
12
12
|
declare const buttonVariants: (props?: ({
|
|
13
13
|
variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
|
|
14
|
-
size?: "
|
|
15
|
-
radius?: "
|
|
14
|
+
size?: "xs" | "sm" | "default" | "lg" | "icon" | "md" | null | undefined;
|
|
15
|
+
radius?: "sm" | "default" | "lg" | "xl" | "2xl" | "base" | "none" | "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> {
|
|
@@ -6,8 +6,8 @@ type CardSize = 'sm' | 'default' | 'lg';
|
|
|
6
6
|
type CardDirection = 'vertical' | 'horizontal';
|
|
7
7
|
declare const cardVariants: (props?: ({
|
|
8
8
|
variant?: "default" | "outline" | "ghost" | null | undefined;
|
|
9
|
-
size?: "
|
|
10
|
-
radius?: "sm" | "lg" | "
|
|
9
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
10
|
+
radius?: "sm" | "lg" | "xl" | "2xl" | "base" | "md" | 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';
|
|
@@ -6,8 +6,8 @@ type CardSize = 'sm' | 'default' | 'lg';
|
|
|
6
6
|
type CardDirection = 'vertical' | 'horizontal';
|
|
7
7
|
declare const cardVariants: (props?: ({
|
|
8
8
|
variant?: "default" | "outline" | "ghost" | null | undefined;
|
|
9
|
-
size?: "
|
|
10
|
-
radius?: "sm" | "lg" | "
|
|
9
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
10
|
+
radius?: "sm" | "lg" | "xl" | "2xl" | "base" | "md" | 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';
|
|
@@ -9,7 +9,7 @@ declare const checkboxColorMap: {
|
|
|
9
9
|
};
|
|
10
10
|
type CheckboxColor = keyof typeof checkboxColorMap;
|
|
11
11
|
declare const checkboxVariants: (props?: ({
|
|
12
|
-
size?: "
|
|
12
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
13
13
|
radius?: "sm" | "none" | "md" | null | undefined;
|
|
14
14
|
weight?: "bold" | "thin" | null | undefined;
|
|
15
15
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -9,7 +9,7 @@ declare const checkboxColorMap: {
|
|
|
9
9
|
};
|
|
10
10
|
type CheckboxColor = keyof typeof checkboxColorMap;
|
|
11
11
|
declare const checkboxVariants: (props?: ({
|
|
12
|
-
size?: "
|
|
12
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
13
13
|
radius?: "sm" | "none" | "md" | null | undefined;
|
|
14
14
|
weight?: "bold" | "thin" | null | undefined;
|
|
15
15
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -6,7 +6,7 @@ declare const dividerVariants: (props?: ({
|
|
|
6
6
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
7
7
|
variant?: "solid" | "dashed" | "dotted" | null | undefined;
|
|
8
8
|
color?: "default" | "strong" | "muted" | null | undefined;
|
|
9
|
-
spacing?: "
|
|
9
|
+
spacing?: "sm" | "default" | "lg" | "md" | null | undefined;
|
|
10
10
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
11
|
interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
|
|
12
12
|
/** Direction of the divider */
|
|
@@ -6,7 +6,7 @@ declare const dividerVariants: (props?: ({
|
|
|
6
6
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
7
7
|
variant?: "solid" | "dashed" | "dotted" | null | undefined;
|
|
8
8
|
color?: "default" | "strong" | "muted" | null | undefined;
|
|
9
|
-
spacing?: "
|
|
9
|
+
spacing?: "sm" | "default" | "lg" | "md" | null | undefined;
|
|
10
10
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
11
|
interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
|
|
12
12
|
/** Direction of the divider */
|
|
@@ -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" | "xl" | "md" | "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" | "xl" | "md" | "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" | "xl" | "md" | "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" | "xl" | "md" | "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>>;
|
|
@@ -51,11 +51,11 @@ var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
|
|
|
51
51
|
var import_utils = require("../../lib/utils");
|
|
52
52
|
const contentRadiusMap = {
|
|
53
53
|
md: "rounded-md",
|
|
54
|
-
// 6px
|
|
54
|
+
// 6px (default)
|
|
55
55
|
lg: "rounded-lg",
|
|
56
56
|
// 8px
|
|
57
57
|
xl: "rounded-xl"
|
|
58
|
-
// 12px
|
|
58
|
+
// 12px
|
|
59
59
|
};
|
|
60
60
|
const itemRadiusMap = {
|
|
61
61
|
md: "rounded",
|
|
@@ -100,7 +100,7 @@ const insetSizeMap = {
|
|
|
100
100
|
md: "pl-8",
|
|
101
101
|
lg: "pl-10"
|
|
102
102
|
};
|
|
103
|
-
const DropdownMenuStyleContext = React.createContext({ radius: "
|
|
103
|
+
const DropdownMenuStyleContext = React.createContext({ radius: "md", flush: false, size: "md" });
|
|
104
104
|
const DropdownMenu = DropdownMenuPrimitive.Root;
|
|
105
105
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
|
106
106
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|