@kavagy/react 0.1.1

package/dist/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["AriaLabel","AriaText","AriaGroup","AriaInput","AriaButton","AriaTextField","Tooltip","TooltipTrigger"],"sources":["../../src/input/input.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/input/input.tsx, base/input/label.tsx, base/input/hint-text.tsx */\n\nimport { Eye, EyeOff, HelpCircle, InfoCircle } from '@kavagy/icons';\nimport type { ComponentType, HTMLAttributes, ReactNode, Ref } from 'react';\nimport { createContext, forwardRef, useContext, useState } from 'react';\nimport type {\n  InputProps as AriaInputProps,\n  LabelProps as AriaLabelProps,\n  TextFieldProps as AriaTextFieldProps,\n  TextProps as AriaTextProps,\n} from 'react-aria-components';\nimport {\n  Button as AriaButton,\n  Group as AriaGroup,\n  Input as AriaInput,\n  Label as AriaLabel,\n  Text as AriaText,\n  TextField as AriaTextField,\n} from 'react-aria-components';\nimport type { TooltipProps } from '../tooltip';\nimport { Tooltip, TooltipTrigger } from '../tooltip';\nimport { cx } from '../utils/cx';\n\nexport interface LabelProps extends AriaLabelProps {\n  children: ReactNode;\n  isInvalid?: boolean;\n  isRequired?: boolean;\n}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(\n  { isInvalid, isRequired, className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaLabel\n      data-label=\"true\"\n      ref={ref}\n      {...props}\n      className={cx(\n        'flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary',\n        className,\n      )}\n    >\n      {children}\n      <span\n        className={cx(\n          'hidden text-brand-tertiary',\n          isRequired && 'block',\n          typeof isRequired === 'undefined' && 'group-required:block',\n          isInvalid && 'text-error-primary',\n          typeof isInvalid === 'undefined' && 'group-invalid:text-error-primary',\n        )}\n      >\n        *\n      </span>\n    </AriaLabel>\n  );\n});\n\nLabel.displayName = 'Label';\n\nexport interface HintTextProps extends AriaTextProps {\n  isInvalid?: boolean;\n  size?: 'sm' | 'md';\n  children: ReactNode;\n}\n\nexport const HintText = forwardRef<HTMLElement, HintTextProps>(function HintText(\n  { isInvalid, className, size = 'md', ...props },\n  ref,\n) {\n  return (\n    <AriaText\n      ref={ref}\n      {...props}\n      slot={isInvalid ? 'errorMessage' : 'description'}\n      className={cx(\n        'text-sm text-tertiary',\n        size === 'sm' && 'text-xs',\n        'in-data-[input-size=sm]:text-xs',\n        isInvalid && 'text-error-primary',\n        'group-invalid:text-error-primary',\n        className,\n      )}\n    />\n  );\n});\n\nHintText.displayName = 'HintText';\n\nexport interface InputBaseProps extends Omit<AriaInputProps, 'size'> {\n  isInvalid?: boolean;\n  isDisabled?: boolean;\n  isRequired?: boolean;\n  size?: 'sm' | 'md' | 'lg';\n  placeholder?: string;\n  iconClassName?: string;\n  inputClassName?: string;\n  wrapperClassName?: string;\n  groupRef?: Ref<HTMLDivElement>;\n  icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;\n}\n\ninterface TextFieldContextProps\n  extends Partial<\n    Pick<InputBaseProps, 'size' | 'wrapperClassName' | 'inputClassName' | 'iconClassName'>\n  > {}\n\nconst TextFieldContext = createContext<TextFieldContextProps>({});\n\nconst inputSizes = {\n  sm: {\n    root: (hasLeading: boolean, hasTrailing: boolean) =>\n      cx('px-3 py-2 text-sm', hasLeading && 'pl-9', hasTrailing && 'pr-9'),\n    iconLeading: 'left-3 size-4 stroke-[2.25px]',\n    iconTrailing: 'right-3',\n  },\n  md: {\n    root: (hasLeading: boolean, hasTrailing: boolean) =>\n      cx('px-3 py-2 text-md', hasLeading && 'pl-10', hasTrailing && 'pr-9'),\n    iconLeading: 'left-3 size-5',\n    iconTrailing: 'right-3',\n  },\n  lg: {\n    root: (hasLeading: boolean, hasTrailing: boolean) =>\n      cx('px-3.5 py-2.5 text-md', hasLeading && 'pl-10.5', hasTrailing && 'pr-9.5'),\n    iconLeading: 'left-3.5 size-5',\n    iconTrailing: 'right-3.5',\n  },\n};\n\nexport const InputBase = forwardRef<HTMLInputElement, InputBaseProps>(function InputBase(\n  {\n    groupRef,\n    size = 'md',\n    isInvalid,\n    isDisabled,\n    isRequired,\n    icon: Icon,\n    placeholder,\n    wrapperClassName,\n    inputClassName,\n    iconClassName,\n    type = 'text',\n    ...inputProps\n  },\n  ref,\n) {\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n  const hasTrailingIcon = Boolean(isInvalid) || type === 'password';\n  const hasLeadingIcon = Boolean(Icon);\n\n  const context = useContext(TextFieldContext);\n  const inputSize = context.size ?? size;\n  const sizeConfig = inputSizes[inputSize];\n\n  return (\n    <AriaGroup\n      {...{ isDisabled, isInvalid }}\n      ref={groupRef}\n      className={({ isFocusWithin, isDisabled: disabled, isInvalid: invalid }) =>\n        cx(\n          'group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset',\n          isFocusWithin && !disabled && 'ring-2 ring-focus-ring',\n          disabled && 'cursor-not-allowed opacity-50',\n          'group-disabled:cursor-not-allowed group-disabled:opacity-50',\n          invalid && 'ring-error_subtle',\n          'group-invalid:ring-error_subtle',\n          invalid && isFocusWithin && 'ring-2 ring-error',\n          isFocusWithin && 'group-invalid:ring-2 group-invalid:ring-error',\n          context.wrapperClassName,\n          wrapperClassName,\n        )\n      }\n    >\n      {Icon && (\n        <Icon\n          className={cx(\n            'pointer-events-none absolute text-fg-quaternary',\n            sizeConfig.iconLeading,\n            context.iconClassName,\n            iconClassName,\n          )}\n        />\n      )}\n\n      <AriaInput\n        {...inputProps}\n        ref={ref}\n        required={isRequired}\n        type={type === 'password' && isPasswordVisible ? 'text' : type}\n        placeholder={placeholder}\n        className={cx(\n          'm-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed',\n          sizeConfig.root(hasLeadingIcon, hasTrailingIcon),\n          context.inputClassName,\n          inputClassName,\n        )}\n      />\n\n      {type !== 'password' && (\n        <InfoCircle\n          className={cx(\n            'pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block',\n            sizeConfig.iconTrailing,\n          )}\n        />\n      )}\n\n      {type === 'password' && (\n        <AriaButton\n          aria-label=\"Toggle password visibility\"\n          onPress={() => setIsPasswordVisible((visible) => !visible)}\n          className={cx(\n            'absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden',\n            sizeConfig.iconTrailing,\n          )}\n        >\n          {isPasswordVisible ? (\n            <EyeOff className=\"size-4 stroke-[2.25px]\" />\n          ) : (\n            <Eye className=\"size-4 stroke-[2.25px]\" />\n          )}\n        </AriaButton>\n      )}\n    </AriaGroup>\n  );\n});\n\nInputBase.displayName = 'InputBase';\n\nexport interface InputProps\n  extends AriaTextFieldProps,\n    Pick<\n      InputBaseProps,\n      | 'placeholder'\n      | 'icon'\n      | 'groupRef'\n      | 'size'\n      | 'wrapperClassName'\n      | 'inputClassName'\n      | 'iconClassName'\n    > {\n  label?: string;\n  hint?: ReactNode;\n  hideRequiredIndicator?: boolean;\n  /** Tooltip content displayed next to the label. */\n  tooltip?: ReactNode;\n  /** Placement of the tooltip. @default 'top' */\n  tooltipPlacement?: TooltipProps['placement'];\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    size = 'md',\n    placeholder,\n    icon: Icon,\n    label,\n    hint,\n    hideRequiredIndicator,\n    tooltip,\n    tooltipPlacement,\n    className,\n    groupRef,\n    iconClassName,\n    inputClassName,\n    wrapperClassName,\n    type = 'text',\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaTextField\n      aria-label={!label ? placeholder : undefined}\n      {...props}\n      data-input-wrapper\n      data-input-size={size}\n      className={(state) =>\n        cx(\n          'group flex h-max w-full flex-col items-start justify-start gap-1.5',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {({ isRequired, isInvalid }) => (\n        <>\n          {(label || tooltip) && (\n            <div className=\"flex w-full items-center justify-between gap-1\">\n              {label && (\n                <Label\n                  isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired}\n                  isInvalid={isInvalid}\n                >\n                  {label}\n                </Label>\n              )}\n\n              {tooltip && (\n                <Tooltip title={tooltip} placement={tooltipPlacement ?? 'top'}>\n                  <TooltipTrigger className=\"text-fg-quaternary hover:text-fg-quaternary_hover\">\n                    <HelpCircle aria-hidden=\"true\" className=\"size-4\" />\n                    <span className=\"sr-only\">More information</span>\n                  </TooltipTrigger>\n                </Tooltip>\n              )}\n            </div>\n          )}\n\n          <InputBase\n            ref={ref}\n            groupRef={groupRef}\n            size={size}\n            placeholder={placeholder}\n            icon={Icon}\n            iconClassName={iconClassName}\n            inputClassName={inputClassName}\n            wrapperClassName={wrapperClassName}\n            isInvalid={isInvalid}\n            isRequired={isRequired}\n            type={type}\n          />\n\n          {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}\n        </>\n      )}\n    </AriaTextField>\n  );\n});\n\nInput.displayName = 'Input';\n"],"mappings":"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"}

