@alexgorbatchev/shadcn 0.0.20 → 0.0.21

package/dist/components/file-upload/index.js

@@ -0,0 +1,80 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "../../chunk-73rkr9ct.js";
+
+// src/components/file-upload/FileUpload.tsx
+import { useId } from "react";
+import { useDropzone } from "react-dropzone";
+import { UploadIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FileUpload({ label, description, children, name, density, ...options }) {
+  const descriptionId = useId();
+  const { getRootProps, getInputProps, open, isDragActive, isDragReject, isProcessing, fileRejections } = useDropzone({
+    ...options,
+    noClick: true,
+    noKeyboard: true
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    "data-density": density,
+    className: "grid gap-3",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        ...getRootProps({
+          role: "group",
+          "aria-label": label,
+          "aria-describedby": description ? descriptionId : undefined,
+          "aria-busy": isProcessing,
+          "data-scroll": "none",
+          className: cn2("grid justify-items-center gap-3 rounded-sm border border-dashed border-input bg-card p-6 text-center", isDragActive && "border-primary bg-accent", isDragReject && "border-destructive", options.disabled && "opacity-50")
+        }),
+        children: [
+          /* @__PURE__ */ jsx("input", {
+            ...getInputProps({ name, "aria-label": label })
+          }),
+          /* @__PURE__ */ jsx(UploadIcon, {
+            "aria-hidden": "true",
+            className: "size-6 text-muted-foreground"
+          }),
+          /* @__PURE__ */ jsx("p", {
+            className: "text-sm font-medium",
+            children: label
+          }),
+          description && /* @__PURE__ */ jsx("p", {
+            id: descriptionId,
+            className: "text-sm text-muted-foreground",
+            children: description
+          }),
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            variant: "outline",
+            onClick: open,
+            disabled: options.disabled || isProcessing,
+            children: "Choose files"
+          }),
+          isDragActive && /* @__PURE__ */ jsx("p", {
+            role: "status",
+            children: isDragReject ? "Some files cannot be accepted." : "Drop files here."
+          })
+        ]
+      }),
+      fileRejections.length > 0 && /* @__PURE__ */ jsx("ul", {
+        role: "alert",
+        className: "space-y-1 text-sm text-destructive",
+        children: fileRejections.map(({ file, errors }, index) => /* @__PURE__ */ jsxs("li", {
+          children: [
+            file.name,
+            ": ",
+            errors.map((error) => error.message).join(" ")
+          ]
+        }, `${file.name}-${index}`))
+      }),
+      children
+    ]
+  });
+}
+export {
+  FileUpload
+};

package/dist/components/gantt/Gantt.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type GanttTask = {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    progress?: number;
+};
+type GanttProps<T extends GanttTask> = IDensityProps & {
+    label: string;
+    tasks: readonly T[];
+    startDate: Date;
+    days?: number;
+    timeZone?: string;
+    onTaskSelect: (task: T) => void;
+    onTaskChange?: (task: T) => void;
+};
+/** Civil-day timeline. End dates are inclusive; shifting preserves wall-clock times across DST. */
+declare function Gantt<T extends GanttTask>({ label, tasks, startDate, days, timeZone, onTaskSelect, onTaskChange, density, }: GanttProps<T>): ReactElement;
+export { Gantt };
+export type { GanttProps, GanttTask };

package/dist/components/gantt/Roadmap.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import { type KanbanItem, type KanbanColumn } from "../Kanban.js";
+import { type GanttTask } from "./Gantt.js";
+type RoadmapItem = GanttTask & KanbanItem;
+type RoadmapProps<T extends RoadmapItem> = IDensityProps & {
+    label: string;
+    items: readonly T[];
+    columns: readonly KanbanColumn[];
+    startDate: Date;
+    days?: number;
+    timeZone?: string;
+    onItemsChange: (items: T[]) => void;
+    onItemSelect: (item: T) => void;
+};
+declare function Roadmap<T extends RoadmapItem>({ label, items, columns, startDate, days, timeZone, onItemsChange, onItemSelect, density, }: RoadmapProps<T>): ReactElement;
+export { Roadmap };
+export type { RoadmapProps, RoadmapItem };

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

@@ -0,0 +1,4 @@
+export { Gantt } from "./Gantt.js";
+export type { GanttProps, GanttTask } from "./Gantt.js";
+export { Roadmap } from "./Roadmap.js";
+export type { RoadmapProps, RoadmapItem } from "./Roadmap.js";

package/dist/components/gantt/index.js

