@mieweb/ui 0.1.0

package/dist/chunk-D5IBXXF2.js

@@ -0,0 +1,243 @@
+import { useFocusTrap } from './chunk-CLNOI5J7.js';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var modalOverlayVariants = cva(
+  [
+    "fixed inset-0 z-50",
+    "bg-black/50 backdrop-blur-sm",
+    "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var modalContentVariants = cva(
+  [
+    "fixed left-1/2 top-1/2 z-50",
+    "-translate-x-1/2 -translate-y-1/2",
+    "w-full bg-card text-card-foreground",
+    "border border-border rounded-xl shadow-lg",
+    "focus:outline-none",
+    "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    "duration-200"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        "2xl": "max-w-2xl",
+        "3xl": "max-w-3xl",
+        "4xl": "max-w-4xl",
+        full: "max-w-[calc(100vw-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Modal({
+  open,
+  onOpenChange,
+  children,
+  size,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const generatedId = React.useId();
+  const modalId = id || generatedId;
+  const focusTrapRef = useFocusTrap(open);
+  useEscapeKey(() => {
+    if (closeOnEscape && open) {
+      onOpenChange(false);
+    }
+  }, open);
+  const handleOverlayClick = React.useCallback(
+    (e) => {
+      if (closeOnOverlayClick && e.target === e.currentTarget) {
+        onOpenChange(false);
+      }
+    },
+    [closeOnOverlayClick, onOpenChange]
+  );
+  React.useEffect(() => {
+    if (open) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    ModalContext.Provider,
+    {
+      value: { onClose: () => onOpenChange(false), modalId },
+      children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(modalOverlayVariants()),
+            "data-state": open ? "open" : "closed",
+            onClick: handleOverlayClick,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: focusTrapRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy || `${modalId}-title`,
+            "aria-describedby": ariaDescribedBy,
+            id: modalId,
+            tabIndex: -1,
+            "data-state": open ? "open" : "closed",
+            className: cn(modalContentVariants({ size }), className),
+            children
+          }
+        )
+      ] })
+    }
+  );
+}
+Modal.displayName = "Modal";
+var ModalContext = React.createContext(
+  void 0
+);
+function useModalContext() {
+  const context = React.useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal components must be used within a Modal");
+  }
+  return context;
+}
+var ModalHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between",
+        "border-border border-b px-6 py-4",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ModalHeader.displayName = "ModalHeader";
+var ModalTitle = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { modalId } = useModalContext();
+    return /* @__PURE__ */ jsx(
+      "h2",
+      {
+        ref,
+        id: `${modalId}-title`,
+        className: cn(
+          "text-lg leading-none font-semibold tracking-tight",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ModalTitle.displayName = "ModalTitle";
+var ModalClose = React.forwardRef(
+  ({ className, children, onClick, ...props }, ref) => {
+    const { onClose } = useModalContext();
+    const handleClick = React.useCallback(
+      (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) {
+          onClose();
+        }
+      },
+      [onClick, onClose]
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: handleClick,
+        className: cn(
+          "inline-flex h-8 w-8 items-center justify-center rounded-lg",
+          "text-muted-foreground hover:text-foreground",
+          "hover:bg-muted transition-colors",
+          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+          className
+        ),
+        "aria-label": "Close",
+        ...props,
+        children: children || /* @__PURE__ */ jsx(CloseIcon, {})
+      }
+    );
+  }
+);
+ModalClose.displayName = "ModalClose";
+var ModalBody = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-6 py-4", className), ...props })
+);
+ModalBody.displayName = "ModalBody";
+var ModalFooter = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-end gap-3",
+        "border-border border-t px-6 py-4",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ModalFooter.displayName = "ModalFooter";
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+
+export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants };
+//# sourceMappingURL=chunk-D5IBXXF2.js.map
+//# sourceMappingURL=chunk-D5IBXXF2.js.map

