@omnifyjp/ui 0.5.3 → 1.0.1

package/dist/components/button.d.ts

@@ -0,0 +1,81 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { UIColor } from '../lib/types.js';
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "destructive" | "default" | "secondary" | "outline" | "soft" | "ghost" | null | undefined;
+    color?: "primary" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ComponentProps<"button">, Omit<VariantProps<typeof buttonVariants>, "color"> {
+    /**
+     * Semantic color intent. Works with `variant` to produce the final appearance.
+     *
+     * | Color | Use for |
+     * |-------|---------|
+     * | `primary` | Main actions (default) |
+     * | `destructive` | Delete, errors |
+     * | `success` | Approve, confirm |
+     * | `warning` | Caution, attention |
+     * | `info` | Informational |
+     *
+     * @default "primary"
+     * @example
+     * ```tsx
+     * <Button color="success">Approve</Button>
+     * <Button variant="outline" color="destructive">Reject</Button>
+     * <Button variant="soft" color="warning">Review</Button>
+     * ```
+     */
+    color?: UIColor;
+    /**
+     * Render as a child component using Radix Slot.
+     * When `true`, the button merges its props onto its single child element.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Make the button take the full width of its container.
+     * @default false
+     * @example
+     * ```tsx
+     * <Button block>Full Width</Button>
+     * <Button size="xl" block>Sign In</Button>
+     * ```
+     */
+    block?: boolean;
+}
+/**
+ * Button component with semantic colors, visual variants, and standard sizes.
+ *
+ * Combines `variant` (how it looks) with `color` (what it means) for full flexibility.
+ * All existing `variant="destructive"` usage continues to work unchanged.
+ *
+ * @example
+ * ```tsx
+ * // Default (solid primary)
+ * <Button>Save</Button>
+ *
+ * // Semantic colors
+ * <Button color="success">Approve</Button>
+ * <Button color="destructive">Delete</Button>
+ * <Button color="warning">Proceed with caution</Button>
+ *
+ * // Variant × Color combinations
+ * <Button variant="outline" color="destructive">Reject</Button>
+ * <Button variant="soft" color="success">Approved</Button>
+ * <Button variant="ghost" color="info">Learn more</Button>
+ *
+ * // Legacy (still works)
+ * <Button variant="destructive">Delete</Button>
+ *
+ * // Sizes: xs (24px) | sm (28px) | default (32px) | lg (36px) | xl (44px) | icon (32x32)
+ * <Button size="xs">Tiny</Button>
+ * <Button size="xl" block>Sign In</Button>
+ * <Button size="icon"><PlusIcon /></Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,4 @@
+export { Button, buttonVariants } from '../chunk-55E7D2HR.js';
+import '../chunk-DGPY4WP3.js';
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}

package/dist/components/calendar-category-badge.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CalendarCategoryBadgeProps {
+    /** The category key (e.g. "meeting", "deadline"). Determines the badge color from built-in or custom styles. */
+    category: string;
+    /** Override display label. Defaults to the raw category key. */
+    label?: string;
+    /** Custom className styles per category key, merged with built-in defaults. */
+    styles?: Record<string, string>;
+}
+/**
+ * Color-coded badge for calendar event categories. Ships with built-in styles
+ * for meeting (blue), deadline (red), reminder (amber), personal (purple), and
+ * holiday (green). Custom categories can be styled via the `styles` prop.
+ *
+ * @example
+ * ```tsx
+ * <CalendarCategoryBadge category="meeting" label="Meeting" />
+ * <CalendarCategoryBadge category="custom" label="Custom" styles={{ custom: "bg-pink-50 text-pink-600" }} />
+ * ```
+ */
+declare function CalendarCategoryBadge({ category, label, styles }: CalendarCategoryBadgeProps): react_jsx_runtime.JSX.Element;
+
+export { CalendarCategoryBadge, type CalendarCategoryBadgeProps };

package/dist/components/calendar-category-badge.js

@@ -0,0 +1,5 @@
+export { CalendarCategoryBadge } from '../chunk-JAJMM32I.js';
+import '../chunk-A3BB5ZOC.js';
+import '../chunk-DGPY4WP3.js';
+//# sourceMappingURL=calendar-category-badge.js.map
+//# sourceMappingURL=calendar-category-badge.js.map

