lynote-ui 0.0.2 → 0.0.3
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 +110 -9
- package/dist/accordion/index.d.ts +1 -1
- package/dist/accordion/index.js +4 -4
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +4 -4
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert/index.d.ts +1 -1
- package/dist/alert/index.js +5 -5
- package/dist/alert/index.js.map +1 -1
- package/dist/alert/index.mjs +5 -5
- package/dist/alert/index.mjs.map +1 -1
- package/dist/alert-dialog/index.js +8 -8
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +8 -8
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/aspect-ratio/index.js +2 -2
- package/dist/aspect-ratio/index.js.map +1 -1
- package/dist/aspect-ratio/index.mjs +2 -2
- package/dist/aspect-ratio/index.mjs.map +1 -1
- package/dist/avatar/index.d.ts +1 -1
- package/dist/avatar/index.js +6 -6
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +6 -6
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js +2 -2
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +2 -2
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.d.ts +1 -1
- package/dist/breadcrumb/index.js +3 -3
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +3 -3
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/index.js +8 -8
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +8 -8
- package/dist/button/index.mjs.map +1 -1
- package/dist/button-group/index.js +3 -3
- package/dist/button-group/index.js.map +1 -1
- package/dist/button-group/index.mjs +3 -3
- package/dist/button-group/index.mjs.map +1 -1
- package/dist/calendar/index.js +4 -4
- package/dist/calendar/index.js.map +1 -1
- package/dist/calendar/index.mjs +4 -4
- package/dist/calendar/index.mjs.map +1 -1
- package/dist/card/index.d.ts +1 -1
- package/dist/card/index.js +6 -6
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +6 -6
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.d.ts +1 -1
- package/dist/carousel/index.js +3 -3
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +3 -3
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/chart/index.d.ts +1 -1
- package/dist/chart/index.js +7 -7
- package/dist/chart/index.js.map +1 -1
- package/dist/chart/index.mjs +7 -7
- package/dist/chart/index.mjs.map +1 -1
- package/dist/checkbox/index.js +2 -2
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +2 -2
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/collapsible/index.d.ts +1 -1
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.d.ts +1 -1
- package/dist/combobox/index.js +10 -10
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +10 -10
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/command/index.d.ts +1 -1
- package/dist/command/index.js +10 -10
- package/dist/command/index.js.map +1 -1
- package/dist/command/index.mjs +10 -10
- package/dist/command/index.mjs.map +1 -1
- package/dist/context-menu/index.d.ts +1 -1
- package/dist/context-menu/index.js +9 -9
- package/dist/context-menu/index.js.map +1 -1
- package/dist/context-menu/index.mjs +9 -9
- package/dist/context-menu/index.mjs.map +1 -1
- package/dist/date-picker/index.js.map +1 -1
- package/dist/date-picker/index.mjs.map +1 -1
- package/dist/dialog/index.js +7 -7
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs +7 -7
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/drawer/index.d.ts +1 -1
- package/dist/drawer/index.js +6 -6
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +6 -6
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown-menu/index.d.ts +1 -1
- package/dist/dropdown-menu/index.js +10 -10
- package/dist/dropdown-menu/index.js.map +1 -1
- package/dist/dropdown-menu/index.mjs +10 -10
- package/dist/dropdown-menu/index.mjs.map +1 -1
- package/dist/empty/index.d.ts +1 -1
- package/dist/empty/index.js +5 -5
- package/dist/empty/index.js.map +1 -1
- package/dist/empty/index.mjs +5 -5
- package/dist/empty/index.mjs.map +1 -1
- package/dist/field/index.d.ts +1 -1
- package/dist/field/index.js +9 -9
- package/dist/field/index.js.map +1 -1
- package/dist/field/index.mjs +9 -9
- package/dist/field/index.mjs.map +1 -1
- package/dist/form/index.js +1 -1
- package/dist/form/index.mjs +1 -1
- package/dist/{form-DaFoHvkT.mjs → form-DLd4sOko.mjs} +2 -2
- package/dist/form-DLd4sOko.mjs.map +1 -0
- package/dist/{form-CJuxZz3w.js → form-h_cJBAwg.js} +2 -2
- package/dist/form-h_cJBAwg.js.map +1 -0
- package/dist/hover-card/index.d.ts +1 -1
- package/dist/hover-card/index.js +2 -2
- package/dist/hover-card/index.js.map +1 -1
- package/dist/hover-card/index.mjs +2 -2
- package/dist/hover-card/index.mjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/index.mjs.map +1 -1
- package/dist/input/index.js +2 -2
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +2 -2
- package/dist/input/index.mjs.map +1 -1
- package/dist/input-group/index.d.ts +1 -1
- package/dist/input-group/index.js +8 -8
- package/dist/input-group/index.js.map +1 -1
- package/dist/input-group/index.mjs +8 -8
- package/dist/input-group/index.mjs.map +1 -1
- package/dist/input-otp/index.js +1 -1
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs +1 -1
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/item/index.d.ts +1 -1
- package/dist/item/index.js +8 -8
- package/dist/item/index.js.map +1 -1
- package/dist/item/index.mjs +8 -8
- package/dist/item/index.mjs.map +1 -1
- package/dist/kbd/index.js +2 -2
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs +2 -2
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label/index.js +2 -2
- package/dist/label/index.js.map +1 -1
- package/dist/label/index.mjs +2 -2
- package/dist/label/index.mjs.map +1 -1
- package/dist/menubar/index.d.ts +1 -1
- package/dist/menubar/index.js +11 -11
- package/dist/menubar/index.js.map +1 -1
- package/dist/menubar/index.mjs +11 -11
- package/dist/menubar/index.mjs.map +1 -1
- package/dist/native-select/index.js +3 -3
- package/dist/native-select/index.js.map +1 -1
- package/dist/native-select/index.mjs +3 -3
- package/dist/native-select/index.mjs.map +1 -1
- package/dist/navigation-menu/index.d.ts +1 -1
- package/dist/navigation-menu/index.js +10 -10
- package/dist/navigation-menu/index.js.map +1 -1
- package/dist/navigation-menu/index.mjs +10 -10
- package/dist/navigation-menu/index.mjs.map +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +1 -1
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover/index.d.ts +7 -10
- package/dist/popover/index.js +19 -21
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +18 -19
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/index.d.ts +1 -1
- package/dist/progress/index.js +4 -4
- package/dist/progress/index.js.map +1 -1
- package/dist/progress/index.mjs +4 -4
- package/dist/progress/index.mjs.map +1 -1
- package/dist/radio-group/index.js +3 -3
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs +3 -3
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/resizable/index.js +3 -3
- package/dist/resizable/index.js.map +1 -1
- package/dist/resizable/index.mjs +3 -3
- package/dist/resizable/index.mjs.map +1 -1
- package/dist/scroll-area/index.js +4 -4
- package/dist/scroll-area/index.js.map +1 -1
- package/dist/scroll-area/index.mjs +4 -4
- package/dist/scroll-area/index.mjs.map +1 -1
- package/dist/select/index.js +9 -9
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +9 -9
- package/dist/select/index.mjs.map +1 -1
- package/dist/separator/index.js +2 -2
- package/dist/separator/index.js.map +1 -1
- package/dist/separator/index.mjs +2 -2
- package/dist/separator/index.mjs.map +1 -1
- package/dist/sheet/index.d.ts +1 -1
- package/dist/sheet/index.js +6 -6
- package/dist/sheet/index.js.map +1 -1
- package/dist/sheet/index.mjs +6 -6
- package/dist/sheet/index.mjs.map +1 -1
- package/dist/sidebar/index.js +1 -1
- package/dist/sidebar/index.mjs +1 -1
- package/dist/{sidebar-DypRvfnS.mjs → sidebar-Ddt6hBj_.mjs} +21 -21
- package/dist/sidebar-Ddt6hBj_.mjs.map +1 -0
- package/dist/{sidebar-DlE_DZYH.js → sidebar-E9uledix.js} +21 -21
- package/dist/sidebar-E9uledix.js.map +1 -0
- package/dist/skeleton/index.js +2 -2
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +2 -2
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js +5 -5
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +5 -5
- package/dist/slider/index.mjs.map +1 -1
- package/dist/sonner-BbeMMXzI.js.map +1 -1
- package/dist/sonner-CRcX7M_W.mjs.map +1 -1
- package/dist/spinner/index.js +1 -1
- package/dist/spinner/index.js.map +1 -1
- package/dist/spinner/index.mjs +1 -1
- package/dist/spinner/index.mjs.map +1 -1
- package/dist/switch/index.js +3 -3
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +3 -3
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.d.ts +1 -1
- package/dist/table/index.js +6 -6
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +6 -6
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.d.ts +1 -1
- package/dist/tabs/index.js +4 -4
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +4 -4
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/textarea/index.js +2 -2
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +2 -2
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toggle/index.js +3 -3
- package/dist/toggle/index.js.map +1 -1
- package/dist/toggle/index.mjs +3 -3
- package/dist/toggle/index.mjs.map +1 -1
- package/dist/toggle-group/index.js +3 -3
- package/dist/toggle-group/index.js.map +1 -1
- package/dist/toggle-group/index.mjs +3 -3
- package/dist/toggle-group/index.mjs.map +1 -1
- package/dist/tooltip/index.d.ts +1 -1
- package/dist/tooltip/index.js +3 -3
- package/dist/tooltip/index.js.map +1 -1
- package/dist/tooltip/index.mjs +3 -3
- package/dist/tooltip/index.mjs.map +1 -1
- package/dist/{utils-D5ml961t.js → utils-BGuEr0aP.js} +2 -2
- package/dist/utils-BGuEr0aP.js.map +1 -0
- package/dist/{utils-Dc9Lnfye.mjs → utils-TtTqRIUX.mjs} +2 -2
- package/dist/utils-TtTqRIUX.mjs.map +1 -0
- package/package.json +2 -28
- package/dist/form-CJuxZz3w.js.map +0 -1
- package/dist/form-DaFoHvkT.mjs.map +0 -1
- package/dist/hooks/use-mobile.d.ts +0 -1
- package/dist/lib/cva.d.ts +0 -1
- package/dist/lib/index.d.ts +0 -2
- package/dist/lib/utils.d.ts +0 -2
- package/dist/sidebar-DlE_DZYH.js.map +0 -1
- package/dist/sidebar-DypRvfnS.mjs.map +0 -1
- package/dist/style.css +0 -6285
- package/dist/utils-D5ml961t.js.map +0 -1
- package/dist/utils-Dc9Lnfye.mjs.map +0 -1
package/dist/chart/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_chunk = require("../chunk-CoQrYLCe.js");
|
|
4
|
-
const require_utils = require("../utils-
|
|
4
|
+
const require_utils = require("../utils-BGuEr0aP.js");
|
|
5
5
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
6
|
let react = require("react");
|
|
7
7
|
react = require_chunk.__toESM(react);
|
|
@@ -30,7 +30,7 @@ function ChartContainer({ id, className, children, config, initialDimension = IN
|
|
|
30
30
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
31
31
|
"data-slot": "chart",
|
|
32
32
|
"data-chart": chartId,
|
|
33
|
-
className: require_utils.cn("
|
|
33
|
+
className: require_utils.cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent", className),
|
|
34
34
|
...props,
|
|
35
35
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartStyle, {
|
|
36
36
|
id: chartId,
|
|
@@ -83,16 +83,16 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
83
83
|
if (!active || !payload?.length) return null;
|
|
84
84
|
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
85
85
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
86
|
-
className: require_utils.cn("grid min-w-32 items-start gap-1.5 rounded-lg border
|
|
86
|
+
className: require_utils.cn("border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
|
|
87
87
|
children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
88
88
|
className: "grid gap-1.5",
|
|
89
89
|
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
90
90
|
const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
|
|
91
91
|
const indicatorColor = color ?? item.payload?.fill ?? item.color;
|
|
92
92
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
93
|
-
className: require_utils.cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5
|
|
93
|
+
className: require_utils.cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", indicator === "dot" && "items-center"),
|
|
94
94
|
children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
95
|
-
className: require_utils.cn("
|
|
95
|
+
className: require_utils.cn("border-(--color-border) bg-(--color-bg) shrink-0 rounded-[2px]", {
|
|
96
96
|
"h-2.5 w-2.5": indicator === "dot",
|
|
97
97
|
"w-1": indicator === "line",
|
|
98
98
|
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
@@ -111,7 +111,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
111
111
|
children: itemConfig?.label ?? item.name
|
|
112
112
|
})]
|
|
113
113
|
}), item.value != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
114
|
-
className: "font-mono font-medium
|
|
114
|
+
className: "text-foreground font-mono font-medium tabular-nums",
|
|
115
115
|
children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
|
|
116
116
|
})]
|
|
117
117
|
})] })
|
|
@@ -129,7 +129,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
|
|
|
129
129
|
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
130
130
|
const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.dataKey ?? "value"}`);
|
|
131
131
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
132
|
-
className: require_utils.cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3
|
|
132
|
+
className: require_utils.cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
|
|
133
133
|
children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
134
134
|
className: "h-2 w-2 shrink-0 rounded-[2px]",
|
|
135
135
|
style: { backgroundColor: item.color }
|
package/dist/chart/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/chart/index.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"../lib\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a <ChartContainer />\")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n className\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer\n initialDimension={initialDimension}\n >\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n <div className={cn(\"font-medium\", labelClassName)}>\n {labelFormatter(value, payload)}\n </div>\n )\n }\n\n if (!value) {\n return null\n }\n\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n <div\n className={cn(\n \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n className\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n <div\n key={index}\n className={cn(\n \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn(\n \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n {\n \"h-2.5 w-2.5\": indicator === \"dot\",\n \"w-1\": indicator === \"line\",\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\n indicator === \"dashed\",\n \"my-0.5\": nestLabel && indicator === \"dashed\",\n }\n )}\n style={\n {\n \"--color-bg\": indicatorColor,\n \"--color-border\": indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n \"flex flex-1 justify-between leading-none\",\n nestLabel ? \"items-end\" : \"items-center\"\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">\n {itemConfig?.label ?? item.name}\n </span>\n </div>\n {item.value != null && (\n <span className=\"font-mono font-medium text-foreground tabular-nums\">\n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n <div\n className={cn(\n \"flex items-center justify-center gap-4\",\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n className\n )}\n >\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n <div\n key={index}\n className={cn(\n \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color,\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n )\n })}\n </div>\n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/chart/index.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"../../lib\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode;\n icon?: React.ComponentType;\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\n )\n>;\n\ntype ChartContextProps = {\n config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n const context = React.useContext(ChartContext);\n\n if (!context) {\n throw new Error(\"useChart must be used within a <ChartContainer />\");\n }\n\n return context;\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig;\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"];\n initialDimension?: {\n width: number;\n height: number;\n };\n}) {\n const uniqueId = React.useId();\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n className,\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer\n initialDimension={initialDimension}\n >\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color,\n );\n\n if (!colorConfig.length) {\n return null;\n }\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color;\n return color ? ` --color-${key}: ${color};` : null;\n })\n .join(\"\\n\")}\n}\n`,\n )\n .join(\"\\n\"),\n }}\n />\n );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean;\n hideIndicator?: boolean;\n indicator?: \"line\" | \"dot\" | \"dashed\";\n nameKey?: string;\n labelKey?: string;\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart();\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null;\n }\n\n const [item] = payload;\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label;\n\n if (labelFormatter) {\n return (\n <div className={cn(\"font-medium\", labelClassName)}>\n {labelFormatter(value, payload)}\n </div>\n );\n }\n\n if (!value) {\n return null;\n }\n\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ]);\n\n if (!active || !payload?.length) {\n return null;\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n return (\n <div\n className={cn(\n \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n className,\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n return (\n <div\n key={index}\n className={cn(\n \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n indicator === \"dot\" && \"items-center\",\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn(\n \"border-(--color-border) bg-(--color-bg) shrink-0 rounded-[2px]\",\n {\n \"h-2.5 w-2.5\": indicator === \"dot\",\n \"w-1\": indicator === \"line\",\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\n indicator === \"dashed\",\n \"my-0.5\": nestLabel && indicator === \"dashed\",\n },\n )}\n style={\n {\n \"--color-bg\": indicatorColor,\n \"--color-border\": indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n \"flex flex-1 justify-between leading-none\",\n nestLabel ? \"items-end\" : \"items-center\",\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">\n {itemConfig?.label ?? item.name}\n </span>\n </div>\n {item.value != null && (\n <span className=\"text-foreground font-mono font-medium tabular-nums\">\n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean;\n nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart();\n\n if (!payload?.length) {\n return null;\n }\n\n return (\n <div\n className={cn(\n \"flex items-center justify-center gap-4\",\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n className,\n )}\n >\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n return (\n <div\n key={index}\n className={cn(\n \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color,\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n );\n })}\n </div>\n );\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string,\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined;\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined;\n\n let configLabelKey: string = key;\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string;\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string;\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n ChartTooltip,\n ChartTooltipContent,\n};\n"],"mappings":"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"}
|
package/dist/chart/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { t as cn } from "../utils-
|
|
2
|
+
import { t as cn } from "../utils-TtTqRIUX.mjs";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import * as RechartsPrimitive from "recharts";
|
|
@@ -26,7 +26,7 @@ function ChartContainer({ id, className, children, config, initialDimension = IN
|
|
|
26
26
|
children: /* @__PURE__ */ jsxs("div", {
|
|
27
27
|
"data-slot": "chart",
|
|
28
28
|
"data-chart": chartId,
|
|
29
|
-
className: cn("
|
|
29
|
+
className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent", className),
|
|
30
30
|
...props,
|
|
31
31
|
children: [/* @__PURE__ */ jsx(ChartStyle, {
|
|
32
32
|
id: chartId,
|
|
@@ -79,16 +79,16 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
79
79
|
if (!active || !payload?.length) return null;
|
|
80
80
|
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
81
81
|
return /* @__PURE__ */ jsxs("div", {
|
|
82
|
-
className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border
|
|
82
|
+
className: cn("border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
|
|
83
83
|
children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
|
|
84
84
|
className: "grid gap-1.5",
|
|
85
85
|
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
86
86
|
const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
|
|
87
87
|
const indicatorColor = color ?? item.payload?.fill ?? item.color;
|
|
88
88
|
return /* @__PURE__ */ jsx("div", {
|
|
89
|
-
className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5
|
|
89
|
+
className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", indicator === "dot" && "items-center"),
|
|
90
90
|
children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
|
|
91
|
-
className: cn("
|
|
91
|
+
className: cn("border-(--color-border) bg-(--color-bg) shrink-0 rounded-[2px]", {
|
|
92
92
|
"h-2.5 w-2.5": indicator === "dot",
|
|
93
93
|
"w-1": indicator === "line",
|
|
94
94
|
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
@@ -107,7 +107,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
107
107
|
children: itemConfig?.label ?? item.name
|
|
108
108
|
})]
|
|
109
109
|
}), item.value != null && /* @__PURE__ */ jsx("span", {
|
|
110
|
-
className: "font-mono font-medium
|
|
110
|
+
className: "text-foreground font-mono font-medium tabular-nums",
|
|
111
111
|
children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
|
|
112
112
|
})]
|
|
113
113
|
})] })
|
|
@@ -125,7 +125,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
|
|
|
125
125
|
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
126
126
|
const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.dataKey ?? "value"}`);
|
|
127
127
|
return /* @__PURE__ */ jsxs("div", {
|
|
128
|
-
className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3
|
|
128
|
+
className: cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
|
|
129
129
|
children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
|
|
130
130
|
className: "h-2 w-2 shrink-0 rounded-[2px]",
|
|
131
131
|
style: { backgroundColor: item.color }
|
package/dist/chart/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chart/index.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"../lib\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a <ChartContainer />\")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n className\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer\n initialDimension={initialDimension}\n >\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n <div className={cn(\"font-medium\", labelClassName)}>\n {labelFormatter(value, payload)}\n </div>\n )\n }\n\n if (!value) {\n return null\n }\n\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n <div\n className={cn(\n \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n className\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n <div\n key={index}\n className={cn(\n \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn(\n \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n {\n \"h-2.5 w-2.5\": indicator === \"dot\",\n \"w-1\": indicator === \"line\",\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\n indicator === \"dashed\",\n \"my-0.5\": nestLabel && indicator === \"dashed\",\n }\n )}\n style={\n {\n \"--color-bg\": indicatorColor,\n \"--color-border\": indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n \"flex flex-1 justify-between leading-none\",\n nestLabel ? \"items-end\" : \"items-center\"\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">\n {itemConfig?.label ?? item.name}\n </span>\n </div>\n {item.value != null && (\n <span className=\"font-mono font-medium text-foreground tabular-nums\">\n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n <div\n className={cn(\n \"flex items-center justify-center gap-4\",\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n className\n )}\n >\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n <div\n key={index}\n className={cn(\n \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color,\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n )\n })}\n </div>\n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chart/index.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"../../lib\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode;\n icon?: React.ComponentType;\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\n )\n>;\n\ntype ChartContextProps = {\n config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n const context = React.useContext(ChartContext);\n\n if (!context) {\n throw new Error(\"useChart must be used within a <ChartContainer />\");\n }\n\n return context;\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig;\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"];\n initialDimension?: {\n width: number;\n height: number;\n };\n}) {\n const uniqueId = React.useId();\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n className,\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer\n initialDimension={initialDimension}\n >\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color,\n );\n\n if (!colorConfig.length) {\n return null;\n }\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color;\n return color ? ` --color-${key}: ${color};` : null;\n })\n .join(\"\\n\")}\n}\n`,\n )\n .join(\"\\n\"),\n }}\n />\n );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean;\n hideIndicator?: boolean;\n indicator?: \"line\" | \"dot\" | \"dashed\";\n nameKey?: string;\n labelKey?: string;\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart();\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null;\n }\n\n const [item] = payload;\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label;\n\n if (labelFormatter) {\n return (\n <div className={cn(\"font-medium\", labelClassName)}>\n {labelFormatter(value, payload)}\n </div>\n );\n }\n\n if (!value) {\n return null;\n }\n\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ]);\n\n if (!active || !payload?.length) {\n return null;\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n return (\n <div\n className={cn(\n \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n className,\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n return (\n <div\n key={index}\n className={cn(\n \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n indicator === \"dot\" && \"items-center\",\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn(\n \"border-(--color-border) bg-(--color-bg) shrink-0 rounded-[2px]\",\n {\n \"h-2.5 w-2.5\": indicator === \"dot\",\n \"w-1\": indicator === \"line\",\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\n indicator === \"dashed\",\n \"my-0.5\": nestLabel && indicator === \"dashed\",\n },\n )}\n style={\n {\n \"--color-bg\": indicatorColor,\n \"--color-border\": indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n \"flex flex-1 justify-between leading-none\",\n nestLabel ? \"items-end\" : \"items-center\",\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">\n {itemConfig?.label ?? item.name}\n </span>\n </div>\n {item.value != null && (\n <span className=\"text-foreground font-mono font-medium tabular-nums\">\n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean;\n nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart();\n\n if (!payload?.length) {\n return null;\n }\n\n return (\n <div\n className={cn(\n \"flex items-center justify-center gap-4\",\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n className,\n )}\n >\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n return (\n <div\n key={index}\n className={cn(\n \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color,\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n );\n })}\n </div>\n );\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string,\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined;\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined;\n\n let configLabelKey: string = key;\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string;\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string;\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n ChartTooltip,\n ChartTooltipContent,\n};\n"],"mappings":"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"}
|
package/dist/checkbox/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
require("../chunk-CoQrYLCe.js");
|
|
4
|
-
const require_utils = require("../utils-
|
|
4
|
+
const require_utils = require("../utils-BGuEr0aP.js");
|
|
5
5
|
let lucide_react = require("lucide-react");
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
7
|
let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
|
|
@@ -9,7 +9,7 @@ let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
|
|
|
9
9
|
function Checkbox({ className, ...props }) {
|
|
10
10
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Root, {
|
|
11
11
|
"data-slot": "checkbox",
|
|
12
|
-
className: require_utils.cn("
|
|
12
|
+
className: require_utils.cn("border-input group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
13
13
|
...props,
|
|
14
14
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Indicator, {
|
|
15
15
|
"data-slot": "checkbox-indicator",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/checkbox/index.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/checkbox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { cn } from \"../../lib\";\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"border-input group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;;AAOA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAuC;AACvE,QACE,iBAAA,GAAA,kBAAA,KAAC,wBAAA,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,cAAA,GACT,qqBACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,wBAAA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,aAAA,WAAD,EAAa,CAAA;GACe,CAAA;EACP,CAAA"}
|
package/dist/checkbox/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { t as cn } from "../utils-
|
|
2
|
+
import { t as cn } from "../utils-TtTqRIUX.mjs";
|
|
3
3
|
import { CheckIcon } from "lucide-react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
|
|
@@ -7,7 +7,7 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
|
|
|
7
7
|
function Checkbox({ className, ...props }) {
|
|
8
8
|
return /* @__PURE__ */ jsx(Checkbox$1.Root, {
|
|
9
9
|
"data-slot": "checkbox",
|
|
10
|
-
className: cn("
|
|
10
|
+
className: cn("border-input group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
11
11
|
...props,
|
|
12
12
|
children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
|
|
13
13
|
"data-slot": "checkbox-indicator",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/checkbox/index.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/checkbox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { cn } from \"../../lib\";\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"border-input group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAOA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAuC;AACvE,QACE,oBAAC,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,qqBACA,UACD;EACD,GAAI;YAEJ,oBAAC,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,WAAD,EAAa,CAAA;GACe,CAAA;EACP,CAAA"}
|
|
@@ -2,4 +2,4 @@ import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
|
|
|
2
2
|
declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
declare function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
export { Collapsible,
|
|
5
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/collapsible/index.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/collapsible/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n return (\n <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n );\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n return (\n <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" {...props} />\n );\n}\n\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger };\n"],"mappings":";;;;;;AAIA,SAAS,YAAY,EAAE,GAAG,SAA0C;AAClE,QAAO,iBAAA,GAAA,kBAAA,KAAC,2BAAA,YAAqB,MAAtB;EAA2B,aAAU;EAAc,GAAI;EAAS,CAAA;;AAGzE,SAAS,mBAAmB,EAAE,GAAG,SAA6C;AAC5E,QACE,iBAAA,GAAA,kBAAA,KAAC,2BAAA,YAAqB,SAAtB;EAA8B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAI/E,SAAS,mBAAmB,EAAE,GAAG,SAA2C;AAC1E,QACE,iBAAA,GAAA,kBAAA,KAAC,2BAAA,YAAqB,OAAtB;EAA4B,aAAU;EAAsB,GAAI;EAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/collapsible/index.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/collapsible/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n return (\n <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n );\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n return (\n <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" {...props} />\n );\n}\n\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger };\n"],"mappings":";;;;AAIA,SAAS,YAAY,EAAE,GAAG,SAA0C;AAClE,QAAO,oBAAC,cAAqB,MAAtB;EAA2B,aAAU;EAAc,GAAI;EAAS,CAAA;;AAGzE,SAAS,mBAAmB,EAAE,GAAG,SAA6C;AAC5E,QACE,oBAAC,cAAqB,SAAtB;EAA8B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAI/E,SAAS,mBAAmB,EAAE,GAAG,SAA2C;AAC1E,QACE,oBAAC,cAAqB,OAAtB;EAA4B,aAAU;EAAsB,GAAI;EAAS,CAAA"}
|
package/dist/combobox/index.d.ts
CHANGED
|
@@ -21,4 +21,4 @@ declare function ComboboxChip({ className, children, showRemove, ...props }: Com
|
|
|
21
21
|
}): import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
|
|
24
|
-
export { Combobox,
|
|
24
|
+
export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
|
package/dist/combobox/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_chunk = require("../chunk-CoQrYLCe.js");
|
|
4
|
-
const require_utils = require("../utils-
|
|
4
|
+
const require_utils = require("../utils-BGuEr0aP.js");
|
|
5
5
|
const require_button = require("../button/index.js");
|
|
6
6
|
const require_input_group = require("../input-group/index.js");
|
|
7
7
|
let lucide_react = require("lucide-react");
|
|
@@ -22,7 +22,7 @@ function ComboboxTrigger({ className, children, ...props }) {
|
|
|
22
22
|
"data-slot": "combobox-trigger",
|
|
23
23
|
className: require_utils.cn("[&_svg:not([class*='size-'])]:size-4", className),
|
|
24
24
|
...props,
|
|
25
|
-
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "pointer-events-none size-4
|
|
25
|
+
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" })]
|
|
26
26
|
});
|
|
27
27
|
}
|
|
28
28
|
function ComboboxClear({ className, ...props }) {
|
|
@@ -71,7 +71,7 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
|
|
|
71
71
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.Popup, {
|
|
72
72
|
"data-slot": "combobox-content",
|
|
73
73
|
"data-chips": !!anchor,
|
|
74
|
-
className: require_utils.cn("group/combobox-content
|
|
74
|
+
className: require_utils.cn("group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
|
|
75
75
|
...props
|
|
76
76
|
})
|
|
77
77
|
}) });
|
|
@@ -79,14 +79,14 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
|
|
|
79
79
|
function ComboboxList({ className, ...props }) {
|
|
80
80
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.List, {
|
|
81
81
|
"data-slot": "combobox-list",
|
|
82
|
-
className: require_utils.cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1
|
|
82
|
+
className: require_utils.cn("no-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1", className),
|
|
83
83
|
...props
|
|
84
84
|
});
|
|
85
85
|
}
|
|
86
86
|
function ComboboxItem({ className, children, ...props }) {
|
|
87
87
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react.Combobox.Item, {
|
|
88
88
|
"data-slot": "combobox-item",
|
|
89
|
-
className: require_utils.cn("
|
|
89
|
+
className: require_utils.cn("outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
90
90
|
...props,
|
|
91
91
|
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.ItemIndicator, {
|
|
92
92
|
render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
|
|
@@ -104,7 +104,7 @@ function ComboboxGroup({ className, ...props }) {
|
|
|
104
104
|
function ComboboxLabel({ className, ...props }) {
|
|
105
105
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.GroupLabel, {
|
|
106
106
|
"data-slot": "combobox-label",
|
|
107
|
-
className: require_utils.cn("px-2 py-1.5 text-xs
|
|
107
|
+
className: require_utils.cn("text-muted-foreground px-2 py-1.5 text-xs", className),
|
|
108
108
|
...props
|
|
109
109
|
});
|
|
110
110
|
}
|
|
@@ -117,28 +117,28 @@ function ComboboxCollection({ ...props }) {
|
|
|
117
117
|
function ComboboxEmpty({ className, ...props }) {
|
|
118
118
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.Empty, {
|
|
119
119
|
"data-slot": "combobox-empty",
|
|
120
|
-
className: require_utils.cn("hidden w-full justify-center py-2 text-center text-sm
|
|
120
|
+
className: require_utils.cn("text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm", className),
|
|
121
121
|
...props
|
|
122
122
|
});
|
|
123
123
|
}
|
|
124
124
|
function ComboboxSeparator({ className, ...props }) {
|
|
125
125
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.Separator, {
|
|
126
126
|
"data-slot": "combobox-separator",
|
|
127
|
-
className: require_utils.cn("-mx-1 my-1 h-px
|
|
127
|
+
className: require_utils.cn("bg-border -mx-1 my-1 h-px", className),
|
|
128
128
|
...props
|
|
129
129
|
});
|
|
130
130
|
}
|
|
131
131
|
function ComboboxChips({ className, ...props }) {
|
|
132
132
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.Chips, {
|
|
133
133
|
"data-slot": "combobox-chips",
|
|
134
|
-
className: require_utils.cn("
|
|
134
|
+
className: require_utils.cn("border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors", className),
|
|
135
135
|
...props
|
|
136
136
|
});
|
|
137
137
|
}
|
|
138
138
|
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
139
139
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react.Combobox.Chip, {
|
|
140
140
|
"data-slot": "combobox-chip",
|
|
141
|
-
className: require_utils.cn("
|
|
141
|
+
className: require_utils.cn("bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium", className),
|
|
142
142
|
...props,
|
|
143
143
|
children: [children, showRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.ChipRemove, {
|
|
144
144
|
render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/combobox/index.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"../lib\"\nimport { Button } from \"../button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"../input-group\"\nimport { ChevronDownIcon, XIcon, CheckIcon } from \"lucide-react\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n {...props}\n >\n {children}\n <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n </ComboboxPrimitive.Trigger>\n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(className)}\n {...props}\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.Clear>\n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean\n showClear?: boolean\n}) {\n return (\n <InputGroup className={cn(\"w-auto\", className)}>\n <ComboboxPrimitive.Input\n render={<InputGroupInput disabled={disabled} />}\n {...props}\n />\n <InputGroupAddon align=\"inline-end\">\n {showTrigger && (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && <ComboboxClear disabled={disabled} />}\n </InputGroupAddon>\n {children}\n </InputGroup>\n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n <ComboboxPrimitive.Portal>\n <ComboboxPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n data-chips={!!anchor}\n className={cn(\"group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", className )}\n {...props}\n />\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-item\"\n className={cn(\n \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n ComboboxPrimitive.Chips.Props) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean\n}) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n className\n )}\n {...props}\n >\n {children}\n {showRemove && (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ChipRemove>\n )}\n </ComboboxPrimitive.Chip>\n )\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n )\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxGroup,\n ComboboxLabel,\n ComboboxCollection,\n ComboboxEmpty,\n ComboboxSeparator,\n ComboboxChips,\n ComboboxChip,\n ComboboxChipsInput,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/combobox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport * as React from \"react\";\n\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"../../lib\";\nimport { Button } from \"../button\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"../input-group\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n {...props}\n >\n {children}\n <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n </ComboboxPrimitive.Trigger>\n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(className)}\n {...props}\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.Clear>\n );\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean;\n showClear?: boolean;\n}) {\n return (\n <InputGroup className={cn(\"w-auto\", className)}>\n <ComboboxPrimitive.Input\n render={<InputGroupInput disabled={disabled} />}\n {...props}\n />\n <InputGroupAddon align=\"inline-end\">\n {showTrigger && (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && <ComboboxClear disabled={disabled} />}\n </InputGroupAddon>\n {children}\n </InputGroup>\n );\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n <ComboboxPrimitive.Portal>\n <ComboboxPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n data-chips={!!anchor}\n className={cn(\n \"group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n className,\n )}\n {...props}\n />\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"no-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-item\"\n className={cn(\n \"outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n ComboboxPrimitive.Chips.Props) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean;\n}) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium\",\n className,\n )}\n {...props}\n >\n {children}\n {showRemove && (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ChipRemove>\n )}\n </ComboboxPrimitive.Chip>\n );\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null);\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n};\n"],"mappings":"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"}
|