package/dist/modal/index.d.ts

@@ -0,0 +1,2 @@
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "./modal.js";
+export { Dialog, DialogTrigger, Modal, ModalOverlay };

package/dist/modal/index.js

@@ -0,0 +1,2 @@
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "./modal.js";
+export { Dialog, DialogTrigger, Modal, ModalOverlay };

package/dist/modal/modal.d.ts

@@ -0,0 +1,8 @@
+import { DialogProps, DialogTrigger as DialogTrigger$1, ModalOverlayProps } from "react-aria-components";
+//#region src/modal/modal.d.ts
+export declare const DialogTrigger: typeof DialogTrigger$1;
+export declare const ModalOverlay: import("react").ForwardRefExoticComponent<ModalOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Modal: import("react").ForwardRefExoticComponent<ModalOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=modal.d.ts.map

package/dist/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","names":[],"sources":["../../src/modal/modal.tsx"],"mappings":";;qBAgBa,sBAAa;qBAEb,8BAAY,0BAAA,oCAAA,cAAA;qBAqBZ,uBAAK,0BAAA,oCAAA,cAAA;qBAmBL,wBAAM,0BAAA,8BAAA,cAAA"}

package/dist/modal/modal.js

@@ -0,0 +1,35 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1 } from "react-aria-components";
+//#region src/modal/modal.tsx
+const DialogTrigger = DialogTrigger$1;
+const ModalOverlay = forwardRef(function ModalOverlay(props, ref) {
+	return /* @__PURE__ */ jsx(ModalOverlay$1, {
+		...props,
+		ref,
+		className: (state) => cx("fixed inset-0 z-50 flex min-h-dvh w-full items-end justify-center bg-overlay/70 px-4 outline-hidden backdrop-blur-[6px] sm:items-center sm:justify-center sm:px-8", "pt-(--modal-pt) pb-(--modal-pb) [--modal-pb:clamp(16px,8vh,64px)] [--modal-pt:16px] sm:[--modal-pb:32px] sm:[--modal-pt:32px]", state.isEntering && "duration-300 ease-out animate-in fade-in", state.isExiting && "duration-200 ease-in animate-out fade-out", typeof props.className === "function" ? props.className(state) : props.className)
+	});
+});
+ModalOverlay.displayName = "ModalOverlay";
+const Modal = forwardRef(function Modal(props, ref) {
+	return /* @__PURE__ */ jsx(Modal$1, {
+		...props,
+		ref,
+		className: (state) => cx("rounded-xl bg-primary align-middle shadow-xl outline-hidden max-sm:overflow-y-auto sm:rounded-2xl", "max-h-[calc(var(--visual-viewport-height)-var(--modal-pt)-var(--modal-pb))]", state.isEntering && "duration-300 ease-out animate-in zoom-in-95", state.isExiting && "duration-200 ease-in animate-out zoom-out-95", typeof props.className === "function" ? props.className(state) : props.className)
+	});
+});
+Modal.displayName = "Modal";
+const Dialog = forwardRef(function Dialog(props, ref) {
+	return /* @__PURE__ */ jsx(Dialog$1, {
+		...props,
+		ref,
+		className: cx("relative max-h-[inherit] w-full overflow-y-auto outline-hidden", props.className)
+	});
+});
+Dialog.displayName = "Dialog";
+//#endregion
+export { Dialog, DialogTrigger, Modal, ModalOverlay };
+
+//# sourceMappingURL=modal.js.map