package/dist/components/calendar-category-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"calendar-category-badge.js"}

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

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Event data shape required by CalendarEventChip. */
+interface CalendarEventChipEvent {
+    /** Unique event identifier. */
+    id: string;
+    /** Display title of the event. */
+    title: string;
+    /** Event start date/time. */
+    start: Date;
+    /** Event end date/time. */
+    end: Date;
+    /** Whether this is an all-day event. When true, time is not displayed. */
+    allDay?: boolean;
+    /** CSS color string used for the chip background, text, and left border. */
+    color: string;
+}
+interface CalendarEventChipProps {
+    /** The event to display. */
+    event: CalendarEventChipEvent;
+    /** Use compact layout with tighter line-height. Defaults to `false`. */
+    compact?: boolean;
+    /** Callback when the chip is clicked. */
+    onClick?: (event: CalendarEventChipEvent) => void;
+}
+/**
+ * Small colored chip representing a calendar event. Shows the event title
+ * with a colored left border and tinted background. Optionally displays
+ * the start time for non-all-day events.
+ *
+ * @example
+ * ```tsx
+ * <CalendarEventChip
+ *   event={{ id: "1", title: "Standup", start: new Date(), end: new Date(), color: "#3b82f6" }}
+ *   onClick={(e) => openDetail(e.id)}
+ * />
+ * ```
+ */
+declare function CalendarEventChip({ event, compact, onClick }: CalendarEventChipProps): react_jsx_runtime.JSX.Element;
+
+export { CalendarEventChip, type CalendarEventChipEvent, type CalendarEventChipProps };

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

@@ -0,0 +1,30 @@
+import { cn } from '../chunk-DGPY4WP3.js';
+import { format } from 'date-fns';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function CalendarEventChip({ event, compact = false, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onClick?.(event),
+      className: cn(
+        "w-full text-left rounded px-1.5 py-0.5 text-xs font-medium truncate transition-opacity hover:opacity-80 cursor-pointer",
+        compact ? "leading-tight" : "leading-normal"
+      ),
+      style: {
+        backgroundColor: `${event.color}20`,
+        color: event.color,
+        borderLeft: `2px solid ${event.color}`
+      },
+      children: [
+        !event.allDay && !compact && /* @__PURE__ */ jsx("span", { className: "opacity-75 mr-1", children: format(event.start, "HH:mm") }),
+        event.title
+      ]
+    }
+  );
+}
+
+export { CalendarEventChip };
+//# sourceMappingURL=calendar-event-chip.js.map
+//# sourceMappingURL=calendar-event-chip.js.map

