@alexgorbatchev/shadcn 0.0.30 → 0.0.32

package/dist/components/carousel/index.js

@@ -1,207 +1,18 @@
 import {
-  cn2
-} from "../../chunk-cp2m7y7v.js";
-import {
-  Button2
-} from "../../chunk-q7p28b89.js";
-
-// src/components/carousel/Carousel.tsx
-import { useCallback, useEffect, useState } from "react";
-import useEmblaCarousel from "embla-carousel-react";
-import { useDirection } from "@base-ui/react/direction-provider";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
-
-// src/components/carousel/CarouselContext.ts
-import { createContext } from "react";
-var CarouselContext = createContext(null);
-
-// src/components/carousel/hooks/useCarousel.ts
-import { useContext } from "react";
-function useCarousel() {
-  const context = useContext(CarouselContext);
-  if (!context)
-    throw new Error("useCarousel must be used within Carousel.");
-  return context;
-}
-
-// src/components/carousel/Carousel.tsx
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-function Carousel({
-  density,
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  onKeyDown,
-  ...props
-}) {
-  const inheritedDirection = useDirection();
-  const direction = opts?.direction ?? inheritedDirection;
-  const [carouselRef, api] = useEmblaCarousel({
-    ...opts,
-    direction,
-    axis: orientation === "horizontal" ? "x" : "y",
-    breakpoints: {
-      ...opts?.breakpoints,
-      "(prefers-reduced-motion: reduce)": {
-        ...opts?.breakpoints?.["(prefers-reduced-motion: reduce)"],
-        duration: 0
-      }
-    }
-  }, plugins);
-  const [canScrollPrev, setCanScrollPrev] = useState(false);
-  const [canScrollNext, setCanScrollNext] = useState(false);
-  const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = useCallback(() => api?.scrollNext(), [api]);
-  useEffect(() => {
-    if (!api)
-      return;
-    const update = () => {
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    };
-    update();
-    api.on("reInit", update);
-    api.on("select", update);
-    return () => {
-      api.off("reInit", update);
-      api.off("select", update);
-    };
-  }, [api]);
-  useEffect(() => {
-    if (api)
-      setApi?.(api);
-  }, [api, setApi]);
-  const handleKeyDown = (event) => {
-    onKeyDown?.(event);
-    if (event.defaultPrevented || event.target !== event.currentTarget)
-      return;
-    const previousKey = orientation === "vertical" ? "ArrowUp" : direction === "rtl" ? "ArrowRight" : "ArrowLeft";
-    const nextKey = orientation === "vertical" ? "ArrowDown" : direction === "rtl" ? "ArrowLeft" : "ArrowRight";
-    if (event.key === previousKey) {
-      event.preventDefault();
-      scrollPrev();
-    }
-    if (event.key === nextKey) {
-      event.preventDefault();
-      scrollNext();
-    }
-  };
-  return /* @__PURE__ */ jsx(CarouselContext.Provider, {
-    value: { carouselRef, api, orientation, direction, scrollPrev, scrollNext, canScrollPrev, canScrollNext },
-    children: /* @__PURE__ */ jsx("div", {
-      "data-slot": "carousel",
-      "data-density": density,
-      dir: direction,
-      role: "region",
-      "aria-roledescription": "carousel",
-      tabIndex: 0,
-      className: cn2("relative outline-none focus-visible:ring-1 focus-visible:ring-ring", className),
-      ...props,
-      onKeyDown: handleKeyDown,
-      children
-    })
-  });
-}
-function CarouselContent({ className, ...props }) {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx("div", {
-    ref: carouselRef,
-    "data-slot": "carousel-content",
-    className: "overflow-hidden",
-    children: /* @__PURE__ */ jsx("div", {
-      className: cn2("flex", orientation === "horizontal" ? "-ms-panel touch-pan-y touch-pinch-zoom" : "-mt-panel flex-col touch-pan-x touch-pinch-zoom", className),
-      ...props
-    })
-  });
-}
-function CarouselItem({ className, ...props }) {
-  const { orientation } = useCarousel();
-  return /* @__PURE__ */ jsx("div", {
-    role: "group",
-    "aria-roledescription": "slide",
-    "data-slot": "carousel-item",
-    className: cn2("min-h-0 min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "ps-panel" : "pt-panel", className),
-    ...props
-  });
-}
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon-sm",
-  disabled,
-  onClick,
-  children,
-  ...props
-}) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsx(Button2, {
-    "data-slot": "carousel-previous",
-    variant,
-    size,
-    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -start-10 my-auto" : "-top-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
-    disabled: disabled || !canScrollPrev,
-    onClick: (event) => {
-      onClick?.(event);
-      if (!event.defaultPrevented)
-        scrollPrev();
-    },
-    ...props,
-    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronLeftIcon, {
-          className: "rtl:rotate-180"
-        }) : /* @__PURE__ */ jsx(ChevronUpIcon, {}),
-        /* @__PURE__ */ jsx("span", {
-          className: "sr-only",
-          children: "Previous slide"
-        })
-      ]
-    })
-  });
-}
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon-sm",
-  disabled,
-  onClick,
-  children,
-  ...props
-}) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsx(Button2, {
-    "data-slot": "carousel-next",
-    variant,
-    size,
-    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -end-10 my-auto" : "-bottom-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
-    disabled: disabled || !canScrollNext,
-    onClick: (event) => {
-      onClick?.(event);
-      if (!event.defaultPrevented)
-        scrollNext();
-    },
-    ...props,
-    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronRightIcon, {
-          className: "rtl:rotate-180"
-        }) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
-        /* @__PURE__ */ jsx("span", {
-          className: "sr-only",
-          children: "Next slide"
-        })
-      ]
-    })
-  });
-}
+  useCarousel2,
+  Carousel2,
+  CarouselContent2,
+  CarouselItem2,
+  CarouselPrevious2,
+  CarouselNext2
+} from "../../chunk-dzvsjw59.js";
+import"../../chunk-q7p28b89.js";
+import"../../chunk-cp2m7y7v.js";
 export {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  useCarousel
+  Carousel2 as Carousel,
+  CarouselContent2 as CarouselContent,
+  CarouselItem2 as CarouselItem,
+  CarouselNext2 as CarouselNext,
+  CarouselPrevious2 as CarouselPrevious,
+  useCarousel2 as useCarousel
 };

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