package/dist/chunk-D5IBXXF2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-D5IBXXF2.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\nconst modalOverlayVariants = cva(\n  [\n    'fixed inset-0 z-50',\n    'bg-black/50 backdrop-blur-sm',\n    'data-[state=open]:animate-in data-[state=open]:fade-in-0',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\nconst modalContentVariants = cva(\n  [\n    'fixed left-1/2 top-1/2 z-50',\n    '-translate-x-1/2 -translate-y-1/2',\n    'w-full bg-card text-card-foreground',\n    'border border-border rounded-xl shadow-lg',\n    'focus:outline-none',\n    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n    'duration-200',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'max-w-sm',\n        md: 'max-w-md',\n        lg: 'max-w-lg',\n        xl: 'max-w-xl',\n        '2xl': 'max-w-2xl',\n        '3xl': 'max-w-3xl',\n        '4xl': 'max-w-4xl',\n        full: 'max-w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface ModalProps extends VariantProps<typeof modalContentVariants> {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback when the modal should close */\n  onOpenChange: (open: boolean) => void;\n  /** Modal content */\n  children: React.ReactNode;\n  /** Whether to close when clicking the overlay */\n  closeOnOverlayClick?: boolean;\n  /** Whether to close when pressing Escape */\n  closeOnEscape?: boolean;\n  /** Additional class name for the modal content */\n  className?: string;\n  /** ID for the modal, used for accessibility */\n  id?: string;\n  /** Accessible label for the modal */\n  'aria-label'?: string;\n  /** ID of the element that labels the modal */\n  'aria-labelledby'?: string;\n  /** ID of the element that describes the modal */\n  'aria-describedby'?: string;\n}\n\n/**\n * An accessible modal/dialog component.\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onOpenChange={setIsOpen} size=\"lg\">\n *   <ModalHeader>\n *     <ModalTitle>Confirm Action</ModalTitle>\n *     <ModalClose />\n *   </ModalHeader>\n *   <ModalBody>\n *     Are you sure you want to continue?\n *   </ModalBody>\n *   <ModalFooter>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </ModalFooter>\n * </Modal>\n * ```\n */\nfunction Modal({\n  open,\n  onOpenChange,\n  children,\n  size,\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n}: ModalProps) {\n  const generatedId = React.useId();\n  const modalId = id || generatedId;\n\n  // Focus trap (only active when modal is open)\n  const focusTrapRef = useFocusTrap<HTMLDivElement>(open);\n\n  // Handle escape key\n  useEscapeKey(() => {\n    if (closeOnEscape && open) {\n      onOpenChange(false);\n    }\n  }, open);\n\n  // Handle overlay click\n  const handleOverlayClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (closeOnOverlayClick && e.target === e.currentTarget) {\n        onOpenChange(false);\n      }\n    },\n    [closeOnOverlayClick, onOpenChange]\n  );\n\n  // Prevent body scroll when modal is open\n  React.useEffect(() => {\n    if (open) {\n      const originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n      return () => {\n        document.body.style.overflow = originalOverflow;\n      };\n    }\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <ModalContext.Provider\n      value={{ onClose: () => onOpenChange(false), modalId }}\n    >\n      {/* Portal to body */}\n      <div className=\"fixed inset-0 z-50\">\n        {/* Overlay */}\n        <div\n          className={cn(modalOverlayVariants())}\n          data-state={open ? 'open' : 'closed'}\n          onClick={handleOverlayClick}\n          aria-hidden=\"true\"\n        />\n        {/* Content */}\n        <div\n          ref={focusTrapRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy || `${modalId}-title`}\n          aria-describedby={ariaDescribedBy}\n          id={modalId}\n          tabIndex={-1}\n          data-state={open ? 'open' : 'closed'}\n          className={cn(modalContentVariants({ size }), className)}\n        >\n          {children}\n        </div>\n      </div>\n    </ModalContext.Provider>\n  );\n}\n\nModal.displayName = 'Modal';\n\n// ============================================================================\n// Modal Context\n// ============================================================================\n\ninterface ModalContextValue {\n  onClose: () => void;\n  modalId: string;\n}\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n  undefined\n);\n\nfunction useModalContext() {\n  const context = React.useContext(ModalContext);\n  if (!context) {\n    throw new Error('Modal components must be used within a Modal');\n  }\n  return context;\n}\n\n// ============================================================================\n// Modal Header\n// ============================================================================\n\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Header section of a Modal.\n */\nconst ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center justify-between',\n        'border-border border-b px-6 py-4',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nModalHeader.displayName = 'ModalHeader';\n\n// ============================================================================\n// Modal Title\n// ============================================================================\n\nexport type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/**\n * Title for a Modal.\n */\nconst ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    const { modalId } = useModalContext();\n    return (\n      <h2\n        ref={ref}\n        id={`${modalId}-title`}\n        className={cn(\n          'text-lg leading-none font-semibold tracking-tight',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </h2>\n    );\n  }\n);\n\nModalTitle.displayName = 'ModalTitle';\n\n// ============================================================================\n// Modal Close Button\n// ============================================================================\n\nexport type ModalCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for a Modal.\n */\nconst ModalClose = React.forwardRef<HTMLButtonElement, ModalCloseProps>(\n  ({ className, children, onClick, ...props }, ref) => {\n    const { onClose } = useModalContext();\n\n    const handleClick = React.useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        if (!e.defaultPrevented) {\n          onClose();\n        }\n      },\n      [onClick, onClose]\n    );\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={handleClick}\n        className={cn(\n          'inline-flex h-8 w-8 items-center justify-center rounded-lg',\n          'text-muted-foreground hover:text-foreground',\n          'hover:bg-muted transition-colors',\n          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n          className\n        )}\n        aria-label=\"Close\"\n        {...props}\n      >\n        {children || <CloseIcon />}\n      </button>\n    );\n  }\n);\n\nModalClose.displayName = 'ModalClose';\n\n// ============================================================================\n// Modal Body\n// ============================================================================\n\nexport type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Main content area of a Modal.\n */\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('px-6 py-4', className)} {...props} />\n  )\n);\n\nModalBody.displayName = 'ModalBody';\n\n// ============================================================================\n// Modal Footer\n// ============================================================================\n\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Footer section of a Modal, typically for action buttons.\n */\nconst ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center justify-end gap-3',\n        'border-border border-t px-6 py-4',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nModalFooter.displayName = 'ModalFooter';\n\n// ============================================================================\n// Close Icon\n// ============================================================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport {\n  Modal,\n  ModalHeader,\n  ModalTitle,\n  ModalClose,\n  ModalBody,\n  ModalFooter,\n  modalContentVariants,\n  modalOverlayVariants,\n};\n"]}

package/dist/chunk-DMA74PZ7.js

@@ -0,0 +1,240 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var dateButtonVariants = cva(
+  [
+    "flex-shrink-0 rounded-xl border px-3 py-2 text-center transition-colors",
+    "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+    "dark:focus:ring-offset-neutral-900"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "border-primary-500 bg-primary-50 dark:bg-primary-900/20",
+        false: "border-neutral-200 hover:border-neutral-300 dark:border-neutral-700 dark:hover:border-neutral-600"
+      }
+    },
+    defaultVariants: {
+      selected: false
+    }
+  }
+);
+var DateButton = React.forwardRef(
+  ({ className, date, selected, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(dateButtonVariants({ selected }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: date.toLocaleDateString("en-US", { weekday: "short" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-neutral-900 dark:text-white", children: date.getDate() }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: date.toLocaleDateString("en-US", { month: "short" }) })
+        ]
+      }
+    );
+  }
+);
+DateButton.displayName = "DateButton";
+var timeButtonVariants = cva(
+  [
+    "rounded-xl border px-2 py-2 text-sm transition-colors",
+    "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+    "dark:focus:ring-offset-neutral-900"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "border-primary-500 bg-primary-50 dark:bg-primary-900/20",
+        false: "border-neutral-200 hover:border-neutral-300 dark:border-neutral-700 dark:hover:border-neutral-600"
+      }
+    },
+    defaultVariants: {
+      selected: false
+    }
+  }
+);
+var TimeButton = React.forwardRef(
+  ({ className, time, selected, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(timeButtonVariants({ selected }), className),
+        ...props,
+        children: time
+      }
+    );
+  }
+);
+TimeButton.displayName = "TimeButton";
+var radioOptionVariants = cva(
+  [
+    "cursor-pointer rounded-xl border bg-card p-4 transition-all",
+    "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-500"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "border-2 border-primary-500 ring-2 ring-primary-200 dark:ring-primary-800",
+        false: "border-border"
+      }
+    },
+    defaultVariants: {
+      selected: false
+    }
+  }
+);
+var RadioOption = React.forwardRef(
+  ({ className, title, description, selected, children, onClick, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(radioOptionVariants({ selected }), className),
+        onClick,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(e);
+          }
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex h-5 w-5 items-center justify-center rounded-full border-2",
+                  selected ? "border-primary-500 bg-primary-500" : "border-neutral-300"
+                ),
+                children: selected && /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-white" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-neutral-900 dark:text-white", children: title }),
+              description && /* @__PURE__ */ jsx("div", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: description })
+            ] })
+          ] }),
+          children
+        ]
+      }
+    );
+  }
+);
+RadioOption.displayName = "RadioOption";
+var DatePicker = React.forwardRef(
+  ({
+    className,
+    dates,
+    selectedDate,
+    onDateSelect,
+    label = "Select Date",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "-m-1 flex gap-2 overflow-x-auto p-1", children: dates.map((date, index) => /* @__PURE__ */ jsx(
+        DateButton,
+        {
+          date,
+          selected: selectedDate?.toDateString() === date.toDateString(),
+          onClick: (e) => {
+            e.stopPropagation();
+            onDateSelect?.(date);
+          }
+        },
+        index
+      )) })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+var TimePicker = React.forwardRef(
+  ({
+    className,
+    times,
+    selectedTime,
+    onTimeSelect,
+    label = "Select Time",
+    columns = 6,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300", children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "-m-1 grid gap-2 p-1",
+            columns === 4 ? "grid-cols-4" : "grid-cols-4 sm:grid-cols-6"
+          ),
+          children: times.map((time) => /* @__PURE__ */ jsx(
+            TimeButton,
+            {
+              time,
+              selected: selectedTime === time,
+              onClick: (e) => {
+                e.stopPropagation();
+                onTimeSelect?.(time);
+              }
+            },
+            time
+          ))
+        }
+      )
+    ] });
+  }
+);
+TimePicker.displayName = "TimePicker";
+var SchedulePicker = React.forwardRef(
+  ({
+    className,
+    dates,
+    times,
+    selectedDate,
+    selectedTime,
+    onDateSelect,
+    onTimeSelect,
+    dateLabel = "Select Date",
+    timeLabel = "Select Time",
+    timeColumns = 6,
+    showTimePicker = true,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-4", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          dates,
+          selectedDate,
+          onDateSelect,
+          label: dateLabel
+        }
+      ),
+      showTimePicker && selectedDate && /* @__PURE__ */ jsx(
+        TimePicker,
+        {
+          times,
+          selectedTime,
+          onTimeSelect,
+          label: timeLabel,
+          columns: timeColumns
+        }
+      )
+    ] });
+  }
+);
+SchedulePicker.displayName = "SchedulePicker";
+
+export { DateButton, DatePicker, RadioOption, SchedulePicker, TimeButton, TimePicker, dateButtonVariants, radioOptionVariants, timeButtonVariants };
+//# sourceMappingURL=chunk-DMA74PZ7.js.map
+//# sourceMappingURL=chunk-DMA74PZ7.js.map