package/dist/components/calendar-event-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/calendar-event-chip.tsx"],"names":[],"mappings":";;;;AAyCO,SAAS,kBAAkB,EAAE,KAAA,EAAO,OAAA,GAAU,KAAA,EAAO,SAAQ,EAA2B;AAC7F,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,MAAM,OAAA,GAAU,KAAK,CAAA;AAAA,MAC9B,SAAA,EAAW,EAAA;AAAA,QACT,wHAAA;AAAA,QACA,UAAU,eAAA,GAAkB;AAAA,OAC9B;AAAA,MACA,KAAA,EAAO;AAAA,QACL,eAAA,EAAiB,CAAA,EAAG,KAAA,CAAM,KAAK,CAAA,EAAA,CAAA;AAAA,QAC/B,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,UAAA,EAAY,CAAA,UAAA,EAAa,KAAA,CAAM,KAAK,CAAA;AAAA,OACtC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,KAAA,CAAM,MAAA,IAAU,CAAC,OAAA,oBACjB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EAAmB,QAAA,EAAA,MAAA,CAAO,KAAA,CAAM,KAAA,EAAO,OAAO,CAAA,EAAE,CAAA;AAAA,QAEjE,KAAA,CAAM;AAAA;AAAA;AAAA,GACT;AAEJ","file":"calendar-event-chip.js","sourcesContent":["import { format } from 'date-fns';\nimport { cn } from '../lib/utils';\n\n/** Event data shape required by CalendarEventChip. */\nexport interface CalendarEventChipEvent {\n  /** Unique event identifier. */\n  id: string;\n  /** Display title of the event. */\n  title: string;\n  /** Event start date/time. */\n  start: Date;\n  /** Event end date/time. */\n  end: Date;\n  /** Whether this is an all-day event. When true, time is not displayed. */\n  allDay?: boolean;\n  /** CSS color string used for the chip background, text, and left border. */\n  color: string;\n}\n\nexport interface CalendarEventChipProps {\n  /** The event to display. */\n  event: CalendarEventChipEvent;\n  /** Use compact layout with tighter line-height. Defaults to `false`. */\n  compact?: boolean;\n  /** Callback when the chip is clicked. */\n  onClick?: (event: CalendarEventChipEvent) => void;\n}\n\n/**\n * Small colored chip representing a calendar event. Shows the event title\n * with a colored left border and tinted background. Optionally displays\n * the start time for non-all-day events.\n *\n * @example\n * ```tsx\n * <CalendarEventChip\n *   event={{ id: \"1\", title: \"Standup\", start: new Date(), end: new Date(), color: \"#3b82f6\" }}\n *   onClick={(e) => openDetail(e.id)}\n * />\n * ```\n */\nexport function CalendarEventChip({ event, compact = false, onClick }: CalendarEventChipProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onClick?.(event)}\n      className={cn(\n        'w-full text-left rounded px-1.5 py-0.5 text-xs font-medium truncate transition-opacity hover:opacity-80 cursor-pointer',\n        compact ? 'leading-tight' : 'leading-normal'\n      )}\n      style={{\n        backgroundColor: `${event.color}20`,\n        color: event.color,\n        borderLeft: `2px solid ${event.color}`,\n      }}\n    >\n      {!event.allDay && !compact && (\n        <span className=\"opacity-75 mr-1\">{format(event.start, 'HH:mm')}</span>\n      )}\n      {event.title}\n    </button>\n  );\n}\n"]}

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

@@ -0,0 +1,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Extended event data shape for the detail sheet, including description, location, and attendees. */
+interface CalendarEventSheetEvent {
+    /** Unique event identifier. */
+    id: string;
+    /** Display title of the event. */
+    title: string;
+    /** Optional long description or notes for the event. */
+    description?: string;
+    /** Event start date/time. */
+    start: Date;
+    /** Event end date/time. */
+    end: Date;
+    /** Whether this is an all-day event. */
+    allDay?: boolean;
+    /** CSS color string for the event. */
+    color: string;
+    /** Category key (e.g. "meeting", "deadline") used by CalendarCategoryBadge. */
+    category: string;
+    /** Optional location string. */
+    location?: string;
+    /** Optional list of attendee email addresses. */
+    attendees?: string[];
+}
+/** Localizable labels for the event detail sheet. All have English defaults. */
+interface CalendarEventSheetLabels {
+    /** Text displayed for all-day events instead of a time range. */
+    allDay?: string;
+    /** Heading text for the attendees section. */
+    attendees?: string;
+    /** Label for the delete button. */
+    delete?: string;
+}
+interface CalendarEventSheetProps {
+    /** The event to display, or `null` to render nothing. */
+    event: CalendarEventSheetEvent | null;
+    /** Whether the sheet is open. */
+    open: boolean;
+    /** Callback to toggle the sheet open state. */
+    onOpenChange: (open: boolean) => void;
+    /** Optional callback when the delete button is clicked. Receives the event id. */
+    onDelete?: (id: string) => void;
+    /** Override display label for the category badge. */
+    categoryLabel?: string;
+    /** Custom className styles per category key for the CalendarCategoryBadge. */
+    categoryStyles?: Record<string, string>;
+    /** Localizable UI labels with English defaults. */
+    labels?: CalendarEventSheetLabels;
+}
+/**
+ * Side sheet that displays full event details including title, category badge,
+ * description, date/time, location, attendees, and a delete action.
+ * Built on top of the Sheet component.
+ *
+ * @example
+ * ```tsx
+ * <CalendarEventSheet
+ *   event={selectedEvent}
+ *   open={sheetOpen}
+ *   onOpenChange={setSheetOpen}
+ *   onDelete={(id) => removeEvent(id)}
+ * />
+ * ```
+ */
+declare function CalendarEventSheet({ event, open, onOpenChange, onDelete, categoryLabel, categoryStyles, labels: labelsProp, }: CalendarEventSheetProps): react_jsx_runtime.JSX.Element | null;
+
+export { CalendarEventSheet, type CalendarEventSheetEvent, type CalendarEventSheetLabels, type CalendarEventSheetProps };

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

