@siyahi/ui 0.1.9-next.3 → 0.1.9-next.31
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/DESIGN.md +251 -0
- package/README.md +94 -177
- package/THIRD_PARTY_NOTICES.md +11 -11
- package/agents/examples/accordion.tsx +39 -0
- package/agents/examples/alert.tsx +24 -0
- package/agents/examples/app-sidebar.tsx +40 -0
- package/agents/examples/avatar.tsx +24 -0
- package/agents/examples/badge.tsx +26 -0
- package/agents/examples/bar-list-labels.tsx +22 -0
- package/agents/examples/bar-list-sides.tsx +40 -0
- package/agents/examples/bar-list.tsx +24 -0
- package/agents/examples/breadcrumb.tsx +28 -0
- package/agents/examples/button-states.tsx +23 -0
- package/agents/examples/button.tsx +21 -0
- package/agents/examples/calendar.tsx +11 -0
- package/agents/examples/callout.tsx +33 -0
- package/agents/examples/card.tsx +36 -0
- package/agents/examples/change-bar.tsx +104 -0
- package/agents/examples/change-grid-money.tsx +36 -0
- package/agents/examples/change-grid.tsx +43 -0
- package/agents/examples/chart-area-log.tsx +45 -0
- package/agents/examples/chart-area.tsx +39 -0
- package/agents/examples/chart-bar-flows.tsx +32 -0
- package/agents/examples/chart-bar-hourly.tsx +28 -0
- package/agents/examples/chart-bar-losses.tsx +29 -0
- package/agents/examples/chart-bar-teams.tsx +72 -0
- package/agents/examples/chart-bar-years.tsx +42 -0
- package/agents/examples/chart-bar.tsx +56 -0
- package/agents/examples/chart-category-ticks.tsx +50 -0
- package/agents/examples/chart-line-events.tsx +47 -0
- package/agents/examples/chart-line-forecast.tsx +36 -0
- package/agents/examples/chart-line-log.tsx +39 -0
- package/agents/examples/chart-line-quiet.tsx +114 -0
- package/agents/examples/chart-line-timeline.tsx +41 -0
- package/agents/examples/chart-line.tsx +57 -0
- package/agents/examples/chart-panels.tsx +94 -0
- package/agents/examples/code-block.tsx +40 -0
- package/agents/examples/collapsible.tsx +18 -0
- package/agents/examples/command.tsx +29 -0
- package/agents/examples/context-menu.tsx +17 -0
- package/agents/examples/copy-button.tsx +8 -0
- package/agents/examples/data-bar.tsx +114 -0
- package/agents/examples/data-table-compact.tsx +93 -0
- package/agents/examples/data-table-filters.tsx +103 -0
- package/agents/examples/data-table.tsx +96 -0
- package/agents/examples/delta.tsx +18 -0
- package/agents/examples/dialog.tsx +28 -0
- package/agents/examples/distribution-bar-budget.tsx +30 -0
- package/agents/examples/distribution-bar-tug.tsx +74 -0
- package/agents/examples/drawdown-chart.tsx +35 -0
- package/agents/examples/dropdown-menu.tsx +31 -0
- package/agents/examples/field.tsx +108 -0
- package/agents/examples/formatters.tsx +42 -0
- package/agents/examples/heatmap-calendar-signed.tsx +67 -0
- package/agents/examples/heatmap-calendar.tsx +62 -0
- package/agents/examples/heatmap-status.tsx +61 -0
- package/agents/examples/heatmap-weekday.tsx +72 -0
- package/agents/examples/histogram-chart.tsx +28 -0
- package/agents/examples/input-states.tsx +23 -0
- package/agents/examples/input.tsx +17 -0
- package/agents/examples/local-time.tsx +14 -0
- package/agents/examples/metric-strip.tsx +46 -0
- package/agents/examples/overview-dashboard.tsx +180 -0
- package/agents/examples/page-hero.tsx +38 -0
- package/agents/examples/page-section.tsx +52 -0
- package/agents/examples/popover.tsx +23 -0
- package/agents/examples/price-chart.tsx +32 -0
- package/agents/examples/progress-tone.tsx +29 -0
- package/agents/examples/progress.tsx +10 -0
- package/agents/examples/range-position-table.tsx +113 -0
- package/agents/examples/range-position.tsx +55 -0
- package/agents/examples/scatter-chart-quadrants.tsx +63 -0
- package/agents/examples/scatter-chart-scales.tsx +46 -0
- package/agents/examples/scatter-chart.tsx +78 -0
- package/agents/examples/scroll-area.tsx +22 -0
- package/agents/examples/section-cards-select.tsx +28 -0
- package/agents/examples/section-cards-trend.tsx +32 -0
- package/agents/examples/section-cards.tsx +48 -0
- package/agents/examples/select.tsx +27 -0
- package/agents/examples/separator.tsx +13 -0
- package/agents/examples/sheet.tsx +15 -0
- package/agents/examples/skeleton.tsx +11 -0
- package/agents/examples/slider.tsx +5 -0
- package/agents/examples/slope-chart-market.tsx +33 -0
- package/agents/examples/slope-chart.tsx +26 -0
- package/agents/examples/stale-blocks.tsx +56 -0
- package/agents/examples/surfaces.tsx +116 -0
- package/agents/examples/table.tsx +60 -0
- package/agents/examples/tabs.tsx +16 -0
- package/agents/examples/target-rows.tsx +74 -0
- package/agents/examples/toggle-group.tsx +12 -0
- package/agents/examples/toggle.tsx +11 -0
- package/agents/examples/tooltip.tsx +13 -0
- package/agents/examples/treemap.tsx +93 -0
- package/agents/examples/waterfall-chart-stores.tsx +27 -0
- package/agents/examples/waterfall-chart.tsx +37 -0
- package/agents/manifest.json +1391 -0
- package/agents/report-rules.json +7 -0
- package/dist/components/registry/charts/area-chart-card.d.ts +7 -3
- package/dist/components/registry/charts/area-chart-card.js +56 -10
- package/dist/components/registry/charts/bar-chart-card.d.ts +1 -1
- package/dist/components/registry/charts/bar-chart-card.js +20 -22
- package/dist/components/registry/charts/line-chart-card.d.ts +3 -3
- package/dist/components/registry/charts/line-chart-card.js +44 -9
- package/dist/components/registry/dashboard-01/section-cards.d.ts +6 -0
- package/dist/components/registry/dashboard-01/section-cards.js +51 -35
- package/dist/components/registry/dashboardcn/bar-list.js +17 -10
- package/dist/components/registry/dashboardcn/distribution-bar.js +6 -4
- package/dist/components/registry/dashboardcn/kpi-row-card.d.ts +29 -0
- package/dist/components/registry/dashboardcn/kpi-row-card.js +81 -0
- package/dist/components/registry/dashboardcn/sparkline.d.ts +22 -0
- package/dist/components/registry/dashboardcn/sparkline.js +117 -0
- package/dist/components/registry/heatmap/calendar-heatmap.d.ts +11 -3
- package/dist/components/registry/heatmap/calendar-heatmap.js +164 -45
- package/dist/components/registry/heatmap/status-heatmap.d.ts +5 -3
- package/dist/components/registry/heatmap/status-heatmap.js +115 -54
- package/dist/components/registry/heatmap/weekday-heatmap.d.ts +9 -3
- package/dist/components/registry/heatmap/weekday-heatmap.js +83 -53
- package/dist/components/registry/niko-table/core/data-table-context.d.ts +18 -1
- package/dist/components/registry/niko-table/core/data-table-context.js +7 -1
- package/dist/components/registry/niko-table/core/data-table-grouped-row.js +3 -1
- package/dist/components/registry/niko-table/core/data-table-root.js +39 -4
- package/dist/components/registry/niko-table/core/data-table-structure.js +17 -12
- package/dist/components/registry/niko-table/core/data-table.d.ts +2 -2
- package/dist/components/registry/niko-table/core/data-table.js +5 -1
- package/dist/components/registry/niko-table/filters/table-faceted-filter.js +5 -5
- package/dist/components/registry/niko-table/filters/table-search-filter.js +1 -1
- package/dist/components/registry/niko-table/lib/flex-columns.d.ts +1 -1
- package/dist/components/registry/niko-table/lib/flex-columns.js +3 -3
- package/dist/components/registry/niko-table/lib/styles.d.ts +1 -1
- package/dist/components/registry/niko-table/lib/styles.js +3 -3
- package/dist/components/registry/niko-table/types/index.d.ts +9 -0
- package/dist/components/registry/niko-table/ui/table.js +2 -2
- package/dist/components/registry/sidebar-07/app-sidebar.d.ts +1 -1
- package/dist/components/registry/sidebar-07/app-sidebar.js +3 -1
- package/dist/components/registry/sidebar-07/nav-main.d.ts +2 -1
- package/dist/components/registry/sidebar-07/nav-main.js +16 -3
- package/dist/components/siyahi/callout.d.ts +17 -0
- package/dist/components/siyahi/callout.js +34 -0
- package/dist/components/siyahi/change-bar.d.ts +21 -0
- package/dist/components/siyahi/change-bar.js +35 -0
- package/dist/components/siyahi/change-grid.d.ts +31 -0
- package/dist/components/siyahi/change-grid.js +74 -0
- package/dist/components/siyahi/data-bar.d.ts +19 -0
- package/dist/components/siyahi/data-bar.js +29 -0
- package/dist/components/siyahi/data-table-compact-columns-toggle.d.ts +4 -0
- package/dist/components/siyahi/data-table-compact-columns-toggle.js +19 -0
- package/dist/components/siyahi/data-table-footnote.d.ts +12 -0
- package/dist/components/siyahi/data-table-footnote.js +35 -0
- package/dist/components/siyahi/default-sidebar-open.d.ts +8 -0
- package/dist/components/siyahi/default-sidebar-open.js +13 -0
- package/dist/components/siyahi/delta.d.ts +5 -1
- package/dist/components/siyahi/delta.js +14 -9
- package/dist/components/siyahi/drawdown-chart.d.ts +34 -0
- package/dist/components/siyahi/drawdown-chart.js +102 -0
- package/dist/components/siyahi/histogram-chart.d.ts +57 -0
- package/dist/components/siyahi/histogram-chart.js +134 -0
- package/dist/components/siyahi/page-hero.d.ts +23 -0
- package/dist/components/siyahi/page-hero.js +43 -0
- package/dist/components/siyahi/page-section.d.ts +4 -1
- package/dist/components/siyahi/page-section.js +6 -3
- package/dist/components/siyahi/page-toc.d.ts +20 -0
- package/dist/components/siyahi/page-toc.js +76 -0
- package/dist/components/siyahi/panel-grid.d.ts +24 -0
- package/dist/components/siyahi/panel-grid.js +37 -0
- package/dist/components/siyahi/quote.d.ts +12 -0
- package/dist/components/siyahi/quote.js +23 -0
- package/dist/components/siyahi/range-position.d.ts +24 -0
- package/dist/components/siyahi/range-position.js +105 -0
- package/dist/components/siyahi/scale-toggle.d.ts +32 -0
- package/dist/components/siyahi/scale-toggle.js +61 -0
- package/dist/components/siyahi/scatter-chart.d.ts +69 -0
- package/dist/components/siyahi/scatter-chart.js +395 -0
- package/dist/components/siyahi/siyahi-provider.d.ts +15 -2
- package/dist/components/siyahi/siyahi-provider.js +17 -4
- package/dist/components/siyahi/slope-chart.d.ts +35 -0
- package/dist/components/siyahi/slope-chart.js +159 -0
- package/dist/components/siyahi/stale-note.d.ts +9 -0
- package/dist/components/siyahi/stale-note.js +12 -0
- package/dist/components/siyahi/status-alert.d.ts +15 -0
- package/dist/components/siyahi/status-alert.js +29 -0
- package/dist/components/siyahi/status-badge.d.ts +15 -0
- package/dist/components/siyahi/status-badge.js +24 -0
- package/dist/components/siyahi/target-rows.d.ts +34 -0
- package/dist/components/siyahi/target-rows.js +97 -0
- package/dist/components/siyahi/tone-progress.d.ts +1 -1
- package/dist/components/siyahi/tone-progress.js +1 -1
- package/dist/components/siyahi/treemap.d.ts +8 -5
- package/dist/components/siyahi/treemap.js +80 -34
- package/dist/components/siyahi/waterfall-chart.d.ts +51 -0
- package/dist/components/siyahi/waterfall-chart.js +147 -0
- package/dist/components/ui/accordion.js +5 -5
- package/dist/components/ui/alert.js +2 -2
- package/dist/components/ui/badge.js +1 -1
- package/dist/components/ui/breadcrumb.js +2 -2
- package/dist/components/ui/button.js +10 -10
- package/dist/components/ui/calendar.js +1 -1
- package/dist/components/ui/card.js +4 -4
- package/dist/components/ui/chart.js +1 -1
- package/dist/components/ui/code-block.js +13 -12
- package/dist/components/ui/command.js +7 -6
- package/dist/components/ui/context-menu.js +7 -7
- package/dist/components/ui/dialog.js +5 -5
- package/dist/components/ui/dropdown-menu.js +8 -8
- package/dist/components/ui/field.d.ts +26 -0
- package/dist/components/ui/field.js +109 -0
- package/dist/components/ui/input-group.js +11 -11
- package/dist/components/ui/input.js +1 -1
- package/dist/components/ui/label.d.ts +5 -0
- package/dist/components/ui/label.js +13 -0
- package/dist/components/ui/popover.js +3 -3
- package/dist/components/ui/progress.js +1 -1
- package/dist/components/ui/select.js +6 -6
- package/dist/components/ui/sheet.js +5 -5
- package/dist/components/ui/sidebar.js +17 -18
- package/dist/components/ui/skeleton.js +1 -1
- package/dist/components/ui/slider.js +2 -2
- package/dist/components/ui/table.js +2 -2
- package/dist/components/ui/tabs.js +2 -2
- package/dist/components/ui/textarea.js +1 -1
- package/dist/components/ui/toggle-group.js +2 -2
- package/dist/components/ui/toggle.js +4 -4
- package/dist/components/ui/tooltip.js +2 -2
- package/dist/index.d.ts +35 -8
- package/dist/index.js +30 -4
- package/dist/lib/chart-frame.d.ts +51 -7
- package/dist/lib/chart-frame.js +390 -133
- package/dist/lib/chart-marks.d.ts +83 -0
- package/dist/lib/chart-marks.js +216 -0
- package/dist/lib/chart-series.d.ts +42 -10
- package/dist/lib/compact-columns.d.ts +19 -0
- package/dist/lib/compact-columns.js +55 -0
- package/dist/lib/fit-text.d.ts +6 -0
- package/dist/lib/fit-text.js +11 -0
- package/dist/lib/format.d.ts +8 -3
- package/dist/lib/format.js +55 -17
- package/dist/lib/heat.d.ts +7 -0
- package/dist/lib/heat.js +14 -0
- package/dist/lib/heatmap-navigation.d.ts +8 -0
- package/dist/lib/heatmap-navigation.js +49 -0
- package/dist/lib/scatter.d.ts +88 -0
- package/dist/lib/scatter.js +179 -0
- package/dist/lib/ticks.d.ts +27 -0
- package/dist/lib/ticks.js +67 -0
- package/dist/lib/tone.d.ts +36 -0
- package/dist/lib/tone.js +35 -0
- package/dist/lib/treemap.d.ts +0 -5
- package/dist/lib/treemap.js +1 -11
- package/dist/lib/use-element-width.d.ts +5 -0
- package/dist/lib/use-element-width.js +15 -0
- package/package.json +5 -1
- package/registry.lock.json +16 -0
- package/report.css +63 -47
- package/styles/siyahi.css +708 -55
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { Label } from "./label.js";
|
|
2
|
+
import { Separator } from "./separator.js";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { cva } from "class-variance-authority";
|
|
7
|
+
//#region src/components/ui/field.tsx
|
|
8
|
+
function FieldSet({ className, ...props }) {
|
|
9
|
+
return /* @__PURE__ */ jsx("fieldset", {
|
|
10
|
+
"data-slot": "field-set",
|
|
11
|
+
className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx("legend", {
|
|
17
|
+
"data-slot": "field-legend",
|
|
18
|
+
"data-variant": variant,
|
|
19
|
+
className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className),
|
|
20
|
+
...props
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function FieldGroup({ className, ...props }) {
|
|
24
|
+
return /* @__PURE__ */ jsx("div", {
|
|
25
|
+
"data-slot": "field-group",
|
|
26
|
+
className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
|
|
31
|
+
variants: { orientation: {
|
|
32
|
+
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
|
33
|
+
horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
34
|
+
responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
35
|
+
} },
|
|
36
|
+
defaultVariants: { orientation: "vertical" }
|
|
37
|
+
});
|
|
38
|
+
function Field({ className, orientation = "vertical", ...props }) {
|
|
39
|
+
return /* @__PURE__ */ jsx("div", {
|
|
40
|
+
role: "group",
|
|
41
|
+
"data-slot": "field",
|
|
42
|
+
"data-orientation": orientation,
|
|
43
|
+
className: cn(fieldVariants({ orientation }), className),
|
|
44
|
+
...props
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
function FieldContent({ className, ...props }) {
|
|
48
|
+
return /* @__PURE__ */ jsx("div", {
|
|
49
|
+
"data-slot": "field-content",
|
|
50
|
+
className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
|
|
51
|
+
...props
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
function FieldLabel({ className, ...props }) {
|
|
55
|
+
return /* @__PURE__ */ jsx(Label, {
|
|
56
|
+
"data-slot": "field-label",
|
|
57
|
+
className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
|
|
58
|
+
...props
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
function FieldTitle({ className, ...props }) {
|
|
62
|
+
return /* @__PURE__ */ jsx("div", {
|
|
63
|
+
"data-slot": "field-label",
|
|
64
|
+
className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className),
|
|
65
|
+
...props
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
function FieldDescription({ className, ...props }) {
|
|
69
|
+
return /* @__PURE__ */ jsx("p", {
|
|
70
|
+
"data-slot": "field-description",
|
|
71
|
+
className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
|
|
72
|
+
...props
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
function FieldSeparator({ children, className, ...props }) {
|
|
76
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
77
|
+
"data-slot": "field-separator",
|
|
78
|
+
"data-content": !!children,
|
|
79
|
+
className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
|
|
80
|
+
...props,
|
|
81
|
+
children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
|
|
82
|
+
className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
|
|
83
|
+
"data-slot": "field-separator-content",
|
|
84
|
+
children
|
|
85
|
+
})]
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
function FieldError({ className, children, errors, ...props }) {
|
|
89
|
+
const content = useMemo(() => {
|
|
90
|
+
if (children) return children;
|
|
91
|
+
if (!errors?.length) return null;
|
|
92
|
+
const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
|
|
93
|
+
if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
|
|
94
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
95
|
+
className: "ml-4 flex list-disc flex-col gap-1",
|
|
96
|
+
children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
|
|
97
|
+
});
|
|
98
|
+
}, [children, errors]);
|
|
99
|
+
if (!content) return null;
|
|
100
|
+
return /* @__PURE__ */ jsx("div", {
|
|
101
|
+
role: "alert",
|
|
102
|
+
"data-slot": "field-error",
|
|
103
|
+
className: cn("text-sm font-normal text-destructive", className),
|
|
104
|
+
...props,
|
|
105
|
+
children: content
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
//#endregion
|
|
109
|
+
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
|
|
@@ -11,16 +11,16 @@ function InputGroup({ className, ...props }) {
|
|
|
11
11
|
return /* @__PURE__ */ jsx("div", {
|
|
12
12
|
"data-slot": "input-group",
|
|
13
13
|
role: "group",
|
|
14
|
-
className: cn("group/input-group relative flex h-
|
|
14
|
+
className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
|
|
15
15
|
...props
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
|
-
const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-
|
|
18
|
+
const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
|
|
19
19
|
variants: { align: {
|
|
20
|
-
"inline-start": "order-first pl-
|
|
21
|
-
"inline-end": "order-last pr-
|
|
22
|
-
"block-start": "order-first w-full justify-start px-
|
|
23
|
-
"block-end": "order-last w-full justify-start px-
|
|
20
|
+
"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
|
21
|
+
"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
|
22
|
+
"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
|
23
|
+
"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
|
|
24
24
|
} },
|
|
25
25
|
defaultVariants: { align: "inline-start" }
|
|
26
26
|
});
|
|
@@ -37,11 +37,11 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
|
|
|
37
37
|
...props
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
const inputGroupButtonVariants = cva("flex items-center gap-2
|
|
40
|
+
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
|
|
41
41
|
variants: { size: {
|
|
42
|
-
xs: "h-6 gap-1 rounded-
|
|
42
|
+
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
43
43
|
sm: "",
|
|
44
|
-
"icon-xs": "size-6 rounded-
|
|
44
|
+
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
|
45
45
|
"icon-sm": "size-8 p-0 has-[>svg]:p-0"
|
|
46
46
|
} },
|
|
47
47
|
defaultVariants: { size: "xs" }
|
|
@@ -64,14 +64,14 @@ function InputGroupText({ className, ...props }) {
|
|
|
64
64
|
function InputGroupInput({ className, ...props }) {
|
|
65
65
|
return /* @__PURE__ */ jsx(Input, {
|
|
66
66
|
"data-slot": "input-group-control",
|
|
67
|
-
className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className),
|
|
67
|
+
className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
|
|
68
68
|
...props
|
|
69
69
|
});
|
|
70
70
|
}
|
|
71
71
|
function InputGroupTextarea({ className, ...props }) {
|
|
72
72
|
return /* @__PURE__ */ jsx(Textarea, {
|
|
73
73
|
"data-slot": "input-group-control",
|
|
74
|
-
className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2
|
|
74
|
+
className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
|
|
75
75
|
...props
|
|
76
76
|
});
|
|
77
77
|
}
|
|
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }) {
|
|
|
7
7
|
return /* @__PURE__ */ jsx(Input$1, {
|
|
8
8
|
type,
|
|
9
9
|
"data-slot": "input",
|
|
10
|
-
className: cn("h-
|
|
10
|
+
className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
11
11
|
...props
|
|
12
12
|
});
|
|
13
13
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { cn } from "cn";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
//#region src/components/ui/label.tsx
|
|
5
|
+
function Label({ className, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("label", {
|
|
7
|
+
"data-slot": "label",
|
|
8
|
+
className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
//#endregion
|
|
13
|
+
export { Label };
|
|
@@ -24,7 +24,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
|
|
|
24
24
|
className: "isolate z-50",
|
|
25
25
|
children: /* @__PURE__ */ jsx(Popover$1.Popup, {
|
|
26
26
|
"data-slot": "popover-content",
|
|
27
|
-
className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-
|
|
27
|
+
className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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-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),
|
|
28
28
|
...props
|
|
29
29
|
})
|
|
30
30
|
}) });
|
|
@@ -32,14 +32,14 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
|
|
|
32
32
|
function PopoverHeader({ className, ...props }) {
|
|
33
33
|
return /* @__PURE__ */ jsx("div", {
|
|
34
34
|
"data-slot": "popover-header",
|
|
35
|
-
className: cn("flex flex-col gap-
|
|
35
|
+
className: cn("flex flex-col gap-0.5 text-sm", className),
|
|
36
36
|
...props
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
39
|
function PopoverTitle({ className, ...props }) {
|
|
40
40
|
return /* @__PURE__ */ jsx(Popover$1.Title, {
|
|
41
41
|
"data-slot": "popover-title",
|
|
42
|
-
className: cn("
|
|
42
|
+
className: cn("font-medium", className),
|
|
43
43
|
...props
|
|
44
44
|
});
|
|
45
45
|
}
|
|
@@ -14,7 +14,7 @@ function Progress({ className, children, value, ...props }) {
|
|
|
14
14
|
}
|
|
15
15
|
function ProgressTrack({ className, ...props }) {
|
|
16
16
|
return /* @__PURE__ */ jsx(Progress$1.Track, {
|
|
17
|
-
className: cn("relative flex h-
|
|
17
|
+
className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className),
|
|
18
18
|
"data-slot": "progress-track",
|
|
19
19
|
...props
|
|
20
20
|
});
|
|
@@ -9,7 +9,7 @@ const Select = Select$1.Root;
|
|
|
9
9
|
function SelectGroup({ className, ...props }) {
|
|
10
10
|
return /* @__PURE__ */ jsx(Select$1.Group, {
|
|
11
11
|
"data-slot": "select-group",
|
|
12
|
-
className: cn("scroll-my-1
|
|
12
|
+
className: cn("scroll-my-1 p-1", className),
|
|
13
13
|
...props
|
|
14
14
|
});
|
|
15
15
|
}
|
|
@@ -24,7 +24,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
|
24
24
|
return /* @__PURE__ */ jsxs(Select$1.Trigger, {
|
|
25
25
|
"data-slot": "select-trigger",
|
|
26
26
|
"data-size": size,
|
|
27
|
-
className: cn("flex w-fit items-center justify-between gap-1.5 rounded-
|
|
27
|
+
className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
28
28
|
...props,
|
|
29
29
|
children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
|
|
30
30
|
});
|
|
@@ -40,7 +40,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
|
|
|
40
40
|
children: /* @__PURE__ */ jsxs(Select$1.Popup, {
|
|
41
41
|
"data-slot": "select-content",
|
|
42
42
|
"data-align-trigger": alignItemWithTrigger,
|
|
43
|
-
className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-
|
|
43
|
+
className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-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),
|
|
44
44
|
...props,
|
|
45
45
|
children: [
|
|
46
46
|
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
@@ -53,14 +53,14 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
|
|
|
53
53
|
function SelectLabel({ className, ...props }) {
|
|
54
54
|
return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
|
|
55
55
|
"data-slot": "select-label",
|
|
56
|
-
className: cn("px-
|
|
56
|
+
className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
|
|
57
57
|
...props
|
|
58
58
|
});
|
|
59
59
|
}
|
|
60
60
|
function SelectItem({ className, children, ...props }) {
|
|
61
61
|
return /* @__PURE__ */ jsxs(Select$1.Item, {
|
|
62
62
|
"data-slot": "select-item",
|
|
63
|
-
className: cn("relative flex w-full cursor-default items-center gap-
|
|
63
|
+
className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
|
|
64
64
|
...props,
|
|
65
65
|
children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
|
|
66
66
|
className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
|
|
@@ -74,7 +74,7 @@ function SelectItem({ className, children, ...props }) {
|
|
|
74
74
|
function SelectSeparator({ className, ...props }) {
|
|
75
75
|
return /* @__PURE__ */ jsx(Select$1.Separator, {
|
|
76
76
|
"data-slot": "select-separator",
|
|
77
|
-
className: cn("pointer-events-none -mx-1
|
|
77
|
+
className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
|
|
78
78
|
...props
|
|
79
79
|
});
|
|
80
80
|
}
|
|
@@ -33,7 +33,7 @@ function SheetPortal({ ...props }) {
|
|
|
33
33
|
function SheetOverlay({ className, ...props }) {
|
|
34
34
|
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
35
35
|
"data-slot": "sheet-overlay",
|
|
36
|
-
className: cn("fixed inset-0 z-50 bg-black/
|
|
36
|
+
className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className),
|
|
37
37
|
...props
|
|
38
38
|
});
|
|
39
39
|
}
|
|
@@ -41,13 +41,13 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
|
|
|
41
41
|
return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
42
42
|
"data-slot": "sheet-content",
|
|
43
43
|
"data-side": side,
|
|
44
|
-
className: cn("fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-
|
|
44
|
+
className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
|
|
45
45
|
...props,
|
|
46
46
|
children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
|
|
47
47
|
"data-slot": "sheet-close",
|
|
48
48
|
render: /* @__PURE__ */ jsx(Button, {
|
|
49
49
|
variant: "ghost",
|
|
50
|
-
className: "absolute top-
|
|
50
|
+
className: "absolute top-3 right-3",
|
|
51
51
|
size: "icon-sm"
|
|
52
52
|
}),
|
|
53
53
|
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
@@ -60,14 +60,14 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
|
|
|
60
60
|
function SheetHeader({ className, ...props }) {
|
|
61
61
|
return /* @__PURE__ */ jsx("div", {
|
|
62
62
|
"data-slot": "sheet-header",
|
|
63
|
-
className: cn("flex flex-col gap-
|
|
63
|
+
className: cn("flex flex-col gap-0.5 p-4", className),
|
|
64
64
|
...props
|
|
65
65
|
});
|
|
66
66
|
}
|
|
67
67
|
function SheetFooter({ className, ...props }) {
|
|
68
68
|
return /* @__PURE__ */ jsx("div", {
|
|
69
69
|
"data-slot": "sheet-footer",
|
|
70
|
-
className: cn("mt-auto flex flex-col gap-2 p-
|
|
70
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
71
71
|
...props
|
|
72
72
|
});
|
|
73
73
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { Button } from "./button.js";
|
|
3
2
|
import { Input } from "./input.js";
|
|
4
3
|
import { Separator } from "./separator.js";
|
|
@@ -134,7 +133,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
|
|
|
134
133
|
children: /* @__PURE__ */ jsx("div", {
|
|
135
134
|
"data-sidebar": "sidebar",
|
|
136
135
|
"data-slot": "sidebar-inner",
|
|
137
|
-
className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-
|
|
136
|
+
className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
|
|
138
137
|
children
|
|
139
138
|
})
|
|
140
139
|
})]
|
|
@@ -175,7 +174,7 @@ function SidebarRail({ className, ...props }) {
|
|
|
175
174
|
function SidebarInset({ className, ...props }) {
|
|
176
175
|
return /* @__PURE__ */ jsx("main", {
|
|
177
176
|
"data-slot": "sidebar-inset",
|
|
178
|
-
className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-
|
|
177
|
+
className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
|
|
179
178
|
...props
|
|
180
179
|
});
|
|
181
180
|
}
|
|
@@ -183,7 +182,7 @@ function SidebarInput({ className, ...props }) {
|
|
|
183
182
|
return /* @__PURE__ */ jsx(Input, {
|
|
184
183
|
"data-slot": "sidebar-input",
|
|
185
184
|
"data-sidebar": "input",
|
|
186
|
-
className: cn("h-8 w-full bg-
|
|
185
|
+
className: cn("h-8 w-full bg-background shadow-none", className),
|
|
187
186
|
...props
|
|
188
187
|
});
|
|
189
188
|
}
|
|
@@ -191,7 +190,7 @@ function SidebarHeader({ className, ...props }) {
|
|
|
191
190
|
return /* @__PURE__ */ jsx("div", {
|
|
192
191
|
"data-slot": "sidebar-header",
|
|
193
192
|
"data-sidebar": "header",
|
|
194
|
-
className: cn("flex flex-col gap-2 p-2
|
|
193
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
195
194
|
...props
|
|
196
195
|
});
|
|
197
196
|
}
|
|
@@ -215,7 +214,7 @@ function SidebarContent({ className, ...props }) {
|
|
|
215
214
|
return /* @__PURE__ */ jsx("div", {
|
|
216
215
|
"data-slot": "sidebar-content",
|
|
217
216
|
"data-sidebar": "content",
|
|
218
|
-
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-
|
|
217
|
+
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
|
|
219
218
|
...props
|
|
220
219
|
});
|
|
221
220
|
}
|
|
@@ -230,7 +229,7 @@ function SidebarGroup({ className, ...props }) {
|
|
|
230
229
|
function SidebarGroupLabel({ className, render, ...props }) {
|
|
231
230
|
return useRender({
|
|
232
231
|
defaultTagName: "div",
|
|
233
|
-
props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-
|
|
232
|
+
props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
234
233
|
render,
|
|
235
234
|
state: {
|
|
236
235
|
slot: "sidebar-group-label",
|
|
@@ -241,7 +240,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
|
|
|
241
240
|
function SidebarGroupAction({ className, render, ...props }) {
|
|
242
241
|
return useRender({
|
|
243
242
|
defaultTagName: "button",
|
|
244
|
-
props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-
|
|
243
|
+
props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
245
244
|
render,
|
|
246
245
|
state: {
|
|
247
246
|
slot: "sidebar-group-action",
|
|
@@ -261,7 +260,7 @@ function SidebarMenu({ className, ...props }) {
|
|
|
261
260
|
return /* @__PURE__ */ jsx("ul", {
|
|
262
261
|
"data-slot": "sidebar-menu",
|
|
263
262
|
"data-sidebar": "menu",
|
|
264
|
-
className: cn("flex w-full min-w-0 flex-col gap-0
|
|
263
|
+
className: cn("flex w-full min-w-0 flex-col gap-0", className),
|
|
265
264
|
...props
|
|
266
265
|
});
|
|
267
266
|
}
|
|
@@ -273,16 +272,16 @@ function SidebarMenuItem({ className, ...props }) {
|
|
|
273
272
|
...props
|
|
274
273
|
});
|
|
275
274
|
}
|
|
276
|
-
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-
|
|
275
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
|
|
277
276
|
variants: {
|
|
278
277
|
variant: {
|
|
279
278
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
280
279
|
outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
|
|
281
280
|
},
|
|
282
281
|
size: {
|
|
283
|
-
default: "h-
|
|
284
|
-
sm: "h-
|
|
285
|
-
lg: "h-
|
|
282
|
+
default: "h-8 text-sm",
|
|
283
|
+
sm: "h-7 text-xs",
|
|
284
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
286
285
|
}
|
|
287
286
|
},
|
|
288
287
|
defaultVariants: {
|
|
@@ -318,7 +317,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
|
|
|
318
317
|
function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
|
|
319
318
|
return useRender({
|
|
320
319
|
defaultTagName: "button",
|
|
321
|
-
props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-
|
|
320
|
+
props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className) }, props),
|
|
322
321
|
render,
|
|
323
322
|
state: {
|
|
324
323
|
slot: "sidebar-menu-action",
|
|
@@ -330,7 +329,7 @@ function SidebarMenuBadge({ className, ...props }) {
|
|
|
330
329
|
return /* @__PURE__ */ jsx("div", {
|
|
331
330
|
"data-slot": "sidebar-menu-badge",
|
|
332
331
|
"data-sidebar": "menu-badge",
|
|
333
|
-
className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-
|
|
332
|
+
className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
|
|
334
333
|
...props
|
|
335
334
|
});
|
|
336
335
|
}
|
|
@@ -341,10 +340,10 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
|
341
340
|
return /* @__PURE__ */ jsxs("div", {
|
|
342
341
|
"data-slot": "sidebar-menu-skeleton",
|
|
343
342
|
"data-sidebar": "menu-skeleton",
|
|
344
|
-
className: cn("flex h-8 items-center gap-2 rounded-
|
|
343
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
345
344
|
...props,
|
|
346
345
|
children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
|
|
347
|
-
className: "size-4 rounded-
|
|
346
|
+
className: "size-4 rounded-md",
|
|
348
347
|
"data-sidebar": "menu-skeleton-icon"
|
|
349
348
|
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
350
349
|
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
@@ -372,7 +371,7 @@ function SidebarMenuSubItem({ className, ...props }) {
|
|
|
372
371
|
function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
|
|
373
372
|
return useRender({
|
|
374
373
|
defaultTagName: "a",
|
|
375
|
-
props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-
|
|
374
|
+
props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className) }, props),
|
|
376
375
|
render,
|
|
377
376
|
state: {
|
|
378
377
|
slot: "sidebar-menu-sub-button",
|
|
@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
4
4
|
function Skeleton({ className, ...props }) {
|
|
5
5
|
return /* @__PURE__ */ jsx("div", {
|
|
6
6
|
"data-slot": "skeleton",
|
|
7
|
-
className: cn("animate-pulse rounded-
|
|
7
|
+
className: cn("animate-pulse rounded-md bg-muted", className),
|
|
8
8
|
...props
|
|
9
9
|
});
|
|
10
10
|
}
|
|
@@ -17,14 +17,14 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
|
|
|
17
17
|
className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
|
|
18
18
|
children: [/* @__PURE__ */ jsx(Slider$1.Track, {
|
|
19
19
|
"data-slot": "slider-track",
|
|
20
|
-
className: "relative grow overflow-hidden rounded-full bg-
|
|
20
|
+
className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
|
|
21
21
|
children: /* @__PURE__ */ jsx(Slider$1.Indicator, {
|
|
22
22
|
"data-slot": "slider-range",
|
|
23
23
|
className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
|
|
24
24
|
})
|
|
25
25
|
}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
|
|
26
26
|
"data-slot": "slider-thumb",
|
|
27
|
-
className: "block
|
|
27
|
+
className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
|
|
28
28
|
}, index))]
|
|
29
29
|
})
|
|
30
30
|
});
|
|
@@ -45,14 +45,14 @@ function TableRow({ className, ...props }) {
|
|
|
45
45
|
function TableHead({ className, ...props }) {
|
|
46
46
|
return /* @__PURE__ */ jsx("th", {
|
|
47
47
|
"data-slot": "table-head",
|
|
48
|
-
className: cn("h-
|
|
48
|
+
className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
|
|
49
49
|
...props
|
|
50
50
|
});
|
|
51
51
|
}
|
|
52
52
|
function TableCell({ className, ...props }) {
|
|
53
53
|
return /* @__PURE__ */ jsx("td", {
|
|
54
54
|
"data-slot": "table-cell",
|
|
55
|
-
className: cn("p-
|
|
55
|
+
className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
|
|
56
56
|
...props
|
|
57
57
|
});
|
|
58
58
|
}
|
|
@@ -11,7 +11,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
|
|
|
11
11
|
...props
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
|
-
const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-
|
|
14
|
+
const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
|
|
15
15
|
variants: { variant: {
|
|
16
16
|
default: "bg-muted",
|
|
17
17
|
line: "gap-1 bg-transparent"
|
|
@@ -29,7 +29,7 @@ function TabsList({ className, variant = "default", ...props }) {
|
|
|
29
29
|
function TabsTrigger({ className, ...props }) {
|
|
30
30
|
return /* @__PURE__ */ jsx(Tabs$1.Tab, {
|
|
31
31
|
"data-slot": "tabs-trigger",
|
|
32
|
-
className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-
|
|
32
|
+
className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
|
|
33
33
|
...props
|
|
34
34
|
});
|
|
35
35
|
}
|
|
@@ -5,7 +5,7 @@ import "react";
|
|
|
5
5
|
function Textarea({ className, ...props }) {
|
|
6
6
|
return /* @__PURE__ */ jsx("textarea", {
|
|
7
7
|
"data-slot": "textarea",
|
|
8
|
-
className: cn("flex field-sizing-content min-h-16 w-full
|
|
8
|
+
className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
9
9
|
...props
|
|
10
10
|
});
|
|
11
11
|
}
|
|
@@ -20,7 +20,7 @@ function ToggleGroup({ className, variant, size, spacing = 2, orientation = "hor
|
|
|
20
20
|
"data-spacing": spacing,
|
|
21
21
|
"data-orientation": orientation,
|
|
22
22
|
style: { "--gap": spacing },
|
|
23
|
-
className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[
|
|
23
|
+
className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", className),
|
|
24
24
|
...props,
|
|
25
25
|
children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
|
|
26
26
|
value: {
|
|
@@ -40,7 +40,7 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
|
|
|
40
40
|
"data-variant": context.variant || variant,
|
|
41
41
|
"data-size": context.size || size,
|
|
42
42
|
"data-spacing": context.spacing,
|
|
43
|
-
className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-
|
|
43
|
+
className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
|
|
44
44
|
variant: context.variant || variant,
|
|
45
45
|
size: context.size || size
|
|
46
46
|
}), className),
|