@sakaniui/react 0.3.27 → 0.3.28

package/dist/index.mjs

@@ -3480,16 +3480,16 @@ var X = {
 			children: r
 		})
 	]
-}), Z = {
+}), ri = {
 	search: "_search_1airw_2",
 	search__icon: "_search__icon_1airw_25",
 	search__input: "_search__input_1airw_26",
 	search__placeholder: "_search__placeholder_1airw_38",
 	search__kbd: "_search__kbd_1airw_39",
 	collapsed: "_collapsed_1airw_53"
-}, ri = ({ type: e = "field", placeholder: t = "Search…", collapsed: n, value: r, onChange: i, onClick: a }) => n ? /* @__PURE__ */ O("button", {
+}, ii = ({ type: e = "field", placeholder: t = "Search…", collapsed: n, value: r, onChange: i, onClick: a }) => n ? /* @__PURE__ */ O("button", {
 	type: "button",
-	className: Z.collapsed,
+	className: ri.collapsed,
 	onClick: a,
 	"aria-label": "Search",
 	children: /* @__PURE__ */ O(st, {
@@ -3498,48 +3498,48 @@ var X = {
 	})
 }) : e === "command" ? /* @__PURE__ */ k("button", {
 	type: "button",
-	className: Z.search,
+	className: ri.search,
 	onClick: a,
 	children: [
 		/* @__PURE__ */ O(st, {
 			size: 16,
 			strokeWidth: E(16),
-			className: Z.search__icon
+			className: ri.search__icon
 		}),
 		/* @__PURE__ */ O("span", {
-			className: Z.search__placeholder,
+			className: ri.search__placeholder,
 			children: t
 		}),
 		/* @__PURE__ */ O("kbd", {
-			className: Z.search__kbd,
+			className: ri.search__kbd,
 			children: "⌘K"
 		})
 	]
 }) : /* @__PURE__ */ k("div", {
-	className: Z.search,
+	className: ri.search,
 	children: [/* @__PURE__ */ O(st, {
 		size: 16,
 		strokeWidth: E(16),
-		className: Z.search__icon
+		className: ri.search__icon
 	}), /* @__PURE__ */ O("input", {
-		className: Z.search__input,
+		className: ri.search__input,
 		placeholder: t,
 		value: r,
 		onChange: (e) => i?.(e.target.value)
 	})]
-}), ii = {
+}), ai = {
 	spinner: "_spinner_14r00_3",
 	"spinner--sm": "_spinner--sm_14r00_12",
 	"spinner--md": "_spinner--md_14r00_13",
 	"spinner--lg": "_spinner--lg_14r00_14",
 	spinner__svg: "_spinner__svg_14r00_17",
 	"spinner-rotate": "_spinner-rotate_14r00_1"
-}, ai = ({ size: e = "md", label: t = "Loading...", className: n }) => /* @__PURE__ */ O("span", {
+}, oi = ({ size: e = "md", label: t = "Loading...", className: n }) => /* @__PURE__ */ O("span", {
 	role: "status",
 	"aria-label": t,
 	className: [
-		ii.spinner,
-		ii[`spinner--${e}`],
+		ai.spinner,
+		ai[`spinner--${e}`],
 		n ?? ""
 	].filter(Boolean).join(" "),
 	children: /* @__PURE__ */ k("svg", {
@@ -3549,7 +3549,7 @@ var X = {
 		strokeWidth: 2.5,
 		strokeLinecap: "round",
 		"aria-hidden": "true",
-		className: ii.spinner__svg,
+		className: ai.spinner__svg,
 		children: [/* @__PURE__ */ O("circle", {
 			cx: 12,
 			cy: 12,
@@ -3557,10 +3557,10 @@ var X = {
 			opacity: .2
 		}), /* @__PURE__ */ O("path", {
 			d: "M12 3a9 9 0 0 1 9 9",
-			className: ii.spinner__arc
+			className: ai.spinner__arc
 		})]
 	})
-}), Q = {
+}), Z = {
 	card: "_card_u5kvg_4",
 	"card--featured": "_card--featured_u5kvg_24",
 	card__head: "_card__head_u5kvg_26",
@@ -3573,19 +3573,19 @@ var X = {
 	"card--trend-up": "_card--trend-up_u5kvg_68",
 	"card--trend-down": "_card--trend-down_u5kvg_69",
 	card__description: "_card__description_u5kvg_72"
-}, oi = {
+}, si = {
 	up: ut,
 	down: lt,
 	flat: tt
-}, si = {
+}, ci = {
 	up: "success",
 	down: "danger",
 	flat: "neutral"
-}, ci = ({ data: e }) => {
+}, li = ({ data: e }) => {
 	if (e.length < 2) return null;
 	let t = Math.min(...e), n = Math.max(...e) - t || 1;
 	return /* @__PURE__ */ O("svg", {
-		className: li,
+		className: ui,
 		viewBox: "0 0 100 32",
 		preserveAspectRatio: "none",
 		"aria-hidden": "true",
@@ -3598,21 +3598,21 @@ var X = {
 			strokeLinecap: "round"
 		})
 	});
-}, li = Q.card__sparkline, ui = ({ title: e, value: t, description: n, sparkline: r, delta: i, trend: a = "up", badgeVariant: o, variant: s = "minimal", icon: c, showMenu: l, onMenu: u, className: d }) => {
-	let f = oi[a], p = (s === "icon" || s === "featured") && c;
+}, ui = Z.card__sparkline, di = ({ title: e, value: t, description: n, sparkline: r, delta: i, trend: a = "up", badgeVariant: o, variant: s = "minimal", icon: c, showMenu: l, onMenu: u, className: d }) => {
+	let f = si[a], p = (s === "icon" || s === "featured") && c;
 	return /* @__PURE__ */ k("div", {
 		className: [
-			Q.card,
-			Q[`card--${s}`],
-			Q[`card--trend-${a}`],
+			Z.card,
+			Z[`card--${s}`],
+			Z[`card--trend-${a}`],
 			d ?? ""
 		].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ k("div", {
-				className: Q.card__head,
+				className: Z.card__head,
 				children: [
 					p && /* @__PURE__ */ O("span", {
-						className: Q.card__icon,
+						className: Z.card__icon,
 						"aria-hidden": "true",
 						children: /* @__PURE__ */ O(c, {
 							size: 18,
@@ -3620,12 +3620,12 @@ var X = {
 						})
 					}),
 					/* @__PURE__ */ O("span", {
-						className: Q.card__title,
+						className: Z.card__title,
 						children: e
 					}),
 					l && /* @__PURE__ */ O("button", {
 						type: "button",
-						className: Q.card__menu,
+						className: Z.card__menu,
 						onClick: u,
 						"aria-label": "More options",
 						children: /* @__PURE__ */ O(nt, {
@@ -3636,27 +3636,27 @@ var X = {
 				]
 			}),
 			/* @__PURE__ */ O("div", {
-				className: Q.card__value,
+				className: Z.card__value,
 				children: t
 			}),
-			r && /* @__PURE__ */ O(ci, { data: r }),
+			r && /* @__PURE__ */ O(li, { data: r }),
 			(i || n) && /* @__PURE__ */ k("div", {
-				className: Q.card__meta,
+				className: Z.card__meta,
 				children: [i && /* @__PURE__ */ O(C, {
-					variant: o ?? si[a],
+					variant: o ?? ci[a],
 					leftIcon: /* @__PURE__ */ O(f, {
 						size: 12,
 						strokeWidth: 2
 					}),
 					children: i
 				}), n && /* @__PURE__ */ O("p", {
-					className: Q.card__description,
+					className: Z.card__description,
 					children: n
 				})]
 			})
 		]
 	});
-}, $ = {
+}, Q = {
 	stepper: "_stepper_kxw14_3",
 	"stepper--horizontal": "_stepper--horizontal_kxw14_4",
 	"stepper--vertical": "_stepper--vertical_kxw14_5",
@@ -3677,41 +3677,41 @@ var X = {
 	"connector--horizontal": "_connector--horizontal_kxw14_47",
 	"connector--vertical": "_connector--vertical_kxw14_48",
 	"connector--filled": "_connector--filled_kxw14_49"
-}, di = ({ index: e, state: t, label: n, description: r, orientation: i = "horizontal" }) => /* @__PURE__ */ k("div", {
-	className: [$.step, $[`step--${i}`]].join(" "),
+}, fi = ({ index: e, state: t, label: n, description: r, orientation: i = "horizontal" }) => /* @__PURE__ */ k("div", {
+	className: [Q.step, Q[`step--${i}`]].join(" "),
 	children: [/* @__PURE__ */ O("span", {
-		className: [$.circle, $[`circle--${t}`]].join(" "),
+		className: [Q.circle, Q[`circle--${t}`]].join(" "),
 		"aria-hidden": "true",
 		children: t === "completed" ? /* @__PURE__ */ O(Ge, {
 			size: 14,
 			strokeWidth: E(14)
 		}) : /* @__PURE__ */ O("span", {
-			className: $.circle__num,
+			className: Q.circle__num,
 			children: e + 1
 		})
 	}), /* @__PURE__ */ k("span", {
-		className: $.step__text,
+		className: Q.step__text,
 		children: [/* @__PURE__ */ O("span", {
 			className: [
-				$.step__label,
-				t === "current" ? $["step__label--current"] : "",
-				t === "upcoming" ? $["step__label--upcoming"] : ""
+				Q.step__label,
+				t === "current" ? Q["step__label--current"] : "",
+				t === "upcoming" ? Q["step__label--upcoming"] : ""
 			].filter(Boolean).join(" "),
 			children: n
 		}), r && /* @__PURE__ */ O("span", {
-			className: $.step__desc,
+			className: Q.step__desc,
 			children: r
 		})]
 	})]
-}), fi = ({ steps: e, current: t, orientation: n = "horizontal", className: r }) => {
+}), pi = ({ steps: e, current: t, orientation: n = "horizontal", className: r }) => {
 	let i = (e) => e < t ? "completed" : e === t ? "current" : "upcoming";
 	return /* @__PURE__ */ O("div", {
 		className: [
-			$.stepper,
-			$[`stepper--${n}`],
+			Q.stepper,
+			Q[`stepper--${n}`],
 			r ?? ""
 		].filter(Boolean).join(" "),
-		children: e.map((r, a) => /* @__PURE__ */ k(D.Fragment, { children: [/* @__PURE__ */ O(di, {
+		children: e.map((r, a) => /* @__PURE__ */ k(D.Fragment, { children: [/* @__PURE__ */ O(fi, {
 			index: a,
 			state: i(a),
 			label: r.label,
@@ -3719,46 +3719,59 @@ var X = {
 			orientation: n
 		}), a < e.length - 1 && /* @__PURE__ */ O("span", {
 			className: [
-				$.connector,
-				$[`connector--${n}`],
-				a < t ? $["connector--filled"] : ""
+				Q.connector,
+				Q[`connector--${n}`],
+				a < t ? Q["connector--filled"] : ""
 			].filter(Boolean).join(" "),
 			"aria-hidden": "true"
 		})] }, a))
 	});
-}, pi = {
-	wrapper: "_wrapper_k5grn_3",
-	"wrapper--disabled": "_wrapper--disabled_k5grn_11",
-	input: "_input_k5grn_13",
-	track: "_track_k5grn_15",
-	thumb: "_thumb_k5grn_28",
-	label: "_label_k5grn_55"
-}, mi = D.forwardRef(({ label: e, disabled: t, id: n, className: r, ...i }, a) => {
-	let o = D.useId(), s = n ?? o;
+}, $ = {
+	wrapper: "_wrapper_1xxik_3",
+	"wrapper--disabled": "_wrapper--disabled_1xxik_11",
+	input: "_input_1xxik_13",
+	track: "_track_1xxik_15",
+	thumb: "_thumb_1xxik_28",
+	label: "_label_1xxik_55",
+	"wrapper--withDescription": "_wrapper--withDescription_1xxik_60",
+	text: "_text_1xxik_61",
+	description: "_description_1xxik_63"
+}, mi = D.forwardRef(({ label: e, description: t, disabled: n, id: r, className: i, ...a }, o) => {
+	let s = D.useId(), c = r ?? s;
 	return /* @__PURE__ */ k("label", {
-		htmlFor: s,
+		htmlFor: c,
 		className: [
-			pi.wrapper,
-			t ? pi["wrapper--disabled"] : "",
-			r ?? ""
+			$.wrapper,
+			t ? $["wrapper--withDescription"] : "",
+			n ? $["wrapper--disabled"] : "",
+			i ?? ""
 		].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ O("input", {
-				ref: a,
-				id: s,
+				ref: o,
+				id: c,
 				type: "checkbox",
 				role: "switch",
-				disabled: t,
-				className: pi.input,
-				...i
+				disabled: n,
+				className: $.input,
+				...a
 			}),
 			/* @__PURE__ */ O("span", {
-				className: pi.track,
+				className: $.track,
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ O("span", { className: pi.thumb })
+				children: /* @__PURE__ */ O("span", { className: $.thumb })
 			}),
-			e && /* @__PURE__ */ O("span", {
-				className: pi.label,
+			t ? /* @__PURE__ */ k("span", {
+				className: $.text,
+				children: [e && /* @__PURE__ */ O("span", {
+					className: $.label,
+					children: e
+				}), /* @__PURE__ */ O("span", {
+					className: $.description,
+					children: t
+				})]
+			}) : e && /* @__PURE__ */ O("span", {
+				className: $.label,
 				children: e
 			})
 		]
@@ -3968,4 +3981,4 @@ var _i = {
 	]
 });
 //#endregion
-export { ce as Accordion, de as AccordionItem, oe as ActivityFeed, ye as ActivityFeedHighlight, h as Alert, zt as Announcement, Wn as AreaChart, Pe as Avatar, m as AvatarGroup, he as AvatarUpload, C as Badge, Oe as Balance, on as BarChart, _n as BlogBlockquote, yn as BlogFeatureText, xn as BlogImage, l as BlogListingCard, o as BlogListingFeaturedCard, i as BoardCard, Gn as BoardColumn, Ie as Breadcrumb, w as Button, Xn as Calendar, Zn as Card, r as CardMetaItem, u as CartItem, y as ChatComposer, Le as Checkbox, d as CheckoutSteps, Ut as CodeSnippet, S as ColorSwatch, Qn as Combobox, T as ConversationItem, Ee as DEFAULT_CHECKOUT_STEPS, Me as Divider, tr as DonutChart, Re as EmptyState, Kt as Expenses, g as FeaturedIcon, nr as FileUpload, Fe as FilterChip, Cn as FirstPageHeading, sr as FunnelChart, ur as HeatmapChart, b as HoverGroup, we as IconButton, Yt as InlineHint, re as Input, ge as JobListing, fr as Kbd, mr as Label, vr as LineChart, Ae as Link, Tn as List, br as ListItem, p as LocationDot, On as Marquee, Sr as Menu, Cr as MenuDivider, Tr as MenuItem, fe as MessageBubble, An as Metric, jn as MobileNavigationMenu, le as Modal, e as NotificationItem, pe as Pagination, Nr as PieChart, Pn as PlaceholderLogo, Pr as Popover, x as PriceDisplay, ee as ProductCard, n as ProductGallery, Fn as ProfileCard, Se as Progress, Xt as ProgressItem, _ as ProgressStat, te as QuantitySelector, Wr as RadarChart, Qr as RadialChart, $r as Radio, Qt as RichSeparator, Ln as RichTextHeading, zn as RichTextParagraph, t as SectionHeading, be as SegmentedControl, Te as Select, ue as Sidebar, se as SidebarDivider, ei as SidebarFooter, Ne as SidebarGroupLabel, ve as SidebarHeader, ae as SidebarItem, ni as SidebarPromo, ri as SidebarSearch, ke as SidebarSubItem, ze as SizeSelector, Ce as Skeleton, ie as Slider, ne as SpendingBalance, ai as Spinner, v as StarRating, ui as StatCard, fi as Stepper, di as StepperStep, cn as StockMarket, f as StockStatus, Vn as SubFeature, mi as Switch, me as Table, De as Tabs, dn as Tags, _e as TeamCard, gi as Textarea, mn as Ticker, yi as Toast, xe as Tooltip, je as TopBar, xi as TopBarMobile, gn as Transactions, c as WishlistButton, s as getContrastColor, E as iconStrokeWidth, a as useHoverHighlight };
+export { ce as Accordion, de as AccordionItem, oe as ActivityFeed, ye as ActivityFeedHighlight, h as Alert, zt as Announcement, Wn as AreaChart, Pe as Avatar, m as AvatarGroup, he as AvatarUpload, C as Badge, Oe as Balance, on as BarChart, _n as BlogBlockquote, yn as BlogFeatureText, xn as BlogImage, l as BlogListingCard, o as BlogListingFeaturedCard, i as BoardCard, Gn as BoardColumn, Ie as Breadcrumb, w as Button, Xn as Calendar, Zn as Card, r as CardMetaItem, u as CartItem, y as ChatComposer, Le as Checkbox, d as CheckoutSteps, Ut as CodeSnippet, S as ColorSwatch, Qn as Combobox, T as ConversationItem, Ee as DEFAULT_CHECKOUT_STEPS, Me as Divider, tr as DonutChart, Re as EmptyState, Kt as Expenses, g as FeaturedIcon, nr as FileUpload, Fe as FilterChip, Cn as FirstPageHeading, sr as FunnelChart, ur as HeatmapChart, b as HoverGroup, we as IconButton, Yt as InlineHint, re as Input, ge as JobListing, fr as Kbd, mr as Label, vr as LineChart, Ae as Link, Tn as List, br as ListItem, p as LocationDot, On as Marquee, Sr as Menu, Cr as MenuDivider, Tr as MenuItem, fe as MessageBubble, An as Metric, jn as MobileNavigationMenu, le as Modal, e as NotificationItem, pe as Pagination, Nr as PieChart, Pn as PlaceholderLogo, Pr as Popover, x as PriceDisplay, ee as ProductCard, n as ProductGallery, Fn as ProfileCard, Se as Progress, Xt as ProgressItem, _ as ProgressStat, te as QuantitySelector, Wr as RadarChart, Qr as RadialChart, $r as Radio, Qt as RichSeparator, Ln as RichTextHeading, zn as RichTextParagraph, t as SectionHeading, be as SegmentedControl, Te as Select, ue as Sidebar, se as SidebarDivider, ei as SidebarFooter, Ne as SidebarGroupLabel, ve as SidebarHeader, ae as SidebarItem, ni as SidebarPromo, ii as SidebarSearch, ke as SidebarSubItem, ze as SizeSelector, Ce as Skeleton, ie as Slider, ne as SpendingBalance, oi as Spinner, v as StarRating, di as StatCard, pi as Stepper, fi as StepperStep, cn as StockMarket, f as StockStatus, Vn as SubFeature, mi as Switch, me as Table, De as Tabs, dn as Tags, _e as TeamCard, gi as Textarea, mn as Ticker, yi as Toast, xe as Tooltip, je as TopBar, xi as TopBarMobile, gn as Transactions, c as WishlistButton, s as getContrastColor, E as iconStrokeWidth, a as useHoverHighlight };