@@ -0,0 +1,83 @@
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../chunk-JLTBUACL.js';
+import { CalendarCategoryBadge } from '../chunk-JAJMM32I.js';
+import { Separator } from '../chunk-PGWNOZDX.js';
+import { Button } from '../chunk-55E7D2HR.js';
+import '../chunk-A3BB5ZOC.js';
+import '../chunk-DGPY4WP3.js';
+import { format } from 'date-fns';
+import { Clock, MapPin, Users, Trash2 } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultLabels = {
+  allDay: "All Day",
+  attendees: "Attendees",
+  delete: "Delete"
+};
+function CalendarEventSheet({
+  event,
+  open,
+  onOpenChange,
+  onDelete,
+  categoryLabel,
+  categoryStyles,
+  labels: labelsProp
+}) {
+  const labels = { ...defaultLabels, ...labelsProp };
+  if (!event) return null;
+  const timeDisplay = event.allDay ? labels.allDay : `${format(event.start, "HH:mm")} - ${format(event.end, "HH:mm")}`;
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: event.title }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        CalendarCategoryBadge,
+        {
+          category: event.category,
+          label: categoryLabel,
+          styles: categoryStyles
+        }
+      ),
+      event.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: event.description }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: format(event.start, "EEEE, MMMM d, yyyy") }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: timeDisplay })
+          ] })
+        ] }),
+        event.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: event.location })
+        ] }),
+        event.attendees && event.attendees.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 text-sm", children: [
+          /* @__PURE__ */ jsx(Users, { className: "w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium mb-1", children: labels.attendees }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: event.attendees.map((email) => /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: email }, email)) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "destructive",
+          size: "sm",
+          onClick: () => {
+            onDelete?.(event.id);
+            onOpenChange(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
+            labels.delete
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+}
+
+export { CalendarEventSheet };
+//# sourceMappingURL=calendar-event-sheet.js.map
+//# sourceMappingURL=calendar-event-sheet.js.map

package/dist/components/calendar-event-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/calendar-event-sheet.tsx"],"names":[],"mappings":"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","file":"calendar-event-sheet.js","sourcesContent":["import { format } from 'date-fns';\nimport { Clock, MapPin, Users, Trash2 } from 'lucide-react';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from './sheet';\nimport { Button } from './button';\nimport { Separator } from './separator';\nimport { CalendarCategoryBadge } from './calendar-category-badge';\n\n/** Extended event data shape for the detail sheet, including description, location, and attendees. */\nexport interface CalendarEventSheetEvent {\n  /** Unique event identifier. */\n  id: string;\n  /** Display title of the event. */\n  title: string;\n  /** Optional long description or notes for the event. */\n  description?: string;\n  /** Event start date/time. */\n  start: Date;\n  /** Event end date/time. */\n  end: Date;\n  /** Whether this is an all-day event. */\n  allDay?: boolean;\n  /** CSS color string for the event. */\n  color: string;\n  /** Category key (e.g. \"meeting\", \"deadline\") used by CalendarCategoryBadge. */\n  category: string;\n  /** Optional location string. */\n  location?: string;\n  /** Optional list of attendee email addresses. */\n  attendees?: string[];\n}\n\n/** Localizable labels for the event detail sheet. All have English defaults. */\nexport interface CalendarEventSheetLabels {\n  /** Text displayed for all-day events instead of a time range. */\n  allDay?: string;\n  /** Heading text for the attendees section. */\n  attendees?: string;\n  /** Label for the delete button. */\n  delete?: string;\n}\n\nconst defaultLabels: Required<CalendarEventSheetLabels> = {\n  allDay: 'All Day',\n  attendees: 'Attendees',\n  delete: 'Delete',\n};\n\nexport interface CalendarEventSheetProps {\n  /** The event to display, or `null` to render nothing. */\n  event: CalendarEventSheetEvent | null;\n  /** Whether the sheet is open. */\n  open: boolean;\n  /** Callback to toggle the sheet open state. */\n  onOpenChange: (open: boolean) => void;\n  /** Optional callback when the delete button is clicked. Receives the event id. */\n  onDelete?: (id: string) => void;\n  /** Override display label for the category badge. */\n  categoryLabel?: string;\n  /** Custom className styles per category key for the CalendarCategoryBadge. */\n  categoryStyles?: Record<string, string>;\n  /** Localizable UI labels with English defaults. */\n  labels?: CalendarEventSheetLabels;\n}\n\n/**\n * Side sheet that displays full event details including title, category badge,\n * description, date/time, location, attendees, and a delete action.\n * Built on top of the Sheet component.\n *\n * @example\n * ```tsx\n * <CalendarEventSheet\n *   event={selectedEvent}\n *   open={sheetOpen}\n *   onOpenChange={setSheetOpen}\n *   onDelete={(id) => removeEvent(id)}\n * />\n * ```\n */\nexport function CalendarEventSheet({\n  event,\n  open,\n  onOpenChange,\n  onDelete,\n  categoryLabel,\n  categoryStyles,\n  labels: labelsProp,\n}: CalendarEventSheetProps) {\n  const labels = { ...defaultLabels, ...labelsProp };\n\n  if (!event) return null;\n\n  const timeDisplay = event.allDay\n    ? labels.allDay\n    : `${format(event.start, 'HH:mm')} - ${format(event.end, 'HH:mm')}`;\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent className=\"sm:max-w-md\">\n        <SheetHeader>\n          <SheetTitle>{event.title}</SheetTitle>\n        </SheetHeader>\n        <div className=\"mt-4 space-y-4\">\n          <CalendarCategoryBadge\n            category={event.category}\n            label={categoryLabel}\n            styles={categoryStyles}\n          />\n\n          {event.description && (\n            <p className=\"text-sm text-muted-foreground\">{event.description}</p>\n          )}\n\n          <Separator />\n\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center gap-3 text-sm\">\n              <Clock className=\"w-4 h-4 text-muted-foreground flex-shrink-0\" />\n              <div>\n                <p className=\"font-medium\">{format(event.start, 'EEEE, MMMM d, yyyy')}</p>\n                <p className=\"text-muted-foreground\">{timeDisplay}</p>\n              </div>\n            </div>\n\n            {event.location && (\n              <div className=\"flex items-center gap-3 text-sm\">\n                <MapPin className=\"w-4 h-4 text-muted-foreground flex-shrink-0\" />\n                <span>{event.location}</span>\n              </div>\n            )}\n\n            {event.attendees && event.attendees.length > 0 && (\n              <div className=\"flex items-start gap-3 text-sm\">\n                <Users className=\"w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5\" />\n                <div>\n                  <p className=\"font-medium mb-1\">{labels.attendees}</p>\n                  <div className=\"space-y-1\">\n                    {event.attendees.map(email => (\n                      <p key={email} className=\"text-muted-foreground\">{email}</p>\n                    ))}\n                  </div>\n                </div>\n              </div>\n            )}\n          </div>\n\n          <Separator />\n\n          <div className=\"flex justify-end\">\n            <Button\n              variant=\"destructive\"\n              size=\"sm\"\n              onClick={() => {\n                onDelete?.(event.id);\n                onOpenChange(false);\n              }}\n            >\n              <Trash2 className=\"w-4 h-4\" />\n              {labels.delete}\n            </Button>\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  );\n}\n"]}

