@matheusrizzati/ui 0.1.2 → 0.1.3

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React26, { createContext, forwardRef, useRef, useEffect, useState, useMemo, useCallback, useContext } from 'react';
+import React39, { createContext, forwardRef, useRef, useEffect, useState, useMemo, useCallback, useContext } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive3 from '@radix-ui/react-popover';
@@ -8,6 +8,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -74,7 +75,7 @@ function ThemeProvider({
     () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
     [theme, resolvedTheme, setTheme, toggleTheme]
   );
-  return React26.createElement(ThemeContext.Provider, { value }, children);
+  return React39.createElement(ThemeContext.Provider, { value }, children);
 }
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -2189,8 +2190,8 @@ var breadcrumbItemActiveStyles = "text-[var(--color-text-primary)] pointer-event
 var breadcrumbSeparatorStyles = "text-[var(--color-text-muted)]/50 select-none";
 var Breadcrumb = forwardRef(
   ({ className, separator = "/", children, ...props }, ref) => {
-    const items = React26.Children.toArray(children);
-    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn(breadcrumbStyles, className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+    const items = React39.Children.toArray(children);
+    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn(breadcrumbStyles, className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React39.Fragment, { children: [
       child,
       i < items.length - 1 && /* @__PURE__ */ jsx("span", { className: breadcrumbSeparatorStyles, "aria-hidden": "true", children: separator })
     ] }, i)) });
@@ -2612,7 +2613,7 @@ var Steps = forwardRef(
           const status = i < current ? "complete" : i === current ? "current" : "upcoming";
           const isLast = i === steps.length - 1;
           if (isHorizontal) {
-            return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React39.Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 min-w-0", children: [
                 /* @__PURE__ */ jsx(
                   "div",
@@ -2638,7 +2639,7 @@ var Steps = forwardRef(
               ) })
             ] }, i);
           }