@@ -8,12 +8,13 @@ type AnalyticsSeries = {
 };
 type AnalyticsChartProps = IDensityProps & {
     label: string;
-    data: Record<string, string | number>[];
+    data: Record<string, string | number | null>[];
+    showDots?: boolean;
     index: string;
     series: readonly AnalyticsSeries[];
     valueFormatter?: (value: number) => string;
 };
-declare function AnalyticsChart({ label, data, index, series, valueFormatter, density }: AnalyticsChartProps): ReactElement;
+declare function AnalyticsChart({ label, data, index, series, valueFormatter, showDots, density, }: AnalyticsChartProps): ReactElement;
 type SparklineProps = IDensityProps & {
     label: string;
     values: readonly number[];

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

@@ -3,7 +3,7 @@ import type { ChartProps, ChartTooltipContentProps, ChartLegendContentProps } fr
 import { Tooltip } from "recharts";
 import { ChartStyle } from "./ChartStyle.js";
 declare function Chart({ id, dir, density, className, children, config, initialDimension, ...props }: ChartProps): ReactElement;
-declare function ChartTooltipContent({ density, active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, htmlProps, contentStyle, itemStyle, labelStyle, wrapperClassName, itemSorter, }: ChartTooltipContentProps): ReactElement | null;
+declare function ChartTooltipContent({ density, active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, valueFormatter, labelClassName, formatter, color, nameKey, labelKey, htmlProps, contentStyle, itemStyle, labelStyle, wrapperClassName, itemSorter, }: ChartTooltipContentProps): ReactElement | null;
 declare function ChartLegendContent({ density, className, hideIcon, payload, verticalAlign, nameKey, onClick, onMouseEnter, onMouseLeave, formatter, htmlProps, labelStyle, inactiveColor, }: ChartLegendContentProps): ReactElement | null;
 declare const ChartTooltip: typeof Tooltip;
 declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;

package/dist/components/chart/index.js

@@ -6,16 +6,25 @@ import {
   ChartLegendContent2,
   ChartTooltip2,
   ChartLegend2
-} from "../../chunk-82e7fbmq.js";
+} from "../../chunk-9vyg3854.js";
 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})` }]));
+function AnalyticsChart({
+  label,
+  data,
+  index,
+  series,
+  valueFormatter,
+  showDots = false,
+  density
+}) {
+  const config = Object.fromEntries(series.map((item) => [item.key, { label: item.label }]));
   return /* @__PURE__ */ jsx(Chart3, {
+    role: "region",
     "aria-label": label,
     density,
     config,
@@ -38,27 +47,32 @@ function AnalyticsChart({ label, data, index, series, valueFormatter, density })
           tickFormatter: valueFormatter
         }),
         /* @__PURE__ */ jsx(ChartTooltip2, {
-          content: /* @__PURE__ */ jsx(ChartTooltipContent2, {})
+          content: /* @__PURE__ */ jsx(ChartTooltipContent2, {
+            valueFormatter
+          })
         }),
         /* @__PURE__ */ jsx(ChartLegend2, {
           content: /* @__PURE__ */ jsx(ChartLegendContent2, {})
         }),
-        series.map((item) => item.type === "bar" ? /* @__PURE__ */ jsx(Bar, {
+        series.map((item, i) => item.type === "bar" ? /* @__PURE__ */ jsx(Bar, {
           dataKey: item.key,
-          fill: config[item.key]?.color,
+          fill: `var(--chart-${i % 5 + 1})`,
           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,
+          stroke: `var(--chart-${i % 5 + 1})`,
+          fill: `var(--chart-${i % 5 + 1})`,
           fillOpacity: 0.15,
+          dot: showDots,
+          connectNulls: false,
           stackId: item.stackId,
           isAnimationActive: false
         }, item.key) : /* @__PURE__ */ jsx(Line, {
           dataKey: item.key,
-          stroke: config[item.key]?.color,
-          dot: false,
+          stroke: `var(--chart-${i % 5 + 1})`,
+          dot: showDots,
+          connectNulls: false,
           isAnimationActive: false
         }, item.key))
       ]

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

@@ -35,6 +35,7 @@ export type ChartTooltipContentProps = Omit<DefaultTooltipContentProps<TooltipVa
     className?: string;
     htmlProps?: ComponentProps<"div">;
     active?: boolean;
+    valueFormatter?: (value: number) => string;
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";

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

@@ -1,15 +1,31 @@
-import { type ReactTable, type RowData, type Column, type CellData } from "@tanstack/react-table";
-import type { ReactElement, ReactNode } from "react";
+import { type CellData, type Column, type ReactTable, type Row, type RowData, type Table as CoreTable, type TableState } from "@tanstack/react-table";
+import { type ReactElement, type ReactNode } from "react";
 import type { IDensityProps } from "../../density/types.js";
+import { type TableTextAlign, type TableVisibility } from "../Table.js";
+/** Presentation settings a column definition carries in its `meta`. */
+interface IDataGridColumnMeta {
+    /** Name in the column picker and resize handle; defaults to a string header, then the column ID. */
+    label?: string;
+    textAlign?: TableTextAlign;
+    truncate?: boolean;
+    /** Hides the column below this viewport or container width, together with its header and cells. */
+    visibleFrom?: TableVisibility;
+    /** Takes the width the sized columns leave, so it has no fixed size of its own. */
+    fill?: boolean;
+}
 declare const dataGridFeatures: {
     columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    columnResizingFeature: import("@tanstack/react-table").TableFeature;
     columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    globalFilteringFeature: 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>;
+    filteredRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     filterFns: {
         includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
     };
@@ -17,8 +33,31 @@ declare const dataGridFeatures: {
         alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
         basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
     };
+    columnMeta: IDataGridColumnMeta;
 };
-type DataGridTable<T extends RowData> = ReactTable<typeof dataGridFeatures, T>;
+type DataGridFeatures = typeof dataGridFeatures;
+/** A table built with `dataGridFeatures`; `TSelected` is the state its `useTable` selector returns. */
+type DataGridTable<T extends RowData, TSelected = TableState<DataGridFeatures>> = ReactTable<DataGridFeatures, T, TSelected>;
+type DataGridRow<T extends RowData> = Row<DataGridFeatures, T>;
+type DataGridColumn<T extends RowData> = Column<DataGridFeatures, T, CellData>;
+declare function getDataGridColumnLabel<T extends RowData>(column: DataGridColumn<T>): string;
+interface IDataGridHeaderRowsProps<T extends RowData> {
+    table: CoreTable<DataGridFeatures, T>;
+    /** Adds a resize handle to each resizable column; only fixed-layout grids honor column sizes. */
+    isResizable?: boolean;
+}
+/** Header rows with sort state, column layout, and optional resize handles. */
+declare function DataGridHeaderRows<T extends RowData>({ table, isResizable, }: IDataGridHeaderRowsProps<T>): ReactElement;
+interface IDataGridCellsProps<T extends RowData> {
+    row: DataGridRow<T>;
+}
+/** A row's visible cells, laid out by their column `meta`; render them inside a custom `TableRow`. */
+declare function DataGridCells<T extends RowData>({ row }: IDataGridCellsProps<T>): ReactElement;
+interface IDataGridColumnsProps<T extends RowData> {
+    table: CoreTable<DataGridFeatures, T>;
+}
+/** Column widths for a fixed-layout grid; sizes resolve through the variables `useDataGridColumnSizes` writes. */
+declare function DataGridColumns<T extends RowData>({ table }: IDataGridColumnsProps<T>): ReactElement;
 type DataGridProps<T extends RowData> = IDensityProps & {
     table: DataGridTable<T>;
     label: string;
@@ -29,7 +68,7 @@ type DataGridProps<T extends RowData> = IDensityProps & {
 };
 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>;
+    column: Column<DataGridFeatures, T, V>;
     children: ReactNode;
 }): ReactElement;
 declare function DataGridFilter<T extends RowData>({ table, columnId, label, }: {
@@ -40,5 +79,5 @@ declare function DataGridFilter<T extends RowData>({ table, columnId, label, }:
 declare function DataGridPagination<T extends RowData>({ table }: {
     table: DataGridTable<T>;
 }): ReactElement;
-export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures };
-export type { DataGridProps, DataGridTable };
+export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridColumns, DataGridFilter, DataGridHeaderRows, DataGridPagination, dataGridFeatures, getDataGridColumnLabel, };
+export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta };

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

@@ -0,0 +1,14 @@
+import { type RowData, type Table } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import { type DataGridFeatures } from "./DataGrid.js";
+interface IDataGridColumnOptionsProps<T extends RowData> {
+    table: Table<DataGridFeatures, T>;
+    /** Trigger and popover title. */
+    label?: string;
+}
+/**
+ * Shows, hides, and reorders the columns that allow hiding. Columns with `enableHiding: false` keep their positions.
+ * Reset restores the table's initial visibility, order, and sizes.
+ */
+export declare function DataGridColumnOptions<T extends RowData>({ table, label, }: IDataGridColumnOptionsProps<T>): ReactElement;
+export {};

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

@@ -0,0 +1,13 @@
+import { type CellData, type Header, type RowData } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import type { DataGridFeatures } from "./DataGrid.js";
+interface IDataGridColumnResizerProps<T extends RowData> {
+    header: Header<DataGridFeatures, T, CellData>;
+    label: string;
+}
+/**
+ * A window-splitter handle at a header's trailing edge: drag it, use the arrow keys, Home, or End, or double-click it
+ * to restore the default width.
+ */
+export declare function DataGridColumnResizer<T extends RowData>({ header, label, }: IDataGridColumnResizerProps<T>): ReactElement;
+export {};

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

@@ -0,0 +1,6 @@
+import type { RowData, Table, TableFeatures } from "@tanstack/react-table";
+/**
+ * Maps each leaf column ID to the CSS variable holding its width. Variables follow definition order, so reordering or
+ * hiding columns never moves a width to another column.
+ */
+export declare function getDataGridColumnSizeVariables<TFeatures extends TableFeatures, T extends RowData>(table: Table<TFeatures, T>): Map<string, string>;

package/dist/components/data-grid/hooks/useDataGridColumnSizes.d.ts

@@ -0,0 +1,8 @@
+import type { RowData, Table } from "@tanstack/react-table";
+import { type RefObject } from "react";
+import type { DataGridFeatures } from "../DataGrid.js";
+/**
+ * Writes every column's size to its CSS variable on `scope` whenever column sizing changes, so resizing updates widths
+ * without rendering the grid again.
+ */
+export declare function useDataGridColumnSizes<T extends RowData>(table: Table<DataGridFeatures, T>, scope: RefObject<HTMLElement | null>): void;

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

@@ -1,2 +1,3 @@
-export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures } from "./DataGrid.js";
-export type { DataGridProps, DataGridTable } from "./DataGrid.js";
+export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures, } from "./DataGrid.js";
+export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, } from "./DataGrid.js";
+export { DataGridColumnOptions } from "./DataGridColumnOptions.js";