package/dist/components/calendar-mini.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** A category that can be toggled on/off in the mini calendar's filter section. */
+interface CalendarCategory {
+    /** Unique key for this category. */
+    key: string;
+    /** CSS color string used for the category dot. */
+    color: string;
+    /** Display label for the category. */
+    label: string;
+}
+/** Localizable labels for the mini calendar. All have English defaults. */
+interface CalendarMiniLabels {
+    /** Label for Sunday column header. */
+    sun?: string;
+    /** Label for Monday column header. */
+    mon?: string;
+    /** Label for Tuesday column header. */
+    tue?: string;
+    /** Label for Wednesday column header. */
+    wed?: string;
+    /** Label for Thursday column header. */
+    thu?: string;
+    /** Label for Friday column header. */
+    fri?: string;
+    /** Label for Saturday column header. */
+    sat?: string;
+    /** Heading text for the categories filter section. */
+    categories?: string;
+}
+interface CalendarMiniProps {
+    /** The month to display (any date within the target month). */
+    currentDate: Date;
+    /** The currently selected date, highlighted with primary color. */
+    selectedDate: Date;
+    /** Callback when a day cell is clicked. */
+    onSelectDate: (date: Date) => void;
+    /** Optional list of event categories for the filter section. */
+    categories?: CalendarCategory[];
+    /** Keys of currently enabled categories. */
+    enabledCategories?: string[];
+    /** Callback when a category checkbox is toggled. */
+    onToggleCategory?: (key: string) => void;
+    /** Localizable UI labels with English defaults. */
+    labels?: CalendarMiniLabels;
+}
+/**
+ * Compact month calendar with optional category filters. Designed for sidebar
+ * placement in calendar views. Locale-agnostic via the `labels` prop.
+ *
+ * @example
+ * ```tsx
+ * <CalendarMini
+ *   currentDate={new Date()}
+ *   selectedDate={selectedDate}
+ *   onSelectDate={setSelectedDate}
+ *   categories={[{ key: "meeting", color: "#3b82f6", label: "Meeting" }]}
+ *   enabledCategories={["meeting"]}
+ *   onToggleCategory={(key) => toggle(key)}
+ * />
+ * ```
+ */
+declare function CalendarMini({ currentDate, selectedDate, onSelectDate, categories, enabledCategories, onToggleCategory, labels: labelsProp, }: CalendarMiniProps): react_jsx_runtime.JSX.Element;
+
+export { type CalendarCategory, CalendarMini, type CalendarMiniLabels, type CalendarMiniProps };

