@zentauri-ui/zentauri-components 0.0.93 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -34
- package/dist/chunk-B23TPTVG.mjs +11 -0
- package/dist/chunk-B23TPTVG.mjs.map +1 -0
- package/dist/{chunk-BZSIXBA7.js → chunk-BITDSQMR.js} +8 -6
- package/dist/chunk-BITDSQMR.js.map +1 -0
- package/dist/{chunk-VJHD7QZH.mjs → chunk-BORK3BJO.mjs} +4 -7
- package/dist/chunk-BORK3BJO.mjs.map +1 -0
- package/dist/chunk-WZ2GOU2J.js +13 -0
- package/dist/chunk-WZ2GOU2J.js.map +1 -0
- package/dist/ui/accordion.d.mts +1 -1
- package/dist/ui/accordion.d.ts +1 -1
- package/dist/ui/accordion.js +80 -61
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/accordion.mjs +46 -39
- package/dist/ui/accordion.mjs.map +1 -1
- package/dist/ui/alert.d.mts +1 -1
- package/dist/ui/alert.d.ts +1 -1
- package/dist/ui/alert.js +57 -46
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/alert.mjs +28 -30
- package/dist/ui/alert.mjs.map +1 -1
- package/dist/ui/avatar.d.mts +59 -0
- package/dist/ui/avatar.d.ts +59 -0
- package/dist/ui/avatar.js +221 -0
- package/dist/ui/avatar.js.map +1 -0
- package/dist/ui/avatar.mjs +211 -0
- package/dist/ui/avatar.mjs.map +1 -0
- package/dist/ui/badge.js +20 -25
- package/dist/ui/badge.js.map +1 -1
- package/dist/ui/badge.mjs +8 -20
- package/dist/ui/badge.mjs.map +1 -1
- package/dist/ui/breadcrumb.d.mts +71 -0
- package/dist/ui/breadcrumb.d.ts +71 -0
- package/dist/ui/breadcrumb.js +174 -0
- package/dist/ui/breadcrumb.js.map +1 -0
- package/dist/ui/breadcrumb.mjs +161 -0
- package/dist/ui/breadcrumb.mjs.map +1 -0
- package/dist/ui/buttons.js +19 -21
- package/dist/ui/buttons.js.map +1 -1
- package/dist/ui/buttons.mjs +8 -18
- package/dist/ui/buttons.mjs.map +1 -1
- package/dist/ui/card.js +59 -54
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/card.mjs +29 -39
- package/dist/ui/card.mjs.map +1 -1
- package/dist/ui/divider.js +39 -35
- package/dist/ui/divider.js.map +1 -1
- package/dist/ui/divider.mjs +18 -23
- package/dist/ui/divider.mjs.map +1 -1
- package/dist/ui/drawer.d.mts +1 -1
- package/dist/ui/drawer.d.ts +1 -1
- package/dist/ui/drawer.js +106 -73
- package/dist/ui/drawer.js.map +1 -1
- package/dist/ui/drawer.mjs +64 -45
- package/dist/ui/drawer.mjs.map +1 -1
- package/dist/ui/dropdown.js +42 -48
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +13 -29
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/empty-state.d.mts +3 -3
- package/dist/ui/empty-state.d.ts +3 -3
- package/dist/ui/empty-state.js +83 -59
- package/dist/ui/empty-state.js.map +1 -1
- package/dist/ui/empty-state.mjs +64 -52
- package/dist/ui/empty-state.mjs.map +1 -1
- package/dist/ui/file-upload.d.mts +32 -0
- package/dist/ui/file-upload.d.ts +32 -0
- package/dist/ui/file-upload.js +142 -0
- package/dist/ui/file-upload.js.map +1 -0
- package/dist/ui/file-upload.mjs +139 -0
- package/dist/ui/file-upload.mjs.map +1 -0
- package/dist/ui/inputs.js +26 -31
- package/dist/ui/inputs.js.map +1 -1
- package/dist/ui/inputs.mjs +8 -19
- package/dist/ui/inputs.mjs.map +1 -1
- package/dist/ui/modal.d.mts +1 -1
- package/dist/ui/modal.d.ts +1 -1
- package/dist/ui/modal.js +116 -78
- package/dist/ui/modal.js.map +1 -1
- package/dist/ui/modal.mjs +74 -51
- package/dist/ui/modal.mjs.map +1 -1
- package/dist/ui/pagination.js +47 -60
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +10 -32
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/progress.js +70 -58
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/progress.mjs +44 -43
- package/dist/ui/progress.mjs.map +1 -1
- package/dist/ui/select.js +73 -81
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/select.mjs +38 -59
- package/dist/ui/select.mjs.map +1 -1
- package/dist/ui/skeleton.js +45 -50
- package/dist/ui/skeleton.js.map +1 -1
- package/dist/ui/skeleton.mjs +8 -25
- package/dist/ui/skeleton.mjs.map +1 -1
- package/dist/ui/slider.d.mts +83 -0
- package/dist/ui/slider.d.ts +83 -0
- package/dist/ui/slider.js +521 -0
- package/dist/ui/slider.js.map +1 -0
- package/dist/ui/slider.mjs +511 -0
- package/dist/ui/slider.mjs.map +1 -0
- package/dist/ui/spinner.js +37 -38
- package/dist/ui/spinner.js.map +1 -1
- package/dist/ui/spinner.mjs +11 -18
- package/dist/ui/spinner.mjs.map +1 -1
- package/dist/ui/stepper.d.mts +64 -0
- package/dist/ui/stepper.d.ts +64 -0
- package/dist/ui/stepper.js +207 -0
- package/dist/ui/stepper.js.map +1 -0
- package/dist/ui/stepper.mjs +198 -0
- package/dist/ui/stepper.mjs.map +1 -0
- package/dist/ui/table.js +77 -79
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/table.mjs +43 -60
- package/dist/ui/table.mjs.map +1 -1
- package/dist/ui/tabs.js +75 -75
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/tabs.mjs +48 -59
- package/dist/ui/tabs.mjs.map +1 -1
- package/dist/ui/toast.d.mts +2 -2
- package/dist/ui/toast.d.ts +2 -2
- package/dist/ui/toast.js +111 -88
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toast.mjs +77 -69
- package/dist/ui/toast.mjs.map +1 -1
- package/dist/ui/toggle.js +26 -28
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/toggle.mjs +12 -21
- package/dist/ui/toggle.mjs.map +1 -1
- package/dist/ui/tooltip.js +29 -36
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tooltip.mjs +8 -23
- package/dist/ui/tooltip.mjs.map +1 -1
- package/package.json +5 -3
- package/dist/chunk-BZSIXBA7.js.map +0 -1
- package/dist/chunk-E5UX537J.js +0 -11
- package/dist/chunk-E5UX537J.js.map +0 -1
- package/dist/chunk-MEWYFWBX.mjs +0 -14
- package/dist/chunk-MEWYFWBX.mjs.map +0 -1
- package/dist/chunk-VJHD7QZH.mjs.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ui/avatar/animations.ts","../../src/ui/avatar/variants.ts","../../src/ui/avatar/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.mjs","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nexport type AvatarAnimation = \"none\" | \"subtle\";\n\nexport type AvatarAnimationPresets = Record<\n AvatarAnimation,\n Pick<\n HTMLMotionProps<\"span\">,\n \"whileHover\" | \"whileTap\" | \"transition\" | \"initial\"\n >\n>;\n\nexport const avatarAnimationPresets: AvatarAnimationPresets = {\n none: { initial: false },\n subtle: {\n initial: false,\n whileHover: { scale: 1.03 },\n whileTap: { scale: 0.98 },\n transition: { type: \"spring\", stiffness: 420, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const avatarVariants = cva(\n \"relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200\",\n {\n variants: {\n appearance: {\n default: \"border-white/10 bg-white/10 text-slate-200\",\n muted: \"border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200\",\n sky: \"border-sky-600 bg-sky-600/[0.03] text-slate-200\",\n rose: \"border-rose-600 bg-rose-600/[0.03] text-slate-200\",\n purple: \"border-purple-600 bg-purple-600/[0.03] text-slate-200\",\n pink: \"border-pink-600 bg-pink-600/[0.03] text-slate-200\",\n orange: \"border-orange-600 bg-orange-600/[0.03] text-slate-200\",\n yellow: \"border-yellow-600 bg-yellow-600/[0.03] text-slate-200\",\n teal: \"border-teal-600 bg-teal-600/[0.03] text-slate-200\",\n indigo: \"border-indigo-600 bg-indigo-600/[0.03] text-slate-200\",\n emerald: \"border-emerald-600 bg-emerald-600/[0.03] text-slate-200\",\n gray: \"border-gray-600 bg-gray-600/[0.03] text-slate-200\",\n amber: \"border-amber-600 bg-amber-600/[0.03] text-slate-200\",\n violet: \"border-violet-600 bg-violet-600/[0.03] text-slate-200\",\n \"gradient-blue\": \"border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-green\": \"border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-red\": \"border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-yellow\": \"border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-purple\": \"border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-teal\": \"border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-indigo\": \"border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-pink\": \"border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-slate-200\",\n \"gradient-orange\": \"border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-slate-200\",\n },\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-10 text-sm\",\n lg: \"size-12 text-base\",\n xl: \"size-16 text-lg\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n },\n },\n);\n\nexport const avatarImageVariants = cva(\"aspect-square size-full object-cover\");\n\nexport const avatarFallbackVariants = cva(\n \"flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100\",\n);\n\nexport const avatarGroupVariants = cva(\"flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0\");\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { avatarAnimationPresets } from \"./animations\";\nimport type {\n AvatarFallbackProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\nimport {\n avatarFallbackVariants,\n avatarGroupVariants,\n avatarImageVariants,\n avatarVariants,\n} from \"./variants\";\n\ntype ImageStatus = \"idle\" | \"loaded\" | \"error\";\n\ntype AvatarCtx = {\n imageStatus: ImageStatus;\n setImageStatus: (v: ImageStatus) => void;\n};\n\nconst AvatarContext = createContext<AvatarCtx | null>(null);\n\nfunction useAvatarContext(component: string): AvatarCtx {\n const ctx = useContext(AvatarContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Avatar>`);\n }\n return ctx;\n}\n\nexport function Avatar({\n className,\n size,\n appearance,\n animation = \"none\",\n children,\n ref,\n ...rest\n}: AvatarProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const [imageStatus, setImageStatus] = useState<ImageStatus>(\"idle\");\n const motionProps = avatarAnimationPresets[animation];\n const ctx = useMemo(\n () => ({ imageStatus, setImageStatus }),\n [imageStatus],\n );\n\n return (\n <AvatarContext.Provider value={ctx}>\n <motion.span\n ref={ref}\n data-slot=\"avatar\"\n className={cn(avatarVariants({ size, appearance }), className)}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.span>\n </AvatarContext.Provider>\n );\n}\n\nAvatar.displayName = \"Avatar\";\n\nexport function AvatarImage({\n className,\n onLoad,\n onError,\n ref,\n ...rest\n}: AvatarImageProps & { ref?: React.Ref<HTMLImageElement> }) {\n const { setImageStatus } = useAvatarContext(\"AvatarImage\");\n\n return (\n <img\n ref={ref}\n data-slot=\"avatar-image\"\n className={cn(avatarImageVariants(), className)}\n onLoad={(e) => {\n setImageStatus(\"loaded\");\n onLoad?.(e);\n }}\n onError={(e) => {\n setImageStatus(\"error\");\n onError?.(e);\n }}\n {...rest}\n />\n );\n}\n\nAvatarImage.displayName = \"AvatarImage\";\n\nexport function AvatarFallback({\n className,\n delayMs = 0,\n ref,\n ...rest\n}: AvatarFallbackProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const { imageStatus } = useAvatarContext(\"AvatarFallback\");\n const [show, setShow] = useState(delayMs === 0);\n\n useEffect(() => {\n if (imageStatus === \"loaded\") {\n setShow(false);\n return;\n }\n if (imageStatus === \"error\") {\n setShow(true);\n return;\n }\n if (delayMs <= 0) {\n setShow(true);\n return;\n }\n const t = window.setTimeout(() => setShow(true), delayMs);\n return () => window.clearTimeout(t);\n }, [delayMs, imageStatus]);\n\n if (!show) {\n return null;\n }\n\n return (\n <span\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(avatarFallbackVariants(), className)}\n {...rest}\n />\n );\n}\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport function AvatarGroup({\n className,\n max,\n children,\n ref,\n ...rest\n}: AvatarGroupProps & { ref?: React.Ref<HTMLDivElement> }) {\n const childArray = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const visible = max !== undefined ? childArray.slice(0, max) : childArray;\n const overflow =\n max !== undefined && childArray.length > max\n ? childArray.length - max\n : 0;\n\n return (\n <div\n ref={ref}\n data-slot=\"avatar-group\"\n className={cn(avatarGroupVariants(), className)}\n {...rest}\n >\n {visible}\n {overflow > 0 ? (\n <span\n data-slot=\"avatar-group-overflow\"\n className={cn(\n avatarVariants({ size: \"md\" }),\n \"z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white\",\n )}\n aria-label={`${overflow} more`}\n >\n +{overflow}\n </span>\n ) : null}\n </div>\n );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"]}
|
package/dist/ui/badge.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
"use
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
2
3
|
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var
|
|
7
|
-
var
|
|
4
|
+
var chunkWZ2GOU2J_js = require('../chunk-WZ2GOU2J.js');
|
|
5
|
+
var framerMotion = require('framer-motion');
|
|
6
|
+
var hi2 = require('react-icons/hi2');
|
|
7
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
8
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
9
|
|
|
9
10
|
// src/ui/badge/animations.ts
|
|
10
11
|
var badgeAnimationPresets = {
|
|
@@ -25,9 +26,6 @@ var badgeAnimationPresets = {
|
|
|
25
26
|
transition: { duration: 0.2 }
|
|
26
27
|
}
|
|
27
28
|
};
|
|
28
|
-
|
|
29
|
-
// src/ui/badge/variants.ts
|
|
30
|
-
var _classvarianceauthority = require('class-variance-authority');
|
|
31
29
|
var buttonLikeSolidAppearances = {
|
|
32
30
|
default: "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
|
|
33
31
|
secondary: "bg-slate-800 text-slate-50",
|
|
@@ -59,7 +57,7 @@ var badgeAppearances = {
|
|
|
59
57
|
outline: "border border-white/15 bg-transparent text-slate-200 shadow-none",
|
|
60
58
|
ghost: "bg-transparent text-slate-300 shadow-none"
|
|
61
59
|
};
|
|
62
|
-
var badgeVariants =
|
|
60
|
+
var badgeVariants = classVarianceAuthority.cva(
|
|
63
61
|
[
|
|
64
62
|
"inline-flex max-w-full items-center justify-center gap-1 font-medium",
|
|
65
63
|
"whitespace-nowrap ring-offset-slate-950 transition-colors",
|
|
@@ -87,7 +85,7 @@ var badgeVariants = _classvarianceauthority.cva.call(void 0,
|
|
|
87
85
|
}
|
|
88
86
|
}
|
|
89
87
|
);
|
|
90
|
-
var badgeCloseButtonVariants =
|
|
88
|
+
var badgeCloseButtonVariants = classVarianceAuthority.cva(
|
|
91
89
|
"inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current opacity-70 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
|
|
92
90
|
{
|
|
93
91
|
variants: {
|
|
@@ -100,9 +98,6 @@ var badgeCloseButtonVariants = _classvarianceauthority.cva.call(void 0,
|
|
|
100
98
|
defaultVariants: { size: "md" }
|
|
101
99
|
}
|
|
102
100
|
);
|
|
103
|
-
|
|
104
|
-
// src/ui/badge/badge.tsx
|
|
105
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
106
101
|
function Badge(props) {
|
|
107
102
|
const {
|
|
108
103
|
className,
|
|
@@ -120,21 +115,21 @@ function Badge(props) {
|
|
|
120
115
|
} = props;
|
|
121
116
|
const motionProps = badgeAnimationPresets[animation];
|
|
122
117
|
const isDot = shape === "dot";
|
|
123
|
-
const resolvedAriaLabel =
|
|
124
|
-
return /* @__PURE__ */
|
|
125
|
-
|
|
118
|
+
const resolvedAriaLabel = ariaLabel ?? (isDot ? "Status indicator" : void 0);
|
|
119
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
120
|
+
framerMotion.motion.span,
|
|
126
121
|
{
|
|
127
122
|
ref,
|
|
128
123
|
role: "status",
|
|
129
124
|
"data-slot": "badge",
|
|
130
125
|
"aria-label": resolvedAriaLabel,
|
|
131
|
-
className:
|
|
126
|
+
className: chunkWZ2GOU2J_js.cn(badgeVariants({ appearance, size, shape }), className),
|
|
132
127
|
initial: animation === "none" ? false : void 0,
|
|
133
128
|
...motionProps,
|
|
134
129
|
...rest,
|
|
135
130
|
children: [
|
|
136
131
|
!isDot ? children : null,
|
|
137
|
-
closable ? /* @__PURE__ */
|
|
132
|
+
closable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
138
133
|
"button",
|
|
139
134
|
{
|
|
140
135
|
type: "button",
|
|
@@ -142,7 +137,7 @@ function Badge(props) {
|
|
|
142
137
|
"aria-label": closeLabel,
|
|
143
138
|
onClick: onClose,
|
|
144
139
|
className: badgeCloseButtonVariants({ size }),
|
|
145
|
-
children: /* @__PURE__ */
|
|
140
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "size-3.5", "aria-hidden": true })
|
|
146
141
|
}
|
|
147
142
|
) : null
|
|
148
143
|
]
|
|
@@ -151,9 +146,9 @@ function Badge(props) {
|
|
|
151
146
|
}
|
|
152
147
|
Badge.displayName = "Badge";
|
|
153
148
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
149
|
+
exports.Badge = Badge;
|
|
150
|
+
exports.badgeAnimationPresets = badgeAnimationPresets;
|
|
151
|
+
exports.badgeCloseButtonVariants = badgeCloseButtonVariants;
|
|
152
|
+
exports.badgeVariants = badgeVariants;
|
|
153
|
+
//# sourceMappingURL=badge.js.map
|
|
159
154
|
//# sourceMappingURL=badge.js.map
|
package/dist/ui/badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/
|
|
1
|
+
{"version":3,"sources":["../../src/ui/badge/animations.ts","../../src/ui/badge/variants.ts","../../src/ui/badge/badge.tsx"],"names":["cva","jsxs","motion","cn","jsx","HiXMark"],"mappings":"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","file":"badge.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { BadgeAnimation } from \"./types\";\n\ntype BadgePresetMotionProps = Pick<\n HTMLMotionProps<\"span\">,\n \"style\" | \"transition\" | \"whileHover\" | \"whileTap\" | \"animate\" | \"initial\"\n>;\n\nexport type BadgeAnimationPresets = Record<\n BadgeAnimation,\n BadgePresetMotionProps\n>;\n\nexport const badgeAnimationPresets: BadgeAnimationPresets = {\n none: {},\n pop: {\n initial: { scale: 0.92, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { type: \"spring\", stiffness: 520, damping: 28 },\n },\n bounce: {\n whileHover: { y: -2, scale: 1.04 },\n whileTap: { scale: 0.96 },\n transition: { type: \"spring\", bounce: 0.45, stiffness: 420, damping: 18 },\n },\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.2 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Tailwind class maps mirroring `buttons/variants.ts` appearance tokens.\n * Reused by primitives that should stay visually aligned with Button.\n */\nexport const buttonLikeSolidAppearances = {\n default: \"bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]\",\n secondary: \"bg-slate-800 text-slate-50\",\n destructive: \"bg-rose-600 text-white\",\n outline: \"border border-white/10 bg-white/5 text-slate-50\",\n ghost: \"bg-transparent text-slate-200\",\n glass: \"border border-white/15 bg-white/10 text-white backdrop-blur-md\",\n emerald: \"bg-emerald-600 text-white\",\n indigo: \"bg-indigo-600 text-white\",\n purple: \"bg-purple-600 text-white\",\n pink: \"bg-pink-600 text-white\",\n rose: \"bg-rose-600 text-white\",\n sky: \"bg-sky-600 text-white\",\n teal: \"bg-teal-600 text-white\",\n yellow: \"bg-yellow-600 text-white\",\n orange: \"bg-orange-600 text-white\",\n \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600 text-white\",\n \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600 text-white\",\n \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600 text-white\",\n \"gradient-yellow\":\n \"bg-gradient-to-r from-yellow-600 to-orange-600 text-white\",\n \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600 text-white\",\n \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600 text-white\",\n \"gradient-indigo\":\n \"bg-gradient-to-r from-indigo-600 to-purple-600 text-white\",\n \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600 text-white\",\n \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600 text-white\",\n} as const;\n\nexport type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;\n\nconst badgeAppearances = {\n ...buttonLikeSolidAppearances,\n outline: \"border border-white/15 bg-transparent text-slate-200 shadow-none\",\n ghost: \"bg-transparent text-slate-300 shadow-none\",\n} as const;\n\nexport const badgeVariants = cva(\n [\n \"inline-flex max-w-full items-center justify-center gap-1 font-medium\",\n \"whitespace-nowrap ring-offset-slate-950 transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2\",\n \"select-none\",\n ],\n {\n variants: {\n appearance: badgeAppearances,\n size: {\n sm: \"h-6 min-h-6 px-2 text-[0.65rem] leading-none\",\n md: \"h-7 min-h-7 px-2.5 text-xs leading-none\",\n lg: \"h-8 min-h-8 px-3 text-sm leading-none\",\n },\n shape: {\n pill: \"rounded-full\",\n square: \"rounded-md\",\n dot: \"h-2.5 min-h-2.5 w-2.5 min-w-2.5 rounded-full p-0 px-0 text-[0]\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n shape: \"pill\",\n },\n },\n);\n\nexport const badgeCloseButtonVariants = cva(\n \"inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current opacity-70 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40\",\n {\n variants: {\n size: {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { HiXMark } from \"react-icons/hi2\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { badgeAnimationPresets } from \"./animations\";\nimport type { BadgeProps } from \"./types\";\nimport { badgeCloseButtonVariants, badgeVariants } from \"./variants\";\n\nexport function Badge(props: BadgeProps) {\n const {\n className,\n appearance,\n size,\n shape,\n animation = \"none\",\n closable = false,\n onClose,\n closeLabel = \"Remove\",\n children,\n ref,\n \"aria-label\": ariaLabel,\n ...rest\n } = props;\n const motionProps = badgeAnimationPresets[animation];\n const isDot = shape === \"dot\";\n const resolvedAriaLabel =\n ariaLabel ?? (isDot ? \"Status indicator\" : undefined);\n\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"badge\"\n aria-label={resolvedAriaLabel}\n className={cn(badgeVariants({ appearance, size, shape }), className)}\n initial={animation === \"none\" ? false : undefined}\n {...motionProps}\n {...rest}\n >\n {!isDot ? children : null}\n {closable ? (\n <button\n type=\"button\"\n data-slot=\"badge-close\"\n aria-label={closeLabel}\n onClick={onClose}\n className={badgeCloseButtonVariants({ size })}\n >\n <HiXMark className=\"size-3.5\" aria-hidden />\n </button>\n ) : null}\n </motion.span>\n );\n}\n\nBadge.displayName = \"Badge\";\n"]}
|
package/dist/ui/badge.mjs
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
} from
|
|
6
|
-
|
|
7
|
-
// src/ui/badge/badge.tsx
|
|
8
|
-
import { motion } from "framer-motion";
|
|
9
|
-
import { HiXMark } from "react-icons/hi2";
|
|
2
|
+
import { cn } from '../chunk-B23TPTVG.mjs';
|
|
3
|
+
import { motion } from 'framer-motion';
|
|
4
|
+
import { HiXMark } from 'react-icons/hi2';
|
|
5
|
+
import { cva } from 'class-variance-authority';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
7
|
|
|
11
8
|
// src/ui/badge/animations.ts
|
|
12
9
|
var badgeAnimationPresets = {
|
|
@@ -27,9 +24,6 @@ var badgeAnimationPresets = {
|
|
|
27
24
|
transition: { duration: 0.2 }
|
|
28
25
|
}
|
|
29
26
|
};
|
|
30
|
-
|
|
31
|
-
// src/ui/badge/variants.ts
|
|
32
|
-
import { cva } from "class-variance-authority";
|
|
33
27
|
var buttonLikeSolidAppearances = {
|
|
34
28
|
default: "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
|
|
35
29
|
secondary: "bg-slate-800 text-slate-50",
|
|
@@ -102,9 +96,6 @@ var badgeCloseButtonVariants = cva(
|
|
|
102
96
|
defaultVariants: { size: "md" }
|
|
103
97
|
}
|
|
104
98
|
);
|
|
105
|
-
|
|
106
|
-
// src/ui/badge/badge.tsx
|
|
107
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
108
99
|
function Badge(props) {
|
|
109
100
|
const {
|
|
110
101
|
className,
|
|
@@ -152,10 +143,7 @@ function Badge(props) {
|
|
|
152
143
|
);
|
|
153
144
|
}
|
|
154
145
|
Badge.displayName = "Badge";
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
badgeCloseButtonVariants,
|
|
159
|
-
badgeVariants
|
|
160
|
-
};
|
|
146
|
+
|
|
147
|
+
export { Badge, badgeAnimationPresets, badgeCloseButtonVariants, badgeVariants };
|
|
148
|
+
//# sourceMappingURL=badge.mjs.map
|
|
161
149
|
//# sourceMappingURL=badge.mjs.map
|
package/dist/ui/badge.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/badge/
|
|
1
|
+
{"version":3,"sources":["../../src/ui/badge/animations.ts","../../src/ui/badge/variants.ts","../../src/ui/badge/badge.tsx"],"names":[],"mappings":";;;;;;;AAcO,IAAM,qBAAA,GAA+C;AAAA,EAC1D,MAAM,EAAC;AAAA,EACP,GAAA,EAAK;AAAA,IACH,OAAA,EAAS,EAAE,KAAA,EAAO,IAAA,EAAM,SAAS,CAAA,EAAE;AAAA,IACnC,OAAA,EAAS,EAAE,KAAA,EAAO,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,IAChC,YAAY,EAAE,IAAA,EAAM,UAAU,SAAA,EAAW,GAAA,EAAK,SAAS,EAAA;AAAG,GAC5D;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY,EAAE,CAAA,EAAG,EAAA,EAAI,OAAO,IAAA,EAAK;AAAA,IACjC,QAAA,EAAU,EAAE,KAAA,EAAO,IAAA,EAAK;AAAA,IACxB,UAAA,EAAY,EAAE,IAAA,EAAM,QAAA,EAAU,QAAQ,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,OAAA,EAAS,EAAA;AAAG,GAC1E;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,IACtB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,IACtB,UAAA,EAAY,EAAE,QAAA,EAAU,GAAA;AAAI;AAEhC;ACzBO,IAAM,0BAAA,GAA6B;AAAA,EACxC,OAAA,EAAS,mEAAA;AAAA,EACT,SAAA,EAAW,4BAAA;AAAA,EACX,WAAA,EAAa,wBAAA;AAAA,EACb,OAAA,EAAS,iDAAA;AAAA,EACT,KAAA,EAAO,+BAAA;AAAA,EACP,KAAA,EAAO,gEAAA;AAAA,EACP,OAAA,EAAS,2BAAA;AAAA,EACT,MAAA,EAAQ,0BAAA;AAAA,EACR,MAAA,EAAQ,0BAAA;AAAA,EACR,IAAA,EAAM,wBAAA;AAAA,EACN,IAAA,EAAM,wBAAA;AAAA,EACN,GAAA,EAAK,uBAAA;AAAA,EACL,IAAA,EAAM,wBAAA;AAAA,EACN,MAAA,EAAQ,0BAAA;AAAA,EACR,MAAA,EAAQ,0BAAA;AAAA,EACR,eAAA,EAAiB,yDAAA;AAAA,EACjB,gBAAA,EAAkB,wDAAA;AAAA,EAClB,cAAA,EAAgB,sDAAA;AAAA,EAChB,iBAAA,EACE,2DAAA;AAAA,EACF,iBAAA,EAAmB,yDAAA;AAAA,EACnB,eAAA,EAAiB,uDAAA;AAAA,EACjB,iBAAA,EACE,2DAAA;AAAA,EACF,eAAA,EAAiB,uDAAA;AAAA,EACjB,iBAAA,EAAmB;AACrB,CAAA;AAIA,IAAM,gBAAA,GAAmB;AAAA,EACvB,GAAG,0BAAA;AAAA,EACH,OAAA,EAAS,kEAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEO,IAAM,aAAA,GAAgB,GAAA;AAAA,EAC3B;AAAA,IACE,sEAAA;AAAA,IACA,2DAAA;AAAA,IACA,0GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,gBAAA;AAAA,MACZ,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,8CAAA;AAAA,QACJ,EAAA,EAAI,yCAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,cAAA;AAAA,QACN,MAAA,EAAQ,YAAA;AAAA,QACR,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,UAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT;AAEJ;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC,oMAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA;AAAK;AAElC;ACzEO,SAAS,MAAM,KAAA,EAAmB;AACvC,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA,GAAY,MAAA;AAAA,IACZ,QAAA,GAAW,KAAA;AAAA,IACX,OAAA;AAAA,IACA,UAAA,GAAa,QAAA;AAAA,IACb,QAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,WAAA,GAAc,sBAAsB,SAAS,CAAA;AACnD,EAAA,MAAM,QAAQ,KAAA,KAAU,KAAA;AACxB,EAAA,MAAM,iBAAA,GACJ,SAAA,KAAc,KAAA,GAAQ,kBAAA,GAAqB,MAAA,CAAA;AAE7C,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,IAAA;AAAA,IAAP;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAU,OAAA;AAAA,MACV,YAAA,EAAY,iBAAA;AAAA,MACZ,SAAA,EAAW,GAAG,aAAA,CAAc,EAAE,YAAY,IAAA,EAAM,KAAA,EAAO,CAAA,EAAG,SAAS,CAAA;AAAA,MACnE,OAAA,EAAS,SAAA,KAAc,MAAA,GAAS,KAAA,GAAQ,MAAA;AAAA,MACvC,GAAG,WAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,CAAC,QAAQ,QAAA,GAAW,IAAA;AAAA,QACpB,QAAA,mBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAU,aAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAW,wBAAA,CAAyB,EAAE,IAAA,EAAM,CAAA;AAAA,YAE5C,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,UAAA,EAAW,eAAW,IAAA,EAAC;AAAA;AAAA,SAC5C,GACE;AAAA;AAAA;AAAA,GACN;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"badge.mjs","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { BadgeAnimation } from \"./types\";\n\ntype BadgePresetMotionProps = Pick<\n HTMLMotionProps<\"span\">,\n \"style\" | \"transition\" | \"whileHover\" | \"whileTap\" | \"animate\" | \"initial\"\n>;\n\nexport type BadgeAnimationPresets = Record<\n BadgeAnimation,\n BadgePresetMotionProps\n>;\n\nexport const badgeAnimationPresets: BadgeAnimationPresets = {\n none: {},\n pop: {\n initial: { scale: 0.92, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { type: \"spring\", stiffness: 520, damping: 28 },\n },\n bounce: {\n whileHover: { y: -2, scale: 1.04 },\n whileTap: { scale: 0.96 },\n transition: { type: \"spring\", bounce: 0.45, stiffness: 420, damping: 18 },\n },\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.2 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Tailwind class maps mirroring `buttons/variants.ts` appearance tokens.\n * Reused by primitives that should stay visually aligned with Button.\n */\nexport const buttonLikeSolidAppearances = {\n default: \"bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]\",\n secondary: \"bg-slate-800 text-slate-50\",\n destructive: \"bg-rose-600 text-white\",\n outline: \"border border-white/10 bg-white/5 text-slate-50\",\n ghost: \"bg-transparent text-slate-200\",\n glass: \"border border-white/15 bg-white/10 text-white backdrop-blur-md\",\n emerald: \"bg-emerald-600 text-white\",\n indigo: \"bg-indigo-600 text-white\",\n purple: \"bg-purple-600 text-white\",\n pink: \"bg-pink-600 text-white\",\n rose: \"bg-rose-600 text-white\",\n sky: \"bg-sky-600 text-white\",\n teal: \"bg-teal-600 text-white\",\n yellow: \"bg-yellow-600 text-white\",\n orange: \"bg-orange-600 text-white\",\n \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600 text-white\",\n \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600 text-white\",\n \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600 text-white\",\n \"gradient-yellow\":\n \"bg-gradient-to-r from-yellow-600 to-orange-600 text-white\",\n \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600 text-white\",\n \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600 text-white\",\n \"gradient-indigo\":\n \"bg-gradient-to-r from-indigo-600 to-purple-600 text-white\",\n \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600 text-white\",\n \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600 text-white\",\n} as const;\n\nexport type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;\n\nconst badgeAppearances = {\n ...buttonLikeSolidAppearances,\n outline: \"border border-white/15 bg-transparent text-slate-200 shadow-none\",\n ghost: \"bg-transparent text-slate-300 shadow-none\",\n} as const;\n\nexport const badgeVariants = cva(\n [\n \"inline-flex max-w-full items-center justify-center gap-1 font-medium\",\n \"whitespace-nowrap ring-offset-slate-950 transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2\",\n \"select-none\",\n ],\n {\n variants: {\n appearance: badgeAppearances,\n size: {\n sm: \"h-6 min-h-6 px-2 text-[0.65rem] leading-none\",\n md: \"h-7 min-h-7 px-2.5 text-xs leading-none\",\n lg: \"h-8 min-h-8 px-3 text-sm leading-none\",\n },\n shape: {\n pill: \"rounded-full\",\n square: \"rounded-md\",\n dot: \"h-2.5 min-h-2.5 w-2.5 min-w-2.5 rounded-full p-0 px-0 text-[0]\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n shape: \"pill\",\n },\n },\n);\n\nexport const badgeCloseButtonVariants = cva(\n \"inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current opacity-70 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40\",\n {\n variants: {\n size: {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { HiXMark } from \"react-icons/hi2\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { badgeAnimationPresets } from \"./animations\";\nimport type { BadgeProps } from \"./types\";\nimport { badgeCloseButtonVariants, badgeVariants } from \"./variants\";\n\nexport function Badge(props: BadgeProps) {\n const {\n className,\n appearance,\n size,\n shape,\n animation = \"none\",\n closable = false,\n onClose,\n closeLabel = \"Remove\",\n children,\n ref,\n \"aria-label\": ariaLabel,\n ...rest\n } = props;\n const motionProps = badgeAnimationPresets[animation];\n const isDot = shape === \"dot\";\n const resolvedAriaLabel =\n ariaLabel ?? (isDot ? \"Status indicator\" : undefined);\n\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"badge\"\n aria-label={resolvedAriaLabel}\n className={cn(badgeVariants({ appearance, size, shape }), className)}\n initial={animation === \"none\" ? false : undefined}\n {...motionProps}\n {...rest}\n >\n {!isDot ? children : null}\n {closable ? (\n <button\n type=\"button\"\n data-slot=\"badge-close\"\n aria-label={closeLabel}\n onClick={onClose}\n className={badgeCloseButtonVariants({ size })}\n >\n <HiXMark className=\"size-3.5\" aria-hidden />\n </button>\n ) : null}\n </motion.span>\n );\n}\n\nBadge.displayName = \"Badge\";\n"]}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ComponentPropsWithoutRef, Ref, ReactNode } from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
+
|
|
6
|
+
declare const breadcrumbNavVariants: (props?: ({
|
|
7
|
+
appearance?: "default" | "muted" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | null | undefined;
|
|
8
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
+
declare const breadcrumbListVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
10
|
+
declare const breadcrumbItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
11
|
+
declare const breadcrumbLinkVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
12
|
+
declare const breadcrumbPageVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
13
|
+
declare const breadcrumbSeparatorVariants: (props?: ({
|
|
14
|
+
size?: "sm" | "md" | null | undefined;
|
|
15
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
16
|
+
|
|
17
|
+
type BreadcrumbProps = ComponentPropsWithoutRef<"nav"> & {
|
|
18
|
+
"aria-label"?: string;
|
|
19
|
+
} & {
|
|
20
|
+
ref?: Ref<HTMLElement>;
|
|
21
|
+
};
|
|
22
|
+
type BreadcrumbListProps = ComponentPropsWithoutRef<"ol">;
|
|
23
|
+
type BreadcrumbItemProps = ComponentPropsWithoutRef<"li">;
|
|
24
|
+
type BreadcrumbLinkProps = ComponentPropsWithoutRef<"a"> & VariantProps<typeof breadcrumbLinkVariants> & {
|
|
25
|
+
appearance?: BreadcrumbAppearance;
|
|
26
|
+
} & {
|
|
27
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
28
|
+
};
|
|
29
|
+
type BreadcrumbPageProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof breadcrumbPageVariants> & {
|
|
30
|
+
appearance?: BreadcrumbAppearance;
|
|
31
|
+
} & {
|
|
32
|
+
ref?: Ref<HTMLSpanElement>;
|
|
33
|
+
};
|
|
34
|
+
type SeparatorVariantProps = VariantProps<typeof breadcrumbSeparatorVariants>;
|
|
35
|
+
type BreadcrumbAppearance = NonNullable<VariantProps<typeof breadcrumbNavVariants>["appearance"]>;
|
|
36
|
+
type BreadcrumbSeparatorProps = ComponentPropsWithoutRef<"span"> & SeparatorVariantProps & {
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
declare function Breadcrumb({ className, ref, "aria-label": ariaLabel, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
declare namespace Breadcrumb {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
44
|
+
declare function BreadcrumbList({ className, ref, ...rest }: BreadcrumbListProps & {
|
|
45
|
+
ref?: Ref<HTMLOListElement>;
|
|
46
|
+
}): react_jsx_runtime.JSX.Element;
|
|
47
|
+
declare namespace BreadcrumbList {
|
|
48
|
+
var displayName: string;
|
|
49
|
+
}
|
|
50
|
+
declare function BreadcrumbItem({ className, ref, ...rest }: BreadcrumbItemProps & {
|
|
51
|
+
ref?: Ref<HTMLLIElement>;
|
|
52
|
+
}): react_jsx_runtime.JSX.Element;
|
|
53
|
+
declare namespace BreadcrumbItem {
|
|
54
|
+
var displayName: string;
|
|
55
|
+
}
|
|
56
|
+
declare function BreadcrumbLink({ className, ref, appearance, ...rest }: BreadcrumbLinkProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
declare namespace BreadcrumbLink {
|
|
58
|
+
var displayName: string;
|
|
59
|
+
}
|
|
60
|
+
declare function BreadcrumbPage({ className, ref, appearance, ...rest }: BreadcrumbPageProps): react_jsx_runtime.JSX.Element;
|
|
61
|
+
declare namespace BreadcrumbPage {
|
|
62
|
+
var displayName: string;
|
|
63
|
+
}
|
|
64
|
+
declare function BreadcrumbSeparator({ className, size, children, ref, ...rest }: BreadcrumbSeparatorProps & {
|
|
65
|
+
ref?: Ref<HTMLSpanElement>;
|
|
66
|
+
}): react_jsx_runtime.JSX.Element;
|
|
67
|
+
declare namespace BreadcrumbSeparator {
|
|
68
|
+
var displayName: string;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export { Breadcrumb, type BreadcrumbAppearance, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, type SeparatorVariantProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbListVariants, breadcrumbNavVariants, breadcrumbPageVariants, breadcrumbSeparatorVariants };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ComponentPropsWithoutRef, Ref, ReactNode } from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
+
|
|
6
|
+
declare const breadcrumbNavVariants: (props?: ({
|
|
7
|
+
appearance?: "default" | "muted" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | null | undefined;
|
|
8
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
+
declare const breadcrumbListVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
10
|
+
declare const breadcrumbItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
11
|
+
declare const breadcrumbLinkVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
12
|
+
declare const breadcrumbPageVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
13
|
+
declare const breadcrumbSeparatorVariants: (props?: ({
|
|
14
|
+
size?: "sm" | "md" | null | undefined;
|
|
15
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
16
|
+
|
|
17
|
+
type BreadcrumbProps = ComponentPropsWithoutRef<"nav"> & {
|
|
18
|
+
"aria-label"?: string;
|
|
19
|
+
} & {
|
|
20
|
+
ref?: Ref<HTMLElement>;
|
|
21
|
+
};
|
|
22
|
+
type BreadcrumbListProps = ComponentPropsWithoutRef<"ol">;
|
|
23
|
+
type BreadcrumbItemProps = ComponentPropsWithoutRef<"li">;
|
|
24
|
+
type BreadcrumbLinkProps = ComponentPropsWithoutRef<"a"> & VariantProps<typeof breadcrumbLinkVariants> & {
|
|
25
|
+
appearance?: BreadcrumbAppearance;
|
|
26
|
+
} & {
|
|
27
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
28
|
+
};
|
|
29
|
+
type BreadcrumbPageProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof breadcrumbPageVariants> & {
|
|
30
|
+
appearance?: BreadcrumbAppearance;
|
|
31
|
+
} & {
|
|
32
|
+
ref?: Ref<HTMLSpanElement>;
|
|
33
|
+
};
|
|
34
|
+
type SeparatorVariantProps = VariantProps<typeof breadcrumbSeparatorVariants>;
|
|
35
|
+
type BreadcrumbAppearance = NonNullable<VariantProps<typeof breadcrumbNavVariants>["appearance"]>;
|
|
36
|
+
type BreadcrumbSeparatorProps = ComponentPropsWithoutRef<"span"> & SeparatorVariantProps & {
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
declare function Breadcrumb({ className, ref, "aria-label": ariaLabel, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
declare namespace Breadcrumb {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
44
|
+
declare function BreadcrumbList({ className, ref, ...rest }: BreadcrumbListProps & {
|
|
45
|
+
ref?: Ref<HTMLOListElement>;
|
|
46
|
+
}): react_jsx_runtime.JSX.Element;
|
|
47
|
+
declare namespace BreadcrumbList {
|
|
48
|
+
var displayName: string;
|
|
49
|
+
}
|
|
50
|
+
declare function BreadcrumbItem({ className, ref, ...rest }: BreadcrumbItemProps & {
|
|
51
|
+
ref?: Ref<HTMLLIElement>;
|
|
52
|
+
}): react_jsx_runtime.JSX.Element;
|
|
53
|
+
declare namespace BreadcrumbItem {
|
|
54
|
+
var displayName: string;
|
|
55
|
+
}
|
|
56
|
+
declare function BreadcrumbLink({ className, ref, appearance, ...rest }: BreadcrumbLinkProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
declare namespace BreadcrumbLink {
|
|
58
|
+
var displayName: string;
|
|
59
|
+
}
|
|
60
|
+
declare function BreadcrumbPage({ className, ref, appearance, ...rest }: BreadcrumbPageProps): react_jsx_runtime.JSX.Element;
|
|
61
|
+
declare namespace BreadcrumbPage {
|
|
62
|
+
var displayName: string;
|
|
63
|
+
}
|
|
64
|
+
declare function BreadcrumbSeparator({ className, size, children, ref, ...rest }: BreadcrumbSeparatorProps & {
|
|
65
|
+
ref?: Ref<HTMLSpanElement>;
|
|
66
|
+
}): react_jsx_runtime.JSX.Element;
|
|
67
|
+
declare namespace BreadcrumbSeparator {
|
|
68
|
+
var displayName: string;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export { Breadcrumb, type BreadcrumbAppearance, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, type SeparatorVariantProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbListVariants, breadcrumbNavVariants, breadcrumbPageVariants, breadcrumbSeparatorVariants };
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var chunkWZ2GOU2J_js = require('../chunk-WZ2GOU2J.js');
|
|
5
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
var breadcrumbNavVariants = classVarianceAuthority.cva(
|
|
9
|
+
"text-sm",
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
appearance: {
|
|
13
|
+
default: "text-slate-300",
|
|
14
|
+
muted: "text-slate-400",
|
|
15
|
+
sky: "text-sky-600",
|
|
16
|
+
rose: "text-rose-600",
|
|
17
|
+
purple: "text-purple-600",
|
|
18
|
+
pink: "text-pink-600",
|
|
19
|
+
orange: "text-orange-600",
|
|
20
|
+
yellow: "text-yellow-600",
|
|
21
|
+
teal: "text-teal-600",
|
|
22
|
+
indigo: "text-indigo-600",
|
|
23
|
+
emerald: "text-emerald-600",
|
|
24
|
+
gray: "text-gray-600",
|
|
25
|
+
amber: "text-amber-600",
|
|
26
|
+
violet: "text-violet-600"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
defaultVariants: {
|
|
30
|
+
appearance: "default"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
var breadcrumbListVariants = classVarianceAuthority.cva("flex flex-wrap items-center gap-1.5");
|
|
35
|
+
var breadcrumbItemVariants = classVarianceAuthority.cva("inline-flex items-center gap-1.5");
|
|
36
|
+
var breadcrumbLinkVariants = classVarianceAuthority.cva(
|
|
37
|
+
"rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
|
|
38
|
+
);
|
|
39
|
+
var breadcrumbPageVariants = classVarianceAuthority.cva("font-medium text-slate-100");
|
|
40
|
+
var breadcrumbSeparatorVariants = classVarianceAuthority.cva(
|
|
41
|
+
"select-none text-slate-600",
|
|
42
|
+
{
|
|
43
|
+
variants: {
|
|
44
|
+
size: {
|
|
45
|
+
sm: "text-xs",
|
|
46
|
+
md: "text-sm"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
defaultVariants: {
|
|
50
|
+
size: "md"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
function Breadcrumb({
|
|
55
|
+
className,
|
|
56
|
+
ref,
|
|
57
|
+
"aria-label": ariaLabel = "Breadcrumb",
|
|
58
|
+
...rest
|
|
59
|
+
}) {
|
|
60
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
61
|
+
"nav",
|
|
62
|
+
{
|
|
63
|
+
ref,
|
|
64
|
+
"data-slot": "breadcrumb",
|
|
65
|
+
"aria-label": ariaLabel,
|
|
66
|
+
className: chunkWZ2GOU2J_js.cn(className),
|
|
67
|
+
...rest
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
72
|
+
function BreadcrumbList({
|
|
73
|
+
className,
|
|
74
|
+
ref,
|
|
75
|
+
...rest
|
|
76
|
+
}) {
|
|
77
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
78
|
+
"ol",
|
|
79
|
+
{
|
|
80
|
+
ref,
|
|
81
|
+
"data-slot": "breadcrumb-list",
|
|
82
|
+
className: chunkWZ2GOU2J_js.cn(breadcrumbListVariants(), className),
|
|
83
|
+
...rest
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
BreadcrumbList.displayName = "BreadcrumbList";
|
|
88
|
+
function BreadcrumbItem({
|
|
89
|
+
className,
|
|
90
|
+
ref,
|
|
91
|
+
...rest
|
|
92
|
+
}) {
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
+
"li",
|
|
95
|
+
{
|
|
96
|
+
ref,
|
|
97
|
+
"data-slot": "breadcrumb-item",
|
|
98
|
+
className: chunkWZ2GOU2J_js.cn(breadcrumbItemVariants(), className),
|
|
99
|
+
...rest
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
104
|
+
function BreadcrumbLink({
|
|
105
|
+
className,
|
|
106
|
+
ref,
|
|
107
|
+
appearance = "default",
|
|
108
|
+
...rest
|
|
109
|
+
}) {
|
|
110
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
111
|
+
"a",
|
|
112
|
+
{
|
|
113
|
+
ref,
|
|
114
|
+
"data-slot": "breadcrumb-link",
|
|
115
|
+
className: chunkWZ2GOU2J_js.cn(breadcrumbLinkVariants(), breadcrumbNavVariants({ appearance }), className),
|
|
116
|
+
...rest
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
121
|
+
function BreadcrumbPage({
|
|
122
|
+
className,
|
|
123
|
+
ref,
|
|
124
|
+
appearance = "default",
|
|
125
|
+
...rest
|
|
126
|
+
}) {
|
|
127
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
128
|
+
"span",
|
|
129
|
+
{
|
|
130
|
+
ref,
|
|
131
|
+
"data-slot": "breadcrumb-page",
|
|
132
|
+
"aria-current": "page",
|
|
133
|
+
className: chunkWZ2GOU2J_js.cn(breadcrumbPageVariants(), breadcrumbNavVariants({ appearance }), className),
|
|
134
|
+
...rest
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
BreadcrumbPage.displayName = "BreadcrumbPage";
|
|
139
|
+
function BreadcrumbSeparator({
|
|
140
|
+
className,
|
|
141
|
+
size,
|
|
142
|
+
children = "/",
|
|
143
|
+
ref,
|
|
144
|
+
...rest
|
|
145
|
+
}) {
|
|
146
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
147
|
+
"span",
|
|
148
|
+
{
|
|
149
|
+
ref,
|
|
150
|
+
"data-slot": "breadcrumb-separator",
|
|
151
|
+
"aria-hidden": true,
|
|
152
|
+
role: "presentation",
|
|
153
|
+
className: chunkWZ2GOU2J_js.cn(breadcrumbSeparatorVariants({ size }), className),
|
|
154
|
+
...rest,
|
|
155
|
+
children
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
|
160
|
+
|
|
161
|
+
exports.Breadcrumb = Breadcrumb;
|
|
162
|
+
exports.BreadcrumbItem = BreadcrumbItem;
|
|
163
|
+
exports.BreadcrumbLink = BreadcrumbLink;
|
|
164
|
+
exports.BreadcrumbList = BreadcrumbList;
|
|
165
|
+
exports.BreadcrumbPage = BreadcrumbPage;
|
|
166
|
+
exports.BreadcrumbSeparator = BreadcrumbSeparator;
|
|
167
|
+
exports.breadcrumbItemVariants = breadcrumbItemVariants;
|
|
168
|
+
exports.breadcrumbLinkVariants = breadcrumbLinkVariants;
|
|
169
|
+
exports.breadcrumbListVariants = breadcrumbListVariants;
|
|
170
|
+
exports.breadcrumbNavVariants = breadcrumbNavVariants;
|
|
171
|
+
exports.breadcrumbPageVariants = breadcrumbPageVariants;
|
|
172
|
+
exports.breadcrumbSeparatorVariants = breadcrumbSeparatorVariants;
|
|
173
|
+
//# sourceMappingURL=breadcrumb.js.map
|
|
174
|
+
//# sourceMappingURL=breadcrumb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ui/breadcrumb/variants.ts","../../src/ui/breadcrumb/breadcrumb.tsx"],"names":["cva","jsx","cn"],"mappings":"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","file":"breadcrumb.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const breadcrumbNavVariants = cva(\n \"text-sm\",\n {\n variants: {\n appearance: {\n default: \"text-slate-300\",\n muted: \"text-slate-400\",\n sky: \"text-sky-600\",\n rose: \"text-rose-600\",\n purple: \"text-purple-600\",\n pink: \"text-pink-600\",\n orange: \"text-orange-600\",\n yellow: \"text-yellow-600\",\n teal: \"text-teal-600\",\n indigo: \"text-indigo-600\",\n emerald: \"text-emerald-600\",\n gray: \"text-gray-600\",\n amber: \"text-amber-600\",\n violet: \"text-violet-600\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n },\n }\n);\n\nexport const breadcrumbListVariants = cva(\"flex flex-wrap items-center gap-1.5\");\n\nexport const breadcrumbItemVariants = cva(\"inline-flex items-center gap-1.5\");\n\nexport const breadcrumbLinkVariants = cva(\n \"rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n);\n\nexport const breadcrumbPageVariants = cva(\"font-medium text-slate-100\");\n\nexport const breadcrumbSeparatorVariants = cva(\n \"select-none text-slate-600\",\n {\n variants: {\n size: {\n sm: \"text-xs\",\n md: \"text-sm\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n","\"use client\";\n\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n BreadcrumbItemProps,\n BreadcrumbLinkProps,\n BreadcrumbListProps,\n BreadcrumbPageProps,\n BreadcrumbProps,\n BreadcrumbSeparatorProps,\n} from \"./types\";\nimport {\n breadcrumbItemVariants,\n breadcrumbLinkVariants,\n breadcrumbListVariants,\n breadcrumbNavVariants,\n breadcrumbPageVariants,\n breadcrumbSeparatorVariants,\n} from \"./variants\";\n\nexport function Breadcrumb({\n className,\n ref,\n \"aria-label\": ariaLabel = \"Breadcrumb\",\n ...rest\n}: BreadcrumbProps) {\n return (\n <nav\n ref={ref}\n data-slot=\"breadcrumb\"\n aria-label={ariaLabel}\n className={cn(className)}\n {...rest}\n />\n );\n}\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport function BreadcrumbList({\n className,\n ref,\n ...rest\n}: BreadcrumbListProps & { ref?: Ref<HTMLOListElement> }) {\n return (\n <ol\n ref={ref}\n data-slot=\"breadcrumb-list\"\n className={cn(breadcrumbListVariants(), className)}\n {...rest}\n />\n );\n}\n\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport function BreadcrumbItem({\n className,\n ref,\n ...rest\n}: BreadcrumbItemProps & { ref?: Ref<HTMLLIElement> }) {\n return (\n <li\n ref={ref}\n data-slot=\"breadcrumb-item\"\n className={cn(breadcrumbItemVariants(), className)}\n {...rest}\n />\n );\n}\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\nexport function BreadcrumbLink({\n className,\n ref,\n appearance = \"default\",\n ...rest\n}: BreadcrumbLinkProps) {\n return (\n <a\n ref={ref}\n data-slot=\"breadcrumb-link\"\n className={cn(breadcrumbLinkVariants(), breadcrumbNavVariants({ appearance }), className)}\n {...rest}\n />\n );\n}\n\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nexport function BreadcrumbPage({\n className,\n ref,\n appearance = \"default\",\n ...rest\n}: BreadcrumbPageProps) {\n return (\n <span\n ref={ref}\n data-slot=\"breadcrumb-page\"\n aria-current=\"page\"\n className={cn(breadcrumbPageVariants(), breadcrumbNavVariants({ appearance }), className)}\n {...rest}\n />\n );\n}\n\nBreadcrumbPage.displayName = \"BreadcrumbPage\";\n\nexport function BreadcrumbSeparator({\n className,\n size,\n children = \"/\",\n ref,\n ...rest\n}: BreadcrumbSeparatorProps & { ref?: Ref<HTMLSpanElement> }) {\n return (\n <span\n ref={ref}\n data-slot=\"breadcrumb-separator\"\n aria-hidden\n role=\"presentation\"\n className={cn(breadcrumbSeparatorVariants({ size }), className)}\n {...rest}\n >\n {children}\n </span>\n );\n}\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\n"]}
|