@@ -0,0 +1,357 @@
+import {
+  Tabs2,
+  TabsList2,
+  TabsTrigger2,
+  TabsContent2,
+  DragDropProvider2,
+  DragSource2,
+  DropTarget2,
+  Kanban2
+} from "../../chunk-kbg2e95b.js";
+import"../../chunk-cp2m7y7v.js";
+import"../../chunk-wjx6zf94.js";
+import {
+  Button2
+} from "../../chunk-73rkr9ct.js";
+import {
+  NativeSelect2,
+  NativeSelectOption2
+} from "../../chunk-r9qrb6b6.js";
+import {
+  Table2,
+  TableHeader2,
+  TableBody2,
+  TableRow2,
+  TableHead2,
+  TableCell2
+} from "../../chunk-0y0kqaqj.js";
+
+// src/components/gantt/Gantt.tsx
+import { useId, useState } from "react";
+import { TZDate } from "@date-fns/tz";
+import { addDays, differenceInCalendarDays, format, startOfDay } from "date-fns";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Gantt({
+  label,
+  tasks,
+  startDate,
+  days = 30,
+  timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
+  onTaskSelect,
+  onTaskChange,
+  density
+}) {
+  const id = useId();
+  const type = `application/x-gantt-${id.replaceAll(":", "").toLowerCase()}`;
+  const [zoom, setZoom] = useState("day");
+  const width = zoom === "day" ? 48 : zoom === "week" ? 24 : 12;
+  const start = startOfDay(new TZDate(startDate, timeZone));
+  const dates = Array.from({ length: days }, (_, index) => addDays(start, index));
+  const shift = (task, delta) => {
+    onTaskChange?.({
+      ...task,
+      start: new Date(addDays(new TZDate(task.start, timeZone), delta).getTime()),
+      end: new Date(addDays(new TZDate(task.end, timeZone), delta).getTime())
+    });
+  };
+  return /* @__PURE__ */ jsx(DragDropProvider2, {
+    children: /* @__PURE__ */ jsxs("section", {
+      "aria-label": label,
+      "data-density": density,
+      "data-scroll": "none",
+      className: "grid min-w-0 gap-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: "flex items-center justify-between gap-3",
+          children: [
+            /* @__PURE__ */ jsx("h2", {
+              className: "font-semibold",
+              children: label
+            }),
+            /* @__PURE__ */ jsxs(NativeSelect2, {
+              "aria-label": "Timeline zoom",
+              value: zoom,
+              onChange: (event) => setZoom(event.target.value),
+              children: [
+                /* @__PURE__ */ jsx(NativeSelectOption2, {
+                  value: "day",
+                  children: "Day scale"
+                }),
+                /* @__PURE__ */ jsx(NativeSelectOption2, {
+                  value: "week",
+                  children: "Week scale"
+                }),
+                /* @__PURE__ */ jsx(NativeSelectOption2, {
+                  value: "month",
+                  children: "Month scale"
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          role: "region",
+          "aria-label": `${label} timeline`,
+          tabIndex: 0,
+          className: "max-h-[65vh] overflow-auto rounded-sm border border-border",
+          children: /* @__PURE__ */ jsxs(Table2, {
+            "aria-label": label,
+            children: [
+              /* @__PURE__ */ jsx(TableHeader2, {
+                children: /* @__PURE__ */ jsxs(TableRow2, {
+                  children: [
+                    /* @__PURE__ */ jsx(TableHead2, {
+                      scope: "col",
+                      className: "sticky start-0 z-20 min-w-56 bg-card",
+                      children: "Task"
+                    }),
+                    dates.map((date) => /* @__PURE__ */ jsx(TableHead2, {
+                      scope: "col",
+                      className: "px-0 text-center text-xs",
+                      style: { minWidth: width, width },
+                      children: /* @__PURE__ */ jsx("abbr", {
+                        title: format(date, "PPP"),
+                        children: format(date, zoom === "day" ? "EEE d" : "d")
+                      })
+                    }, date.toISOString()))
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsxs(TableBody2, {
+                children: [
+                  tasks.map((task) => {
+                    const offset = differenceInCalendarDays(new TZDate(task.start, timeZone), start);
+                    const duration = differenceInCalendarDays(new TZDate(task.end, timeZone), new TZDate(task.start, timeZone)) + 1;
+                    const left = Math.max(0, offset);
+                    const right = Math.min(days, offset + duration);
+                    return /* @__PURE__ */ jsxs(TableRow2, {
+                      children: [
+                        /* @__PURE__ */ jsx(TableHead2, {
+                          scope: "row",
+                          className: "sticky start-0 z-10 bg-card",
+                          children: /* @__PURE__ */ jsxs("div", {
+                            className: "flex items-center gap-1",
+                            children: [
+                              /* @__PURE__ */ jsx(Button2, {
+                                type: "button",
+                                variant: "link",
+                                className: "min-w-0 flex-1 justify-start px-0",
+                                onClick: () => onTaskSelect(task),
+                                children: task.title
+                              }),
+                              /* @__PURE__ */ jsx(Button2, {
+                                type: "button",
+                                variant: "ghost",
+                                size: "icon-xs",
+                                "aria-label": `Move ${task.title} one day earlier`,
+                                disabled: !onTaskChange,
+                                onClick: () => shift(task, -1),
+                                children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+                              }),
+                              /* @__PURE__ */ jsx(Button2, {
+                                type: "button",
+                                variant: "ghost",
+                                size: "icon-xs",
+                                "aria-label": `Move ${task.title} one day later`,
+                                disabled: !onTaskChange,
+                                onClick: () => shift(task, 1),
+                                children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+                              })
+                            ]
+                          })
+                        }),
+                        /* @__PURE__ */ jsx(TableCell2, {
+                          colSpan: days,
+                          className: "p-0",
+                          children: /* @__PURE__ */ jsxs("div", {
+                            className: "relative h-14",
+                            style: { width: days * width },
+                            children: [
+                              /* @__PURE__ */ jsx("div", {
+                                className: "absolute inset-0 grid",
+                                style: { gridTemplateColumns: `repeat(${days},${width}px)` },
+                                children: dates.map((date) => /* @__PURE__ */ jsx(DropTarget2, {
+                                  "data-date": format(date, "yyyy-MM-dd"),
+                                  accept: [type],
+                                  canDrop: (item) => Boolean(onTaskChange) && typeof item.data === "string" && tasks.some((candidate) => candidate.id === item.data),
+                                  onDrop: (item) => {
+                                    const source = tasks.find((candidate) => candidate.id === item.data);
+                                    if (source)
+                                      shift(source, differenceInCalendarDays(date, new TZDate(source.start, timeZone)));
+                                  },
+                                  className: "border-s border-border data-over:bg-accent"
+                                }, date.toISOString()))
+                              }),
+                              right > left && /* @__PURE__ */ jsxs(DragSource2, {
+                                type,
+                                data: task.id,
+                                labels: [task.title],
+                                disabled: !onTaskChange,
+                                render: /* @__PURE__ */ jsx(Button2, {
+                                  type: "button",
+                                  variant: "secondary",
+                                  onClick: () => onTaskSelect(task)
+                                }),
+                                "aria-label": `${task.title}: ${format(new TZDate(task.start, timeZone), "PPP")} to ${format(new TZDate(task.end, timeZone), "PPP")}${task.progress === undefined ? "" : `, ${task.progress}% complete`}`,
+                                className: "absolute top-2 overflow-hidden border border-border px-2 text-xs data-dragging:opacity-50",
+                                style: { insetInlineStart: left * width + 2, width: (right - left) * width - 4 },
+                                children: [
+                                  task.progress !== undefined && /* @__PURE__ */ jsx("span", {
+                                    "aria-hidden": "true",
+                                    className: "absolute inset-y-0 start-0 bg-primary/15",
+                                    style: { width: `${Math.max(0, Math.min(100, task.progress))}%` }
+                                  }),
+                                  /* @__PURE__ */ jsx("span", {
+                                    className: "relative truncate",
+                                    children: task.title
+                                  })
+                                ]
+                              })
+                            ]
+                          })
+                        })
+                      ]
+                    }, task.id);
+                  }),
+                  !tasks.length && /* @__PURE__ */ jsx(TableRow2, {
+                    children: /* @__PURE__ */ jsx(TableCell2, {
+                      colSpan: days + 1,
+                      children: "No tasks scheduled."
+                    })
+                  })
+                ]
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
+}
+// src/components/gantt/Roadmap.tsx
+import { useState as useState2 } from "react";
+import { format as format2 } from "date-fns";
+import { TZDate as TZDate2 } from "@date-fns/tz";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Roadmap({
+  label,
+  items,
+  columns,
+  startDate,
+  days,
+  timeZone,
+  onItemsChange,
+  onItemSelect,
+  density
+}) {
+  const [view, setView] = useState2("board");
+  return /* @__PURE__ */ jsxs2(Tabs2, {
+    value: view,
+    onValueChange: (value) => {
+      if (typeof value === "string")
+        setView(value);
+    },
+    density,
+    children: [
+      /* @__PURE__ */ jsxs2(TabsList2, {
+        "aria-label": `${label} view`,
+        children: [
+          /* @__PURE__ */ jsx2(TabsTrigger2, {
+            value: "board",
+            children: "Board"
+          }),
+          /* @__PURE__ */ jsx2(TabsTrigger2, {
+            value: "timeline",
+            children: "Timeline"
+          }),
+          /* @__PURE__ */ jsx2(TabsTrigger2, {
+            value: "list",
+            children: "List"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2(TabsContent2, {
+        value: "board",
+        children: /* @__PURE__ */ jsx2(Kanban2, {
+          label,
+          items,
+          columns,
+          onItemsChange,
+          renderItem: (item) => /* @__PURE__ */ jsx2(Button2, {
+            type: "button",
+            variant: "link",
+            className: "h-auto px-0",
+            onClick: () => onItemSelect(item),
+            children: item.title
+          })
+        })
+      }),
+      /* @__PURE__ */ jsx2(TabsContent2, {
+        value: "timeline",
+        children: /* @__PURE__ */ jsx2(Gantt, {
+          label,
+          tasks: items,
+          startDate,
+          days,
+          timeZone,
+          onTaskSelect: onItemSelect,
+          onTaskChange: (task) => onItemsChange(items.map((item) => item.id === task.id ? task : item))
+        })
+      }),
+      /* @__PURE__ */ jsx2(TabsContent2, {
+        value: "list",
+        children: /* @__PURE__ */ jsxs2(Table2, {
+          "aria-label": label,
+          children: [
+            /* @__PURE__ */ jsx2(TableHeader2, {
+              children: /* @__PURE__ */ jsxs2(TableRow2, {
+                children: [
+                  /* @__PURE__ */ jsx2(TableHead2, {
+                    children: "Task"
+                  }),
+                  /* @__PURE__ */ jsx2(TableHead2, {
+                    children: "Status"
+                  }),
+                  /* @__PURE__ */ jsx2(TableHead2, {
+                    children: "Start"
+                  }),
+                  /* @__PURE__ */ jsx2(TableHead2, {
+                    children: "End"
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx2(TableBody2, {
+              children: items.map((item) => /* @__PURE__ */ jsxs2(TableRow2, {
+                children: [
+                  /* @__PURE__ */ jsx2(TableCell2, {
+                    children: /* @__PURE__ */ jsx2(Button2, {
+                      type: "button",
+                      variant: "link",
+                      onClick: () => onItemSelect(item),
+                      children: item.title
+                    })
+                  }),
+                  /* @__PURE__ */ jsx2(TableCell2, {
+                    children: columns.find((column) => column.id === item.columnId)?.label ?? item.columnId
+                  }),
+                  /* @__PURE__ */ jsx2(TableCell2, {
+                    children: format2(new TZDate2(item.start, timeZone), "PP")
+                  }),
+                  /* @__PURE__ */ jsx2(TableCell2, {
+                    children: format2(new TZDate2(item.end, timeZone), "PP")
+                  })
+                ]
+              }, item.id))
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+export {
+  Gantt,
+  Roadmap
+};

package/dist/components/image-crop/ImageCrop.d.ts

@@ -0,0 +1,10 @@
+import { type ReactCropProps } from "react-image-crop";
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type ImageCropProps = ReactCropProps & IDensityProps;
+/** Import react-image-crop/dist/ReactCrop.css alongside the package theme. */
+declare function ImageCrop({ className, density, ...props }: ImageCropProps): ReactElement;
+export { ImageCrop };
+export type { ImageCropProps };
+export { centerCrop, makeAspectCrop, convertToPixelCrop, convertToPercentCrop, cropToCanvas, cropToImg, } from "react-image-crop";
+export type { Crop, PixelCrop, PercentCrop } from "react-image-crop";

package/dist/components/image-crop/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageCrop, centerCrop, makeAspectCrop, convertToPixelCrop, convertToPercentCrop, cropToCanvas, cropToImg, } from "./ImageCrop.js";
+export type { ImageCropProps, Crop, PixelCrop, PercentCrop } from "./ImageCrop.js";

package/dist/components/image-crop/index.js

@@ -0,0 +1,35 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+
+// src/components/image-crop/ImageCrop.tsx
+import { ReactCrop } from "react-image-crop";
+import {
+  centerCrop,
+  makeAspectCrop,
+  convertToPixelCrop,
+  convertToPercentCrop,
+  cropToCanvas,
+  cropToImg
+} from "react-image-crop";
+import { jsx } from "react/jsx-runtime";
+function ImageCrop({ className, density, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-density": density,
+    "data-scroll": "none",
+    className: "max-w-full rounded-sm border border-border bg-card p-2",
+    children: /* @__PURE__ */ jsx(ReactCrop, {
+      ...props,
+      className: cn2("max-w-full [&_.ReactCrop__drag-handle]:border-foreground [&_.ReactCrop__drag-handle]:bg-background", className)
+    })
+  });
+}
+export {
+  ImageCrop,
+  centerCrop,
+  convertToPercentCrop,
+  convertToPixelCrop,
+  cropToCanvas,
+  cropToImg,
+  makeAspectCrop
+};

package/dist/components/tree/Tree.d.ts

@@ -0,0 +1,16 @@
+import type { TreeInstance, ItemInstance } from "@headless-tree/core";
+import type { ReactElement, ReactNode } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type TreeProps<T> = IDensityProps & {
+    tree: TreeInstance<T>;
+    label: string;
+    renderIcon?: (item: ItemInstance<T>) => ReactNode;
+    renderLabel?: (item: ItemInstance<T>) => ReactNode;
+};
+/** Render a native Headless Tree instance; configure loading, selection, and actions with useTree. */
+declare function Tree<T>({ tree, label, renderIcon, renderLabel, density }: TreeProps<T>): ReactElement;
+export { Tree };
+export type { TreeProps };
+export { useTree, AssistiveTreeDescription } from "@headless-tree/react";
+export { syncDataLoaderFeature, asyncDataLoaderFeature, hotkeysCoreFeature, selectionFeature, checkboxesFeature, searchFeature, renamingFeature, expandAllFeature, } from "@headless-tree/core";
+export type { TreeInstance, ItemInstance, TreeConfig } from "@headless-tree/core";

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

@@ -0,0 +1,2 @@
+export { Tree, useTree, AssistiveTreeDescription, syncDataLoaderFeature, asyncDataLoaderFeature, hotkeysCoreFeature, selectionFeature, checkboxesFeature, searchFeature, renamingFeature, expandAllFeature, } from "./Tree.js";
+export type { TreeProps, TreeInstance, ItemInstance, TreeConfig } from "./Tree.js";

package/dist/components/tree/index.js

@@ -0,0 +1,57 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+
+// src/components/tree/Tree.tsx
+import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";
+import { useTree, AssistiveTreeDescription } from "@headless-tree/react";
+import {
+  syncDataLoaderFeature,
+  asyncDataLoaderFeature,
+  hotkeysCoreFeature,
+  selectionFeature,
+  checkboxesFeature,
+  searchFeature,
+  renamingFeature,
+  expandAllFeature
+} from "@headless-tree/core";
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+function Tree({ tree, label, renderIcon, renderLabel, density }) {
+  return /* @__PURE__ */ jsx("div", {
+    ...tree.getContainerProps(label),
+    "data-density": density,
+    className: "grid gap-1 rounded-sm border border-border bg-card p-2",
+    children: tree.getItems().map((item) => /* @__PURE__ */ createElement("div", {
+      ...item.getProps(),
+      key: item.getKey(),
+      style: { paddingInlineStart: `${item.getItemMeta().level * 20 + 8}px` },
+      className: cn2("flex min-h-control cursor-default items-center gap-2 rounded-sm py-1 pr-2 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring", tree.getState().selectedItems?.includes(item.getId()) && "bg-accent text-accent-foreground")
+    }, item.isFolder() ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+      "aria-hidden": "true",
+      className: cn2("size-3.5 shrink-0", item.isExpanded() && "rotate-90")
+    }) : /* @__PURE__ */ jsx("span", {
+      className: "size-3.5 shrink-0"
+    }), /* @__PURE__ */ jsx("span", {
+      "aria-hidden": "true",
+      className: "flex shrink-0 [&>svg]:size-4",
+      children: renderIcon ? renderIcon(item) : item.isFolder() ? item.isExpanded() ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, {})
+    }), /* @__PURE__ */ jsx("span", {
+      className: "min-w-0 truncate",
+      children: renderLabel ? renderLabel(item) : item.getItemName()
+    })))
+  });
+}
+export {
+  AssistiveTreeDescription,
+  Tree,
+  asyncDataLoaderFeature,
+  checkboxesFeature,
+  expandAllFeature,
+  hotkeysCoreFeature,
+  renamingFeature,
+  searchFeature,
+  selectionFeature,
+  syncDataLoaderFeature,
+  useTree
+};