package/dist/components/calendar-mini.js

@@ -0,0 +1,93 @@
+import { Checkbox } from '../chunk-WL4ZO2H3.js';
+import { Separator } from '../chunk-PGWNOZDX.js';
+import { cn } from '../chunk-DGPY4WP3.js';
+import { useMemo } from 'react';
+import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, format, isSameMonth, isSameDay, isToday } from 'date-fns';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var defaultLabels = {
+  sun: "Sun",
+  mon: "Mon",
+  tue: "Tue",
+  wed: "Wed",
+  thu: "Thu",
+  fri: "Fri",
+  sat: "Sat",
+  categories: "Categories"
+};
+function CalendarMini({
+  currentDate,
+  selectedDate,
+  onSelectDate,
+  categories,
+  enabledCategories,
+  onToggleCategory,
+  labels: labelsProp
+}) {
+  const labels = { ...defaultLabels, ...labelsProp };
+  const days = useMemo(() => {
+    const monthStart = startOfMonth(currentDate);
+    const monthEnd = endOfMonth(currentDate);
+    const calStart = startOfWeek(monthStart, { weekStartsOn: 0 });
+    const calEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
+    return eachDayOfInterval({ start: calStart, end: calEnd });
+  }, [currentDate]);
+  const weekDays = [labels.sun, labels.mon, labels.tue, labels.wed, labels.thu, labels.fri, labels.sat];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mb-2", children: format(currentDate, "MMMM yyyy") }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-0", children: [
+        weekDays.map((day) => /* @__PURE__ */ jsx("div", { className: "text-center text-[10px] font-medium text-muted-foreground py-1", children: day }, day)),
+        days.map((day) => {
+          const inMonth = isSameMonth(day, currentDate);
+          const selected = isSameDay(day, selectedDate);
+          const today = isToday(day);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelectDate(day),
+              className: cn(
+                "w-7 h-7 text-[11px] rounded-full flex items-center justify-center transition-colors",
+                !inMonth && "text-muted-foreground/40",
+                inMonth && !selected && "hover:bg-accent",
+                selected && "bg-primary text-primary-foreground",
+                today && !selected && "font-bold text-primary"
+              ),
+              children: format(day, "d")
+            },
+            day.toISOString()
+          );
+        })
+      ] })
+    ] }),
+    categories && categories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mb-2", children: labels.categories }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: categories.map((cat) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "flex items-center gap-2 py-1 px-1 rounded hover:bg-accent transition-colors cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: enabledCategories?.includes(cat.key) ?? false,
+                  onCheckedChange: () => onToggleCategory?.(cat.key)
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: cat.color } }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: cat.label })
+            ]
+          },
+          cat.key
+        )) })
+      ] })
+    ] })
+  ] });
+}
+
+export { CalendarMini };
+//# sourceMappingURL=calendar-mini.js.map
+//# sourceMappingURL=calendar-mini.js.map