-          return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React39.Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: stepWrapperVerticalStyles, children: [
               /* @__PURE__ */ jsx(
                 "div",
@@ -3056,7 +3057,7 @@ var sizeMap = {
   xl: { dimension: "h-16 w-16", text: "text-[var(--text-base)]", overlap: "-ml-4" }
 };
 function AvatarGroup({ children, max = 5, size = "md", className }) {
-  const childArray = React26.Children.toArray(children);
+  const childArray = React39.Children.toArray(children);
   const visible = childArray.slice(0, max);
   const overflow = childArray.length - max;
   const s = sizeMap[size] || sizeMap.md;
@@ -3186,7 +3187,466 @@ function ConfirmDialog({
   ] });
 }
 ConfirmDialog.displayName = "ConfirmDialog";
+var toggleVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-medium text-[var(--color-text-secondary)]",
+    "rounded-[var(--radius)]",
+    "transition-colors duration-[var(--transition-fast)]",
+    "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg)]",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "cursor-pointer select-none",
+    "data-[state=on]:bg-[var(--color-surface-raised)] data-[state=on]:text-[var(--color-text-primary)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-[var(--color-border)] bg-transparent data-[state=on]:bg-[var(--color-surface-hover)]"
+      },
+      size: {
+        sm: "h-8 px-2 text-[var(--text-xs)]",
+        md: "h-9 px-3 text-[var(--text-sm)]",
+        lg: "h-10 px-4 text-[var(--text-sm)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var toggleGroupStyles = "inline-flex items-center gap-1 rounded-[var(--radius)] bg-[var(--color-surface)] border border-[var(--color-border)] p-1";
+var Toggle = forwardRef(
+  ({ className, variant, size, pressed, onPressedChange, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": pressed,
+      "data-state": pressed ? "on" : "off",
+      onClick: () => onPressedChange?.(!pressed),
+      className: cn(toggleVariants({ variant, size }), className),
+      ...props,
+      children
+    }
+  )
+);
+Toggle.displayName = "Toggle";
+function ToggleGroup({
+  type = "single",
+  value,
+  onValueChange,
+  variant,
+  size,
+  children,
+  className
+}) {
+  const selected = Array.isArray(value) ? value : value ? [value] : [];
+  const handleToggle = (itemValue) => {
+    if (type === "single") {
+      onValueChange?.(itemValue === value ? "" : itemValue);
+    } else {
+      const next = selected.includes(itemValue) ? selected.filter((v) => v !== itemValue) : [...selected, itemValue];
+      onValueChange?.(next);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { role: "group", className: cn(toggleGroupStyles, className), children: React39.Children.map(children, (child) => {
+    if (!React39.isValidElement(child)) return child;
+    const itemValue = child.props.value;
+    const isPressed = selected.includes(itemValue);
+    return React39.cloneElement(child, {
+      ...child.props,
+      variant: child.props.variant ?? variant,
+      size: child.props.size ?? size,
+      "data-state": isPressed ? "on" : "off",
+      "aria-checked": isPressed,
+      onClick: () => handleToggle(itemValue)
+    });
+  }) });
+}
+var ToggleGroupItem = forwardRef(
+  ({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(toggleVariants({ variant, size }), className),
+      ...props,
+      children
+    }
+  )
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";
+var sizeMap2 = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+  xl: "h-12 w-12"
+};
+function Spinner2({ size = "md", className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("animate-spin text-[var(--color-primary)]", sizeMap2[size], className),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      role: "status",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+Spinner2.displayName = "Spinner";
+function Collapsible({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  children
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const toggle = () => {
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsx("div", { className, "data-state": isOpen ? "open" : "closed", children: React39.Children.map(children, (child) => {
+    if (!React39.isValidElement(child)) return child;
+    if (child.type.displayName === "CollapsibleTrigger") {
+      return React39.cloneElement(child, { onClick: toggle });
+    }
+    if (child.type.displayName === "CollapsibleContent") {
+      return React39.cloneElement(child, { "data-open": isOpen });
+    }
+    return child;
+  }) });
+}
+Collapsible.displayName = "Collapsible";
+function CollapsibleTrigger({ children, className, onClick, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn("cursor-pointer", className),
+      ...props,
+      children
+    }
+  );
+}
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+function CollapsibleContent({ children, className, ...props }) {
+  const isOpen = props["data-open"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden transition-all duration-200",
+        className
+      ),
+      style: {
+        maxHeight: isOpen ? "2000px" : "0px",
+        opacity: isOpen ? 1 : 0
+      },
+      children
+    }
+  );
+}
+CollapsibleContent.displayName = "CollapsibleContent";
+var contentStyles4 = [
+  "z-[var(--z-popover)]",
+  "w-64 rounded-[var(--radius-lg)] p-4",
+  "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "border border-[var(--color-border)]",
+  "shadow-lg",
+  "animate-in fade-in-0 zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+  "data-[side=bottom]:slide-in-from-top-2",
+  "data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2",
+  "data-[side=top]:slide-in-from-bottom-2"
+].join(" ");
+var HoverCard = ({ children, openDelay = 200, closeDelay = 100 }) => /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { openDelay, closeDelay, children });
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = ({
+  children,
+  className,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4
+}) => /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    side,
+    align,
+    sideOffset,
+    className: cn(contentStyles4, className),
+    children
+  }
+) });
+HoverCard.displayName = "HoverCard";
+HoverCardContent.displayName = "HoverCardContent";
+
+// src/components/calendar/calendar.styles.ts
+var calendarStyles = [
+  "inline-block p-3",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "rounded-[var(--radius-lg)]"
+].join(" ");
+var calendarHeaderStyles = "flex items-center justify-between mb-2";
+var calendarNavBtnStyles = [
+  "inline-flex items-center justify-center h-7 w-7",
+  "rounded-[var(--radius)]",
+  "text-[var(--color-text-muted)]",
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "cursor-pointer"
+].join(" ");
+var calendarTitleStyles = "text-[var(--text-sm)] font-semibold text-[var(--color-text-primary)]";
+var calendarGridStyles = "w-full border-collapse";
+var calendarWeekdayStyles = "h-8 w-8 text-center text-[var(--text-xs)] font-medium text-[var(--color-text-muted)]";
+var calendarDayBaseStyles = [
+  "h-8 w-8 text-center text-[var(--text-sm)]",
+  "rounded-[var(--radius)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "cursor-pointer select-none"
+].join(" ");
+var calendarDayDefaultStyles = "text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]";
+var calendarDaySelectedStyles = "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]";
+var calendarDayTodayStyles = "font-bold text-[var(--color-primary)]";
+var calendarDayOutsideStyles = "text-[var(--color-text-muted)] opacity-50";
+var calendarDayDisabledStyles = "text-[var(--color-text-muted)] opacity-30 pointer-events-none";
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function Calendar({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  locale = "en-US",
+  className
+}) {
+  const today = /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = useState(value?.getFullYear() ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = useState(value?.getMonth() ?? today.getMonth());
+  const monthLabel = useMemo(() => {
+    const date = new Date(viewYear, viewMonth);
+    return date.toLocaleDateString(locale, { month: "long", year: "numeric" });
+  }, [viewYear, viewMonth, locale]);
+  const prevMonth = useCallback(() => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  }, [viewMonth]);
+  const nextMonth = useCallback(() => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  }, [viewMonth]);
+  const days = useMemo(() => {
+    const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+    const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
+    const daysInPrevMonth = getDaysInMonth(viewYear, viewMonth - 1);
+    const cells = [];
+    for (let i = firstDay - 1; i >= 0; i--) {
+      cells.push({
+        date: new Date(viewYear, viewMonth - 1, daysInPrevMonth - i),
+        isOutside: true
+      });
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      cells.push({
+        date: new Date(viewYear, viewMonth, d),
+        isOutside: false
+      });
+    }
+    const remaining = 42 - cells.length;
+    for (let d = 1; d <= remaining; d++) {
+      cells.push({
+        date: new Date(viewYear, viewMonth + 1, d),
+        isOutside: true
+      });
+    }
+    return cells;
+  }, [viewYear, viewMonth]);
+  const isDisabled = (date) => {
+    if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
+    if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
+    return false;
+  };
+  const weeks = [];
+  for (let i = 0; i < days.length; i += 7) {
+    weeks.push(days.slice(i, i + 7));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(calendarStyles, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: calendarHeaderStyles, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: prevMonth, className: calendarNavBtnStyles, children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: calendarTitleStyles, children: monthLabel }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: nextMonth, className: calendarNavBtnStyles, children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: calendarGridStyles, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: WEEKDAYS.map((d) => /* @__PURE__ */ jsx("th", { className: calendarWeekdayStyles, children: d }, d)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, wi) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, isOutside }, di) => {
+        const selected = value && isSameDay(date, value);
+        const isToday = isSameDay(date, today);
+        const disabled = isDisabled(date);
+        return /* @__PURE__ */ jsx(
+          "td",
+          {
+            onClick: () => !disabled && !isOutside && onChange?.(date),
+            className: cn(
+              calendarDayBaseStyles,
+              isOutside && calendarDayOutsideStyles,
+              disabled && calendarDayDisabledStyles,
+              !isOutside && !disabled && !selected && calendarDayDefaultStyles,
+              selected && calendarDaySelectedStyles,
+              isToday && !selected && calendarDayTodayStyles
+            ),
+            children: date.getDate()
+          },
+          di
+        );
+      }) }, wi)) })
+    ] })
+  ] });
+}
+Calendar.displayName = "Calendar";
+var triggerStyles = [
+  "flex items-center justify-between w-full",
+  "h-10 px-3 text-[var(--text-sm)]",
+  "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "border border-[var(--color-border)]",
+  "rounded-[var(--radius)]",
+  "transition-all duration-[var(--transition-fast)]",
+  "hover:border-[var(--color-border-hover)]",
+  "focus:outline-none focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)]",
+  "disabled:opacity-50 disabled:cursor-not-allowed",
+  "cursor-pointer"
+].join(" ");
+var placeholderStyles = "text-[var(--color-text-muted)]";
+var labelStyles3 = "block text-[var(--text-sm)] font-medium text-[var(--color-text-secondary)] mb-1.5";
+var errorTextStyles = "mt-1.5 text-[var(--text-xs)] text-[var(--color-danger)]";
+var clearBtnStyles = [
+  "shrink-0 p-0.5 rounded-[var(--radius-sm)]",
+  "text-[var(--color-text-muted)]",
+  "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]",
+  "transition-colors duration-[var(--transition-fast)]"
+].join(" ");
+var defaultFormat = (date) => date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date...",
+  formatDate = defaultFormat,
+  label,
+  error,
+  clearable = false,
+  disabled = false,
+  minDate,
+  maxDate,
+  locale,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const handleSelect = (date) => {
+    onChange?.(date);
+    setOpen(false);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange?.(void 0);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    label && /* @__PURE__ */ jsx("label", { className: labelStyles3, children: label }),
+    /* @__PURE__ */ jsxs(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          className: cn(triggerStyles, error && "border-[var(--color-danger)] focus:ring-[var(--color-danger)]"),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("svg", { className: "shrink-0 text-[var(--color-text-muted)]", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+              ] }),
+              value ? /* @__PURE__ */ jsx("span", { children: formatDate(value) }) : /* @__PURE__ */ jsx("span", { className: placeholderStyles, children: placeholder })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0", children: clearable && value && /* @__PURE__ */ jsx("span", { role: "button", tabIndex: -1, onClick: handleClear, className: clearBtnStyles, children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] }) }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ jsx(
+        PopoverPrimitive3.Content,
+        {
+          sideOffset: 4,
+          className: "z-[var(--z-popover)] animate-in fade-in-0 zoom-in-95",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              value,
+              onChange: handleSelect,
+              minDate,
+              maxDate,
+              locale
+            }
+          )
+        }
+      ) })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: errorTextStyles, children: error })
+  ] });
+}
+DatePicker.displayName = "DatePicker";
 
