@parrot-co/parrot-ui 0.1.28 → 1.0.0-beta.0

package/dist/index.mjs

@@ -0,0 +1,3850 @@
+import * as React36 from 'react';
+import React36__default from 'react';
+import { TextField, Input as Input$1, Button as Button$1, ToggleButton as ToggleButton$1, NumberField, Group, TextArea, CheckboxGroup as CheckboxGroup$1, CheckboxField, CheckboxButton, MenuTrigger as MenuTrigger$1, Pressable, Popover as Popover$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, ListBox as ListBox$1, ListBoxItem as ListBoxItem$1, composeRenderProps, ListBoxSection as ListBoxSection$1, useAsyncList, useFilter, ComboBox as ComboBox$1, RadioField, RadioButton, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Calendar as Calendar$1, RangeCalendar as RangeCalendar$1, DateField as DateField$1, TimeField as TimeField$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, DropZone, FileTrigger, ProgressBar, SwitchField, SwitchButton, Slider as Slider$1, SliderTrack, SliderThumb, Tabs as Tabs$1, TabList, Tab as Tab$1, TabPanel, Table as Table$1, TableHeader, Column, TableBody, Row, Cell, ModalOverlay, Modal as Modal$1, Dialog, TagGroup as TagGroup$1, TagList, Tag as Tag$1, parseColor, ColorArea as ColorArea$1, ColorThumb, ColorField as ColorField$1, ColorSwatchPicker as ColorSwatchPicker$1, ColorSwatchPickerItem, ColorSwatch, ColorSlider as ColorSlider$1, ToggleButtonGroup, Collection, useContextProps, GroupContext, FieldError, LabelContext, CalendarMonthPicker, CalendarYearPicker, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DateInput, DateSegment, TextContext } from 'react-aria-components';
+import { twMerge } from 'tailwind-merge';
+import { parseDate, parseTime } from '@internationalized/date';
+import { useOverlayTriggerState } from 'react-stately';
+
+// src/components/input/input.tsx
+
+// src/utils/assertions.ts
+function isArray(value) {
+  return value !== null && Array.isArray(value);
+}
+function isEmptyArray(value) {
+  return isArray(value) && value.length === 0;
+}
+function isObject(value) {
+  return (typeof value === "object" || typeof value === "function") && !Array.isArray(value) && value !== null;
+}
+function isUndefinedOrNull(value) {
+  return value == null;
+}
+
+// src/utils/dom.ts
+function processClassValue(value) {
+  if (!value) {
+    return null;
+  }
+  if (typeof value === "function") {
+    return processClassValue(value?.());
+  }
+  if (isArray(value)) {
+    let i = 0;
+    let temp = "";
+    while (i < value.length) {
+      const result = processClassValue(value[i++]);
+      if (result) {
+        temp && (temp += " ");
+        temp += `${result}`;
+      }
+    }
+    return temp;
+  }
+  if (isObject(value)) {
+    let str = "";
+    for (const key in value) {
+      if (value[key]) {
+        str && (str += " ");
+        str += `${key}`;
+      }
+    }
+    return str;
+  }
+  return value;
+}
+function cx(...args) {
+  let i = 0;
+  let classStr = "";
+  while (i < args.length) {
+    const result = processClassValue(args[i++]);
+    if (result) {
+      classStr && (classStr += " ");
+      classStr += result;
+    }
+  }
+  return classStr;
+}
+function cn(...args) {
+  return twMerge(cx(...args));
+}
+var validDOMProperties = /* @__PURE__ */ new Set([
+  // Common HTML attributes
+  "accept",
+  "acceptCharset",
+  "accessKey",
+  "action",
+  "allowFullScreen",
+  "allowTransparency",
+  "alt",
+  "async",
+  "autoComplete",
+  "autoFocus",
+  "autoPlay",
+  "capture",
+  "cellPadding",
+  "cellSpacing",
+  "challenge",
+  "charSet",
+  "checked",
+  "cite",
+  "classID",
+  "className",
+  "colSpan",
+  "cols",
+  "content",
+  "contentEditable",
+  "contextMenu",
+  "controls",
+  "coords",
+  "crossOrigin",
+  "data",
+  "dateTime",
+  "default",
+  "defer",
+  "dir",
+  "disabled",
+  "download",
+  "draggable",
+  "encType",
+  "form",
+  "formAction",
+  "formEncType",
+  "formMethod",
+  "formNoValidate",
+  "formTarget",
+  "frameBorder",
+  "headers",
+  "height",
+  "hidden",
+  "high",
+  "href",
+  "hrefLang",
+  "htmlFor",
+  "httpEquiv",
+  "icon",
+  "id",
+  "inputMode",
+  "integrity",
+  "is",
+  "keyParams",
+  "keyType",
+  "kind",
+  "label",
+  "lang",
+  "list",
+  "loop",
+  "low",
+  "manifest",
+  "marginHeight",
+  "marginWidth",
+  "max",
+  "maxLength",
+  "media",
+  "mediaGroup",
+  "method",
+  "min",
+  "minLength",
+  "multiple",
+  "muted",
+  "name",
+  "noValidate",
+  "nonce",
+  "open",
+  "optimum",
+  "pattern",
+  "placeholder",
+  "poster",
+  "preload",
+  "profile",
+  "radioGroup",
+  "readOnly",
+  "referrerPolicy",
+  "rel",
+  "required",
+  "reversed",
+  "role",
+  "rowSpan",
+  "rows",
+  "sandbox",
+  "scope",
+  "scoped",
+  "scrolling",
+  "seamless",
+  "selected",
+  "shape",
+  "size",
+  "sizes",
+  "span",
+  "spellCheck",
+  "src",
+  "srcDoc",
+  "srcLang",
+  "srcSet",
+  "start",
+  "step",
+  "style",
+  "summary",
+  "tabIndex",
+  "target",
+  "title",
+  "type",
+  "useMap",
+  "value",
+  "width",
+  "wmode",
+  "wrap",
+  // Event handlers
+  "onCopy",
+  "onCut",
+  "onPaste",
+  "onCompositionEnd",
+  "onCompositionStart",
+  "onCompositionUpdate",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onFocus",
+  "onBlur",
+  "onChange",
+  "onInput",
+  "onInvalid",
+  "onSubmit",
+  "onClick",
+  "onContextMenu",
+  "onDoubleClick",
+  "onDrag",
+  "onDragEnd",
+  "onDragEnter",
+  "onDragExit",
+  "onDragLeave",
+  "onDragOver",
+  "onDragStart",
+  "onDrop",
+  "onMouseDown",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onMouseOut",
+  "onMouseOver",
+  "onMouseUp",
+  "onSelect",
+  "onTouchCancel",
+  "onTouchEnd",
+  "onTouchMove",
+  "onTouchStart",
+  "onScroll",
+  "onWheel",
+  "onAbort",
+  "onCanPlay",
+  "onCanPlayThrough",
+  "onDurationChange",
+  "onEmptied",
+  "onEncrypted",
+  "onEnded",
+  "onError",
+  "onLoadedData",
+  "onLoadedMetadata",
+  "onLoadStart",
+  "onPause",
+  "onPlay",
+  "onPlaying",
+  "onProgress",
+  "onRateChange",
+  "onSeeked",
+  "onSeeking",
+  "onStalled",
+  "onSuspend",
+  "onTimeUpdate",
+  "onVolumeChange",
+  "onWaiting",
+  "onLoad",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onAnimationIteration",
+  "onTransitionEnd",
+  "onToggle"
+]);
+function filterDOMProps(props) {
+  const newProps = {};
+  for (const key in props) {
+    if (!key.startsWith("data-") && !validDOMProperties.has(key)) {
+      continue;
+    }
+    newProps[key] = props[key];
+  }
+  return newProps;
+}
+function InputLabel({
+  ref,
+  color,
+  className,
+  children,
+  ...props
+}) {
+  const [merged, mergedRef] = useContextProps(
+    props,
+    ref ?? null,
+    LabelContext
+  );
+  const { elementType: ElementType = "label", ...labelProps } = merged;
+  return /* @__PURE__ */ React36.createElement(
+    ElementType,
+    {
+      ...labelProps,
+      ref: mergedRef,
+      "data-color": color,
+      className: cn("prt-input-label", className)
+    },
+    children
+  );
+}
+function InputError({
+  children,
+  validationStatus = "error",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(
+    FieldError,
+    {
+      ...props,
+      elementType: "div",
+      className: cn("prt-input-error", className),
+      "data-validation-status": validationStatus
+    },
+    children
+  );
+}
+var SpaceContext = React36.createContext({ classNames: {}, compactItemWrapperAdjust: "" });
+var GAP_CLASS = {
+  none: "gap-0",
+  "4xs": "gap-0.5",
+  "3xs": "gap-1",
+  "2xs": "gap-2",
+  xs: "gap-2.5",
+  sm: "gap-3",
+  md: "gap-3.5",
+  lg: "gap-4",
+  xl: "gap-6",
+  "2xl": "gap-8",
+  "3xl": "gap-10",
+  "4xl": "gap-12"
+};
+function Space({
+  children,
+  compact,
+  gap = "none",
+  stack,
+  className,
+  classNames,
+  style,
+  styles
+}) {
+  const childrenCount = React36.Children.count(children);
+  const nodes = React36.useMemo(() => {
+    return React36.Children.map(children, (child, index) => {
+      const isFirstChild = index == 0;
+      const isLastChild = index == childrenCount - 1;
+      if (!React36.isValidElement(child)) return null;
+      return /* @__PURE__ */ React36.createElement(
+        SpaceContext.Provider,
+        {
+          value: {
+            classNames: {
+              "space-item-first": isFirstChild,
+              "space-item-last": isLastChild,
+              "space-item": true
+            },
+            compactItemWrapperAdjust: isLastChild ? "" : "compact-item-wrapper-adjust"
+          }
+        },
+        child
+      );
+    });
+  }, [children]);
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      "data-compact": compact,
+      style: { ...style, ...styles?.wrapper },
+      className: cn(
+        "prt-space flex",
+        stack ? "flex-col" : "flex-row",
+        GAP_CLASS[gap],
+        className,
+        classNames?.wrapper
+      )
+    },
+    nodes
+  );
+}
+function useSpace() {
+  return React36.useContext(SpaceContext);
+}
+var ThemeContext = React36.createContext(null);
+function ThemeProvider(props) {
+  const { children, className, ...themeProps } = props;
+  return /* @__PURE__ */ React36.createElement(ThemeContext.Provider, { value: themeProps }, /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      "data-theme": themeProps.appearance,
+      "data-radius": themeProps.radius,
+      "data-color": themeProps.color,
+      className: cn("parrot-theme", className)
+    },
+    children
+  ));
+}
+function useTheme(options) {
+  const theme = React36.useContext(ThemeContext);
+  if (!theme && options?.requireThemeProvider)
+    throw new Error("No theme found");
+  return theme;
+}
+
+// src/components/form/field.tsx
+function Field({
+  label,
+  description,
+  error,
+  color = "gray",
+  radius,
+  size = "md",
+  className,
+  classNames,
+  style,
+  styles,
+  prepend,
+  append,
+  appearance = "outline",
+  validationStatus,
+  children,
+  replaceDefaultControlWrapper,
+  isDisabled,
+  wrapperRef,
+  ...props
+}) {
+  const space = useSpace();
+  const theme = useTheme();
+  const controlRef = React36__default.useRef(null);
+  const [, groupRef] = useContextProps({}, controlRef, GroupContext);
+  return /* @__PURE__ */ React36__default.createElement(
+    "div",
+    {
+      ref: wrapperRef,
+      ...filterDOMProps(props),
+      "data-color": color,
+      "data-radius": radius ?? theme?.radius ?? "lg",
+      "data-size": size,
+      className: cn(
+        "prt-input-group flex flex-col gap-1",
+        space.compactItemWrapperAdjust,
+        className,
+        classNames?.wrapper
+      ),
+      style: { ...style, ...styles?.wrapper }
+    },
+    label && /* @__PURE__ */ React36__default.createElement(
+      InputLabel,
+      {
+        style: styles?.label,
+        className: classNames?.label,
+        color
+      },
+      label
+    ),
+    !replaceDefaultControlWrapper && /* @__PURE__ */ React36__default.createElement(
+      "div",
+      {
+        ref: groupRef,
+        className: cn(
+          "prt-input-control relative inline-flex w-full items-center",
+          space.classNames
+        ),
+        "data-has-error": !!error,
+        "data-appearance": appearance,
+        "data-disabled": isDisabled
+      },
+      prepend && /* @__PURE__ */ React36__default.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
+      children,
+      append && /* @__PURE__ */ React36__default.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
+    ),
+    replaceDefaultControlWrapper && children,
+    error && /* @__PURE__ */ React36__default.createElement(InputError, { validationStatus }, error),
+    description && /* @__PURE__ */ React36__default.createElement(
+      FieldDescription,
+      {
+        style: styles?.description,
+        className: classNames?.description
+      },
+      description
+    )
+  );
+}
+Field.displayName = "Field";
+function FieldDescription({
+  children,
+  className,
+  style
+}) {
+  const [merged, ref] = useContextProps(
+    { slot: "description" },
+    null,
+    TextContext
+  );
+  return /* @__PURE__ */ React36__default.createElement(
+    "div",
+    {
+      ...merged,
+      ref,
+      className: cn("prt-input-description", className),
+      style
+    },
+    children
+  );
+}
+
+// src/components/input/input.tsx
+function Input({
+  className,
+  classNames,
+  style,
+  styles,
+  onChange,
+  inputRef,
+  wrapperRef,
+  prepend,
+  append,
+  label,
+  description,
+  error,
+  color,
+  size,
+  radius,
+  appearance,
+  validationStatus,
+  shape,
+  placeholder,
+  ...textFieldProps
+}) {
+  return /* @__PURE__ */ React36.createElement(TextField, { ...textFieldProps, onChange, isInvalid: !!error }, /* @__PURE__ */ React36.createElement(
+    Field,
+    {
+      className,
+      classNames,
+      styles,
+      style,
+      wrapperRef,
+      prepend,
+      append,
+      label,
+      description,
+      error,
+      color,
+      size,
+      radius,
+      appearance,
+      validationStatus
+    },
+    /* @__PURE__ */ React36.createElement(
+      Input$1,
+      {
+        ref: inputRef,
+        placeholder,
+        "data-has-left-addon": !!prepend,
+        "data-has-right-addon": !!append,
+        style: styles?.input,
+        className: cn("prt-text-input-el", classNames?.input)
+      }
+    )
+  ));
+}
+function Loader({
+  color,
+  className,
+  classNames,
+  style,
+  styles,
+  size = "sm",
+  label = "Loading",
+  ref,
+  ...props
+}) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme?.color;
+  const id2 = React36.useId();
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      "data-color": resolvedColor,
+      className: cn("prt-loader", className, classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper },
+      role: "status",
+      "aria-label": label,
+      ref,
+      ...props
+    },
+    /* @__PURE__ */ React36.createElement(
+      "svg",
+      {
+        className: cn("prt-loader-icon", classNames?.icon),
+        style: styles?.icon,
+        "data-size": size,
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true"
+      },
+      /* @__PURE__ */ React36.createElement("defs", null, /* @__PURE__ */ React36.createElement(
+        "linearGradient",
+        {
+          id: `${id2}-a`,
+          x1: "50%",
+          x2: "50%",
+          y1: "5.271%",
+          y2: "91.793%"
+        },
+        /* @__PURE__ */ React36.createElement("stop", { offset: "0%", stopColor: "currentColor" }),
+        /* @__PURE__ */ React36.createElement("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.55" })
+      ), /* @__PURE__ */ React36.createElement(
+        "linearGradient",
+        {
+          id: `${id2}-b`,
+          x1: "50%",
+          x2: "50%",
+          y1: "15.24%",
+          y2: "87.15%"
+        },
+        /* @__PURE__ */ React36.createElement("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0" }),
+        /* @__PURE__ */ React36.createElement("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.55" })
+      )),
+      /* @__PURE__ */ React36.createElement("g", { fill: "none" }, /* @__PURE__ */ React36.createElement(
+        "path",
+        {
+          d: "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021",
+          fill: `url(#${id2}-a)`,
+          transform: "translate(1.5 1.625)"
+        }
+      ), /* @__PURE__ */ React36.createElement(
+        "path",
+        {
+          d: "M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118",
+          fill: `url(#${id2}-b)`,
+          transform: "translate(1.5 1.625)"
+        }
+      ))
+    )
+  );
+}
+
+// src/utils/object.ts
+function omitNullOrUndefined(object) {
+  return Object.keys(object).reduce((obj, key) => {
+    if (object[key] == null) {
+      return { ...obj };
+    }
+    return {
+      ...obj,
+      [key]: object[key]
+    };
+  }, {});
+}
+
+// src/components/button/button-group.tsx
+var ButtonGroupContext = React36.createContext({});
+function ButtonGroup({
+  color,
+  variant,
+  size,
+  compact,
+  radius,
+  gap,
+  children,
+  className,
+  classNames,
+  style,
+  styles
+}) {
+  const cleanProps = omitNullOrUndefined({
+    color,
+    variant,
+    size,
+    radius
+  });
+  return /* @__PURE__ */ React36.createElement(ButtonGroupContext.Provider, { value: cleanProps }, /* @__PURE__ */ React36.createElement(
+    Space,
+    {
+      className,
+      classNames,
+      style,
+      styles,
+      gap,
+      compact
+    },
+    children
+  ));
+}
+function useButtonGroup() {
+  return React36.useContext(ButtonGroupContext);
+}
+
+// src/components/button/button.tsx
+function Button(props) {
+  const space = useSpace();
+  const buttonGroupProps = useButtonGroup();
+  const theme = useTheme();
+  const {
+    color = theme?.color ?? "primary",
+    variant = "solid",
+    append,
+    prepend,
+    size = "md",
+    children,
+    className,
+    isLoading,
+    radius = "full",
+    isIconButton,
+    style,
+    classNames,
+    styles,
+    ...otherProps
+  } = { ...buttonGroupProps, ...props };
+  return /* @__PURE__ */ React36.createElement(
+    Button$1,
+    {
+      style: { ...style, ...styles?.wrapper },
+      "data-size": size,
+      "data-radius": radius,
+      "data-icon-button": isIconButton,
+      "data-loading": isLoading,
+      "aria-busy": isLoading,
+      "data-color": color,
+      "data-variant": variant,
+      className: cn(
+        "prt-button prt-size",
+        space.classNames,
+        className,
+        classNames?.wrapper
+      ),
+      ...otherProps
+    },
+    prepend,
+    isIconButton && isLoading ? null : children,
+    isLoading ? /* @__PURE__ */ React36.createElement(
+      Loader,
+      {
+        color,
+        className: cn("prt-button-loader", classNames?.loader),
+        style: styles?.loader,
+        size: "xs"
+      }
+    ) : append
+  );
+}
+function IconButton({ children, ...props }) {
+  return /* @__PURE__ */ React36__default.createElement(Button, { isIconButton: true, ...props }, children);
+}
+var ToggleButtonGroupContext = React36.createContext({});
+function ToggleButton({
+  idleColor,
+  idleVariant,
+  activeColor,
+  activeVariant,
+  append,
+  prepend,
+  size,
+  radius,
+  isIconButton,
+  className,
+  classNames,
+  style,
+  styles,
+  children,
+  ...props
+}) {
+  const space = useSpace();
+  const theme = useTheme();
+  const group = React36.useContext(ToggleButtonGroupContext);
+  const _idleColor = idleColor ?? group.idleColor ?? "gray";
+  const _idleVariant = idleVariant ?? group.idleVariant ?? "outline";
+  const _activeColor = activeColor ?? group.activeColor ?? theme?.color ?? "primary";
+  const _activeVariant = activeVariant ?? group.activeVariant ?? "solid";
+  const _size = size ?? group.size ?? "md";
+  const _radius = radius ?? group.radius ?? "full";
+  const _isIconButton = isIconButton ?? group.isIconButton;
+  return /* @__PURE__ */ React36.createElement(
+    ToggleButton$1,
+    {
+      ...props,
+      className: cn(
+        "prt-button prt-size",
+        space.classNames,
+        className,
+        classNames?.wrapper
+      ),
+      style: { ...style, ...styles?.wrapper },
+      render: (domProps, { isSelected }) => /* @__PURE__ */ React36.createElement(
+        "button",
+        {
+          ...domProps,
+          "data-is-toggle": "true",
+          "data-size": _size,
+          "data-radius": _radius,
+          "data-icon-button": _isIconButton,
+          "data-color": isSelected ? _activeColor : _idleColor,
+          "data-variant": isSelected ? _activeVariant : _idleVariant
+        },
+        prepend,
+        children,
+        append
+      )
+    }
+  );
+}
+
+// src/components/input/number-input.tsx
+function NumberInput({
+  appearance = "outline",
+  size = "md",
+  color = "gray",
+  classNames,
+  styles,
+  append,
+  prepend,
+  placeholder,
+  showSteppers = false,
+  error,
+  label,
+  description,
+  incrementIcon,
+  decrementIcon,
+  inputRef,
+  wrapperRef,
+  validationStatus,
+  shape,
+  radius,
+  ...props
+}) {
+  const space = useSpace();
+  return /* @__PURE__ */ React36.createElement(
+    NumberField,
+    {
+      ...props,
+      isInvalid: !!error,
+      "aria-label": props["aria-label"] ?? "number input"
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        classNames,
+        color,
+        size,
+        radius,
+        error,
+        label,
+        description,
+        validationStatus,
+        replaceDefaultControlWrapper: true
+      },
+      /* @__PURE__ */ React36.createElement(Group, { className: "prt-input-container", style: { display: "flex", gap: 4 } }, showSteppers && /* @__PURE__ */ React36.createElement(
+        IconButton,
+        {
+          slot: "decrement",
+          radius: "md",
+          color,
+          variant: "outline",
+          size,
+          className: classNames?.decrement,
+          style: styles?.decrement
+        },
+        decrementIcon
+      ), /* @__PURE__ */ React36.createElement(
+        Input$1,
+        {
+          style: styles?.input,
+          ref: inputRef,
+          placeholder,
+          className: cn(
+            classNames?.input,
+            "prt-input-control",
+            "space-item",
+            space.classNames
+          ),
+          "data-appearance": appearance,
+          "data-has-left-addon": !!prepend,
+          "data-has-right-addon": !!append
+        }
+      ), showSteppers && /* @__PURE__ */ React36.createElement(
+        IconButton,
+        {
+          slot: "increment",
+          radius: "md",
+          color,
+          variant: "outline",
+          size,
+          className: classNames?.increment,
+          style: styles?.increment
+        },
+        incrementIcon
+      ))
+    )
+  );
+}
+function HiCheck({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }));
+}
+function HiChevronDown({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }));
+}
+function HiChevronLeft({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }));
+}
+function HiChevronRight({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }));
+}
+function HiChevronUp({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z", clipRule: "evenodd" }));
+}
+function HiOutlineCalendar({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }));
+}
+function HiOutlineCheckCircle({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }));
+}
+function HiOutlineDocumentAdd({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }));
+}
+function HiOutlineExclamationCircle({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }));
+}
+function HiOutlinePaperClip({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }));
+}
+function HiOutlineRefresh({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }));
+}
+function HiOutlineTrash({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }));
+}
+function HiSelector({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z", clipRule: "evenodd" }));
+}
+function HiX({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }));
+}
+
+// src/utils/theme.ts
+var supportedColors = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone"
+];
+
+// src/utils/helpers.ts
+function warnDeprecation(deprecatedProp, newProp, value) {
+  if (!isUndefinedOrNull(value)) {
+    console.warn(
+      `${deprecatedProp} is deprecated and will be removed in a future release. ${`Please use ${newProp} instead.` }`
+    );
+  }
+}
+function hashCode(text) {
+  const str = String(text);
+  let hash = 0;
+  let char;
+  if (str.trim().length === 0) return hash;
+  for (let i = 0; i < str.length; i++) {
+    char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash &= hash;
+  }
+  return Math.abs(hash);
+}
+function id() {
+  return Math.random().toString(36);
+}
+function getRandomColor(string) {
+  const hash = hashCode(string);
+  return supportedColors[hash % supportedColors.length];
+}
+function breakpointClassNames(prefix, value) {
+  if (!value) return "";
+  if (typeof value === "string" || typeof value === "number") {
+    return `${prefix}-${value}`;
+  }
+  let classNames = "";
+  for (const key of Object.keys(value)) {
+    const breakpoint = key;
+    const breakpointValue = value[breakpoint];
+    if (breakpointValue) {
+      classNames && (classNames += " ");
+      classNames += breakpoint === "base" ? `${prefix}-${breakpointValue}` : `${breakpoint}:${prefix}-${breakpointValue}`;
+    }
+  }
+  return classNames;
+}
+
+// src/components/text/text.tsx
+function Text({
+  textCase,
+  size = "sm",
+  weight,
+  color = "gray",
+  variant = "default",
+  highlight,
+  align,
+  lineHeight,
+  underline,
+  italic,
+  as: Comp = "span",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ React36.createElement(
+    Comp,
+    {
+      className: cn(
+        "prt-text",
+        className,
+        {
+          [`text-highlight`]: !!highlight,
+          [`text-weight-${weight}`]: !!weight,
+          [`text-align-${align}`]: !!align,
+          [`text-line-height-${lineHeight}`]: !!lineHeight,
+          [`text-transform-${textCase}`]: !!textCase
+        },
+        breakpointClassNames("text-size", size)
+      ),
+      "data-underline": underline,
+      "data-italic": italic,
+      "data-color": color,
+      "data-color-variant": variant,
+      ...rest
+    }
+  );
+}
+function Textarea({
+  appearance = "outline",
+  resize,
+  label,
+  description,
+  error,
+  color = "gray",
+  radius,
+  size,
+  className,
+  classNames,
+  styles,
+  style,
+  prepend,
+  append,
+  validationStatus,
+  shape,
+  inputRef,
+  wrapperRef,
+  placeholder,
+  rows,
+  isDisabled,
+  ...textFieldProps
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ React36.createElement(TextField, { ...textFieldProps, isDisabled, isInvalid: !!error }, /* @__PURE__ */ React36.createElement(
+    Field,
+    {
+      label,
+      description,
+      error,
+      color,
+      size,
+      radius: radius ?? theme?.radius ?? "lg",
+      validationStatus,
+      style,
+      styles,
+      classNames,
+      replaceDefaultControlWrapper: true
+    },
+    /* @__PURE__ */ React36.createElement(
+      TextArea,
+      {
+        placeholder,
+        rows,
+        disabled: isDisabled,
+        className: cn("prt-input-control", "prt-text-area", className),
+        "data-has-error": !!error,
+        "data-resize": resize,
+        "data-appearance": appearance,
+        style: styles?.input
+      }
+    )
+  ));
+}
+var CheckboxGroupVariantContext = React36.createContext(null);
+function CheckboxGroup({
+  children,
+  label,
+  description,
+  errorMessage,
+  size,
+  appearance,
+  color,
+  radius,
+  shape,
+  ...props
+}) {
+  const variants = React36.useMemo(
+    () => ({ size, appearance, color, radius, shape }),
+    [size, appearance, color, radius, shape]
+  );
+  return /* @__PURE__ */ React36.createElement(
+    CheckboxGroup$1,
+    {
+      ...props,
+      "aria-label": typeof label === "string" ? label : void 0
+    },
+    /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-2" }, label && /* @__PURE__ */ React36.createElement("span", { className: "text-sm font-medium text-gray-700" }, label), /* @__PURE__ */ React36.createElement(CheckboxGroupVariantContext.Provider, { value: variants }, children), description && /* @__PURE__ */ React36.createElement("span", { className: "text-xs leading-normal text-gray-400" }, description), errorMessage && /* @__PURE__ */ React36.createElement(InputError, null, errorMessage))
+  );
+}
+
+// src/components/checkbox/checkbox.tsx
+function getRadius(shape) {
+  if (shape === "sharp") return "none";
+  if (shape === "round") return "md";
+  return void 0;
+}
+function Checkbox({
+  appearance,
+  size,
+  shape,
+  radius,
+  color,
+  className,
+  classNames,
+  styles,
+  style,
+  children,
+  ...props
+}) {
+  const group = React36.useContext(CheckboxGroupVariantContext);
+  const resolvedColor = color ?? group?.color ?? "primary";
+  const resolvedAppearance = appearance ?? group?.appearance ?? "outline";
+  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedRadius = radius ?? group?.radius ?? getRadius(shape ?? group?.shape) ?? "md";
+  return /* @__PURE__ */ React36.createElement(CheckboxField, { ...props }, /* @__PURE__ */ React36.createElement(
+    CheckboxButton,
+    {
+      style: { ...style, ...styles?.wrapper },
+      className: cn(className, "prt-checkbox", classNames?.wrapper)
+    },
+    ({ isSelected, isIndeterminate, isFocusVisible }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        style: styles?.checkbox,
+        "data-color": resolvedColor,
+        "data-variant": isSelected || isIndeterminate ? "solid" : void 0,
+        "data-radius": resolvedRadius,
+        className: cn(["prt-fake-checkbox", classNames?.checkbox]),
+        "data-focused": isFocusVisible,
+        "data-checked": isSelected && !isIndeterminate,
+        "data-indeterminate": isIndeterminate,
+        "data-size": resolvedSize,
+        "data-appearance": isSelected || isIndeterminate ? void 0 : resolvedAppearance,
+        "aria-hidden": "true"
+      },
+      isSelected && !isIndeterminate && /* @__PURE__ */ React36.createElement(
+        "svg",
+        {
+          className: cn("prt-checkbox-icon", classNames?.icon),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "6 7 12 10",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React36.createElement("path", { d: "M9 12l2 2l4 -4" })
+      ),
+      isIndeterminate && /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          className: cn(["prt-checkbox-icon", classNames?.icon]),
+          style: {
+            background: "currentColor",
+            width: "70%",
+            height: 2,
+            borderRadius: 4
+          }
+        }
+      )
+    ), children)
+  ));
+}
+function CheckboxItem({
+  className,
+  classNames,
+  styles,
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(CheckboxField, { ...props }, /* @__PURE__ */ React36.createElement(
+    CheckboxButton,
+    {
+      style: { ...style, ...styles?.wrapper },
+      className: cn(className, "prt-checkbox-item", classNames?.wrapper)
+    },
+    children
+  ));
+}
+function Menu({ children, ...props }) {
+  return /* @__PURE__ */ React36.createElement(MenuTrigger$1, { ...props }, children);
+}
+function MenuTrigger({ asChild, children }) {
+  if (asChild) {
+    return /* @__PURE__ */ React36.createElement(Pressable, null, children);
+  }
+  return /* @__PURE__ */ React36.createElement(Button, null, children);
+}
+function px(value) {
+  if (value == null) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function MenuContent({
+  children,
+  menuHeader,
+  menuFooter,
+  minWidth = 200,
+  maxHeight = 300,
+  maxWidth,
+  placement = "bottom start",
+  offset = 8,
+  color,
+  classNames,
+  styles,
+  className,
+  style,
+  ...props
+}) {
+  const theme = useTheme();
+  const dataColor = color ?? theme?.color ?? "violet";
+  const dataRadius = theme?.radius ?? "lg";
+  const header = typeof menuHeader === "function" ? menuHeader() : menuHeader;
+  const footer = typeof menuFooter === "function" ? menuFooter() : menuFooter;
+  return /* @__PURE__ */ React36.createElement(
+    Popover$1,
+    {
+      placement,
+      offset,
+      "data-color": dataColor,
+      "data-radius": dataRadius,
+      className: cn("prt-popover", classNames?.popover),
+      style: { ...styles?.popover }
+    },
+    /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        "data-color": dataColor,
+        "data-radius": dataRadius,
+        className: cn("prt-list-box-wrapper", classNames?.wrapper, className),
+        style: {
+          minWidth: typeof minWidth === "number" ? `max(200px, ${minWidth}px)` : minWidth,
+          maxWidth: px(maxWidth),
+          maxHeight: px(maxHeight),
+          ...styles?.wrapper,
+          ...style
+        }
+      },
+      header,
+      /* @__PURE__ */ React36.createElement(
+        Menu$1,
+        {
+          ...props,
+          className: cn("prt-menu-list", classNames?.list),
+          style: { ...styles?.list }
+        },
+        children
+      ),
+      footer
+    )
+  );
+}
+function MenuItem({
+  children,
+  icon,
+  label,
+  description,
+  color,
+  isReadOnly,
+  className,
+  style,
+  textValue,
+  ...props
+}) {
+  const resolvedTextValue = textValue ?? (typeof label === "string" ? label : void 0) ?? (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */ React36.createElement(
+    MenuItem$1,
+    {
+      ...props,
+      textValue: resolvedTextValue,
+      "data-color": color,
+      "data-readonly": isReadOnly || void 0,
+      style,
+      className: cn(className, "prt-list-option prt-menu-item")
+    },
+    ({ isSelected }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-3" }, icon && /* @__PURE__ */ React36.createElement("div", { className: "flex gap-3 prt-list-option-icon-wrapper" }, React36.isValidElement(icon) && React36.cloneElement(icon, {
+      className: "prt-list-option-icon",
+      size: 18,
+      ...icon.props
+    })), /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React36.createElement("div", { slot: "label", className: "text-sm text-black" }, label ?? children), description && /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        slot: "description",
+        className: "text-sm leading-normal text-gray-500"
+      },
+      description
+    ))), isSelected && /* @__PURE__ */ React36.createElement(HiCheck, { className: "selected-marker" }))
+  );
+}
+function MenuSection({
+  title,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(MenuSection$1, { ...props, className: cn(className, "prt-list-section") }, title && /* @__PURE__ */ React36.createElement(Header, { className: "prt-list-section-header" }, title), children);
+}
+var ListBoxConfigContext = React36.createContext({
+  showSelectionIndicator: true
+});
+function ListBox({
+  items,
+  children,
+  labelKey = "label",
+  valueKey = "id",
+  sectionKey,
+  color = "gray",
+  width,
+  showSectionSeparator = true,
+  showSelectionIndicator = true,
+  renderOption,
+  renderSelectionIndicator,
+  renderSectionLabel,
+  renderEmpty,
+  className,
+  classNames,
+  style,
+  styles,
+  listBoxRef,
+  ...props
+}) {
+  const theme = useTheme();
+  const config = React36.useMemo(
+    () => ({
+      showSelectionIndicator,
+      renderSelectionIndicator
+    }),
+    [showSelectionIndicator, renderSelectionIndicator]
+  );
+  function renderItem(item) {
+    const record = item;
+    const id2 = record[valueKey];
+    const label = record[labelKey];
+    if (sectionKey && record[sectionKey]) {
+      return /* @__PURE__ */ React36.createElement(
+        ListBoxSection,
+        {
+          id: id2,
+          title: renderSectionLabel?.(item) ?? label
+        },
+        /* @__PURE__ */ React36.createElement(Collection, { items: record[sectionKey] }, (child) => {
+          const childRecord = child;
+          return /* @__PURE__ */ React36.createElement(
+            ListBoxItem,
+            {
+              id: childRecord[valueKey],
+              textValue: childRecord[labelKey]
+            },
+            renderOption?.(child) ?? childRecord[labelKey]
+          );
+        })
+      );
+    }
+    return /* @__PURE__ */ React36.createElement(ListBoxItem, { id: id2, textValue: label }, renderOption?.(item) ?? label);
+  }
+  const listBoxChildren = children ?? renderItem;
+  return /* @__PURE__ */ React36.createElement(ListBoxConfigContext.Provider, { value: config }, /* @__PURE__ */ React36.createElement(
+    ListBox$1,
+    {
+      ...props,
+      ref: listBoxRef,
+      items,
+      className: cn("prt-list-box-wrapper", classNames?.wrapper, className),
+      "data-radius": theme?.radius ?? "lg",
+      "data-color": color,
+      "data-section-separator": showSectionSeparator,
+      style: { width, ...style, ...styles?.wrapper },
+      renderEmptyState: () => /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          className: "flex items-center justify-center gap-3",
+          style: { height: 50 }
+        },
+        renderEmpty?.() ?? /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-gray-400" }, "No options")
+      )
+    },
+    listBoxChildren
+  ));
+}
+function ListBoxItem({
+  color,
+  variant,
+  className,
+  showSelectionIndicator,
+  children,
+  textValue,
+  ...props
+}) {
+  const config = React36.useContext(ListBoxConfigContext);
+  const showIndicator = showSelectionIndicator ?? config.showSelectionIndicator;
+  const resolvedTextValue = textValue ?? (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */ React36.createElement(
+    ListBoxItem$1,
+    {
+      ...props,
+      textValue: resolvedTextValue,
+      className: cn("prt-list-option", className),
+      "data-color": color,
+      "data-variant": variant
+    },
+    composeRenderProps(
+      children,
+      (rendered, renderProps) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, rendered, renderProps.isSelected && showIndicator && /* @__PURE__ */ React36.createElement("span", { className: "selection-indicator" }, config.renderSelectionIndicator?.(
+        props.value ?? props
+      ) ?? /* @__PURE__ */ React36.createElement(HiCheck, { size: 16 })))
+    )
+  );
+}
+function ListBoxSection({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(ListBoxSection$1, { ...props, className: cn("prt-list-section", className) }, title && /* @__PURE__ */ React36.createElement(Header, { className: "prt-list-section-header" }, title), children);
+}
+
+// src/components/combo-box/combo-box.tsx
+function ComboBox({
+  description,
+  error,
+  label,
+  selectorIcon = /* @__PURE__ */ React36.createElement(HiSelector, { size: 18 }),
+  selectorSize = "sm",
+  style,
+  styles,
+  className,
+  classNames,
+  isLoading,
+  loadData,
+  loadingIndicator = /* @__PURE__ */ React36.createElement(Loader, { size: "xs" }),
+  items,
+  defaultItems,
+  inputValue,
+  onInputChange,
+  placeholder,
+  prepend,
+  append,
+  color,
+  size,
+  radius,
+  appearance,
+  labelKey,
+  valueKey,
+  sectionKey,
+  renderOption,
+  renderSectionLabel,
+  children,
+  ...props
+}) {
+  const list = useAsyncList({
+    async load({ filterText, signal }) {
+      if (loadData) {
+        return { items: await loadData(filterText, signal) };
+      }
+      return { items: [] };
+    }
+  });
+  const { contains } = useFilter({ sensitivity: "base" });
+  const usingAsync = !!loadData;
+  const comboItems = usingAsync ? list.items : items;
+  const comboInputValue = usingAsync ? list.filterText : inputValue;
+  const loading = usingAsync ? list.isLoading : isLoading;
+  function handleInputChange(value) {
+    if (usingAsync) list.setFilterText(value);
+    onInputChange?.(value);
+  }
+  const comboBoxProps = {
+    ...props,
+    items: comboItems,
+    defaultItems,
+    inputValue: comboInputValue,
+    onInputChange: handleInputChange,
+    isInvalid: !!error,
+    defaultFilter: contains
+  };
+  return /* @__PURE__ */ React36.createElement(
+    ComboBox$1,
+    {
+      ...comboBoxProps,
+      className: cn("prt-combo-box", className, classNames?.wrapper)
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        styles,
+        classNames,
+        style,
+        label,
+        description,
+        error,
+        color,
+        size,
+        radius,
+        appearance,
+        prepend,
+        append
+      },
+      /* @__PURE__ */ React36.createElement(
+        Input$1,
+        {
+          placeholder,
+          style: styles?.input,
+          className: cn(
+            "prt-text-input-el",
+            "prt-combo-box-input",
+            classNames?.input
+          )
+        }
+      ),
+      /* @__PURE__ */ React36.createElement(
+        IconButton,
+        {
+          className: cn("prt-combo-box-button", classNames?.button),
+          style: styles?.button,
+          variant: "ghost",
+          color: "gray",
+          size: selectorSize
+        },
+        loading ? loadingIndicator : selectorIcon
+      )
+    ),
+    /* @__PURE__ */ React36.createElement(
+      Popover$1,
+      {
+        offset: 6,
+        className: cn(
+          "prt-popover",
+          "prt-combo-box-popover",
+          classNames?.popover
+        ),
+        style: styles?.popover
+      },
+      /* @__PURE__ */ React36.createElement(
+        ListBox,
+        {
+          items: comboItems,
+          labelKey,
+          valueKey,
+          sectionKey,
+          renderOption,
+          renderSectionLabel,
+          width: "var(--trigger-width)"
+        },
+        children
+      )
+    )
+  );
+}
+function Radio({
+  size = "sm",
+  className,
+  style,
+  appearance,
+  color,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(RadioField, { ...props }, /* @__PURE__ */ React36.createElement(RadioButton, { style, className: cn("prt-radio", className) }, ({ isSelected }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      "data-color": color,
+      className: "prt-fake-radio",
+      "data-appearance": appearance,
+      "data-checked": isSelected,
+      "data-size": size
+    }
+  ), children)));
+}
+function RadioGroup({
+  className,
+  classNames,
+  style,
+  styles,
+  label,
+  description,
+  errorMessage,
+  children,
+  ...props
+}) {
+  const isHorizontal = props.orientation === "horizontal";
+  return /* @__PURE__ */ React36.createElement(
+    RadioGroup$1,
+    {
+      ...props,
+      "aria-label": typeof label === "string" ? label : void 0
+    },
+    /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        style: { ...style, ...styles?.wrapper },
+        className: cn(
+          "prt-radio-group flex flex-col gap-2",
+          className,
+          classNames?.wrapper
+        )
+      },
+      label && /* @__PURE__ */ React36.createElement(InputLabel, null, label),
+      description && /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-gray-600" }, description),
+      /* @__PURE__ */ React36.createElement("div", { className: cn("flex gap-2", isHorizontal ? "flex-row" : "flex-col") }, children),
+      errorMessage && /* @__PURE__ */ React36.createElement(InputError, null, errorMessage)
+    )
+  );
+}
+function RadioCard({
+  title,
+  description,
+  children,
+  appearance,
+  showIndicator = true,
+  color,
+  className,
+  style,
+  classNames,
+  styles,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(RadioField, { ...props }, /* @__PURE__ */ React36.createElement(
+    RadioButton,
+    {
+      "data-radius": "lg",
+      className: cn(className, "prt-radio-card", classNames?.wrapper),
+      "data-color": color,
+      "data-appearance": appearance,
+      style: { ...style, ...styles?.wrapper }
+    },
+    ({ isSelected }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, showIndicator && /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        className: "prt-radio-card-indicator prt-fake-radio",
+        "data-size": "sm",
+        "data-checked": isSelected
+      }
+    ), /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        className: cn(
+          "flex w-full flex-col gap-2.5 prt-radio-card-content",
+          classNames?.content
+        ),
+        style: { ...styles?.content }
+      },
+      (title || description) && /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-0.5" }, title && /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          className: cn("text-sm", classNames?.title),
+          style: { ...styles?.title }
+        },
+        title
+      ), description && /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          className: cn(
+            "text-xs leading-relaxed text-gray-400",
+            classNames?.description
+          ),
+          style: { ...styles?.description }
+        },
+        description
+      )),
+      children
+    ))
+  ));
+}
+function RadioItem({
+  className,
+  style,
+  classNames,
+  styles,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(RadioField, { ...props }, /* @__PURE__ */ React36.createElement(
+    RadioButton,
+    {
+      style: { ...style, ...styles?.wrapper },
+      className: cn(className, classNames?.wrapper, "prt-radio-item")
+    },
+    children
+  ));
+}
+function Tag({
+  prepend,
+  append,
+  children,
+  hashValue,
+  color,
+  size = "sm",
+  shape,
+  variant = "light",
+  className,
+  style,
+  classNames,
+  styles,
+  radius = "full",
+  ref,
+  ...props
+}) {
+  warnDeprecation("shape", "radius", shape);
+  const randomColor = React36__default.useMemo(() => {
+    if (hashValue) {
+      return getRandomColor(hashValue);
+    }
+    return "gray";
+  }, [hashValue]);
+  return /* @__PURE__ */ React36__default.createElement(
+    "span",
+    {
+      className: cn(className, "prt-tag", classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper },
+      "data-radius": radius,
+      "data-size": size,
+      "data-color": color ?? randomColor,
+      "data-variant": variant,
+      ref,
+      ...props
+    },
+    prepend,
+    children,
+    append
+  );
+}
+
+// src/components/select/select.tsx
+function Select({
+  label,
+  description,
+  error,
+  placeholder,
+  selectionMode = "single",
+  appearance = "outline",
+  renderValue,
+  color = "gray",
+  size = "sm",
+  radius,
+  listBoxColor,
+  name,
+  value,
+  defaultValue,
+  isDisabled,
+  isRequired,
+  disabledKeys,
+  onChange,
+  onSelectionChange,
+  showSectionSeparator = true,
+  showSelectionIndicator = true,
+  items,
+  children,
+  labelKey = "label",
+  valueKey = "id",
+  sectionKey,
+  renderOption,
+  renderSectionLabel,
+  className,
+  classNames,
+  style,
+  styles
+}) {
+  const theme = useTheme();
+  const isMultiple = selectionMode === "multiple";
+  color = color ?? theme?.color;
+  function handleChange(v) {
+    onChange?.({ target: { value: v, name } });
+    onSelectionChange?.(v == null ? [] : Array.isArray(v) ? v : [v]);
+  }
+  function labelOf(item) {
+    if (item == null) return null;
+    return item[labelKey];
+  }
+  const racSelectProps = {
+    selectionMode,
+    isDisabled,
+    isRequired,
+    placeholder,
+    disabledKeys,
+    value,
+    defaultValue,
+    isInvalid: !!error,
+    onChange: handleChange
+  };
+  return /* @__PURE__ */ React36.createElement(
+    Select$1,
+    {
+      ...racSelectProps,
+      "aria-label": label == null ? placeholder ?? "Select" : void 0,
+      className: cn("prt-select", className, classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper }
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        replaceDefaultControlWrapper: true,
+        label,
+        error,
+        description,
+        color,
+        size,
+        radius,
+        classNames,
+        styles
+      },
+      /* @__PURE__ */ React36.createElement(
+        Button$1,
+        {
+          "data-selection-mode": selectionMode,
+          "data-appearance": appearance,
+          style: styles?.trigger,
+          className: cn("prt-input-control", "prt-select-trigger", classNames?.trigger)
+        },
+        /* @__PURE__ */ React36.createElement(SelectValue, { className: cn("single-value", classNames?.value) }, ({ isPlaceholder, selectedItems, selectedText }) => {
+          if (isPlaceholder) {
+            return /* @__PURE__ */ React36.createElement(
+              "span",
+              {
+                style: styles?.placeholder,
+                className: cn("text-gray-400", classNames?.placeholder)
+              },
+              placeholder
+            );
+          }
+          if (isMultiple) {
+            return /* @__PURE__ */ React36.createElement("div", { className: "flex flex-wrap gap-1" }, selectedItems.map(
+              (item, index) => item == null ? null : renderValue?.(item) ?? /* @__PURE__ */ React36.createElement(
+                Tag,
+                {
+                  size: "md",
+                  variant: "pastel",
+                  color,
+                  key: index
+                },
+                labelOf(item)
+              )
+            ));
+          }
+          const selectedItem = selectedItems[0] ?? null;
+          return /* @__PURE__ */ React36.createElement(
+            "div",
+            {
+              className: cn("single-value", classNames?.value),
+              style: styles?.value
+            },
+            (selectedItem && renderValue?.(selectedItem)) ?? labelOf(selectedItem) ?? selectedText
+          );
+        }),
+        /* @__PURE__ */ React36.createElement(HiSelector, { className: "selector", size: 18 })
+      )
+    ),
+    /* @__PURE__ */ React36.createElement(
+      Popover$1,
+      {
+        offset: 4,
+        className: cn("prt-popover", "prt-select-popover", classNames?.popover),
+        style: styles?.popover
+      },
+      /* @__PURE__ */ React36.createElement(
+        ListBox,
+        {
+          items,
+          labelKey,
+          valueKey,
+          sectionKey,
+          renderOption,
+          renderSectionLabel,
+          showSectionSeparator,
+          showSelectionIndicator,
+          color: listBoxColor ?? "gray",
+          width: "var(--trigger-width)"
+        },
+        children
+      )
+    )
+  );
+}
+function CalendarBody({
+  numberOfMonths = 1,
+  showMonthAndYearPickers = false
+}) {
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("header", { className: "prt-calendar-header" }, /* @__PURE__ */ React36.createElement(
+    IconButton,
+    {
+      slot: "previous",
+      variant: "outline",
+      radius: "full",
+      size: "sm",
+      color: "gray"
+    },
+    /* @__PURE__ */ React36.createElement(HiChevronLeft, { size: 20 })
+  ), showMonthAndYearPickers ? /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2 prt-calendar-selects" }, /* @__PURE__ */ React36.createElement(CalendarMonthPicker, null, ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ React36.createElement(
+    Select,
+    {
+      "aria-label": ariaLabel,
+      size: "sm",
+      appearance: "filled",
+      valueKey: "id",
+      labelKey: "formatted",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      items
+    }
+  )), /* @__PURE__ */ React36.createElement(CalendarYearPicker, null, ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ React36.createElement(
+    Select,
+    {
+      "aria-label": ariaLabel,
+      size: "sm",
+      appearance: "filled",
+      valueKey: "id",
+      labelKey: "formatted",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      items
+    }
+  ))) : /* @__PURE__ */ React36.createElement(Heading, { className: "prt-calendar-heading" }), /* @__PURE__ */ React36.createElement(
+    IconButton,
+    {
+      slot: "next",
+      variant: "outline",
+      radius: "full",
+      size: "sm",
+      color: "gray"
+    },
+    /* @__PURE__ */ React36.createElement(HiChevronRight, { size: 20 })
+  )), /* @__PURE__ */ React36.createElement("div", { className: "prt-calendar-months" }, Array.from({ length: numberOfMonths }, (_, i) => /* @__PURE__ */ React36.createElement(
+    CalendarGrid,
+    {
+      key: i,
+      offset: { months: i },
+      className: "prt-calendar-grid"
+    },
+    /* @__PURE__ */ React36.createElement(CalendarGridHeader, null, (day) => /* @__PURE__ */ React36.createElement(CalendarHeaderCell, { className: "prt-date-weekday" }, day)),
+    /* @__PURE__ */ React36.createElement(CalendarGridBody, null, (date) => /* @__PURE__ */ React36.createElement(CalendarCell, { date, className: "prt-date-cell" }))
+  ))));
+}
+function Calendar({
+  numberOfMonths = 1,
+  showMonthAndYearPickers,
+  color,
+  radius,
+  ref,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ React36.createElement(
+    Calendar$1,
+    {
+      ...props,
+      ref,
+      visibleDuration: { months: numberOfMonths },
+      "data-color": color ?? theme?.color ?? "primary",
+      "data-radius": radius ?? theme?.radius ?? "lg",
+      className: "prt-calendar-wrapper"
+    },
+    /* @__PURE__ */ React36.createElement(
+      CalendarBody,
+      {
+        numberOfMonths,
+        showMonthAndYearPickers
+      }
+    )
+  );
+}
+function RangeCalendar({
+  numberOfMonths = 1,
+  showMonthAndYearPickers,
+  color,
+  radius,
+  ref,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ React36.createElement(
+    RangeCalendar$1,
+    {
+      ...props,
+      ref,
+      visibleDuration: { months: numberOfMonths },
+      "data-color": color ?? theme?.color ?? "primary",
+      "data-radius": radius ?? theme?.radius ?? "lg",
+      "data-range": "true",
+      className: "prt-calendar-wrapper"
+    },
+    /* @__PURE__ */ React36.createElement(
+      CalendarBody,
+      {
+        numberOfMonths,
+        showMonthAndYearPickers
+      }
+    )
+  );
+}
+function DateSegments({ slot, className }) {
+  return /* @__PURE__ */ React36.createElement(DateInput, { slot, className: cn("prt-date-field", className) }, (segment) => /* @__PURE__ */ React36.createElement(DateSegment, { segment, className: "prt-date-input-segment" }));
+}
+
+// src/components/date/date-field.tsx
+function DateField({
+  appearance = "outline",
+  size = "md",
+  color,
+  radius,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  description,
+  error,
+  validationStatus,
+  prepend,
+  append,
+  className,
+  classNames,
+  style,
+  styles,
+  ref,
+  ...props
+}) {
+  function handleChange(date) {
+    onChange?.(date?.toString() ?? null, date);
+  }
+  return /* @__PURE__ */ React36.createElement(
+    DateField$1,
+    {
+      ...props,
+      value: value != null ? parseDate(value) : void 0,
+      defaultValue: defaultValue != null ? parseDate(defaultValue) : void 0,
+      onChange: handleChange,
+      isInvalid: !!error
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        replaceDefaultControlWrapper: true,
+        label,
+        error,
+        description,
+        color,
+        size,
+        radius,
+        appearance,
+        validationStatus,
+        className,
+        classNames,
+        style,
+        styles
+      },
+      /* @__PURE__ */ React36.createElement(
+        Group,
+        {
+          ref,
+          "data-appearance": appearance,
+          "data-color": color,
+          className: cn("prt-input-control", "date-field-control")
+        },
+        prepend && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
+        /* @__PURE__ */ React36.createElement(DateSegments, null),
+        append && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
+      )
+    )
+  );
+}
+function TimeField({
+  appearance = "outline",
+  size = "md",
+  color,
+  radius,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  description,
+  error,
+  validationStatus,
+  prepend,
+  append,
+  className,
+  classNames,
+  style,
+  styles,
+  ref,
+  ...props
+}) {
+  function handleChange(time) {
+    onChange?.(time?.toString() ?? null, time);
+  }
+  return /* @__PURE__ */ React36.createElement(
+    TimeField$1,
+    {
+      ...props,
+      value: value != null ? parseTime(value) : void 0,
+      defaultValue: defaultValue != null ? parseTime(defaultValue) : void 0,
+      onChange: handleChange,
+      isInvalid: !!error
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        replaceDefaultControlWrapper: true,
+        label,
+        error,
+        description,
+        color,
+        size,
+        radius,
+        appearance,
+        validationStatus,
+        className,
+        classNames,
+        style,
+        styles
+      },
+      /* @__PURE__ */ React36.createElement(
+        Group,
+        {
+          ref,
+          "data-appearance": appearance,
+          "data-color": color,
+          className: cn("prt-input-control", "date-field-control")
+        },
+        prepend && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
+        /* @__PURE__ */ React36.createElement(DateSegments, null),
+        append && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
+      )
+    )
+  );
+}
+function DatePicker({
+  appearance = "outline",
+  size = "md",
+  color,
+  numberOfMonths,
+  showMonthAndYearPickers,
+  radius,
+  selectorIcon = /* @__PURE__ */ React36.createElement(HiOutlineCalendar, { size: 16 }),
+  value,
+  defaultValue,
+  onChange,
+  label,
+  description,
+  error,
+  validationStatus,
+  className,
+  classNames,
+  style,
+  styles,
+  ref,
+  ...props
+}) {
+  function handleChange(date) {
+    onChange?.(date?.toString() ?? null, date);
+  }
+  return /* @__PURE__ */ React36.createElement(
+    DatePicker$1,
+    {
+      ...props,
+      value: value != null ? parseDate(value) : void 0,
+      defaultValue: defaultValue != null ? parseDate(defaultValue) : void 0,
+      onChange: handleChange,
+      isInvalid: !!error
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        replaceDefaultControlWrapper: true,
+        label,
+        error,
+        description,
+        color,
+        size,
+        radius,
+        appearance,
+        validationStatus,
+        className,
+        classNames,
+        style,
+        styles
+      },
+      /* @__PURE__ */ React36.createElement(
+        Group,
+        {
+          ref,
+          "data-appearance": appearance,
+          "data-color": color,
+          className: cn("prt-input-control", "prt-date-picker-trigger")
+        },
+        /* @__PURE__ */ React36.createElement(DateSegments, null),
+        /* @__PURE__ */ React36.createElement(IconButton, { size: "sm", variant: "light", color }, selectorIcon)
+      )
+    ),
+    /* @__PURE__ */ React36.createElement(
+      Popover$1,
+      {
+        offset: 8,
+        placement: "bottom start",
+        className: cn("prt-popover", "prt-date-popover")
+      },
+      /* @__PURE__ */ React36.createElement(
+        Calendar,
+        {
+          color,
+          radius,
+          numberOfMonths,
+          showMonthAndYearPickers
+        }
+      )
+    )
+  );
+}
+function toRange(value) {
+  return value != null ? { start: parseDate(value.start), end: parseDate(value.end) } : void 0;
+}
+function DateRangePicker({
+  appearance = "outline",
+  size = "md",
+  color,
+  numberOfMonths = 2,
+  showMonthAndYearPickers,
+  radius,
+  dropdownIcon = /* @__PURE__ */ React36.createElement(HiOutlineCalendar, { size: 16 }),
+  value,
+  defaultValue,
+  onChange,
+  label,
+  description,
+  error,
+  validationStatus,
+  className,
+  classNames,
+  style,
+  styles,
+  ref,
+  ...props
+}) {
+  function handleChange(range) {
+    onChange?.(
+      range ? { start: range.start.toString(), end: range.end.toString() } : null,
+      range
+    );
+  }
+  return /* @__PURE__ */ React36.createElement(
+    DateRangePicker$1,
+    {
+      ...props,
+      value: toRange(value),
+      defaultValue: toRange(defaultValue),
+      onChange: handleChange,
+      isInvalid: !!error
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        replaceDefaultControlWrapper: true,
+        label,
+        error,
+        description,
+        color,
+        size,
+        radius,
+        appearance,
+        validationStatus,
+        className,
+        classNames,
+        style,
+        styles
+      },
+      /* @__PURE__ */ React36.createElement(
+        Group,
+        {
+          ref,
+          "data-appearance": appearance,
+          "data-color": color,
+          className: cn("prt-input-control", "prt-date-picker-trigger")
+        },
+        /* @__PURE__ */ React36.createElement("div", { className: "prt-date-range-fields" }, /* @__PURE__ */ React36.createElement(DateSegments, { slot: "start" }), /* @__PURE__ */ React36.createElement("span", { "aria-hidden": "true", className: "prt-date-range-sep" }, "\u2013"), /* @__PURE__ */ React36.createElement(DateSegments, { slot: "end" })),
+        /* @__PURE__ */ React36.createElement(IconButton, { size: "sm", variant: "light", color }, dropdownIcon)
+      )
+    ),
+    /* @__PURE__ */ React36.createElement(
+      Popover$1,
+      {
+        offset: 8,
+        placement: "bottom start",
+        className: cn("prt-popover", "prt-date-popover")
+      },
+      /* @__PURE__ */ React36.createElement(
+        RangeCalendar,
+        {
+          color,
+          radius,
+          numberOfMonths,
+          showMonthAndYearPickers
+        }
+      )
+    )
+  );
+}
+var AvatarGroupContext = React36.createContext(null);
+function defaultGetInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0].slice(0, 2);
+  return parts[0][0] + parts[parts.length - 1][0];
+}
+function Avatar({
+  src,
+  alt,
+  name,
+  color,
+  variant,
+  fallback,
+  children,
+  size,
+  className,
+  radius,
+  classNames,
+  styles,
+  style,
+  getInitials = defaultGetInitials,
+  ref,
+  ...props
+}) {
+  const [erroredSrc, setErroredSrc] = React36.useState();
+  const theme = useTheme();
+  const group = React36.useContext(AvatarGroupContext);
+  const defaultColor = React36.useMemo(() => {
+    return supportedColors[hashCode(name || "") % supportedColors.length];
+  }, [name]);
+  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedVariant = variant ?? group?.variant ?? "light";
+  const resolvedColor = color ?? group?.color ?? defaultColor;
+  function renderContent() {
+    if (src && erroredSrc !== src) {
+      return /* @__PURE__ */ React36.createElement(
+        "img",
+        {
+          className: cn("prt-avatar-img", classNames?.img),
+          style: styles?.img,
+          onError: () => setErroredSrc(src),
+          src,
+          alt: alt ?? name
+        }
+      );
+    }
+    if (children) return children;
+    if (name) {
+      return /* @__PURE__ */ React36.createElement(
+        "span",
+        {
+          className: cn("prt-avatar-fallback", classNames?.fallback),
+          style: styles?.fallback
+        },
+        getInitials(name)
+      );
+    }
+    return fallback ?? null;
+  }
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      style: { ...style, ...styles?.base },
+      className: cn("prt-avatar prt-size", className, classNames?.base),
+      "data-radius": radius ?? theme?.avatarRadiusSize ?? "full",
+      "data-color": resolvedColor,
+      "data-variant": resolvedVariant,
+      "data-interactive": false,
+      "data-size": resolvedSize,
+      role: "img",
+      "aria-label": alt ?? name,
+      ref,
+      ...props
+    },
+    renderContent()
+  );
+}
+function AvatarGroup({
+  max,
+  size,
+  color,
+  variant,
+  children,
+  className,
+  style,
+  classNames,
+  styles
+}) {
+  const value = React36.useMemo(
+    () => ({ size, color, variant }),
+    [size, color, variant]
+  );
+  const items = React36.Children.toArray(children);
+  const visible = max != null ? items.slice(0, max) : items;
+  const overflow = max != null ? Math.max(0, items.length - max) : 0;
+  return /* @__PURE__ */ React36.createElement(AvatarGroupContext.Provider, { value }, /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      className: cn("prt-avatar-group", className, classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper }
+    },
+    visible,
+    overflow > 0 && /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        className: cn("prt-avatar prt-size", classNames?.overflow),
+        style: styles?.overflow,
+        "data-size": size ?? "md",
+        "data-color": color ?? "gray",
+        "data-variant": variant ?? "light",
+        "data-radius": "full",
+        "data-interactive": false
+      },
+      "+",
+      overflow
+    )
+  ));
+}
+function convertFileToUpload(file) {
+  return {
+    name: file.name,
+    id: id(),
+    url: URL.createObjectURL(file),
+    status: "success",
+    file
+  };
+}
+function FileUploader({
+  onFileUpload,
+  onRemoveFile,
+  error,
+  label,
+  allowMultiple,
+  uploads: controlledUploads,
+  hideFileList,
+  color = "gray",
+  ref,
+  classNames,
+  styles,
+  className,
+  style
+}) {
+  const [_uploads, setUploads] = React36.useState([]);
+  const uploads = controlledUploads ?? _uploads;
+  function onUpload(next) {
+    if (isEmptyArray(next)) return;
+    setUploads(next);
+    onFileUpload?.(next);
+  }
+  function handleSelect(files) {
+    if (!files?.length) return;
+    onUpload(Array.from(files).map(convertFileToUpload));
+  }
+  function handleRemoveFile() {
+    setUploads([]);
+    onRemoveFile?.();
+  }
+  function handleRetry() {
+    console.log("retry");
+  }
+  const isIdle = allowMultiple || !allowMultiple && uploads[0]?.status === "idle" || !uploads.length;
+  const isUploading = !allowMultiple && uploads[0]?.status === "loading";
+  const isUploaded = !allowMultiple && uploads[0]?.status === "success";
+  const isFailed = !allowMultiple && uploads[0]?.status === "error";
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-2.5", classNames?.wrapper, className),
+      style: { ...styles?.wrapper, ...style }
+    },
+    label && /* @__PURE__ */ React36.createElement(InputLabel, null, label),
+    /* @__PURE__ */ React36.createElement(
+      DropZone,
+      {
+        "aria-label": typeof label === "string" ? label : "File upload",
+        onDrop: async (e) => {
+          const fileItems = e.items.filter(
+            (item) => item.kind === "file"
+          );
+          const files = await Promise.all(
+            fileItems.map((item) => item.getFile())
+          );
+          onUpload(files.map(convertFileToUpload));
+        },
+        "data-radius": "lg",
+        "data-color": color,
+        className: cn("prt-file-uploader", classNames?.dropzone),
+        style: { ...styles?.dropzone },
+        "data-state": allowMultiple || !uploads.length ? "idle" : uploads[0]?.status
+      },
+      isIdle && /* @__PURE__ */ React36.createElement(FileTrigger, { allowsMultiple: allowMultiple, onSelect: handleSelect }, /* @__PURE__ */ React36.createElement(Button$1, { className: "prt-file-uploader-trigger" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(HiOutlineDocumentAdd, { className: "state-icon", size: 20 }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-inherit" }, "Click or drag files here to upload")))),
+      isUploading && /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(Loader, { size: "xs" }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-inherit" }, "Name_of_file.ext / Uploading...")),
+      isUploaded && /* @__PURE__ */ React36.createElement("div", { className: "flex w-full items-center justify-between" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(HiOutlineCheckCircle, { size: 16 }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-green-600" }, "File successfully uploaded")), /* @__PURE__ */ React36.createElement(
+        IconButton,
+        {
+          onPress: handleRemoveFile,
+          variant: "outline",
+          color: "green",
+          size: "xs"
+        },
+        /* @__PURE__ */ React36.createElement(HiOutlineTrash, { size: 16 })
+      )),
+      isFailed && /* @__PURE__ */ React36.createElement("div", { className: "flex w-full justify-between" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(HiOutlineExclamationCircle, { className: "state-icon" }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-red-600" }, "Failed to upload file")), /* @__PURE__ */ React36.createElement(
+        IconButton,
+        {
+          onPress: handleRetry,
+          variant: "outline",
+          color: "tomato",
+          size: "xs"
+        },
+        /* @__PURE__ */ React36.createElement(HiOutlineRefresh, { size: 16 })
+      ))
+    ),
+    uploads.length > 1 && !hideFileList && /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        style: { marginTop: 10, ...styles?.list },
+        className: cn("flex flex-col gap-3 upload-list", classNames?.list)
+      },
+      uploads.map((upload) => /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5", key: upload.id }, upload.status === "loading" && /* @__PURE__ */ React36.createElement(Loader, null), upload.status === "success" && /* @__PURE__ */ React36.createElement(HiOutlinePaperClip, null), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-gray-700" }, upload.name)))
+    ),
+    error && /* @__PURE__ */ React36.createElement(InputError, null, error)
+  );
+}
+function Separator({
+  orientation,
+  className,
+  color,
+  opacity,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      "data-opacity": opacity,
+      "data-color": color,
+      "data-orientation": orientation,
+      className: cn(["prt-separator", className]),
+      ref,
+      ...props
+    }
+  );
+}
+function Progress({
+  height = 2,
+  className,
+  style,
+  classNames,
+  styles,
+  color = "gray",
+  label,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(
+    ProgressBar,
+    {
+      ...props,
+      ...typeof label === "string" ? { "aria-label": label } : {},
+      "data-color": color,
+      className: cn("progress-bar", className, classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper }
+    },
+    ({ percentage }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, label && /* @__PURE__ */ React36.createElement(
+      "span",
+      {
+        className: cn("text-sm text-gray-700", classNames?.label),
+        style: { ...styles?.label }
+      },
+      label
+    ), /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        className: cn("progress-wrapper", classNames?.track),
+        style: {
+          height,
+          background: "var(--color-gray-200)",
+          position: "relative",
+          borderRadius: 60,
+          overflow: "hidden",
+          ...styles?.track
+        },
+        ref
+      },
+      /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          className: cn("progress absolute", classNames?.bar),
+          style: {
+            left: 0,
+            top: 0,
+            height: "100%",
+            width: `${percentage ?? 0}%`,
+            background: "var(--c-solid)",
+            transition: "all 0.3s ease",
+            ...styles?.bar
+          }
+        }
+      )
+    ))
+  );
+}
+function Switch({
+  color = "violet",
+  size = "sm",
+  children,
+  className,
+  style,
+  classNames,
+  styles,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(SwitchField, { ...props }, /* @__PURE__ */ React36.createElement(
+    SwitchButton,
+    {
+      className: cn(className, "prt-switch-group", classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper }
+    },
+    /* @__PURE__ */ React36.createElement("span", { "data-color": color, "data-size": size, className: "prt-switch track" }, /* @__PURE__ */ React36.createElement(
+      "span",
+      {
+        className: cn("prt-switch-thumb", classNames?.thumb),
+        style: { ...styles?.thumb }
+      }
+    )),
+    children
+  ));
+}
+function Slider({
+  className,
+  classNames,
+  style,
+  styles,
+  name,
+  size = "sm",
+  color,
+  label,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(
+    Slider$1,
+    {
+      ...props,
+      orientation,
+      "aria-label": typeof label === "string" ? label : props["aria-label"] ?? "slider",
+      "data-color": color,
+      "data-size": size,
+      style: { ...style, ...styles?.wrapper },
+      className: cn("prt-slider", orientation, className, classNames?.wrapper)
+    },
+    label && /* @__PURE__ */ React36.createElement(InputLabel, { style: styles?.label, className: classNames?.label }, label),
+    /* @__PURE__ */ React36.createElement(
+      SliderTrack,
+      {
+        className: cn("prt-slider-track", classNames?.track),
+        style: styles?.track
+      },
+      ({ state }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          style: {
+            ...styles?.fill,
+            width: `${state.getThumbPercent(0) * 100}%`
+          },
+          className: cn("prt-slider-track-fill", classNames?.fill)
+        }
+      ), /* @__PURE__ */ React36.createElement(
+        SliderThumb,
+        {
+          index: 0,
+          name,
+          className: cn("prt-slider-thumb", classNames?.thumb),
+          style: styles?.thumb
+        },
+        /* @__PURE__ */ React36.createElement(
+          "div",
+          {
+            style: styles?.innerThumb,
+            className: cn("prt-slider-thumb-inner", classNames?.innerThumb)
+          }
+        )
+      ))
+    )
+  );
+}
+function Sticker({
+  variant = "outline",
+  color = "violet",
+  padded = true,
+  radius,
+  children,
+  ref,
+  className,
+  style,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ React36__default.createElement(
+    "div",
+    {
+      ref,
+      "data-radius": radius ?? theme?.radius ?? "lg",
+      "data-variant": variant,
+      "data-color": color,
+      style,
+      className: cn("inline-flex items-center gap-3", padded && "p-4", className),
+      ...props
+    },
+    children
+  );
+}
+function Tab(_props) {
+  return null;
+}
+function Tabs({
+  className,
+  style,
+  classNames,
+  styles,
+  children,
+  onSelectionChange,
+  ...props
+}) {
+  const theme = useTheme();
+  const tabListRef = React36.useRef(null);
+  const [indicator, setIndicator] = React36.useState({ width: 0, left: 0 });
+  const tabs = [];
+  React36.Children.forEach(children, (child, index) => {
+    if (React36.isValidElement(child)) {
+      tabs.push({
+        id: child.props.id ?? child.key ?? index,
+        title: child.props.title,
+        children: child.props.children,
+        isDisabled: child.props.isDisabled
+      });
+    }
+  });
+  const [activeKey, setActiveKey] = React36.useState(
+    props.selectedKey ?? props.defaultSelectedKey ?? tabs[0]?.id
+  );
+  React36.useEffect(() => {
+    if (props.selectedKey != null) setActiveKey(props.selectedKey);
+  }, [props.selectedKey]);
+  React36.useEffect(() => {
+    const list = tabListRef.current;
+    const selected = list?.querySelector(
+      ".prt-tab[data-selected]"
+    );
+    if (list && selected) {
+      const lb = list.getBoundingClientRect();
+      const sb = selected.getBoundingClientRect();
+      setIndicator({ width: sb.width, left: sb.left - lb.left });
+    }
+  }, [activeKey, tabs.length]);
+  return /* @__PURE__ */ React36.createElement(
+    Tabs$1,
+    {
+      ...props,
+      onSelectionChange: (key) => {
+        setActiveKey(key);
+        onSelectionChange?.(key);
+      },
+      "data-color": theme?.color ?? "violet",
+      className: cn("prt-tabs", className, classNames?.wrapper),
+      style: { position: "relative", ...style, ...styles?.wrapper }
+    },
+    /* @__PURE__ */ React36.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React36.createElement(
+      TabList,
+      {
+        ref: tabListRef,
+        className: cn("prt-tab-list", classNames?.list),
+        style: { ...styles?.list },
+        items: tabs
+      },
+      (tab) => /* @__PURE__ */ React36.createElement(
+        Tab$1,
+        {
+          id: tab.id,
+          className: cn("prt-tab", classNames?.tab),
+          style: { ...styles?.tab },
+          isDisabled: tab.isDisabled
+        },
+        tab.title
+      )
+    ), /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        className: cn("indicator", classNames?.indicator),
+        style: {
+          position: "absolute",
+          left: indicator.left,
+          bottom: 0,
+          background: "var(--color-10)",
+          height: 2,
+          marginBottom: -1,
+          width: indicator.width,
+          transition: "all 0.2s ease",
+          ...styles?.indicator
+        }
+      }
+    )),
+    tabs.map((tab) => /* @__PURE__ */ React36.createElement(
+      TabPanel,
+      {
+        key: String(tab.id),
+        id: tab.id,
+        className: cn(classNames?.panel),
+        style: { ...styles?.panel }
+      },
+      tab.children
+    ))
+  );
+}
+function defaultRowId(item) {
+  const record = item;
+  return record.id ?? record.key;
+}
+function Table({
+  columns,
+  data,
+  getRowId = defaultRowId,
+  selectionMode = "none",
+  selectedKeys,
+  onSelectionChange,
+  sortDescriptor,
+  onSortChange,
+  renderEmptyState,
+  radius,
+  className,
+  classNames,
+  style,
+  styles,
+  ...props
+}) {
+  const racColumns = React36.useMemo(
+    () => columns.map((column) => ({ ...column, id: column.key })),
+    [columns]
+  );
+  const firstColumnKey = columns[0]?.key;
+  const [internalSort, setInternalSort] = React36.useState();
+  const activeSort = onSortChange ? sortDescriptor : internalSort;
+  const rows = React36.useMemo(() => {
+    if (onSortChange || !activeSort) return data;
+    const column = columns.find((c) => c.key === activeSort.column);
+    if (!column) return data;
+    return [...data].sort((a, b) => {
+      const av = a[column.dataIndex];
+      const bv = b[column.dataIndex];
+      const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+      return activeSort.direction === "descending" ? -cmp : cmp;
+    });
+  }, [data, columns, activeSort, onSortChange]);
+  return /* @__PURE__ */ React36.createElement(
+    Table$1,
+    {
+      ...props,
+      selectionMode,
+      selectedKeys,
+      onSelectionChange,
+      sortDescriptor: activeSort,
+      onSortChange: onSortChange ?? setInternalSort,
+      "data-radius": radius,
+      className: cn("prt-table", className, classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper }
+    },
+    /* @__PURE__ */ React36.createElement(
+      TableHeader,
+      {
+        columns: racColumns,
+        className: cn("prt-table-header", classNames?.header)
+      },
+      (column) => /* @__PURE__ */ React36.createElement(
+        Column,
+        {
+          isRowHeader: column.key === firstColumnKey,
+          allowsSorting: column.allowSorting,
+          className: cn("prt-table-column", classNames?.column),
+          style: styles?.column
+        },
+        ({ allowsSorting, sortDirection }) => /* @__PURE__ */ React36.createElement("div", { className: "prt-table-column-header" }, /* @__PURE__ */ React36.createElement("span", null, column.title), allowsSorting && sortDirection && /* @__PURE__ */ React36.createElement("span", { "aria-hidden": "true", className: "prt-table-sort-indicator" }, sortDirection === "ascending" ? /* @__PURE__ */ React36.createElement(HiChevronUp, { size: 14 }) : /* @__PURE__ */ React36.createElement(HiChevronDown, { size: 14 })))
+      )
+    ),
+    /* @__PURE__ */ React36.createElement(
+      TableBody,
+      {
+        items: rows,
+        dependencies: [columns],
+        renderEmptyState: renderEmptyState ? () => /* @__PURE__ */ React36.createElement(React36.Fragment, null, renderEmptyState()) : void 0
+      },
+      (item) => /* @__PURE__ */ React36.createElement(
+        Row,
+        {
+          id: getRowId(item),
+          columns: racColumns,
+          className: cn("prt-table-row", classNames?.row),
+          style: styles?.row
+        },
+        (column) => /* @__PURE__ */ React36.createElement(
+          Cell,
+          {
+            className: cn("prt-table-cell", classNames?.cell),
+            style: styles?.cell
+          },
+          column.render ? column.render(item[column.dataIndex], item) : item[column.dataIndex]
+        )
+      )
+    )
+  );
+}
+function Timeline({
+  items,
+  render,
+  labelKey,
+  getIndicator,
+  hideLastItemTail = true,
+  classNames,
+  styles,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ React36__default.createElement(
+    "div",
+    {
+      className: cn(classNames?.wrapper, className),
+      style: { ...styles?.wrapper, ...style }
+    },
+    items.map((item, index) => {
+      const indicator = getIndicator?.(item) ?? /* @__PURE__ */ React36__default.createElement("div", { className: "prt-timeline-indicator", "data-variant": "outline" });
+      const content = render?.(item) ?? item[labelKey];
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ React36__default.createElement(
+        "div",
+        {
+          className: cn("flex gap-3 prt-timeline-item", classNames?.item),
+          style: { ...styles?.item },
+          key: index
+        },
+        /* @__PURE__ */ React36__default.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React36__default.createElement("div", { className: "flex gap-3 prt-timeline-indicator-container" }, indicator), isLast && hideLastItemTail ? null : /* @__PURE__ */ React36__default.createElement("div", { className: "prt-timeline-item-tail" })),
+        /* @__PURE__ */ React36__default.createElement(
+          "div",
+          {
+            className: cn(
+              "flex w-full gap-3 prt-timeline-item-content",
+              classNames?.content
+            ),
+            style: { ...styles?.content }
+          },
+          content
+        )
+      );
+    })
+  );
+}
+function Modal({
+  variant = "modal",
+  radius,
+  isDismissable = true,
+  width = 400,
+  title,
+  description,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmButtonProps,
+  cancelButtonProps,
+  showCloseButton = true,
+  hideTitle,
+  onClose,
+  children,
+  className,
+  style,
+  classNames,
+  styles,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ React36.createElement(
+    ModalOverlay,
+    {
+      ...props,
+      isDismissable,
+      style: styles?.underlay,
+      className: cn("prt-modal-underlay", classNames?.underlay)
+    },
+    /* @__PURE__ */ React36.createElement(
+      Modal$1,
+      {
+        "data-variant": variant,
+        style: styles?.wrapper,
+        className: cn("prt-modal-container", classNames?.wrapper)
+      },
+      /* @__PURE__ */ React36.createElement(
+        Dialog,
+        {
+          "aria-label": typeof title === "string" ? title : void 0,
+          "data-radius": radius ?? theme?.radius ?? "md",
+          className: cn("prt-modal-content", className, classNames?.content),
+          style: { width, ...style, ...styles?.content }
+        },
+        ({ close }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, !hideTitle && /* @__PURE__ */ React36.createElement(
+          "header",
+          {
+            style: styles?.header,
+            className: cn(
+              "prt-modal-head flex items-center justify-between gap-8",
+              classNames?.header
+            )
+          },
+          /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-1" }, title && /* @__PURE__ */ React36.createElement(
+            "div",
+            {
+              style: styles?.title,
+              className: cn(
+                "prt-modal-title font-medium text-base text-black",
+                classNames?.title
+              )
+            },
+            title
+          ), description && /* @__PURE__ */ React36.createElement("div", { className: "text-xs leading-normal text-gray-500" }, description)),
+          showCloseButton && /* @__PURE__ */ React36.createElement(
+            IconButton,
+            {
+              variant: "ghost",
+              color: "gray",
+              size: "sm",
+              onPress: () => {
+                onClose?.();
+                close();
+              }
+            },
+            /* @__PURE__ */ React36.createElement(HiX, { size: 18 })
+          )
+        ), /* @__PURE__ */ React36.createElement(
+          "div",
+          {
+            className: cn(
+              "prt-modal-body flex flex-col gap-3",
+              classNames?.body
+            ),
+            style: styles?.body
+          },
+          children
+        ), (onConfirm || onCancel) && /* @__PURE__ */ React36.createElement(
+          "footer",
+          {
+            style: styles?.footer,
+            className: cn(
+              "prt-modal-footer flex w-full justify-end gap-2.5",
+              classNames?.footer
+            )
+          },
+          onCancel && /* @__PURE__ */ React36.createElement(
+            Button,
+            {
+              onPress: () => {
+                onCancel();
+                close();
+              },
+              variant: "outline",
+              color: "gray",
+              ...cancelButtonProps
+            },
+            cancelLabel
+          ),
+          onConfirm && /* @__PURE__ */ React36.createElement(Button, { onPress: onConfirm, ...confirmButtonProps }, confirmLabel)
+        ))
+      )
+    )
+  );
+}
+function useModal(props = {}) {
+  return useOverlayTriggerState(props);
+}
+
+// src/utils/regex.ts
+var EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+function useControlledState(value, defaultValue, onChange) {
+  const [state, setState] = React36.useState(value || defaultValue);
+  const isControlled = !isUndefinedOrNull(value);
+  const controlledValue = isControlled ? value : state;
+  const setValue = React36.useCallback(
+    (value2) => {
+      if (!isControlled) {
+        setState(value2);
+      }
+      if (!Object.is(controlledValue, value2)) {
+        onChange?.(value2);
+      }
+    },
+    [isControlled, controlledValue]
+  );
+  return [controlledValue, setValue];
+}
+
+// src/components/tag-input/tag-input.tsx
+function isValidUrl(value) {
+  const candidate = /^https?:\/\//.test(value) ? value : `https://${value}`;
+  try {
+    new URL(candidate);
+    return /\./.test(value);
+  } catch {
+    return false;
+  }
+}
+var FORMAT_VALIDATORS = {
+  text: (value) => value.trim().length > 0,
+  email: (value) => EMAIL_REGEX.test(value),
+  url: isValidUrl,
+  number: (value) => value.trim() !== "" && !Number.isNaN(Number(value))
+};
+var SHAPE_RADIUS = {
+  pill: "full",
+  rounded: "md",
+  sharp: "none"
+};
+function dedupe(values) {
+  if (!values) return void 0;
+  return Array.from(new Set(values));
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function TagInput({
+  appearance = "outline",
+  size = "md",
+  label,
+  error,
+  description,
+  placeholder,
+  tags,
+  defaultTags,
+  format = "text",
+  validate,
+  delimiters = [","],
+  isRequired,
+  tagColor = "gray",
+  tagVariant = "light",
+  tagShape = "rounded",
+  tagSize = "md",
+  color = "gray",
+  radius,
+  validationStatus,
+  className,
+  classNames,
+  style,
+  styles,
+  onChange,
+  onInputValueChange,
+  renderTag,
+  ref
+}) {
+  const [inputValue, setInputValue] = React36.useState("");
+  const [values, setValues] = useControlledState(
+    dedupe(tags),
+    dedupe(defaultTags) ?? [],
+    onChange
+  );
+  const inputRef = React36.useRef(null);
+  const isValid = validate ?? FORMAT_VALIDATORS[format];
+  const splitPattern = React36.useMemo(
+    () => new RegExp(`[${delimiters.map(escapeRegExp).join("")}\\n]`),
+    [delimiters]
+  );
+  function commit(raw) {
+    const candidates = raw.split(splitPattern).map((v) => v.trim()).filter(Boolean).filter(isValid);
+    if (!candidates.length) return;
+    setValues(Array.from(/* @__PURE__ */ new Set([...values, ...candidates])));
+    setInputValue("");
+  }
+  function removeValue(value) {
+    setValues(values.filter((v) => v !== value));
+  }
+  function handleInputChange(value) {
+    if (delimiters.some((d) => value.includes(d))) {
+      const parts = value.split(splitPattern);
+      const trailing = parts.pop() ?? "";
+      commit(parts.join(","));
+      setInputValue(trailing);
+      onInputValueChange?.(trailing);
+      return;
+    }
+    setInputValue(value);
+    onInputValueChange?.(value);
+  }
+  function onKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit(inputValue);
+      return;
+    }
+    if (e.key === "Backspace" && !inputValue && values.length) {
+      removeValue(values[values.length - 1]);
+    }
+  }
+  function captureFocus() {
+    inputRef.current?.focus();
+  }
+  const groupLabel = typeof label === "string" ? label : "tags";
+  return /* @__PURE__ */ React36.createElement(
+    TextField,
+    {
+      value: inputValue,
+      onChange: handleInputChange,
+      isRequired,
+      isInvalid: !!error
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        replaceDefaultControlWrapper: true,
+        label,
+        error,
+        description,
+        color,
+        size,
+        radius,
+        appearance,
+        validationStatus,
+        className,
+        classNames,
+        style,
+        styles
+      },
+      /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          ref,
+          className: cn("prt-input-control", "prt-tag-field"),
+          "data-appearance": appearance,
+          onClick: captureFocus
+        },
+        /* @__PURE__ */ React36.createElement(
+          TagGroup$1,
+          {
+            "aria-label": groupLabel,
+            className: "prt-tag-field-group",
+            onRemove: (keys) => setValues(values.filter((v) => !keys.has(v)))
+          },
+          /* @__PURE__ */ React36.createElement(TagList, { className: "prt-tag-field-list" }, values.map((value) => /* @__PURE__ */ React36.createElement(
+            Tag$1,
+            {
+              key: value,
+              id: value,
+              textValue: value,
+              className: "prt-tag-field-tag"
+            },
+            renderTag ? renderTag(value, removeValue) : /* @__PURE__ */ React36.createElement(
+              Tag,
+              {
+                variant: tagVariant,
+                color: tagColor,
+                radius: tagShape ? SHAPE_RADIUS[tagShape] : "full",
+                size: tagSize,
+                append: /* @__PURE__ */ React36.createElement(
+                  Button$1,
+                  {
+                    slot: "remove",
+                    className: "prt-tag-field-remove",
+                    "aria-label": `Remove ${value}`
+                  },
+                  /* @__PURE__ */ React36.createElement(HiX, { size: 14 })
+                )
+              },
+              value
+            )
+          )))
+        ),
+        /* @__PURE__ */ React36.createElement(
+          Input$1,
+          {
+            ref: inputRef,
+            placeholder,
+            onKeyDown,
+            className: "prt-tag-field-input"
+          }
+        )
+      )
+    )
+  );
+}
+var PopoverContext = React36.createContext(null);
+function usePopoverContext(component) {
+  const ctx = React36.useContext(PopoverContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within a Popover`);
+  }
+  return ctx;
+}
+function Popover({ children, ...props }) {
+  const triggerRef = React36.useRef(null);
+  const state = useOverlayTriggerState(props);
+  return /* @__PURE__ */ React36.createElement(PopoverContext.Provider, { value: { triggerRef, state } }, children);
+}
+function PopoverTrigger({ children }) {
+  const ctx = usePopoverContext("PopoverTrigger");
+  return React36.cloneElement(children, {
+    ref: ctx.triggerRef,
+    onPress: () => ctx.state.toggle()
+  });
+}
+function PopoverContent({
+  children,
+  offset = 12,
+  placement,
+  style,
+  className,
+  classNames,
+  styles,
+  width,
+  ...props
+}) {
+  const ctx = usePopoverContext("PopoverContent");
+  const theme = useTheme();
+  return /* @__PURE__ */ React36.createElement(
+    Popover$1,
+    {
+      ...props,
+      triggerRef: ctx.triggerRef,
+      isOpen: ctx.state.isOpen,
+      onOpenChange: ctx.state.setOpen,
+      offset,
+      placement,
+      "data-color": theme?.color,
+      "data-radius": theme?.radius,
+      className: cn("prt-popover", classNames?.popover),
+      style: { ...width != null ? { width } : null, ...styles?.popover }
+    },
+    /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        "data-radius": "md",
+        className: cn("prt-popover-content", className, classNames?.content),
+        style: { ...style, ...styles?.content }
+      },
+      children
+    )
+  );
+}
+var TagGroupVariantContext = React36.createContext({});
+function TagGroup({
+  label,
+  description,
+  errorMessage,
+  items,
+  children,
+  renderEmptyState,
+  activeColor,
+  activeVariant,
+  idleColor,
+  idleVariant,
+  autoColor,
+  classNames,
+  styles,
+  className,
+  style,
+  ...props
+}) {
+  const variants = React36.useMemo(
+    () => ({ activeColor, activeVariant, idleColor, idleVariant, autoColor }),
+    [activeColor, activeVariant, idleColor, idleVariant, autoColor]
+  );
+  return /* @__PURE__ */ React36.createElement(
+    TagGroup$1,
+    {
+      ...props,
+      "aria-label": typeof label === "string" ? label : void 0
+    },
+    /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        className: cn("flex flex-col gap-3 tag-group", classNames?.wrapper, className),
+        style: { ...styles?.wrapper, ...style }
+      },
+      label && /* @__PURE__ */ React36.createElement(InputLabel, null, label),
+      /* @__PURE__ */ React36.createElement(TagGroupVariantContext.Provider, { value: variants }, /* @__PURE__ */ React36.createElement(
+        TagList,
+        {
+          items,
+          renderEmptyState,
+          className: cn("prt-tag-list", classNames?.list),
+          style: { display: "flex", flexWrap: "wrap", gap: 6, ...styles?.list }
+        },
+        children
+      )),
+      errorMessage && /* @__PURE__ */ React36.createElement(InputError, null, errorMessage),
+      description && /* @__PURE__ */ React36.createElement("div", { className: "text-sm text-gray-700" }, description)
+    )
+  );
+}
+function TagGroupItem({
+  children,
+  textValue,
+  ...props
+}) {
+  const theme = useTheme();
+  const {
+    activeColor,
+    activeVariant = "solid",
+    idleColor = "gray",
+    idleVariant = "outline",
+    autoColor
+  } = React36.useContext(TagGroupVariantContext);
+  const resolvedActive = activeColor ?? theme?.color ?? "gray";
+  const tv = textValue ?? (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */ React36.createElement(
+    Tag$1,
+    {
+      ...props,
+      textValue: tv,
+      render: (domProps, { isSelected }) => {
+        const color = autoColor ? getRandomColor(String(tv ?? "")) : isSelected ? resolvedActive : idleColor;
+        const variant = isSelected ? activeVariant : idleVariant;
+        return /* @__PURE__ */ React36.createElement(
+          "div",
+          {
+            ...domProps,
+            "data-is-toggle": "true",
+            "data-radius": "full",
+            "data-size": "sm",
+            "data-color": color,
+            "data-variant": variant,
+            className: "prt-button prt-size"
+          },
+          children
+        );
+      }
+    }
+  );
+}
+function ColorPicker({
+  onChange,
+  color: colorProp,
+  styles,
+  classNames,
+  className,
+  style
+}) {
+  const [colorSpace, setColorSpace] = React36.useState("hex");
+  const [color, setColor] = useControlledState(
+    colorProp,
+    parseColor("#BB66CC").toFormat("hsla"),
+    onChange
+  );
+  function handleChange(color2) {
+    setColor(color2);
+    onChange?.(color2);
+  }
+  function setAlpha(alpha) {
+    if (isNaN(alpha)) {
+      return;
+    }
+    const newColor = color.withChannelValue("alpha", alpha);
+    setColor(newColor);
+  }
+  const [h, s, l] = color.getColorChannels();
+  const rgbaColor = color.toFormat("rgba");
+  const [r, g, b] = rgbaColor.getColorChannels();
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      className: cn("flex flex-col gap-3", className, classNames?.wrapper),
+      style: { width: 240, ...style, ...styles?.wrapper }
+    },
+    /* @__PURE__ */ React36.createElement(
+      ColorArea,
+      {
+        onChange: handleChange,
+        onChangeEnd: handleChange,
+        xChannel: s,
+        yChannel: l,
+        value: color ?? parseColor("hsl(219, 79%, 66%)"),
+        style: { width: "100%", height: 140 }
+      }
+    ),
+    /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-3", style: { padding: 8 } }, /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React36.createElement(
+      ColorSlider,
+      {
+        value: color,
+        onChange: handleChange,
+        onChangeEnd: handleChange,
+        channel: h
+      }
+    ), /* @__PURE__ */ React36.createElement(
+      ColorSlider,
+      {
+        value: color,
+        onChange: handleChange,
+        onChangeEnd: handleChange,
+        channel: "alpha"
+      }
+    )), /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React36.createElement("div", { className: "flex gap-1", style: { width: "100%" } }, colorSpace === "hex" && /* @__PURE__ */ React36.createElement(Space, { style: { gap: 3 }, compact: true }, /* @__PURE__ */ React36.createElement(
+      ColorField,
+      {
+        value: color,
+        onChange: (c) => c && handleChange(c),
+        size: "sm",
+        style: { width: "60%" },
+        appearance: "filled",
+        placeholder: "Add a color"
+      }
+    ), /* @__PURE__ */ React36.createElement(
+      NumberInput,
+      {
+        onChange: (n) => setAlpha(n),
+        maxValue: 1,
+        formatOptions: {
+          style: "percent",
+          maximumFractionDigits: 0
+        },
+        size: "sm",
+        value: color.getChannelValue("alpha"),
+        style: { width: "40%" },
+        appearance: "filled"
+      }
+    )), ["rgb", "hsl"].includes(colorSpace) && /* @__PURE__ */ React36.createElement(Space, { style: { gap: 3 }, compact: true }, /* @__PURE__ */ React36.createElement(
+      NumberInput,
+      {
+        value: colorSpace === "rgb" ? rgbaColor.getChannelValue(r) : color.getChannelValue(h),
+        appearance: "filled",
+        size: "sm"
+      }
+    ), /* @__PURE__ */ React36.createElement(
+      NumberInput,
+      {
+        value: colorSpace === "rgb" ? rgbaColor.getChannelValue(g) : color.getChannelValue(s),
+        appearance: "filled",
+        size: "sm"
+      }
+    ), /* @__PURE__ */ React36.createElement(
+      NumberInput,
+      {
+        value: colorSpace === "rgb" ? rgbaColor.getChannelValue(b) : color.getChannelValue(l),
+        appearance: "filled",
+        size: "sm"
+      }
+    ), /* @__PURE__ */ React36.createElement(
+      NumberInput,
+      {
+        formatOptions: {
+          style: "percent",
+          maximumFractionDigits: 0
+        },
+        value: colorSpace === "rgb" ? rgbaColor.getChannelValue("alpha") : color.getChannelValue("alpha"),
+        appearance: "filled",
+        size: "sm"
+      }
+    )), /* @__PURE__ */ React36.createElement(
+      Select,
+      {
+        style: { width: "60%" },
+        valueKey: "id",
+        onChange: (v) => setColorSpace(v.target.value ?? colorSpace),
+        showSelectionIndicator: false,
+        value: colorSpace,
+        size: "sm",
+        appearance: "filled",
+        items: ["hex", "rgb", "hsl"].map((o) => ({
+          label: o.toUpperCase(),
+          id: o
+        }))
+      }
+    )), /* @__PURE__ */ React36.createElement(Separator, { color: "gray" }), /* @__PURE__ */ React36.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React36.createElement(
+      ColorSwatchPicker,
+      {
+        styles: {
+          wrapper: { gap: 6 },
+          swatch: {
+            borderRadius: 5
+          }
+        },
+        onChange: handleChange,
+        colors: [
+          "#000000",
+          "#333333",
+          "#555555",
+          "#777777",
+          "#999999",
+          "#bbbbbb",
+          "#dddddd",
+          "#ffffff",
+          "#4455BB",
+          "#1199EE",
+          "#55CCFF",
+          "#22CCDD",
+          "#22AA99",
+          "#66BB66",
+          "#99CC66",
+          "#CCDD33",
+          "#7755CC",
+          "#BB66CC",
+          "#FF88AA",
+          "#EE4444",
+          "#FF7744",
+          "#FFAA22",
+          "#FFCC66",
+          "#FFEE66"
+        ].map((color2) => ({
+          label: color2,
+          color: parseColor(color2).toString("hsl"),
+          key: color2
+        }))
+      }
+    ))))
+  );
+}
+function ColorArea({
+  className,
+  classNames,
+  style,
+  styles,
+  radius,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ React36.createElement(
+    ColorArea$1,
+    {
+      ...props,
+      className: cn("prt-color-area", className, classNames?.wrapper),
+      "data-radius": radius ?? theme?.radius ?? "lg",
+      style: ({ defaultStyle }) => ({
+        ...defaultStyle,
+        ...styles?.wrapper,
+        ...style
+      })
+    },
+    /* @__PURE__ */ React36.createElement(
+      ColorThumb,
+      {
+        className: cn("prt-color-area-thumb", classNames?.thumb),
+        style: ({ defaultStyle }) => ({ ...defaultStyle, ...styles?.thumb })
+      }
+    )
+  );
+}
+function ColorField({
+  className,
+  classNames,
+  style,
+  styles,
+  inputRef,
+  wrapperRef,
+  prepend,
+  append,
+  label,
+  description,
+  error,
+  color,
+  size,
+  radius,
+  appearance,
+  validationStatus,
+  shape,
+  placeholder,
+  ...colorFieldProps
+}) {
+  return /* @__PURE__ */ React36.createElement(
+    ColorField$1,
+    {
+      ...colorFieldProps,
+      isInvalid: !!error,
+      "aria-label": colorFieldProps["aria-label"] ?? "color-field"
+    },
+    /* @__PURE__ */ React36.createElement(
+      Field,
+      {
+        className,
+        classNames,
+        styles,
+        style,
+        wrapperRef,
+        prepend,
+        append,
+        label,
+        description,
+        error,
+        color,
+        size,
+        radius,
+        appearance,
+        validationStatus
+      },
+      /* @__PURE__ */ React36.createElement(
+        Input$1,
+        {
+          ref: inputRef,
+          placeholder,
+          "data-has-left-addon": !!prepend,
+          "data-has-right-addon": !!append,
+          style: styles?.input,
+          className: cn("prt-text-input-el", classNames?.input)
+        }
+      )
+    )
+  );
+}
+function ColorSwatchPicker({
+  colors,
+  size,
+  radius,
+  onChange,
+  className,
+  classNames,
+  style,
+  styles,
+  ...props
+}) {
+  return /* @__PURE__ */ React36.createElement(
+    ColorSwatchPicker$1,
+    {
+      ...props,
+      onChange,
+      "aria-label": props["aria-label"] ?? "color swatch picker",
+      className: cn("prt-color-swatch-picker", className, classNames?.wrapper),
+      style: { ...style, ...styles?.wrapper }
+    },
+    colors.map((option) => /* @__PURE__ */ React36.createElement(
+      ColorSwatchPickerItem,
+      {
+        key: option.key ?? option.color,
+        color: option.color,
+        className: cn("prt-color-swatch-item", classNames?.swatch),
+        style: styles?.swatch
+      },
+      /* @__PURE__ */ React36.createElement(ColorSwatch, { className: "prt-color-swatch" })
+    ))
+  );
+}
+function ColorSlider({ label, ...props }) {
+  return /* @__PURE__ */ React36.createElement(
+    ColorSlider$1,
+    {
+      ...props,
+      "aria-label": props["aria-label"] ?? "color-slider"
+    },
+    /* @__PURE__ */ React36.createElement(Field, { label, className: "prt-color-slider", replaceDefaultControlWrapper: true }, /* @__PURE__ */ React36.createElement(SliderTrack, { className: "prt-color-slider-track" }, /* @__PURE__ */ React36.createElement("div", { className: "prt-color-slider-checkers" }), /* @__PURE__ */ React36.createElement(
+      ColorThumb,
+      {
+        className: "prt-color-slider-thumb",
+        style: ({ defaultStyle }) => ({ ...defaultStyle })
+      }
+    )))
+  );
+}
+function parseColor2(color) {
+  return parseColor(color);
+}
+function toKeys(value) {
+  if (value == null) return void 0;
+  return new Set(Array.isArray(value) ? value : [value]);
+}
+function ToggleGroup({
+  selectionMode = "single",
+  value,
+  defaultValue,
+  onChange,
+  label,
+  size,
+  radius,
+  idleColor,
+  idleVariant,
+  activeColor,
+  activeVariant,
+  disallowEmptySelection,
+  orientation,
+  compact,
+  gap,
+  className,
+  classNames,
+  style,
+  styles,
+  children
+}) {
+  const groupDefaults = React36.useMemo(
+    () => ({ idleColor, idleVariant, activeColor, activeVariant, size, radius }),
+    [idleColor, idleVariant, activeColor, activeVariant, size, radius]
+  );
+  function handleSelectionChange(keys) {
+    const arr = [...keys].map(String);
+    onChange?.(
+      selectionMode === "multiple" ? arr : arr[0] ?? ""
+    );
+  }
+  return /* @__PURE__ */ React36.createElement(
+    ToggleButtonGroup,
+    {
+      "aria-label": label,
+      selectionMode,
+      selectedKeys: toKeys(value),
+      defaultSelectedKeys: toKeys(defaultValue),
+      onSelectionChange: handleSelectionChange,
+      disallowEmptySelection: disallowEmptySelection ?? selectionMode === "single",
+      orientation
+    },
+    /* @__PURE__ */ React36.createElement(ToggleButtonGroupContext.Provider, { value: groupDefaults }, /* @__PURE__ */ React36.createElement(
+      Space,
+      {
+        compact,
+        gap,
+        className,
+        classNames,
+        style,
+        styles
+      },
+      children
+    ))
+  );
+}
+function Toggle({ value, ...props }) {
+  return /* @__PURE__ */ React36.createElement(ToggleButton, { id: value, ...props });
+}
+
+export { Avatar, AvatarGroup, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, DateField, DatePicker, DateRangePicker, FileUploader, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, NumberInput, ListBoxItem as Option, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, Toggle, ToggleButton, ToggleGroup, parseColor2 as parseColor, useModal, useTheme };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map