package/dist/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","names":["AriaDialogTrigger","AriaModalOverlay","AriaModal","AriaDialog"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["'use client';\n/* @kavagy-source: untitledui/application/modals/modal.tsx */\n\nimport { forwardRef } from 'react';\nimport type {\n  DialogProps as AriaDialogProps,\n  ModalOverlayProps as AriaModalOverlayProps,\n} from 'react-aria-components';\nimport {\n  Dialog as AriaDialog,\n  DialogTrigger as AriaDialogTrigger,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n} from 'react-aria-components';\nimport { cx } from '../utils/cx';\n\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const ModalOverlay = forwardRef<HTMLDivElement, AriaModalOverlayProps>(\n  function ModalOverlay(props, ref) {\n    return (\n      <AriaModalOverlay\n        {...props}\n        ref={ref}\n        className={(state) =>\n          cx(\n            'fixed inset-0 z-50 flex min-h-dvh w-full items-end justify-center bg-overlay/70 px-4 outline-hidden backdrop-blur-[6px] sm:items-center sm:justify-center sm:px-8',\n            'pt-(--modal-pt) pb-(--modal-pb) [--modal-pb:clamp(16px,8vh,64px)] [--modal-pt:16px] sm:[--modal-pb:32px] sm:[--modal-pt:32px]',\n            state.isEntering && 'duration-300 ease-out animate-in fade-in',\n            state.isExiting && 'duration-200 ease-in animate-out fade-out',\n            typeof props.className === 'function' ? props.className(state) : props.className,\n          )\n        }\n      />\n    );\n  },\n);\nModalOverlay.displayName = 'ModalOverlay';\n\nexport const Modal = forwardRef<HTMLDivElement, AriaModalOverlayProps>(function Modal(props, ref) {\n  return (\n    <AriaModal\n      {...props}\n      ref={ref}\n      className={(state) =>\n        cx(\n          'rounded-xl bg-primary align-middle shadow-xl outline-hidden max-sm:overflow-y-auto sm:rounded-2xl',\n          'max-h-[calc(var(--visual-viewport-height)-var(--modal-pt)-var(--modal-pb))]',\n          state.isEntering && 'duration-300 ease-out animate-in zoom-in-95',\n          state.isExiting && 'duration-200 ease-in animate-out zoom-out-95',\n          typeof props.className === 'function' ? props.className(state) : props.className,\n        )\n      }\n    />\n  );\n});\nModal.displayName = 'Modal';\n\nexport const Dialog = forwardRef<HTMLDivElement, AriaDialogProps>(function Dialog(props, ref) {\n  return (\n    <AriaDialog\n      {...props}\n      ref={ref}\n      className={cx(\n        'relative max-h-[inherit] w-full overflow-y-auto outline-hidden',\n        props.className,\n      )}\n    />\n  );\n});\nDialog.displayName = 'Dialog';\n"],"mappings":";;;;;;AAgBA,MAAa,gBAAgBA;AAE7B,MAAa,eAAe,WAC1B,SAAS,aAAa,OAAO,KAAK;CAChC,OACE,oBAACC,gBAAD;EACE,GAAI;EACC;EACL,YAAY,UACV,GACE,qKACA,iIACA,MAAM,cAAc,4CACpB,MAAM,aAAa,6CACnB,OAAO,MAAM,cAAc,aAAa,MAAM,UAAU,KAAK,IAAI,MAAM,SACzE;CAEH,CAAA;AAEL,CACF;AACA,aAAa,cAAc;AAE3B,MAAa,QAAQ,WAAkD,SAAS,MAAM,OAAO,KAAK;CAChG,OACE,oBAACC,SAAD;EACE,GAAI;EACC;EACL,YAAY,UACV,GACE,qGACA,+EACA,MAAM,cAAc,+CACpB,MAAM,aAAa,gDACnB,OAAO,MAAM,cAAc,aAAa,MAAM,UAAU,KAAK,IAAI,MAAM,SACzE;CAEH,CAAA;AAEL,CAAC;AACD,MAAM,cAAc;AAEpB,MAAa,SAAS,WAA4C,SAAS,OAAO,OAAO,KAAK;CAC5F,OACE,oBAACC,UAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,kEACA,MAAM,SACR;CACD,CAAA;AAEL,CAAC;AACD,OAAO,cAAc"}

package/dist/radio-buttons/index.d.ts

@@ -0,0 +1,2 @@
+import { RadioButton, RadioButtonBase, RadioButtonBaseProps, RadioButtonProps, RadioGroup, RadioGroupContextType, RadioGroupProps } from "./radio-buttons.js";
+export { RadioButton, RadioButtonBase, type RadioButtonBaseProps, type RadioButtonProps, RadioGroup, type RadioGroupContextType, type RadioGroupProps };

package/dist/radio-buttons/index.js

@@ -0,0 +1,2 @@
+import { RadioButton, RadioButtonBase, RadioGroup } from "./radio-buttons.js";
+export { RadioButton, RadioButtonBase, RadioGroup };