package/dist/components/calendar-mini.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/calendar-mini.tsx"],"names":[],"mappings":"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","file":"calendar-mini.js","sourcesContent":["import { useMemo } from 'react';\nimport {\n  startOfMonth, endOfMonth, startOfWeek, endOfWeek,\n  eachDayOfInterval, isSameMonth, isSameDay, isToday, format,\n} from 'date-fns';\nimport { cn } from '../lib/utils';\nimport { Checkbox } from './checkbox';\nimport { Separator } from './separator';\n\n/** A category that can be toggled on/off in the mini calendar's filter section. */\nexport interface CalendarCategory {\n  /** Unique key for this category. */\n  key: string;\n  /** CSS color string used for the category dot. */\n  color: string;\n  /** Display label for the category. */\n  label: string;\n}\n\n/** Localizable labels for the mini calendar. All have English defaults. */\nexport interface CalendarMiniLabels {\n  /** Label for Sunday column header. */\n  sun?: string;\n  /** Label for Monday column header. */\n  mon?: string;\n  /** Label for Tuesday column header. */\n  tue?: string;\n  /** Label for Wednesday column header. */\n  wed?: string;\n  /** Label for Thursday column header. */\n  thu?: string;\n  /** Label for Friday column header. */\n  fri?: string;\n  /** Label for Saturday column header. */\n  sat?: string;\n  /** Heading text for the categories filter section. */\n  categories?: string;\n}\n\nconst defaultLabels: Required<CalendarMiniLabels> = {\n  sun: 'Sun', mon: 'Mon', tue: 'Tue', wed: 'Wed', thu: 'Thu', fri: 'Fri', sat: 'Sat',\n  categories: 'Categories',\n};\n\nexport interface CalendarMiniProps {\n  /** The month to display (any date within the target month). */\n  currentDate: Date;\n  /** The currently selected date, highlighted with primary color. */\n  selectedDate: Date;\n  /** Callback when a day cell is clicked. */\n  onSelectDate: (date: Date) => void;\n  /** Optional list of event categories for the filter section. */\n  categories?: CalendarCategory[];\n  /** Keys of currently enabled categories. */\n  enabledCategories?: string[];\n  /** Callback when a category checkbox is toggled. */\n  onToggleCategory?: (key: string) => void;\n  /** Localizable UI labels with English defaults. */\n  labels?: CalendarMiniLabels;\n}\n\n/**\n * Compact month calendar with optional category filters. Designed for sidebar\n * placement in calendar views. Locale-agnostic via the `labels` prop.\n *\n * @example\n * ```tsx\n * <CalendarMini\n *   currentDate={new Date()}\n *   selectedDate={selectedDate}\n *   onSelectDate={setSelectedDate}\n *   categories={[{ key: \"meeting\", color: \"#3b82f6\", label: \"Meeting\" }]}\n *   enabledCategories={[\"meeting\"]}\n *   onToggleCategory={(key) => toggle(key)}\n * />\n * ```\n */\nexport function CalendarMini({\n  currentDate,\n  selectedDate,\n  onSelectDate,\n  categories,\n  enabledCategories,\n  onToggleCategory,\n  labels: labelsProp,\n}: CalendarMiniProps) {\n  const labels = { ...defaultLabels, ...labelsProp };\n\n  const days = useMemo(() => {\n    const monthStart = startOfMonth(currentDate);\n    const monthEnd = endOfMonth(currentDate);\n    const calStart = startOfWeek(monthStart, { weekStartsOn: 0 });\n    const calEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });\n    return eachDayOfInterval({ start: calStart, end: calEnd });\n  }, [currentDate]);\n\n  const weekDays = [labels.sun, labels.mon, labels.tue, labels.wed, labels.thu, labels.fri, labels.sat];\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Mini calendar */}\n      <div>\n        <p className=\"text-sm font-semibold mb-2\">{format(currentDate, 'MMMM yyyy')}</p>\n        <div className=\"grid grid-cols-7 gap-0\">\n          {weekDays.map(day => (\n            <div key={day} className=\"text-center text-[10px] font-medium text-muted-foreground py-1\">\n              {day}\n            </div>\n          ))}\n          {days.map(day => {\n            const inMonth = isSameMonth(day, currentDate);\n            const selected = isSameDay(day, selectedDate);\n            const today = isToday(day);\n            return (\n              <button\n                key={day.toISOString()}\n                type=\"button\"\n                onClick={() => onSelectDate(day)}\n                className={cn(\n                  'w-7 h-7 text-[11px] rounded-full flex items-center justify-center transition-colors',\n                  !inMonth && 'text-muted-foreground/40',\n                  inMonth && !selected && 'hover:bg-accent',\n                  selected && 'bg-primary text-primary-foreground',\n                  today && !selected && 'font-bold text-primary',\n                )}\n              >\n                {format(day, 'd')}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n\n      {categories && categories.length > 0 && (\n        <>\n          <Separator />\n          {/* Category filters */}\n          <div>\n            <p className=\"text-sm font-semibold mb-2\">{labels.categories}</p>\n            <div className=\"space-y-1.5\">\n              {categories.map(cat => (\n                <label\n                  key={cat.key}\n                  className=\"flex items-center gap-2 py-1 px-1 rounded hover:bg-accent transition-colors cursor-pointer\"\n                >\n                  <Checkbox\n                    checked={enabledCategories?.includes(cat.key) ?? false}\n                    onCheckedChange={() => onToggleCategory?.(cat.key)}\n                  />\n                  <div className=\"w-2.5 h-2.5 rounded-full\" style={{ backgroundColor: cat.color }} />\n                  <span className=\"text-sm\">{cat.label}</span>\n                </label>\n              ))}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components/calendar-toolbar.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Supported calendar view modes. */
+type CalendarView = 'month' | 'week' | 'day';
+/** Localizable labels for the calendar toolbar. All have English defaults. */
+interface CalendarToolbarLabels {
+    /** Label for the "Today" button. */
+    today?: string;
+    /** Label for the "Month" view toggle. */
+    month?: string;
+    /** Label for the "Week" view toggle. */
+    week?: string;
+    /** Label for the "Day" view toggle. */
+    day?: string;
+    /** Label for the "Create Event" button. */
+    createEvent?: string;
+}
+interface CalendarToolbarProps {
+    /** The date currently being viewed. Used for the title display. */
+    currentDate: Date;
+    /** The active calendar view mode. */
+    view: CalendarView;
+    /** Callback when the user switches between month/week/day views. */
+    onViewChange: (view: CalendarView) => void;
+    /** Navigate to the previous period. */
+    onPrev: () => void;
+    /** Navigate to the next period. */
+    onNext: () => void;
+    /** Navigate to today. */
+    onToday: () => void;
+    /** Optional callback for the "Create Event" button. Button is hidden when omitted. */
+    onCreateEvent?: () => void;
+    /** Localizable UI labels with English defaults. */
+    labels?: CalendarToolbarLabels;
+    /** date-fns format string for the title. Defaults to `"MMMM yyyy"` or `"EEEE, MMMM d, yyyy"` for day view. */
+    titleFormat?: string;
+}
+/**
+ * Toolbar for calendar views with navigation controls (prev/next/today),
+ * view mode toggle (month/week/day), and an optional "Create Event" button.
+ * Locale-agnostic via the `labels` prop.
+ *
+ * @example
+ * ```tsx
+ * <CalendarToolbar
+ *   currentDate={currentDate}
+ *   view="month"
+ *   onViewChange={setView}
+ *   onPrev={handlePrev}
+ *   onNext={handleNext}
+ *   onToday={handleToday}
+ *   onCreateEvent={() => setDialogOpen(true)}
+ * />
+ * ```
+ */
+declare function CalendarToolbar({ currentDate, view, onViewChange, onPrev, onNext, onToday, onCreateEvent, labels: labelsProp, titleFormat: titleFormatProp, }: CalendarToolbarProps): react_jsx_runtime.JSX.Element;
+
+export { CalendarToolbar, type CalendarToolbarLabels, type CalendarToolbarProps, type CalendarView };