package/dist/chunk-DMA74PZ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SchedulePicker/SchedulePicker.tsx"],"names":[],"mappings":"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","file":"chunk-DMA74PZ7.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Date Button Component\n// ============================================================================\n\nconst dateButtonVariants = cva(\n  [\n    'flex-shrink-0 rounded-xl border px-3 py-2 text-center transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',\n    'dark:focus:ring-offset-neutral-900',\n  ],\n  {\n    variants: {\n      selected: {\n        true: 'border-primary-500 bg-primary-50 dark:bg-primary-900/20',\n        false:\n          'border-neutral-200 hover:border-neutral-300 dark:border-neutral-700 dark:hover:border-neutral-600',\n      },\n    },\n    defaultVariants: {\n      selected: false,\n    },\n  }\n);\n\nexport interface DateButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof dateButtonVariants> {\n  /** The date to display */\n  date: Date;\n}\n\n/**\n * A button for selecting a date in the schedule picker.\n */\nconst DateButton = React.forwardRef<HTMLButtonElement, DateButtonProps>(\n  ({ className, date, selected, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cn(dateButtonVariants({ selected }), className)}\n        {...props}\n      >\n        <div className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          {date.toLocaleDateString('en-US', { weekday: 'short' })}\n        </div>\n        <div className=\"text-lg font-semibold text-neutral-900 dark:text-white\">\n          {date.getDate()}\n        </div>\n        <div className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          {date.toLocaleDateString('en-US', { month: 'short' })}\n        </div>\n      </button>\n    );\n  }\n);\n\nDateButton.displayName = 'DateButton';\n\n// ============================================================================\n// Time Button Component\n// ============================================================================\n\nconst timeButtonVariants = cva(\n  [\n    'rounded-xl border px-2 py-2 text-sm transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',\n    'dark:focus:ring-offset-neutral-900',\n  ],\n  {\n    variants: {\n      selected: {\n        true: 'border-primary-500 bg-primary-50 dark:bg-primary-900/20',\n        false:\n          'border-neutral-200 hover:border-neutral-300 dark:border-neutral-700 dark:hover:border-neutral-600',\n      },\n    },\n    defaultVariants: {\n      selected: false,\n    },\n  }\n);\n\nexport interface TimeButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof timeButtonVariants> {\n  /** The time string to display (e.g., \"8:00 AM\") */\n  time: string;\n}\n\n/**\n * A button for selecting a time in the schedule picker.\n */\nconst TimeButton = React.forwardRef<HTMLButtonElement, TimeButtonProps>(\n  ({ className, time, selected, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cn(timeButtonVariants({ selected }), className)}\n        {...props}\n      >\n        {time}\n      </button>\n    );\n  }\n);\n\nTimeButton.displayName = 'TimeButton';\n\n// ============================================================================\n// Radio Option Component\n// ============================================================================\n\nconst radioOptionVariants = cva(\n  [\n    'cursor-pointer rounded-xl border bg-card p-4 transition-all',\n    'focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-500',\n  ],\n  {\n    variants: {\n      selected: {\n        true: 'border-2 border-primary-500 ring-2 ring-primary-200 dark:ring-primary-800',\n        false: 'border-border',\n      },\n    },\n    defaultVariants: {\n      selected: false,\n    },\n  }\n);\n\nexport interface RadioOptionProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof radioOptionVariants> {\n  /** Title text for the option */\n  title: React.ReactNode;\n  /** Description text for the option */\n  description?: React.ReactNode;\n  /** Whether this option is selected */\n  selected?: boolean;\n}\n\n/**\n * A radio-style option card component.\n */\nconst RadioOption = React.forwardRef<HTMLDivElement, RadioOptionProps>(\n  (\n    { className, title, description, selected, children, onClick, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(radioOptionVariants({ selected }), className)}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n          }\n        }}\n        {...props}\n      >\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={cn(\n              'flex h-5 w-5 items-center justify-center rounded-full border-2',\n              selected\n                ? 'border-primary-500 bg-primary-500'\n                : 'border-neutral-300'\n            )}\n          >\n            {selected && <div className=\"h-2 w-2 rounded-full bg-white\" />}\n          </div>\n          <div>\n            <div className=\"font-medium text-neutral-900 dark:text-white\">\n              {title}\n            </div>\n            {description && (\n              <div className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                {description}\n              </div>\n            )}\n          </div>\n        </div>\n        {children}\n      </div>\n    );\n  }\n);\n\nRadioOption.displayName = 'RadioOption';\n\n// ============================================================================\n// Date Picker Component\n// ============================================================================\n\nexport interface DatePickerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Array of available dates to display */\n  dates: Date[];\n  /** Currently selected date */\n  selectedDate?: Date | null;\n  /** Callback when a date is selected */\n  onDateSelect?: (date: Date) => void;\n  /** Label text above the date picker */\n  label?: string;\n}\n\n/**\n * A horizontal scrollable date picker component.\n */\nconst DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      className,\n      dates,\n      selectedDate,\n      onDateSelect,\n      label = 'Select Date',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={className} {...props}>\n        <label className=\"mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300\">\n          {label}\n        </label>\n        {/* Negative margin + padding allows focus ring to render without clipping */}\n        <div className=\"-m-1 flex gap-2 overflow-x-auto p-1\">\n          {dates.map((date, index) => (\n            <DateButton\n              key={index}\n              date={date}\n              selected={selectedDate?.toDateString() === date.toDateString()}\n              onClick={(e) => {\n                e.stopPropagation();\n                onDateSelect?.(date);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\n// ============================================================================\n// Time Picker Component\n// ============================================================================\n\nexport interface TimePickerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Array of available time strings (e.g., [\"8:00 AM\", \"8:30 AM\"]) */\n  times: string[];\n  /** Currently selected time string */\n  selectedTime?: string | null;\n  /** Callback when a time is selected */\n  onTimeSelect?: (time: string) => void;\n  /** Label text above the time picker */\n  label?: string;\n  /** Number of columns for the time grid */\n  columns?: 4 | 6;\n}\n\n/**\n * A grid-based time picker component.\n */\nconst TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  (\n    {\n      className,\n      times,\n      selectedTime,\n      onTimeSelect,\n      label = 'Select Time',\n      columns = 6,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={className} {...props}>\n        <label className=\"mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300\">\n          {label}\n        </label>\n        {/* Negative margin + padding allows focus ring to render without clipping */}\n        <div\n          className={cn(\n            '-m-1 grid gap-2 p-1',\n            columns === 4 ? 'grid-cols-4' : 'grid-cols-4 sm:grid-cols-6'\n          )}\n        >\n          {times.map((time) => (\n            <TimeButton\n              key={time}\n              time={time}\n              selected={selectedTime === time}\n              onClick={(e) => {\n                e.stopPropagation();\n                onTimeSelect?.(time);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nTimePicker.displayName = 'TimePicker';\n\n// ============================================================================\n// Schedule Picker Component (Composite)\n// ============================================================================\n\nexport interface SchedulePickerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Array of available dates to display */\n  dates: Date[];\n  /** Array of available time strings */\n  times: string[];\n  /** Currently selected date */\n  selectedDate?: Date | null;\n  /** Currently selected time */\n  selectedTime?: string | null;\n  /** Callback when a date is selected */\n  onDateSelect?: (date: Date) => void;\n  /** Callback when a time is selected */\n  onTimeSelect?: (time: string) => void;\n  /** Label for the date picker */\n  dateLabel?: string;\n  /** Label for the time picker */\n  timeLabel?: string;\n  /** Number of columns for time grid */\n  timeColumns?: 4 | 6;\n  /** Whether to show time picker (hidden until date is selected) */\n  showTimePicker?: boolean;\n}\n\n/**\n * A complete schedule picker with date and time selection.\n *\n * @example\n * ```tsx\n * <SchedulePicker\n *   dates={availableDates}\n *   times={availableTimes}\n *   selectedDate={selectedDate}\n *   selectedTime={selectedTime}\n *   onDateSelect={setSelectedDate}\n *   onTimeSelect={setSelectedTime}\n * />\n * ```\n */\nconst SchedulePicker = React.forwardRef<HTMLDivElement, SchedulePickerProps>(\n  (\n    {\n      className,\n      dates,\n      times,\n      selectedDate,\n      selectedTime,\n      onDateSelect,\n      onTimeSelect,\n      dateLabel = 'Select Date',\n      timeLabel = 'Select Time',\n      timeColumns = 6,\n      showTimePicker = true,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('space-y-4', className)} {...props}>\n        <DatePicker\n          dates={dates}\n          selectedDate={selectedDate}\n          onDateSelect={onDateSelect}\n          label={dateLabel}\n        />\n        {showTimePicker && selectedDate && (\n          <TimePicker\n            times={times}\n            selectedTime={selectedTime}\n            onTimeSelect={onTimeSelect}\n            label={timeLabel}\n            columns={timeColumns}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nSchedulePicker.displayName = 'SchedulePicker';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n  DateButton,\n  TimeButton,\n  RadioOption,\n  DatePicker,\n  TimePicker,\n  SchedulePicker,\n  dateButtonVariants,\n  timeButtonVariants,\n  radioOptionVariants,\n};\n"]}