@alexgorbatchev/shadcn 0.0.20 → 0.0.21

package/dist/components/assistant-ui/native/Thread.js

@@ -1,6 +1,6 @@
 import {
   Thread2
-} from "../../../chunk-8fcjx3he.js";
+} from "../../../chunk-az81pc04.js";
 import"../../../chunk-8a15x4a8.js";
 import"../../../chunk-c2vcrwjp.js";
 import"../../../chunk-sbrpnv8s.js";
@@ -28,9 +28,9 @@ import"../../../chunk-d70rcwk7.js";
 import"../../../chunk-24d68cjp.js";
 import"../../../chunk-jpvw9xqy.js";
 import"../../../chunk-70vndezn.js";
+import"../../../chunk-hz9azhzx.js";
 import"../../../chunk-aa7m22zj.js";
 import"../../../chunk-j89xg1ak.js";
-import"../../../chunk-hz9azhzx.js";
 import"../../../chunk-e6hk39ev.js";
 import"../../../chunk-73rkr9ct.js";
 import"../../../chunk-cp2m7y7v.js";

package/dist/components/assistant-ui/native/ThreadListSidebar.js

@@ -1,10 +1,10 @@
 import {
   ThreadListSidebar2
-} from "../../../chunk-d9jbqd99.js";
+} from "../../../chunk-tynbgc30.js";
 import"../../../chunk-1tgrhacr.js";
 import"../../../chunk-dtkw8m6d.js";
 import"../../../chunk-4bjqbky7.js";
-import"../../../chunk-h979cxnh.js";
+import"../../../chunk-dq7kr5y0.js";
 import"../../../chunk-mz3e810d.js";
 import"../../../chunk-d70rcwk7.js";
 import"../../../chunk-jpvw9xqy.js";

package/dist/components/assistant-ui/native/index.js

@@ -65,7 +65,7 @@ import {
 import"../../../chunk-d70rcwk7.js";
 import {
   Thread2
-} from "../../../chunk-8fcjx3he.js";
+} from "../../../chunk-az81pc04.js";
 import {
   useThreadListGroups2,
   ThreadList3,
@@ -78,11 +78,11 @@ import {
 import"../../../chunk-59p19t57.js";
 import {
   AssistantModal2
-} from "../../../chunk-1qhf8gh8.js";
+} from "../../../chunk-wwyzwptb.js";
 import"../../../chunk-rffrerg5.js";
 import {
   AssistantSidebar2
-} from "../../../chunk-84ca0dpc.js";
+} from "../../../chunk-67dkgsm3.js";
 import {
   ComposerQuotePreviewRoot2,
   ComposerQuotePreviewIcon2,
@@ -149,19 +149,19 @@ import"../../../chunk-e0pv0me5.js";
 import"../../../chunk-0qkdp68h.js";
 import"../../../chunk-96wh7ccv.js";
 import"../../../chunk-1jeg5z55.js";
-import"../../../chunk-7pyt4e5t.js";
-import"../../../chunk-553bzh59.js";
-import"../../../chunk-s46hvhjw.js";
-import"../../../chunk-p8qtk151.js";
-import"../../../chunk-4drqqqz1.js";
-import"../../../chunk-gabqzfq0.js";
+import"../../../chunk-ghmkxqn5.js";
+import"../../../chunk-f4c0tg2x.js";
+import"../../../chunk-0w6rxpr5.js";
+import"../../../chunk-72qr0gqe.js";
+import"../../../chunk-83cckb23.js";
+import"../../../chunk-1p7pend8.js";
 import"../../../chunk-r07v9c4f.js";
-import"../../../chunk-14qj6w54.js";
-import"../../../chunk-qv19jhdk.js";
-import"../../../chunk-ecmk3vgd.js";
+import"../../../chunk-f9ha76ap.js";
+import"../../../chunk-k8v9y2dw.js";
+import"../../../chunk-seeed8a2.js";
 import {
   ModelSelector3
-} from "../../../chunk-eq88qk1d.js";
+} from "../../../chunk-d3ad53et.js";
 import {
   QuoteBlockRoot2,
   QuoteBlockIcon2,
@@ -189,18 +189,18 @@ import"../../../chunk-3qqdfft7.js";
 import {
   isTaskPart2,
   TaskCard2
-} from "../../../chunk-5pvyxayg.js";
+} from "../../../chunk-m9zsppp2.js";
 import {
   TaskGroup2
-} from "../../../chunk-ztcbee24.js";
+} from "../../../chunk-9dqspkha.js";
 import {
   TaskTray2
 } from "../../../chunk-2bx2r98r.js";
 import"../../../chunk-4bjqbky7.js";
