@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/dist/components/editor/RichTextEditor.d.ts

@@ -0,0 +1,14 @@
+import { type Editor } from "@tiptap/react";
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type RichTextEditorProps = IDensityProps & {
+    editor: Editor | null;
+    label: string;
+};
+/** The caller owns a native Tiptap editor and its extensions, content, and persistence. */
+declare function RichTextEditor({ editor, label, density }: RichTextEditorProps): ReactElement;
+export { RichTextEditor };
+export type { RichTextEditorProps };
+export { useEditor, useEditorState, EditorContent } from "@tiptap/react";
+export type { Editor, JSONContent, Content, Extensions } from "@tiptap/core";
+export { default as StarterKit } from "@tiptap/starter-kit";

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

@@ -0,0 +1,2 @@
+export { RichTextEditor, useEditor, useEditorState, EditorContent, StarterKit } from "./RichTextEditor.js";
+export type { RichTextEditorProps, Editor, JSONContent, Content, Extensions } from "./RichTextEditor.js";

package/dist/components/editor/index.js

@@ -0,0 +1,108 @@
+import"../../chunk-cp2m7y7v.js";
+import"../../chunk-73rkr9ct.js";
+import {
+  Toolbar2,
+  ToolbarButton2,
+  ToolbarGroup2,
+  ToolbarSeparator2
+} from "../../chunk-21wbz345.js";
+
+// src/components/editor/RichTextEditor.tsx
+import { EditorContent, useEditorState } from "@tiptap/react";
+import { BoldIcon, ItalicIcon, ListIcon, ListOrderedIcon, RedoIcon, UndoIcon } from "lucide-react";
+import { useEditor, useEditorState as useEditorState2, EditorContent as EditorContent2 } from "@tiptap/react";
+import { default as default2 } from "@tiptap/starter-kit";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RichTextEditor({ editor, label, density }) {
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: current }) => ({
+      bold: current?.isActive("bold") ?? false,
+      italic: current?.isActive("italic") ?? false,
+      bulletList: current?.isActive("bulletList") ?? false,
+      orderedList: current?.isActive("orderedList") ?? false,
+      undo: current?.can().undo() ?? false,
+      redo: current?.can().redo() ?? false,
+      editable: current?.isEditable ?? false
+    })
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    "data-density": density,
+    "data-scroll": "none",
+    className: "min-w-0 rounded-sm border border-input bg-background",
+    children: [
+      /* @__PURE__ */ jsxs(Toolbar2, {
+        "aria-label": `${label} formatting`,
+        className: "rounded-b-none border-0 border-b border-border",
+        children: [
+          /* @__PURE__ */ jsxs(ToolbarGroup2, {
+            children: [
+              /* @__PURE__ */ jsx(ToolbarButton2, {
+                "aria-label": "Bold",
+                "aria-pressed": state?.bold,
+                disabled: !state?.editable,
+                onClick: () => editor?.chain().focus().toggleBold().run(),
+                children: /* @__PURE__ */ jsx(BoldIcon, {})
+              }),
+              /* @__PURE__ */ jsx(ToolbarButton2, {
+                "aria-label": "Italic",
+                "aria-pressed": state?.italic,
+                disabled: !state?.editable,
+                onClick: () => editor?.chain().focus().toggleItalic().run(),
+                children: /* @__PURE__ */ jsx(ItalicIcon, {})
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx(ToolbarSeparator2, {}),
+          /* @__PURE__ */ jsxs(ToolbarGroup2, {
+            children: [
+              /* @__PURE__ */ jsx(ToolbarButton2, {
+                "aria-label": "Bullet list",
+                "aria-pressed": state?.bulletList,
+                disabled: !state?.editable,
+                onClick: () => editor?.chain().focus().toggleBulletList().run(),
+                children: /* @__PURE__ */ jsx(ListIcon, {})
+              }),
+              /* @__PURE__ */ jsx(ToolbarButton2, {
+                "aria-label": "Numbered list",
+                "aria-pressed": state?.orderedList,
+                disabled: !state?.editable,
+                onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+                children: /* @__PURE__ */ jsx(ListOrderedIcon, {})
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx(ToolbarSeparator2, {}),
+          /* @__PURE__ */ jsxs(ToolbarGroup2, {
+            children: [
+              /* @__PURE__ */ jsx(ToolbarButton2, {
+                "aria-label": "Undo",
+                disabled: !state?.editable || !state.undo,
+                onClick: () => editor?.chain().focus().undo().run(),
+                children: /* @__PURE__ */ jsx(UndoIcon, {})
+              }),
+              /* @__PURE__ */ jsx(ToolbarButton2, {
+                "aria-label": "Redo",
+                disabled: !state?.editable || !state.redo,
+                onClick: () => editor?.chain().focus().redo().run(),
+                children: /* @__PURE__ */ jsx(RedoIcon, {})
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(EditorContent, {
+        editor,
+        "aria-label": label,
+        className: "max-h-96 overflow-auto p-3 [&_.tiptap]:min-h-32 [&_.tiptap]:outline-none [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3"
+      })
+    ]
+  });
+}
+export {
+  EditorContent2 as EditorContent,
+  RichTextEditor,
+  default2 as StarterKit,
+  useEditor,
+  useEditorState2 as useEditorState
+};

package/dist/components/event-calendar/EventCalendar.d.ts

@@ -0,0 +1,16 @@
+import { type CalendarProps, type ToolbarProps } from "react-big-calendar";
+import { type ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+declare const eventCalendarLocalizer: import("react-big-calendar").DateLocalizer;
+declare function EventCalendarToolbar<T extends object, R extends object>({ label, view, views, onNavigate, onView, localizer, }: ToolbarProps<T, R>): ReactElement;
+type EventCalendarProps<T extends object, R extends object = object> = Omit<CalendarProps<T, R>, "className" | "style" | "popup" | "popupOffset" | "localizer"> & IDensityProps & {
+    label: string;
+    height?: number | string;
+    localizer?: CalendarProps<T, R>["localizer"];
+};
+/** Import @alexgorbatchev/shadcn/event-calendar.css. Native localizer and event APIs are preserved. */
+declare function EventCalendar<T extends object, R extends object = object>({ label, height, density, components, localizer, ...props }: EventCalendarProps<T, R>): ReactElement;
+export { EventCalendar, EventCalendarToolbar, eventCalendarLocalizer };
+export type { EventCalendarProps };
+export { dateFnsLocalizer } from "react-big-calendar";
+export type { Event, View, SlotInfo, DateLocalizer, CalendarProps, ToolbarProps } from "react-big-calendar";

package/dist/components/event-calendar/EventForm.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type EventDraft = {
+    title: string;
+    start: Date;
+    end: Date;
+    allDay: boolean;
+};
+type EventFormProps = IDensityProps & {
+    label: string;
+    initialValue: EventDraft;
+    onSave: (value: EventDraft) => void | Promise<void>;
+    onCancel?: () => void;
+    disabled?: boolean;
+};
+declare function EventForm({ label, initialValue, onSave, onCancel, disabled, density }: EventFormProps): ReactElement;
+export { EventForm };
+export type { EventFormProps, EventDraft };

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

@@ -0,0 +1,4 @@
+export { EventCalendar, EventCalendarToolbar, eventCalendarLocalizer, dateFnsLocalizer } from "./EventCalendar.js";
+export type { EventCalendarProps, Event, View, SlotInfo, DateLocalizer, CalendarProps, ToolbarProps, } from "./EventCalendar.js";
+export { EventForm } from "./EventForm.js";
+export type { EventFormProps, EventDraft } from "./EventForm.js";

package/dist/components/event-calendar/index.js

@@ -0,0 +1,266 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "../../chunk-73rkr9ct.js";
+import"../../chunk-jcxxjkqx.js";
+import"../../chunk-rajgnfbr.js";
+import {
+  FieldGroup2,
+  Field2,
+  FieldLabel2
+} from "../../chunk-6jpz5geq.js";
+import {
+  Input2
+} from "../../chunk-59p19t57.js";
+import {
+  Checkbox2,
+  Spinner2
+} from "../../chunk-eehfrrdz.js";
+
+// src/components/event-calendar/EventCalendar.tsx
+import {
+  Calendar as NativeCalendar,
+  dateFnsLocalizer
+} from "react-big-calendar";
+import { format, parse, startOfWeek, getDay } from "date-fns";
+import { enUS } from "date-fns/locale";
+import { createElement, isValidElement } from "react";
+import { dateFnsLocalizer as dateFnsLocalizer2 } from "react-big-calendar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var eventCalendarLocalizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales: { "en-US": enUS } });
+function EventCalendarToolbar({
+  label,
+  view,
+  views,
+  onNavigate,
+  onView,
+  localizer
+}) {
+  const names = Array.isArray(views) ? views : Object.keys(views ?? {});
+  return /* @__PURE__ */ jsxs("div", {
+    className: "mb-3 flex flex-wrap items-center justify-between gap-2",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex gap-1",
+        children: [
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => onNavigate("PREV"),
+            children: localizer.messages.previous
+          }),
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => onNavigate("TODAY"),
+            children: localizer.messages.today
+          }),
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => onNavigate("NEXT"),
+            children: localizer.messages.next
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("h2", {
+        "aria-live": "polite",
+        className: "text-sm font-semibold",
+        children: label
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex flex-wrap gap-1",
+        "aria-label": "Calendar views",
+        role: "group",
+        children: names.map((name) => {
+          if (name !== "month" && name !== "week" && name !== "work_week" && name !== "day" && name !== "agenda")
+            return null;
+          return /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            size: "sm",
+            variant: view === name ? "default" : "outline",
+            "aria-pressed": view === name,
+            onClick: () => onView(name),
+            children: localizer.messages[name] ?? name
+          }, name);
+        })
+      })
+    ]
+  });
+}
+function EventButton({ children }) {
+  if (!isValidElement(children))
+    throw new Error("An event wrapper requires one event element.");
+  return createElement("button", { ...children.props, type: "button" }, children.props.children);
+}
+function EventCalendar({
+  label,
+  height = 640,
+  density,
+  components,
+  localizer = eventCalendarLocalizer,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("section", {
+    "aria-label": label,
+    "data-density": density,
+    "data-scroll": "none",
+    className: "min-w-0 rounded-sm border border-border bg-card p-3",
+    children: /* @__PURE__ */ jsx(NativeCalendar, {
+      ...props,
+      localizer,
+      popup: false,
+      className: cn2("ag-event-calendar"),
+      style: { height },
+      components: { toolbar: EventCalendarToolbar, eventWrapper: EventButton, ...components }
+    })
+  });
+}
+// src/components/event-calendar/EventForm.tsx
+import { useId, useState } from "react";
+import { format as format2 } from "date-fns";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function EventForm({ label, initialValue, onSave, onCancel, disabled, density }) {
+  const id = useId();
+  const [start, setStart] = useState(format2(initialValue.start, "yyyy-MM-dd'T'HH:mm"));
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  return /* @__PURE__ */ jsx2("form", {
+    "aria-label": label,
+    "data-density": density,
+    "aria-busy": pending,
+    onSubmit: async (event) => {
+      event.preventDefault();
+      const data = new FormData(event.currentTarget);
+      const value = {
+        title: String(data.get("title")),
+        start: new Date(String(data.get("start"))),
+        end: new Date(String(data.get("end"))),
+        allDay: data.has("allDay")
+      };
+      setPending(true);
+      setError("");
+      try {
+        await onSave(value);
+      } catch (error) {
+        setError(error instanceof Error ? error.message : "Unable to save the event.");
+      } finally {
+        setPending(false);
+      }
+    },
+    children: /* @__PURE__ */ jsxs2("fieldset", {
+      disabled: disabled || pending,
+      className: "min-w-0",
+      children: [
+        /* @__PURE__ */ jsx2("legend", {
+          className: "sr-only",
+          children: label
+        }),
+        /* @__PURE__ */ jsxs2(FieldGroup2, {
+          children: [
+            /* @__PURE__ */ jsxs2(Field2, {
+              children: [
+                /* @__PURE__ */ jsx2(FieldLabel2, {
+                  htmlFor: `${id}-title`,
+                  children: "Title"
+                }),
+                /* @__PURE__ */ jsx2(Input2, {
+                  id: `${id}-title`,
+                  name: "title",
+                  required: true,
+                  defaultValue: initialValue.title
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              className: "grid gap-3 sm:grid-cols-2",
+              children: [
+                /* @__PURE__ */ jsxs2(Field2, {
+                  children: [
+                    /* @__PURE__ */ jsx2(FieldLabel2, {
+                      htmlFor: `${id}-start`,
+                      children: "Start"
+                    }),
+                    /* @__PURE__ */ jsx2(Input2, {
+                      id: `${id}-start`,
+                      name: "start",
+                      type: "datetime-local",
+                      required: true,
+                      value: start,
+                      onChange: (event) => setStart(event.target.value)
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs2(Field2, {
+                  children: [
+                    /* @__PURE__ */ jsx2(FieldLabel2, {
+                      htmlFor: `${id}-end`,
+                      children: "End"
+                    }),
+                    /* @__PURE__ */ jsx2(Input2, {
+                      id: `${id}-end`,
+                      name: "end",
+                      type: "datetime-local",
+                      required: true,
+                      min: start,
+                      defaultValue: format2(initialValue.end, "yyyy-MM-dd'T'HH:mm")
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs2(Field2, {
+              orientation: "horizontal",
+              children: [
+                /* @__PURE__ */ jsx2(Checkbox2, {
+                  id: `${id}-all-day`,
+                  name: "allDay",
+                  defaultChecked: initialValue.allDay
+                }),
+                /* @__PURE__ */ jsx2(FieldLabel2, {
+                  htmlFor: `${id}-all-day`,
+                  children: "All day"
+                })
+              ]
+            }),
+            error && /* @__PURE__ */ jsx2("p", {
+              role: "alert",
+              className: "text-sm text-destructive",
+              children: error
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              className: "flex flex-wrap justify-end gap-2",
+              children: [
+                onCancel && /* @__PURE__ */ jsx2(Button2, {
+                  type: "button",
+                  variant: "outline",
+                  onClick: onCancel,
+                  children: "Cancel"
+                }),
+                /* @__PURE__ */ jsxs2(Button2, {
+                  type: "submit",
+                  children: [
+                    pending && /* @__PURE__ */ jsx2(Spinner2, {}),
+                    "Save event"
+                  ]
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+export {
+  EventCalendar,
+  EventCalendarToolbar,
+  EventForm,
+  dateFnsLocalizer2 as dateFnsLocalizer,
+  eventCalendarLocalizer
+};

package/dist/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type DropzoneOptions } from "react-dropzone";
+import type { IDensityProps } from "../../density/types.js";
+type FileUploadProps = IDensityProps & Pick<DropzoneOptions, "accept" | "maxSize" | "minSize" | "maxFiles" | "multiple" | "disabled" | "validator" | "onDrop" | "onDropRejected" | "onError"> & {
+    label: string;
+    description?: ReactNode;
+    children?: ReactNode;
+    name?: string;
+};
+/** Native file selection and validation. Consumers own storage and upload requests. */
+declare function FileUpload({ label, description, children, name, density, ...options }: FileUploadProps): ReactElement;
+export { FileUpload };
+export type { FileUploadProps };
+export type { FileRejection, FileError, DropEvent, Accept } from "react-dropzone";

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from "./FileUpload.js";
+export type { FileUploadProps, FileRejection, FileError, DropEvent, Accept } from "./FileUpload.js";

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";