package/dist/radio-buttons/radio-buttons.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { RadioGroupProps as RadioGroupProps$1, RadioProps } from "react-aria-components";
+//#region src/radio-buttons/radio-buttons.d.ts
+export interface RadioGroupContextType {
+  size?: 'sm' | 'md';
+}
+export interface RadioButtonBaseProps {
+  size?: 'sm' | 'md';
+  className?: string;
+  isFocusVisible?: boolean;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+}
+export declare const RadioButtonBase: {
+  ({ className, isFocusVisible, isSelected, isDisabled, size }: RadioButtonBaseProps): import("react").JSX.Element;
+  displayName: string;
+};
+export interface RadioButtonProps extends RadioProps {
+  size?: 'sm' | 'md';
+  label?: ReactNode;
+  hint?: ReactNode;
+}
+export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLLabelElement>>;
+export interface RadioGroupProps extends RadioGroupContextType, RadioGroupProps$1 {
+  children: ReactNode;
+  className?: string;
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=radio-buttons.d.ts.map

package/dist/radio-buttons/radio-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-buttons.d.ts","names":[],"sources":["../../src/radio-buttons/radio-buttons.tsx"],"mappings":";;;iBAaiB;EACf;;iBAKe;EACf;EACA;EACA;EACA;EACA;;qBAGW;KAMV,WAAA,gBAAA,YAAA,YAAA,QAAA,uCAAoB,IAAA;;;iBA+BN,yBAAyB;EACxC;EACA,QAAQ;EACR,OAAO;;qBAGI,6BAAW,0BAAA,mCAAA,cAAA;iBAwDP,wBAAwB,uBAAuB;EAC9D,UAAU;EACV;;qBAGW,4BAAU,0BAAA,kCAAA,cAAA"}

package/dist/radio-buttons/radio-buttons.js

@@ -0,0 +1,71 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { createContext, forwardRef, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Radio, RadioGroup as RadioGroup$1 } from "react-aria-components";
+//#region src/radio-buttons/radio-buttons.tsx
+const RadioGroupContext = createContext(null);
+const RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = "sm" }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-primary ring-inset", size === "md" && "size-5", isSelected && "bg-brand-solid ring-brand-solid", isDisabled && "cursor-not-allowed opacity-50", isDisabled && !isSelected && "bg-tertiary", isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring", className),
+		children: /* @__PURE__ */ jsx("div", { className: cx("size-1.5 rounded-full bg-fg-white opacity-0 transition-inherit-all", size === "md" && "size-2", isSelected && "opacity-100") })
+	});
+};
+RadioButtonBase.displayName = "RadioButtonBase";
+const radioSizes = {
+	sm: {
+		root: "gap-2",
+		textWrapper: "",
+		label: "text-sm font-medium",
+		hint: "text-sm"
+	},
+	md: {
+		root: "gap-3",
+		textWrapper: "gap-0.5",
+		label: "text-md font-medium",
+		hint: "text-md"
+	}
+};
+const RadioButton = forwardRef(function RadioButton({ label, hint, className, size, ...ariaRadioProps }, ref) {
+	const context = useContext(RadioGroupContext);
+	const resolvedSize = size ?? context?.size ?? "sm";
+	return /* @__PURE__ */ jsx(Radio, {
+		...ariaRadioProps,
+		ref,
+		className: (state) => cx("flex items-start", state.isDisabled && "cursor-not-allowed", radioSizes[resolvedSize].root, typeof className === "function" ? className(state) : className),
+		children: ({ isSelected, isDisabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RadioButtonBase, {
+			size: resolvedSize,
+			isSelected,
+			isDisabled,
+			isFocusVisible,
+			className: label || hint ? "mt-0.5" : ""
+		}), (label || hint) && /* @__PURE__ */ jsxs("div", {
+			className: cx("inline-flex flex-col", radioSizes[resolvedSize].textWrapper),
+			children: [label && /* @__PURE__ */ jsx("p", {
+				className: cx("text-secondary select-none", radioSizes[resolvedSize].label),
+				children: label
+			}), hint && /* @__PURE__ */ jsx("span", {
+				className: cx("text-tertiary", radioSizes[resolvedSize].hint),
+				onClick: (event) => event.stopPropagation(),
+				children: hint
+			})]
+		})] })
+	});
+});
+RadioButton.displayName = "RadioButton";
+const RadioGroup = forwardRef(function RadioGroup({ children, className, size = "sm", ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(RadioGroup$1, {
+			...props,
+			ref,
+			className: cx("flex flex-col gap-4", className),
+			children
+		})
+	});
+});
+RadioGroup.displayName = "RadioGroup";
+//#endregion
+export { RadioButton, RadioButtonBase, RadioGroup };
+
+//# sourceMappingURL=radio-buttons.js.map