-import"../../../chunk-h979cxnh.js";
+import"../../../chunk-dq7kr5y0.js";
 import {
   ThreadListSidebar2
-} from "../../../chunk-d9jbqd99.js";
+} from "../../../chunk-tynbgc30.js";
 import {
   useVoiceTranscript2,
   VoiceConversation2

package/dist/components/calendar/DatePicker.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps, type ReactElement } from "react";
+import type { DateRange } from "@daypicker/react";
+import type { IDensityProps } from "../../density/types.js";
+import { Calendar } from "./Calendar.js";
+type PickerCalendarProps = Omit<ComponentProps<typeof Calendar>, "mode" | "selected" | "onSelect" | "required" | "locale">;
+type DatePickerProps = IDensityProps & {
+    label: string;
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (value: Date | undefined) => void;
+    disabled?: boolean;
+    name?: string;
+    placeholder?: string;
+    locale?: ComponentProps<typeof Calendar>["locale"];
+    calendarProps?: PickerCalendarProps;
+};
+type DateRangePickerProps = Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange" | "name"> & {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (value: DateRange | undefined) => void;
+    startName?: string;
+    endName?: string;
+};
+declare function DatePicker(props: DatePickerProps): ReactElement;
+declare function DateRangePicker(props: DateRangePickerProps): ReactElement;
+export { DatePicker, DateRangePicker };
+export type { DatePickerProps, DateRangePickerProps };

package/dist/components/calendar/index.d.ts

@@ -1 +1,3 @@
 export { Calendar, CalendarDayButton } from "./Calendar.js";
+export { DatePicker, DateRangePicker } from "./DatePicker.js";
+export type { DatePickerProps, DateRangePickerProps } from "./DatePicker.js";

package/dist/components/calendar/index.js

@@ -1,10 +1,183 @@
 import"../../chunk-cp2m7y7v.js";
-import"../../chunk-73rkr9ct.js";
+import {
+  Button2
+} from "../../chunk-73rkr9ct.js";
 import {
   Calendar2,
   CalendarDayButton2
 } from "../../chunk-ttyqqw3y.js";