-export { Accordion, Alert, AppShell, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmDialog, DataTable, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownSeparator, DropdownTrigger, EmptyState, Input, Modal, ModalContent, ModalDescription, ModalFooter, ModalTitle, ModalTrigger, Navbar, PageHeader, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, Select, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarToggle, Skeleton, Slider, StatCard, Steps, Switch, Table, TableWrapper, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Textarea, Th, Thead, ThemeProvider, ToastProvider, Tooltip, TooltipProvider, Tr, badgeVariants, buttonVariants, cardVariants, cn, inputVariants, textareaVariants, useSidebar, useTheme, useToast };
+export { Accordion, Alert, AppShell, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, Button, Calendar, Card, CardBody, CardFooter, CardHeader, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommandPalette, ConfirmDialog, DataTable, DatePicker, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownSeparator, DropdownTrigger, EmptyState, HoverCard, HoverCardContent, HoverCardTrigger, Input, Modal, ModalContent, ModalDescription, ModalFooter, ModalTitle, ModalTrigger, Navbar, PageHeader, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, Select, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarToggle, Skeleton, Slider, Spinner2 as Spinner, StatCard, Steps, Switch, Table, TableWrapper, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Textarea, Th, Thead, ThemeProvider, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipProvider, Tr, badgeVariants, buttonVariants, cardVariants, cn, inputVariants, textareaVariants, toggleVariants, useSidebar, useTheme, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map