package/dist/radio-buttons/radio-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-buttons.js","names":["AriaRadio","AriaRadioGroup"],"sources":["../../src/radio-buttons/radio-buttons.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/radio-buttons/radio-buttons.tsx */\n\nimport type { ReactNode } from 'react';\nimport { createContext, forwardRef, useContext } from 'react';\nimport type {\n  RadioGroupProps as AriaRadioGroupProps,\n  RadioProps as AriaRadioProps,\n} from 'react-aria-components';\nimport { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from 'react-aria-components';\nimport { cx } from '../utils/cx';\n\nexport interface RadioGroupContextType {\n  size?: 'sm' | 'md';\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextType | null>(null);\n\nexport interface RadioButtonBaseProps {\n  size?: 'sm' | 'md';\n  className?: string;\n  isFocusVisible?: boolean;\n  isSelected?: boolean;\n  isDisabled?: boolean;\n}\n\nexport const RadioButtonBase = ({\n  className,\n  isFocusVisible,\n  isSelected,\n  isDisabled,\n  size = 'sm',\n}: RadioButtonBaseProps) => {\n  return (\n    <div\n      className={cx(\n        'flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-primary ring-inset',\n        size === 'md' && 'size-5',\n        isSelected && 'bg-brand-solid ring-brand-solid',\n        isDisabled && 'cursor-not-allowed opacity-50',\n        isDisabled && !isSelected && 'bg-tertiary',\n        isFocusVisible && 'outline-2 outline-offset-2 outline-focus-ring',\n        className,\n      )}\n    >\n      <div\n        className={cx(\n          'size-1.5 rounded-full bg-fg-white opacity-0 transition-inherit-all',\n          size === 'md' && 'size-2',\n          isSelected && 'opacity-100',\n        )}\n      />\n    </div>\n  );\n};\n\nRadioButtonBase.displayName = 'RadioButtonBase';\n\nconst radioSizes = {\n  sm: { root: 'gap-2', textWrapper: '', label: 'text-sm font-medium', hint: 'text-sm' },\n  md: { root: 'gap-3', textWrapper: 'gap-0.5', label: 'text-md font-medium', hint: 'text-md' },\n};\n\nexport interface RadioButtonProps extends AriaRadioProps {\n  size?: 'sm' | 'md';\n  label?: ReactNode;\n  hint?: ReactNode;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(function RadioButton(\n  { label, hint, className, size, ...ariaRadioProps },\n  ref,\n) {\n  const context = useContext(RadioGroupContext);\n  const resolvedSize = size ?? context?.size ?? 'sm';\n\n  return (\n    <AriaRadio\n      {...ariaRadioProps}\n      ref={ref}\n      className={(state) =>\n        cx(\n          'flex items-start',\n          state.isDisabled && 'cursor-not-allowed',\n          radioSizes[resolvedSize].root,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {({ isSelected, isDisabled, isFocusVisible }) => (\n        <>\n          <RadioButtonBase\n            size={resolvedSize}\n            isSelected={isSelected}\n            isDisabled={isDisabled}\n            isFocusVisible={isFocusVisible}\n            className={label || hint ? 'mt-0.5' : ''}\n          />\n          {(label || hint) && (\n            <div className={cx('inline-flex flex-col', radioSizes[resolvedSize].textWrapper)}>\n              {label && (\n                <p className={cx('text-secondary select-none', radioSizes[resolvedSize].label)}>\n                  {label}\n                </p>\n              )}\n              {hint && (\n                // biome-ignore lint/a11y/noStaticElementInteractions: stops the click bubbling to the label so selecting the hint text doesn't toggle the radio.\n                // biome-ignore lint/a11y/useKeyWithClickEvents: not a keyboard-operable control, purely stops propagation.\n                <span\n                  className={cx('text-tertiary', radioSizes[resolvedSize].hint)}\n                  onClick={(event) => event.stopPropagation()}\n                >\n                  {hint}\n                </span>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </AriaRadio>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport interface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  { children, className, size = 'sm', ...props },\n  ref,\n) {\n  return (\n    <RadioGroupContext.Provider value={{ size }}>\n      <AriaRadioGroup {...props} ref={ref} className={cx('flex flex-col gap-4', className)}>\n        {children}\n      </AriaRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"mappings":";;;;;;AAiBA,MAAM,oBAAoB,cAA4C,IAAI;AAU1E,MAAa,mBAAmB,EAC9B,WACA,gBACA,YACA,YACA,OAAO,WACmB;CAC1B,OACE,oBAAC,OAAD;EACE,WAAW,GACT,0IACA,SAAS,QAAQ,UACjB,cAAc,mCACd,cAAc,iCACd,cAAc,CAAC,cAAc,eAC7B,kBAAkB,iDAClB,SACF;EAEA,UAAA,oBAAC,OAAD,EACE,WAAW,GACT,sEACA,SAAS,QAAQ,UACjB,cAAc,aAChB,EACD,CAAA;CACE,CAAA;AAET;AAEA,gBAAgB,cAAc;AAE9B,MAAM,aAAa;CACjB,IAAI;EAAE,MAAM;EAAS,aAAa;EAAI,OAAO;EAAuB,MAAM;CAAU;CACpF,IAAI;EAAE,MAAM;EAAS,aAAa;EAAW,OAAO;EAAuB,MAAM;CAAU;AAC7F;AAQA,MAAa,cAAc,WAA+C,SAAS,YACjF,EAAE,OAAO,MAAM,WAAW,MAAM,GAAG,kBACnC,KACA;CACA,MAAM,UAAU,WAAW,iBAAiB;CAC5C,MAAM,eAAe,QAAQ,SAAS,QAAQ;CAE9C,OACE,oBAACA,OAAD;EACE,GAAI;EACC;EACL,YAAY,UACV,GACE,oBACA,MAAM,cAAc,sBACpB,WAAW,aAAa,CAAC,MACzB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAGA,WAAA,EAAE,YAAY,YAAY,qBAC1B,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;GACE,MAAM;GACM;GACA;GACI;GAChB,WAAW,SAAS,OAAO,WAAW;EACvC,CAAA,IACC,SAAS,SACT,qBAAC,OAAD;GAAK,WAAW,GAAG,wBAAwB,WAAW,aAAa,CAAC,WAAW;GAA/E,UAAA,CACG,SACC,oBAAC,KAAD;IAAG,WAAW,GAAG,8BAA8B,WAAW,aAAa,CAAC,KAAK;IAC1E,UAAA;GACA,CAAA,GAEJ,QAGC,oBAAC,QAAD;IACE,WAAW,GAAG,iBAAiB,WAAW,aAAa,CAAC,IAAI;IAC5D,UAAU,UAAU,MAAM,gBAAgB;IAEzC,UAAA;GACG,CAAA,CAEL;EAEP,CAAA,CAAA,EAAA,CAAA;CAEK,CAAA;AAEf,CAAC;AAED,YAAY,cAAc;AAO1B,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,UAAU,WAAW,OAAO,MAAM,GAAG,SACvC,KACA;CACA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO,EAAE,KAAK;EACxC,UAAA,oBAACC,cAAD;GAAgB,GAAI;GAAY;GAAK,WAAW,GAAG,uBAAuB,SAAS;GAChF;EACa,CAAA;CACU,CAAA;AAEhC,CAAC;AAED,WAAW,cAAc"}

package/dist/select/index.d.ts

@@ -0,0 +1,2 @@
+import { CommonProps, Select, SelectItem, SelectItemProps, SelectItemType, SelectProps } from "./select.js";
+export { type CommonProps, Select, SelectItem, type SelectItemProps, type SelectItemType, type SelectProps };

package/dist/select/index.js

@@ -0,0 +1,2 @@
+import { Select, SelectItem } from "./select.js";
+export { Select, SelectItem };

package/dist/select/select.d.ts

@@ -0,0 +1,40 @@
+import { FC, ReactNode } from "react";
+import { ListBoxItemProps, SelectProps as SelectProps$1 } from "react-aria-components";
+//#region src/select/select.d.ts
+export type SelectItemType = {
+  id: string | number;
+  label?: string;
+  isDisabled?: boolean;
+  supportingText?: string;
+  icon?: FC | ReactNode;
+  avatarUrl?: string;
+};
+export interface CommonProps {
+  hint?: string;
+  label?: string;
+  size?: 'sm' | 'md' | 'lg';
+  placeholder?: string;
+  hideRequiredIndicator?: boolean;
+}
+export interface SelectItemProps extends Omit<ListBoxItemProps<SelectItemType>, 'id'>, SelectItemType {
+  selectionIndicator?: 'checkmark' | 'checkbox' | 'none';
+  selectionIndicatorAlign?: 'left' | 'right';
+}
+export declare const SelectItem: {
+  ({ label, id, value, supportingText, isDisabled, icon: Icon, avatarUrl, className, children, selectionIndicator, selectionIndicatorAlign, ...props }: SelectItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+export interface SelectProps extends Omit<SelectProps$1<SelectItemType>, 'children' | 'items'>, CommonProps {
+  items?: SelectItemType[];
+  popoverClassName?: string;
+  icon?: FC | ReactNode;
+  children: ReactNode | ((item: SelectItemType) => ReactNode);
+}
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Item: {
+    ({ label, id, value, supportingText, isDisabled, icon: Icon, avatarUrl, className, children, selectionIndicator, selectionIndicatorAlign, ...props }: SelectItemProps): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+//# sourceMappingURL=select.d.ts.map

package/dist/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;YA2BY;EACV;EACA;EACA;EACA;EACA,OAAO,KAAK;EACZ;;iBAGe;EACf;EACA;EACA;EACA;EACA;;iBAoEe,wBACP,KAAK,iBAAqB,wBAChC;EACF;EACA;;qBAGW;KAaV,OAAA,IAAA,OAAA,gBAAA,YAAA,MAAA,MAAA,WAAA,WAAA,UAAA,oBAAA,4BAAA,SAAA,kCAAe,IAAA;;;iBAyGD,oBACP,KAAK,cAAgB,wCAC3B;EACF,QAAQ;EACR;EACA,OAAO,KAAK;EACZ,UAAU,cAAc,MAAM,mBAAmB;;qBAkItC,wBAAM,0BAAA,8BAAA,cAAA;;OAjPhB,OAAA,IAAA,OAAA,gBAAA,YAAA,MAAA,MAAA,WAAA,WAAA,UAAA,oBAAA,4BAAA,SAAA,kCAAe,IAAA"}

package/dist/select/select.js

@@ -0,0 +1,198 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { Avatar } from "../avatar/avatar.js";
+import "../avatar/index.js";
+import { isReactComponent } from "../utils/is-react-component.js";
+import { CheckboxBase } from "../checkbox/checkbox.js";
+import "../checkbox/index.js";
+import { HintText, Label as Label$1 } from "../input/input.js";
+import "../input/index.js";
+import { Check, ChevronDown } from "@kavagy/icons";
+import { createContext, forwardRef, isValidElement, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, ListBox, ListBoxItem, Popover, Select as Select$1, SelectValue, Text } from "react-aria-components";
+//#region src/select/select.tsx
+const selectSizes = {
+	sm: {
+		root: "py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+		text: "text-sm",
+		textContainer: "gap-x-1.5"
+	},
+	md: {
+		root: "py-2 px-3 gap-2 *:data-icon:size-5",
+		text: "text-md",
+		textContainer: "gap-x-1.5"
+	},
+	lg: {
+		root: "py-2.5 px-3.5 gap-2 *:data-icon:size-5",
+		text: "text-md",
+		textContainer: "gap-x-1.5"
+	}
+};
+const itemSizes = {
+	sm: {
+		root: "p-2 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+		text: "text-sm",
+		textContainer: "gap-x-1.5",
+		check: "size-4 stroke-[2.25px]"
+	},
+	md: {
+		root: "p-2 pr-2.5 gap-2 *:data-icon:size-5",
+		text: "text-md",
+		textContainer: "gap-x-2",
+		check: "size-5"
+	},
+	lg: {
+		root: "p-2.5 pl-2 gap-2 *:data-icon:size-5",
+		text: "text-md",
+		textContainer: "gap-x-2",
+		check: "size-5"
+	}
+};
+const SelectContext = createContext({ size: "md" });
+const SelectPopover = ({ size, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover, {
+		placement: "bottom",
+		containerPadding: 0,
+		offset: 4,
+		...props,
+		className: (state) => cx("w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform", state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5", state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5", size === "sm" && "max-h-56!", size === "md" && "max-h-64!", size === "lg" && "max-h-80!", typeof props.className === "function" ? props.className(state) : props.className)
+	});
+};
+const SelectItem = ({ label, id, value, supportingText, isDisabled, icon: Icon, avatarUrl, className, children, selectionIndicator = "checkmark", selectionIndicatorAlign = "right", ...props }) => {
+	const { size } = useContext(SelectContext);
+	const labelOrChildren = label || (typeof children === "string" ? children : "");
+	const textValue = supportingText ? `${labelOrChildren} ${supportingText}` : labelOrChildren;
+	const isLeft = selectionIndicatorAlign === "left";
+	return /* @__PURE__ */ jsx(ListBoxItem, {
+		id,
+		value: value ?? {
+			id,
+			label: labelOrChildren,
+			supportingText,
+			isDisabled,
+			icon: Icon,
+			avatarUrl
+		},
+		textValue,
+		isDisabled,
+		...props,
+		className: (state) => cx("w-full py-px outline-hidden", size === "sm" ? "px-1" : "px-1.5", typeof className === "function" ? className(state) : className),
+		children: (state) => /* @__PURE__ */ jsxs("div", {
+			className: cx("flex cursor-pointer items-center rounded-md outline-hidden select-none", (state.isFocused || state.isHovered || state.isSelected && selectionIndicator !== "checkbox") && "bg-primary_hover", state.isDisabled && "cursor-not-allowed opacity-50", state.isFocusVisible && "ring-2 ring-focus-ring ring-inset", "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary", itemSizes[size].root),
+			children: [
+				isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, {
+					size: size === "lg" ? "md" : "sm",
+					isSelected: state.isSelected,
+					isDisabled: state.isDisabled
+				}),
+				avatarUrl ? /* @__PURE__ */ jsx(Avatar, {
+					src: avatarUrl,
+					alt: "",
+					size: "xs",
+					className: cx("shrink-0", size === "lg" && "size-5")
+				}) : isReactComponent(Icon) ? /* @__PURE__ */ jsx(Icon, {
+					"data-icon": true,
+					"aria-hidden": "true"
+				}) : isValidElement(Icon) ? Icon : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: cx("flex w-full min-w-0 flex-1 flex-wrap", itemSizes[size].textContainer),
+					children: [/* @__PURE__ */ jsx(Text, {
+						slot: "label",
+						className: cx("truncate font-medium whitespace-nowrap text-primary", itemSizes[size].text),
+						children: label || (typeof children === "function" ? children(state) : children)
+					}), supportingText && /* @__PURE__ */ jsx(Text, {
+						slot: "description",
+						className: cx("whitespace-nowrap text-tertiary", itemSizes[size].text),
+						children: supportingText
+					})]
+				}),
+				state.isSelected && selectionIndicator === "checkmark" && /* @__PURE__ */ jsx(Check, {
+					"aria-hidden": "true",
+					className: cx("ml-auto text-fg-brand-primary", itemSizes[size].check)
+				}),
+				!isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, {
+					size: size === "lg" ? "md" : "sm",
+					isSelected: state.isSelected,
+					isDisabled: state.isDisabled,
+					className: "ml-auto"
+				})
+			]
+		})
+	});
+};
+SelectItem.displayName = "SelectItem";
+const SelectBase = forwardRef(function Select({ placeholder = "Select", icon, size = "md", children, items, label, hint, hideRequiredIndicator, className, popoverClassName, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(Select$1, {
+			...rest,
+			ref,
+			className: (state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className),
+			children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				label && /* @__PURE__ */ jsx(Label$1, {
+					isRequired: hideRequiredIndicator ? false : state.isRequired,
+					children: label
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					className: cx("relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset", (state.isFocused || state.isOpen) && "ring-2 ring-focus-ring", state.isDisabled && "cursor-not-allowed opacity-50"),
+					children: /* @__PURE__ */ jsx(SelectValue, {
+						className: (valueState) => cx("flex h-max w-full items-center justify-start truncate text-left align-middle", selectSizes[size].root, (valueState.selectedItems[0]?.icon || icon) && "", "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary"),
+						children: (valueState) => {
+							const selectedItem = valueState.selectedItems[0];
+							const Icon = selectedItem?.icon || icon;
+							return /* @__PURE__ */ jsxs(Fragment, { children: [
+								selectedItem?.avatarUrl ? /* @__PURE__ */ jsx(Avatar, {
+									src: selectedItem.avatarUrl,
+									alt: "",
+									size: "xs",
+									className: cx("shrink-0", size === "lg" && "size-5")
+								}) : isReactComponent(Icon) ? /* @__PURE__ */ jsx(Icon, {
+									"data-icon": true,
+									"aria-hidden": "true"
+								}) : isValidElement(Icon) ? Icon : null,
+								selectedItem ? /* @__PURE__ */ jsxs("section", {
+									className: cx("flex w-full truncate", selectSizes[size].textContainer),
+									children: [/* @__PURE__ */ jsx("p", {
+										className: cx("truncate font-medium text-primary", selectSizes[size].text),
+										children: selectedItem.label
+									}), selectedItem.supportingText && /* @__PURE__ */ jsx("p", {
+										className: cx("text-tertiary", selectSizes[size].text),
+										children: selectedItem.supportingText
+									})]
+								}) : /* @__PURE__ */ jsx("p", {
+									className: cx("text-placeholder", selectSizes[size].text),
+									children: placeholder
+								}),
+								/* @__PURE__ */ jsx(ChevronDown, {
+									"aria-hidden": "true",
+									className: cx("ml-auto shrink-0 text-fg-quaternary", size === "lg" ? "size-5" : "size-4 stroke-[2.25px]")
+								})
+							] });
+						}
+					})
+				}),
+				/* @__PURE__ */ jsx(SelectPopover, {
+					size,
+					className: popoverClassName,
+					children: /* @__PURE__ */ jsx(ListBox, {
+						items,
+						className: "size-full outline-hidden",
+						children
+					})
+				}),
+				hint && /* @__PURE__ */ jsx(HintText, {
+					isInvalid: state.isInvalid,
+					className: cx(size === "sm" && "text-xs"),
+					children: hint
+				})
+			] })
+		})
+	});
+});
+SelectBase.displayName = "Select";
+const Select = Object.assign(SelectBase, { Item: SelectItem });
+//#endregion
+export { Select, SelectItem };
+
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["AriaPopover","AriaListBoxItem","AriaText","AriaSelect","Label","AriaButton","AriaSelectValue","AriaListBox"],"sources":["../../src/select/select.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/select/select.tsx, base/select/select-shared.tsx, base/select/select-item.tsx, base/select/popover.tsx */\n\nimport { Check, ChevronDown } from '@kavagy/icons';\nimport type { FC, ReactNode } from 'react';\nimport { createContext, forwardRef, isValidElement, useContext } from 'react';\nimport type {\n  ListBoxItemProps as AriaListBoxItemProps,\n  PopoverProps as AriaPopoverProps,\n  SelectProps as AriaSelectProps,\n} from 'react-aria-components';\nimport {\n  Button as AriaButton,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectValue as AriaSelectValue,\n  Text as AriaText,\n} from 'react-aria-components';\nimport { Avatar } from '../avatar';\nimport { CheckboxBase } from '../checkbox';\nimport { HintText, Label } from '../input';\nimport { cx } from '../utils/cx';\nimport { isReactComponent } from '../utils/is-react-component';\n\nexport type SelectItemType = {\n  id: string | number;\n  label?: string;\n  isDisabled?: boolean;\n  supportingText?: string;\n  icon?: FC | ReactNode;\n  avatarUrl?: string;\n};\n\nexport interface CommonProps {\n  hint?: string;\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  placeholder?: string;\n  hideRequiredIndicator?: boolean;\n}\n\nconst selectSizes = {\n  sm: {\n    root: 'py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]',\n    text: 'text-sm',\n    textContainer: 'gap-x-1.5',\n  },\n  md: { root: 'py-2 px-3 gap-2 *:data-icon:size-5', text: 'text-md', textContainer: 'gap-x-1.5' },\n  lg: {\n    root: 'py-2.5 px-3.5 gap-2 *:data-icon:size-5',\n    text: 'text-md',\n    textContainer: 'gap-x-1.5',\n  },\n};\n\nconst itemSizes = {\n  sm: {\n    root: 'p-2 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]',\n    text: 'text-sm',\n    textContainer: 'gap-x-1.5',\n    check: 'size-4 stroke-[2.25px]',\n  },\n  md: {\n    root: 'p-2 pr-2.5 gap-2 *:data-icon:size-5',\n    text: 'text-md',\n    textContainer: 'gap-x-2',\n    check: 'size-5',\n  },\n  lg: {\n    root: 'p-2.5 pl-2 gap-2 *:data-icon:size-5',\n    text: 'text-md',\n    textContainer: 'gap-x-2',\n    check: 'size-5',\n  },\n};\n\nconst SelectContext = createContext<{ size: 'sm' | 'md' | 'lg' }>({ size: 'md' });\n\ninterface SelectPopoverProps extends AriaPopoverProps {\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst SelectPopover = ({ size, ...props }: SelectPopoverProps) => {\n  return (\n    <AriaPopover\n      placement=\"bottom\"\n      containerPadding={0}\n      offset={4}\n      {...props}\n      className={(state) =>\n        cx(\n          'w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform',\n          state.isEntering &&\n            'duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5',\n          state.isExiting &&\n            'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5',\n          size === 'sm' && 'max-h-56!',\n          size === 'md' && 'max-h-64!',\n          size === 'lg' && 'max-h-80!',\n          typeof props.className === 'function' ? props.className(state) : props.className,\n        )\n      }\n    />\n  );\n};\n\nexport interface SelectItemProps\n  extends Omit<AriaListBoxItemProps<SelectItemType>, 'id'>,\n    SelectItemType {\n  selectionIndicator?: 'checkmark' | 'checkbox' | 'none';\n  selectionIndicatorAlign?: 'left' | 'right';\n}\n\nexport const SelectItem = ({\n  label,\n  id,\n  value,\n  supportingText,\n  isDisabled,\n  icon: Icon,\n  avatarUrl,\n  className,\n  children,\n  selectionIndicator = 'checkmark',\n  selectionIndicatorAlign = 'right',\n  ...props\n}: SelectItemProps) => {\n  const { size } = useContext(SelectContext);\n\n  const labelOrChildren = label || (typeof children === 'string' ? children : '');\n  const textValue = supportingText ? `${labelOrChildren} ${supportingText}` : labelOrChildren;\n  const isLeft = selectionIndicatorAlign === 'left';\n\n  return (\n    <AriaListBoxItem\n      id={id}\n      value={\n        value ?? { id, label: labelOrChildren, supportingText, isDisabled, icon: Icon, avatarUrl }\n      }\n      textValue={textValue}\n      isDisabled={isDisabled}\n      {...props}\n      className={(state) =>\n        cx(\n          'w-full py-px outline-hidden',\n          size === 'sm' ? 'px-1' : 'px-1.5',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {(state) => (\n        <div\n          className={cx(\n            'flex cursor-pointer items-center rounded-md outline-hidden select-none',\n            (state.isFocused ||\n              state.isHovered ||\n              (state.isSelected && selectionIndicator !== 'checkbox')) &&\n              'bg-primary_hover',\n            state.isDisabled && 'cursor-not-allowed opacity-50',\n            state.isFocusVisible && 'ring-2 ring-focus-ring ring-inset',\n            '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary',\n            itemSizes[size].root,\n          )}\n        >\n          {isLeft && selectionIndicator === 'checkbox' && (\n            <CheckboxBase\n              size={size === 'lg' ? 'md' : 'sm'}\n              isSelected={state.isSelected}\n              isDisabled={state.isDisabled}\n            />\n          )}\n\n          {avatarUrl ? (\n            <Avatar\n              src={avatarUrl}\n              alt=\"\"\n              size=\"xs\"\n              className={cx('shrink-0', size === 'lg' && 'size-5')}\n            />\n          ) : isReactComponent(Icon) ? (\n            <Icon data-icon aria-hidden=\"true\" />\n          ) : isValidElement(Icon) ? (\n            Icon\n          ) : null}\n\n          <div\n            className={cx('flex w-full min-w-0 flex-1 flex-wrap', itemSizes[size].textContainer)}\n          >\n            <AriaText\n              slot=\"label\"\n              className={cx(\n                'truncate font-medium whitespace-nowrap text-primary',\n                itemSizes[size].text,\n              )}\n            >\n              {label || (typeof children === 'function' ? children(state) : children)}\n            </AriaText>\n\n            {supportingText && (\n              <AriaText\n                slot=\"description\"\n                className={cx('whitespace-nowrap text-tertiary', itemSizes[size].text)}\n              >\n                {supportingText}\n              </AriaText>\n            )}\n          </div>\n\n          {state.isSelected && selectionIndicator === 'checkmark' && (\n            <Check\n              aria-hidden=\"true\"\n              className={cx('ml-auto text-fg-brand-primary', itemSizes[size].check)}\n            />\n          )}\n\n          {!isLeft && selectionIndicator === 'checkbox' && (\n            <CheckboxBase\n              size={size === 'lg' ? 'md' : 'sm'}\n              isSelected={state.isSelected}\n              isDisabled={state.isDisabled}\n              className=\"ml-auto\"\n            />\n          )}\n        </div>\n      )}\n    </AriaListBoxItem>\n  );\n};\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectProps\n  extends Omit<AriaSelectProps<SelectItemType>, 'children' | 'items'>,\n    CommonProps {\n  items?: SelectItemType[];\n  popoverClassName?: string;\n  icon?: FC | ReactNode;\n  children: ReactNode | ((item: SelectItemType) => ReactNode);\n}\n\nconst SelectBase = forwardRef<HTMLDivElement, SelectProps>(function Select(\n  {\n    placeholder = 'Select',\n    icon,\n    size = 'md',\n    children,\n    items,\n    label,\n    hint,\n    hideRequiredIndicator,\n    className,\n    popoverClassName,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <SelectContext.Provider value={{ size }}>\n      <AriaSelect\n        {...rest}\n        ref={ref}\n        className={(state) =>\n          cx(\n            'flex flex-col gap-1.5',\n            typeof className === 'function' ? className(state) : className,\n          )\n        }\n      >\n        {(state) => (\n          <>\n            {label && (\n              <Label isRequired={hideRequiredIndicator ? false : state.isRequired}>{label}</Label>\n            )}\n\n            <AriaButton\n              className={cx(\n                'relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset',\n                (state.isFocused || state.isOpen) && 'ring-2 ring-focus-ring',\n                state.isDisabled && 'cursor-not-allowed opacity-50',\n              )}\n            >\n              <AriaSelectValue<SelectItemType>\n                className={(valueState) =>\n                  cx(\n                    'flex h-max w-full items-center justify-start truncate text-left align-middle',\n                    selectSizes[size].root,\n                    (valueState.selectedItems[0]?.icon || icon) && '',\n                    '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary',\n                  )\n                }\n              >\n                {(valueState) => {\n                  const selectedItem = valueState.selectedItems[0];\n                  const Icon = selectedItem?.icon || icon;\n\n                  return (\n                    <>\n                      {selectedItem?.avatarUrl ? (\n                        <Avatar\n                          src={selectedItem.avatarUrl}\n                          alt=\"\"\n                          size=\"xs\"\n                          className={cx('shrink-0', size === 'lg' && 'size-5')}\n                        />\n                      ) : isReactComponent(Icon) ? (\n                        <Icon data-icon aria-hidden=\"true\" />\n                      ) : isValidElement(Icon) ? (\n                        Icon\n                      ) : null}\n\n                      {selectedItem ? (\n                        <section\n                          className={cx('flex w-full truncate', selectSizes[size].textContainer)}\n                        >\n                          <p\n                            className={cx(\n                              'truncate font-medium text-primary',\n                              selectSizes[size].text,\n                            )}\n                          >\n                            {selectedItem.label}\n                          </p>\n                          {selectedItem.supportingText && (\n                            <p className={cx('text-tertiary', selectSizes[size].text)}>\n                              {selectedItem.supportingText}\n                            </p>\n                          )}\n                        </section>\n                      ) : (\n                        <p className={cx('text-placeholder', selectSizes[size].text)}>\n                          {placeholder}\n                        </p>\n                      )}\n\n                      <ChevronDown\n                        aria-hidden=\"true\"\n                        className={cx(\n                          'ml-auto shrink-0 text-fg-quaternary',\n                          size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]',\n                        )}\n                      />\n                    </>\n                  );\n                }}\n              </AriaSelectValue>\n            </AriaButton>\n\n            <SelectPopover size={size} className={popoverClassName}>\n              <AriaListBox items={items} className=\"size-full outline-hidden\">\n                {children}\n              </AriaListBox>\n            </SelectPopover>\n\n            {hint && (\n              <HintText isInvalid={state.isInvalid} className={cx(size === 'sm' && 'text-xs')}>\n                {hint}\n              </HintText>\n            )}\n          </>\n        )}\n      </AriaSelect>\n    </SelectContext.Provider>\n  );\n});\n\nSelectBase.displayName = 'Select';\n\nexport const Select = Object.assign(SelectBase, { Item: SelectItem });\n"],"mappings":"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"}