+import"../../chunk-e6hk39ev.js";
+import"../../chunk-j89xg1ak.js";
+import"../../chunk-aa7m22zj.js";
+import {
+  Popover2,
+  PopoverTrigger2,
+  PopoverContent2,
+  PopoverTitle2
+} from "../../chunk-4djw71cv.js";
+// src/components/calendar/DatePicker.tsx
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function dateInputValue(date) {
+  return date ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}` : "";
+}
+function DatePicker(props) {
+  const {
+    label,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    name,
+    placeholder = "Choose date",
+    locale,
+    density,
+    calendarProps
+  } = props;
+  const [draft, setDraft] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const selected = Object.hasOwn(props, "value") ? value : draft;
+  const format = new Intl.DateTimeFormat(locale?.code ?? "en-US", { dateStyle: "medium" });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs(Popover2, {
+        open,
+        onOpenChange: setOpen,
+        children: [
+          /* @__PURE__ */ jsxs(PopoverTrigger2, {
+            render: /* @__PURE__ */ jsx(Button2, {
+              variant: "outline",
+              density,
+              disabled
+            }),
+            "aria-label": label,
+            children: [
+              /* @__PURE__ */ jsx(CalendarIcon, {
+                "data-icon": "inline-start"
+              }),
+              selected ? format.format(selected) : placeholder
+            ]
+          }),
+          /* @__PURE__ */ jsxs(PopoverContent2, {
+            density,
+            align: "start",
+            children: [
+              /* @__PURE__ */ jsx(PopoverTitle2, {
+                className: "sr-only",
+                children: label
+              }),
+              /* @__PURE__ */ jsx(Calendar2, {
+                ...calendarProps,
+                density,
+                locale,
+                defaultMonth: selected ?? calendarProps?.defaultMonth,
+                mode: "single",
+                selected,
+                onSelect: (next) => {
+                  if (!Object.hasOwn(props, "value"))
+                    setDraft(next);
+                  onValueChange?.(next);
+                  setOpen(false);
+                },
+                autoFocus: true
+              })
+            ]
+          })
+        ]
+      }),
+      name && /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        disabled,
+        name,
+        value: dateInputValue(selected)
+      })
+    ]
+  });
+}
+function DateRangePicker(props) {
+  const {
+    label,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    startName,
+    endName,
+    placeholder = "Choose dates",
+    locale,
+    density,
+    calendarProps
+  } = props;
+  const [draft, setDraft] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const selected = Object.hasOwn(props, "value") ? value : draft;
+  const format = new Intl.DateTimeFormat(locale?.code ?? "en-US", { dateStyle: "medium" });
+  const text = selected?.from ? selected.to ? format.formatRange(selected.from, selected.to) : format.format(selected.from) : placeholder;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs(Popover2, {
+        open,
+        onOpenChange: setOpen,
+        children: [
+          /* @__PURE__ */ jsxs(PopoverTrigger2, {
+            render: /* @__PURE__ */ jsx(Button2, {
+              variant: "outline",
+              density,
+              disabled
+            }),
+            "aria-label": label,
+            children: [
+              /* @__PURE__ */ jsx(CalendarIcon, {
+                "data-icon": "inline-start"
+              }),
+              text
+            ]
+          }),
+          /* @__PURE__ */ jsxs(PopoverContent2, {
+            density,
+            align: "start",
+            children: [
+              /* @__PURE__ */ jsx(PopoverTitle2, {
+                className: "sr-only",
+                children: label
+              }),
+              /* @__PURE__ */ jsx(Calendar2, {
+                ...calendarProps,
+                density,
+                locale,
+                defaultMonth: selected?.from ?? calendarProps?.defaultMonth,
+                mode: "range",
+                selected,
+                onSelect: (next) => {
+                  if (!Object.hasOwn(props, "value"))
+                    setDraft(next);
+                  onValueChange?.(next);
+                },
+                autoFocus: true
+              })
+            ]
+          })
+        ]
+      }),
+      startName && /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        disabled,
+        name: startName,
+        value: dateInputValue(selected?.from)
+      }),
+      endName && /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        disabled,
+        name: endName,
+        value: dateInputValue(selected?.to)
+      })
+    ]
+  });
+}
 export {
   Calendar2 as Calendar,
-  CalendarDayButton2 as CalendarDayButton
+  CalendarDayButton2 as CalendarDayButton,
+  DatePicker,
+  DateRangePicker
 };

package/dist/components/chart/AnalyticsChart.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type AnalyticsSeries = {
+    key: string;
+    label: string;
+    type?: "line" | "area" | "bar";
+    stackId?: string;
+};
+type AnalyticsChartProps = IDensityProps & {
+    label: string;
+    data: Record<string, string | number>[];
+    index: string;
+    series: readonly AnalyticsSeries[];
+    valueFormatter?: (value: number) => string;
+};
+declare function AnalyticsChart({ label, data, index, series, valueFormatter, density }: AnalyticsChartProps): ReactElement;
+type SparklineProps = IDensityProps & {
+    label: string;
+    values: readonly number[];
+    type?: "line" | "area" | "bar";
+};
+declare function Sparkline({ label, values, type, density }: SparklineProps): ReactElement;
+export { AnalyticsChart, Sparkline };
+export type { AnalyticsChartProps, AnalyticsSeries, SparklineProps };

package/dist/components/chart/index.d.ts

@@ -1,3 +1,5 @@
 export { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from "./Chart.js";
 export type { ChartConfig, ChartProps, ChartTooltipContentProps, ChartLegendContentProps } from "./types.js";
 export { useChart } from "./hooks/useChart.js";
+export { AnalyticsChart, Sparkline } from "./AnalyticsChart.js";
+export type { AnalyticsChartProps, AnalyticsSeries, SparklineProps } from "./AnalyticsChart.js";

package/dist/components/chart/index.js

@@ -10,7 +10,94 @@ import {
 import"../../chunk-e6hk39ev.js";
 import"../../chunk-cp2m7y7v.js";
 import"../../chunk-jpvw9xqy.js";
+// src/components/chart/AnalyticsChart.tsx
+import { Area, Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AnalyticsChart({ label, data, index, series, valueFormatter, density }) {
+  const config = Object.fromEntries(series.map((item, i) => [item.key, { label: item.label, color: `var(--chart-${i % 5 + 1})` }]));
+  return /* @__PURE__ */ jsx(Chart3, {
+    "aria-label": label,
+    density,
+    config,
+    className: "h-72 w-full aspect-auto",
+    children: /* @__PURE__ */ jsxs(ComposedChart, {
+      data,
+      accessibilityLayer: true,
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, {
+          vertical: false
+        }),
+        /* @__PURE__ */ jsx(XAxis, {
+          dataKey: index,
+          tickLine: false,
+          axisLine: false
+        }),
+        /* @__PURE__ */ jsx(YAxis, {
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: valueFormatter
+        }),
+        /* @__PURE__ */ jsx(ChartTooltip2, {
+          content: /* @__PURE__ */ jsx(ChartTooltipContent2, {})
+        }),
+        /* @__PURE__ */ jsx(ChartLegend2, {
+          content: /* @__PURE__ */ jsx(ChartLegendContent2, {})
+        }),
+        series.map((item) => item.type === "bar" ? /* @__PURE__ */ jsx(Bar, {
+          dataKey: item.key,
+          fill: config[item.key]?.color,
+          stackId: item.stackId,
+          isAnimationActive: false
+        }, item.key) : item.type === "area" ? /* @__PURE__ */ jsx(Area, {
+          dataKey: item.key,
+          stroke: config[item.key]?.color,
+          fill: config[item.key]?.color,
+          fillOpacity: 0.15,
+          stackId: item.stackId,
+          isAnimationActive: false
+        }, item.key) : /* @__PURE__ */ jsx(Line, {
+          dataKey: item.key,
+          stroke: config[item.key]?.color,
+          dot: false,
+          isAnimationActive: false
+        }, item.key))
+      ]
+    })
+  });
+}
+function Sparkline({ label, values, type = "line", density }) {
+  const data = values.map((value) => ({ value }));
+  const config = { value: { label, color: "var(--chart-1)" } };
+  return /* @__PURE__ */ jsx(Chart3, {
+    role: "img",
+    "aria-label": `${label}: ${values.join(", ")}`,
+    density,
+    config,
+    className: "h-12 w-32 aspect-auto",
+    children: /* @__PURE__ */ jsx(ComposedChart, {
+      data,
+      accessibilityLayer: false,
+      children: type === "bar" ? /* @__PURE__ */ jsx(Bar, {
+        dataKey: "value",
+        fill: "var(--chart-1)",
+        isAnimationActive: false
+      }) : type === "area" ? /* @__PURE__ */ jsx(Area, {
+        dataKey: "value",
+        stroke: "var(--chart-1)",
+        fill: "var(--chart-1)",
+        fillOpacity: 0.15,
+        isAnimationActive: false
+      }) : /* @__PURE__ */ jsx(Line, {
+        dataKey: "value",
+        stroke: "var(--chart-1)",
+        dot: false,
+        isAnimationActive: false
+      })
+    })
+  });
+}
 export {
+  AnalyticsChart,
   Chart3 as Chart,
   Chart3 as ChartContainer,
   ChartLegend2 as ChartLegend,
@@ -18,5 +105,6 @@ export {
   ChartStyle2 as ChartStyle,
   ChartTooltip2 as ChartTooltip,
   ChartTooltipContent2 as ChartTooltipContent,
+  Sparkline,
   useChart2 as useChart
 };

package/dist/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type ColorPickerProps = IDensityProps & {
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (color: string) => void;
+    alpha?: boolean;
+    disabled?: boolean;
+    name?: string;
+};
+declare function ColorPicker(props: ColorPickerProps): ReactElement;
+export { ColorPicker };
+export type { ColorPickerProps };

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorPicker } from "./ColorPicker.js";
+export type { ColorPickerProps } from "./ColorPicker.js";

package/dist/components/color-picker/index.js

@@ -0,0 +1,52 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+
+// src/components/color-picker/ColorPicker.tsx
+import { useState } from "react";
+import { HexAlphaColorPicker, HexColorInput, HexColorPicker } from "react-colorful";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ColorPicker(props) {
+  const { label, defaultValue = "#000000", onValueChange, alpha = false, disabled, name, density } = props;
+  const [local, setLocal] = useState(defaultValue);
+  const color = props.value ?? local;
+  const change = (next) => {
+    if (!Object.hasOwn(props, "value"))
+      setLocal(next);
+    onValueChange?.(next);
+  };
+  const Picker = alpha ? HexAlphaColorPicker : HexColorPicker;
+  return /* @__PURE__ */ jsxs("fieldset", {
+    "data-density": density,
+    disabled,
+    className: cn2("grid w-56 gap-3", disabled && "pointer-events-none opacity-50"),
+    children: [
+      /* @__PURE__ */ jsx("legend", {
+        className: "mb-2 text-sm font-medium",
+        children: label
+      }),
+      /* @__PURE__ */ jsx("div", {
+        inert: disabled,
+        children: /* @__PURE__ */ jsx(Picker, {
+          color,
+          onChange: change,
+          "aria-label": label,
+          className: "!h-48 !w-full [&_.react-colorful__saturation]:!rounded-t-sm [&_.react-colorful__last-control]:!rounded-b-sm"
+        })
+      }),
+      /* @__PURE__ */ jsx(HexColorInput, {
+        color,
+        onChange: change,
+        alpha,
+        prefixed: true,
+        "aria-label": `${label} hex`,
+        name,
+        disabled,
+        className: "h-control w-full rounded-sm border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      })
+    ]
+  });
+}
+export {
+  ColorPicker
+};

package/dist/components/command/index.js

@@ -17,7 +17,7 @@ import {
   CommandSeparator2,
   CommandItem2,
   CommandShortcut2
-} from "../../chunk-7pyt4e5t.js";
+} from "../../chunk-ghmkxqn5.js";
 export {
   Command2 as Command,
   CommandDialog2 as CommandDialog,

package/dist/components/data-grid/DataGrid.d.ts

@@ -0,0 +1,44 @@
+import { type ReactTable, type RowData, type Column, type CellData } from "@tanstack/react-table";
+import type { ReactElement, ReactNode } from "react";
+import type { IDensityProps } from "../../density/types.js";
+declare const dataGridFeatures: {
+    columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    filterFns: {
+        includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+};
+type DataGridTable<T extends RowData> = ReactTable<typeof dataGridFeatures, T>;
+type DataGridProps<T extends RowData> = IDensityProps & {
+    table: DataGridTable<T>;
+    label: string;
+    toolbar?: ReactNode;
+    empty?: ReactNode;
+    loading?: boolean;
+    pagination?: boolean;
+};
+declare function DataGrid<T extends RowData>({ table, label, toolbar, empty, loading, pagination, density, }: DataGridProps<T>): ReactElement;
+declare function DataGridColumnHeader<T extends RowData, V extends CellData>({ column, children, }: {
+    column: Column<typeof dataGridFeatures, T, V>;
+    children: ReactNode;
+}): ReactElement;
+declare function DataGridFilter<T extends RowData>({ table, columnId, label, }: {
+    table: DataGridTable<T>;
+    columnId: string;
+    label: string;
+}): ReactElement;
+declare function DataGridPagination<T extends RowData>({ table }: {
+    table: DataGridTable<T>;
+}): ReactElement;
+export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures };
+export type { DataGridProps, DataGridTable };

package/dist/components/data-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures } from "./DataGrid.js";
+export type { DataGridProps, DataGridTable } from "./DataGrid.js";