@kavagy/react 0.1.1

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["AriaLink","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/buttons/button.tsx */\n\nimport type { FC, ReactNode, Ref } from 'react';\nimport { forwardRef, isValidElement } from 'react';\nimport type {\n  ButtonProps as AriaButtonProps,\n  LinkProps as AriaLinkProps,\n} from 'react-aria-components';\nimport { Button as AriaButton, Link as AriaLink } from 'react-aria-components';\nimport { cx } from '../utils/cx';\nimport { isReactComponent } from '../utils/is-react-component';\nimport type { VariantProps } from '../utils/tv';\nimport { tv } from '../utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap',\n      'outline-focus-ring transition duration-100 ease-linear before:absolute',\n      'focus-visible:outline-2 focus-visible:outline-offset-2',\n      'in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none',\n      'disabled:cursor-not-allowed disabled:opacity-50 in-data-input-wrapper:disabled:opacity-100',\n      '*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all',\n    ],\n    icon: 'pointer-events-none size-5 shrink-0 transition-inherit-all',\n    text: 'transition-inherit-all',\n  },\n  variants: {\n    size: {\n      xs: {\n        root: 'gap-1 rounded-lg px-2.5 py-1.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2 in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5 *:data-icon:size-4 *:data-icon:stroke-[2.25px]',\n      },\n      sm: {\n        root: 'gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2 in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5',\n      },\n      md: {\n        root: 'gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5 in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3',\n      },\n      lg: {\n        root: 'gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3',\n      },\n      xl: {\n        root: 'gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5',\n      },\n    },\n    color: {\n      primary: {\n        root: 'bg-brand-solid text-primary_on-brand shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-primary_on-brand/60 hover:*:data-icon:text-primary_on-brand/70',\n      },\n      secondary: {\n        root: 'bg-primary text-secondary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover *:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',\n      },\n      tertiary: {\n        root: 'text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover *:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',\n      },\n      'link-color': {\n        root: 'justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover *:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-brand-secondary_alt *:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover',\n      },\n      'link-gray': {\n        root: 'justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover *:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-quaternary *:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',\n      },\n      'primary-destructive': {\n        root: 'bg-error-solid text-white shadow-xs-skeuomorphic ring-1 ring-transparent outline-error ring-inset hover:bg-error-solid_hover data-loading:bg-error-solid_hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-white/60 hover:*:data-icon:text-white/70',\n      },\n      'secondary-destructive': {\n        root: 'bg-primary text-error-primary shadow-xs-skeuomorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary *:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',\n      },\n      'tertiary-destructive': {\n        root: 'text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary *:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',\n      },\n      'link-destructive': {\n        root: 'justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover *:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current *:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',\n      },\n    },\n    isLink: { true: {} },\n    noTextPadding: { false: { text: 'px-0.5' } },\n  },\n  compoundVariants: [\n    { isLink: true, size: 'xs', class: { root: 'gap-1 *:data-text:underline-offset-3' } },\n    { isLink: true, size: 'sm', class: { root: 'gap-1 *:data-text:underline-offset-3' } },\n    { isLink: true, size: 'md', class: { root: 'gap-1 *:data-text:underline-offset-4' } },\n    { isLink: true, size: 'lg', class: { root: 'gap-1.5 *:data-text:underline-offset-4' } },\n    { isLink: true, size: 'xl', class: { root: 'gap-1.5 *:data-text:underline-offset-4' } },\n  ],\n  defaultVariants: { size: 'sm', color: 'primary', noTextPadding: false },\n});\n\ntype ButtonVariants = VariantProps<typeof buttonStyles>;\n\nexport interface ButtonBaseProps {\n  size?: ButtonVariants['size'];\n  color?: ButtonVariants['color'];\n  isDisabled?: boolean;\n  isLoading?: boolean;\n  iconLeading?: FC<{ className?: string }> | ReactNode;\n  iconTrailing?: FC<{ className?: string }> | ReactNode;\n  noTextPadding?: boolean;\n  showTextWhileLoading?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface ButtonProps\n  extends ButtonBaseProps,\n    Omit<AriaButtonProps, 'children' | 'className' | 'style'> {\n  href?: never;\n}\n\nexport interface ButtonLinkProps\n  extends ButtonBaseProps,\n    Omit<AriaLinkProps, 'children' | 'className' | 'style'> {\n  href: NonNullable<AriaLinkProps['href']>;\n}\n\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps | ButtonLinkProps\n>(function Button(props, ref) {\n  const {\n    size,\n    color,\n    children,\n    className,\n    noTextPadding,\n    iconLeading: IconLeading,\n    iconTrailing: IconTrailing,\n    isDisabled,\n    isLoading,\n    showTextWhileLoading,\n    ...rest\n  } = props;\n\n  const href = 'href' in props ? props.href : undefined;\n  const isLinkStyle =\n    color === 'link-gray' || color === 'link-color' || color === 'link-destructive';\n  const isIconOnly = Boolean((IconLeading || IconTrailing) && !children);\n\n  const slots = buttonStyles({\n    size,\n    color,\n    isLink: isLinkStyle,\n    noTextPadding: isLinkStyle ? true : Boolean(noTextPadding),\n  });\n\n  const content = (\n    <>\n      {isValidElement(IconLeading) && IconLeading}\n      {isReactComponent(IconLeading) && (\n        <IconLeading data-icon=\"leading\" className={slots.icon()} />\n      )}\n      {isLoading && (\n        <svg\n          fill=\"none\"\n          aria-hidden=\"true\"\n          data-icon=\"loading\"\n          viewBox=\"0 0 20 20\"\n          className={cx(\n            slots.icon(),\n            !showTextWhileLoading && 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          )}\n        >\n          <circle\n            className=\"stroke-current opacity-30\"\n            cx=\"10\"\n            cy=\"10\"\n            r=\"8\"\n            fill=\"none\"\n            strokeWidth=\"2\"\n          />\n          <circle\n            className=\"origin-center animate-spin stroke-current\"\n            cx=\"10\"\n            cy=\"10\"\n            r=\"8\"\n            fill=\"none\"\n            strokeWidth=\"2\"\n            strokeDasharray=\"12.5 50\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      )}\n      {children && (\n        <span data-text className={slots.text()}>\n          {children}\n        </span>\n      )}\n      {isValidElement(IconTrailing) && IconTrailing}\n      {isReactComponent(IconTrailing) && (\n        <IconTrailing data-icon=\"trailing\" className={slots.icon()} />\n      )}\n    </>\n  );\n\n  const shared = {\n    'data-loading': isLoading ? true : undefined,\n    'data-icon-only': isIconOnly ? true : undefined,\n    isDisabled,\n    className: cx(\n      slots.root(),\n      (isLoading || (href && (isDisabled || isLoading))) && 'pointer-events-none',\n      isLoading &&\n        (showTextWhileLoading\n          ? '[&>*:not([data-icon=loading]):not([data-text])]:hidden'\n          : '[&>*:not([data-icon=loading])]:invisible'),\n      className,\n    ),\n    children: content,\n  };\n\n  if (href !== undefined) {\n    const { href: _drop, ...linkRest } = rest as ButtonLinkProps;\n    return (\n      <AriaLink\n        {...linkRest}\n        {...shared}\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={isDisabled ? undefined : href}\n      />\n    );\n  }\n\n  const buttonRest = rest as ButtonProps;\n  return (\n    <AriaButton\n      {...buttonRest}\n      {...shared}\n      ref={ref as Ref<HTMLButtonElement>}\n      type={buttonRest.type ?? 'button'}\n      isPending={isLoading}\n    />\n  );\n});\n\nButton.displayName = 'Button';\n"],"mappings":"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"}

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonLinkProps, ButtonProps, buttonStyles } from "./button.js";
+export { Button, type ButtonLinkProps, type ButtonProps, buttonStyles };

package/dist/button/index.js

@@ -0,0 +1,2 @@
+import { Button, buttonStyles } from "./button.js";
+export { Button, buttonStyles };

package/dist/button-utility/button-utility.d.ts

@@ -0,0 +1,59 @@
+import { VariantProps } from "../utils/tv.js";
+import { TooltipProps as TooltipProps$1 } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import { FC, ReactNode } from "react";
+import { ButtonProps, LinkProps } from "react-aria-components";
+//#region src/button-utility/button-utility.d.ts
+export declare const buttonUtilityStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+  };
+  color: {
+    secondary: string;
+    tertiary: string;
+  };
+}, undefined, string[], {
+  size: {
+    xs: string;
+    sm: string;
+  };
+  color: {
+    secondary: string;
+    tertiary: string;
+  };
+}, undefined, import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+  };
+  color: {
+    secondary: string;
+    tertiary: string;
+  };
+}, undefined, string[], unknown, unknown, undefined>>;
+type ButtonUtilityVariants = VariantProps<typeof buttonUtilityStyles>;
+export interface ButtonUtilityBaseProps {
+  size?: ButtonUtilityVariants['size'];
+  color?: ButtonUtilityVariants['color'];
+  isDisabled?: boolean;
+  /** Icon-only button: an accessible name is required since no text label is rendered. */
+  'aria-label': string;
+  icon: FC<{
+    className?: string;
+  }> | ReactNode;
+  className?: string;
+  /** Tooltip content displayed on hover/focus. */
+  tooltip?: ReactNode;
+  /** Placement of the tooltip. @default 'top' */
+  tooltipPlacement?: TooltipProps$1['placement'];
+}
+export interface ButtonUtilityProps extends ButtonUtilityBaseProps, Omit<ButtonProps, 'children' | 'className' | 'style' | 'aria-label'> {
+  href?: never;
+}
+export interface ButtonUtilityLinkProps extends ButtonUtilityBaseProps, Omit<LinkProps, 'children' | 'className' | 'style' | 'aria-label'> {
+  href: NonNullable<LinkProps['href']>;
+}
+export declare const ButtonUtility: import("react").ForwardRefExoticComponent<(ButtonUtilityProps | ButtonUtilityLinkProps) & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+//#endregion
+//# sourceMappingURL=button-utility.d.ts.map

package/dist/button-utility/button-utility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-utility.d.ts","names":[],"sources":["../../src/button-utility/button-utility.tsx"],"mappings":";;;;;;qBAkBa,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsB3B,wBAAwB,oBAAoB;iBAEhC;EACf,OAAO;EACP,QAAQ;EACR;;EAEA;EACA,MAAM;IAAK;OAAwB;EACnC;;EAEA,UAAU;;EAEV,mBAAmB;;iBAGJ,2BACP,wBACN,KAAK;EACP;;iBAGe,+BACP,wBACN,KAAK;EACP,MAAM,YAAY;;qBAGP,+BAAa,2BAAA,qBAAA,0CAAA,cAAA,oBAAA"}

package/dist/button-utility/button-utility.js

@@ -0,0 +1,78 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { tv } from "../utils/tv.js";
+import { isReactComponent } from "../utils/is-react-component.js";
+import { Tooltip as Tooltip$1 } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import { forwardRef, isValidElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Link } from "react-aria-components";
+//#region src/button-utility/button-utility.tsx
+const buttonUtilityStyles = tv({
+	base: [
+		"group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md p-1.5",
+		"outline-focus-ring transition duration-100 ease-linear",
+		"focus-visible:outline-2 focus-visible:outline-offset-2",
+		"disabled:cursor-not-allowed disabled:opacity-50",
+		"*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all"
+	],
+	variants: {
+		size: {
+			xs: "*:data-icon:size-4",
+			sm: "*:data-icon:size-5"
+		},
+		color: {
+			secondary: "bg-primary text-fg-quaternary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs",
+			tertiary: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover"
+		}
+	},
+	defaultVariants: {
+		size: "sm",
+		color: "secondary"
+	}
+});
+const ButtonUtility = forwardRef(function ButtonUtility(props, ref) {
+	const { size, color, className, icon: Icon, isDisabled, tooltip, tooltipPlacement, ...rest } = props;
+	const href = "href" in props ? props.href : void 0;
+	const sharedClassName = cx(buttonUtilityStyles({
+		size,
+		color
+	}), className);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [isValidElement(Icon) && Icon, isReactComponent(Icon) && /* @__PURE__ */ jsx(Icon, { "data-icon": true })] });
+	let element;
+	if (href !== void 0) {
+		const { href: _drop, ...linkRest } = rest;
+		element = /* @__PURE__ */ jsx(Link, {
+			...linkRest,
+			...isDisabled ? {
+				"data-rac": true,
+				"data-disabled": true
+			} : {},
+			ref,
+			href: isDisabled ? void 0 : href,
+			className: sharedClassName,
+			children: content
+		});
+	} else {
+		const buttonRest = rest;
+		element = /* @__PURE__ */ jsx(Button, {
+			...buttonRest,
+			ref,
+			type: buttonRest.type ?? "button",
+			isDisabled,
+			className: sharedClassName,
+			children: content
+		});
+	}
+	if (tooltip) return /* @__PURE__ */ jsx(Tooltip$1, {
+		title: tooltip,
+		placement: tooltipPlacement ?? "top",
+		children: element
+	});
+	return element;
+});
+ButtonUtility.displayName = "ButtonUtility";
+//#endregion
+export { ButtonUtility, buttonUtilityStyles };
+
+//# sourceMappingURL=button-utility.js.map

package/dist/button-utility/button-utility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-utility.js","names":["AriaLink","AriaButton","Tooltip"],"sources":["../../src/button-utility/button-utility.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/buttons/button-utility.tsx */\n\nimport type { FC, ReactNode, Ref } from 'react';\nimport { forwardRef, isValidElement } from 'react';\nimport type {\n  ButtonProps as AriaButtonProps,\n  LinkProps as AriaLinkProps,\n} from 'react-aria-components';\nimport { Button as AriaButton, Link as AriaLink } from 'react-aria-components';\nimport type { TooltipProps } from '../tooltip';\nimport { Tooltip } from '../tooltip';\nimport { cx } from '../utils/cx';\nimport { isReactComponent } from '../utils/is-react-component';\nimport type { VariantProps } from '../utils/tv';\nimport { tv } from '../utils/tv';\n\nexport const buttonUtilityStyles = tv({\n  base: [\n    'group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md p-1.5',\n    'outline-focus-ring transition duration-100 ease-linear',\n    'focus-visible:outline-2 focus-visible:outline-offset-2',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    '*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all',\n  ],\n  variants: {\n    size: {\n      xs: '*:data-icon:size-4',\n      sm: '*:data-icon:size-5',\n    },\n    color: {\n      secondary:\n        'bg-primary text-fg-quaternary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs',\n      tertiary: 'text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover',\n    },\n  },\n  defaultVariants: { size: 'sm', color: 'secondary' },\n});\n\ntype ButtonUtilityVariants = VariantProps<typeof buttonUtilityStyles>;\n\nexport interface ButtonUtilityBaseProps {\n  size?: ButtonUtilityVariants['size'];\n  color?: ButtonUtilityVariants['color'];\n  isDisabled?: boolean;\n  /** Icon-only button: an accessible name is required since no text label is rendered. */\n  'aria-label': string;\n  icon: FC<{ className?: string }> | ReactNode;\n  className?: string;\n  /** Tooltip content displayed on hover/focus. */\n  tooltip?: ReactNode;\n  /** Placement of the tooltip. @default 'top' */\n  tooltipPlacement?: TooltipProps['placement'];\n}\n\nexport interface ButtonUtilityProps\n  extends ButtonUtilityBaseProps,\n    Omit<AriaButtonProps, 'children' | 'className' | 'style' | 'aria-label'> {\n  href?: never;\n}\n\nexport interface ButtonUtilityLinkProps\n  extends ButtonUtilityBaseProps,\n    Omit<AriaLinkProps, 'children' | 'className' | 'style' | 'aria-label'> {\n  href: NonNullable<AriaLinkProps['href']>;\n}\n\nexport const ButtonUtility = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonUtilityProps | ButtonUtilityLinkProps\n>(function ButtonUtility(props, ref) {\n  const {\n    size,\n    color,\n    className,\n    icon: Icon,\n    isDisabled,\n    tooltip,\n    tooltipPlacement,\n    ...rest\n  } = props;\n\n  const href = 'href' in props ? props.href : undefined;\n\n  const sharedClassName = cx(buttonUtilityStyles({ size, color }), className);\n\n  const content = (\n    <>\n      {isValidElement(Icon) && Icon}\n      {isReactComponent(Icon) && <Icon data-icon />}\n    </>\n  );\n\n  let element: ReactNode;\n\n  if (href !== undefined) {\n    const { href: _drop, ...linkRest } = rest as ButtonUtilityLinkProps;\n    element = (\n      <AriaLink\n        {...linkRest}\n        {...(isDisabled ? { 'data-rac': true, 'data-disabled': true } : {})}\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={isDisabled ? undefined : href}\n        className={sharedClassName}\n      >\n        {content}\n      </AriaLink>\n    );\n  } else {\n    const buttonRest = rest as ButtonUtilityProps;\n    element = (\n      <AriaButton\n        {...buttonRest}\n        ref={ref as Ref<HTMLButtonElement>}\n        type={buttonRest.type ?? 'button'}\n        isDisabled={isDisabled}\n        className={sharedClassName}\n      >\n        {content}\n      </AriaButton>\n    );\n  }\n\n  if (tooltip) {\n    return (\n      <Tooltip title={tooltip} placement={tooltipPlacement ?? 'top'}>\n        {element}\n      </Tooltip>\n    );\n  }\n\n  return element;\n});\n\nButtonUtility.displayName = 'ButtonUtility';\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,sBAAsB,GAAG;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,WACE;GACF,UAAU;EACZ;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAY;AACpD,CAAC;AA8BD,MAAa,gBAAgB,WAG3B,SAAS,cAAc,OAAO,KAAK;CACnC,MAAM,EACJ,MACA,OACA,WACA,MAAM,MACN,YACA,SACA,kBACA,GAAG,SACD;CAEJ,MAAM,OAAO,UAAU,QAAQ,MAAM,OAAO;CAE5C,MAAM,kBAAkB,GAAG,oBAAoB;EAAE;EAAM;CAAM,CAAC,GAAG,SAAS;CAE1E,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,eAAe,IAAI,KAAK,MACxB,iBAAiB,IAAI,KAAK,oBAAC,MAAD,EAAM,aAAA,KAAW,CAAA,CAC5C,EAAA,CAAA;CAGJ,IAAI;CAEJ,IAAI,SAAS,QAAW;EACtB,MAAM,EAAE,MAAM,OAAO,GAAG,aAAa;EACrC,UACE,oBAACA,MAAD;GACE,GAAI;GACJ,GAAK,aAAa;IAAE,YAAY;IAAM,iBAAiB;GAAK,IAAI,CAAC;GAC5D;GACL,MAAM,aAAa,SAAY;GAC/B,WAAW;GAEV,UAAA;EACO,CAAA;CAEd,OAAO;EACL,MAAM,aAAa;EACnB,UACE,oBAACC,QAAD;GACE,GAAI;GACC;GACL,MAAM,WAAW,QAAQ;GACb;GACZ,WAAW;GAEV,UAAA;EACS,CAAA;CAEhB;CAEA,IAAI,SACF,OACE,oBAACC,WAAD;EAAS,OAAO;EAAS,WAAW,oBAAoB;EACrD,UAAA;CACM,CAAA;CAIb,OAAO;AACT,CAAC;AAED,cAAc,cAAc"}

package/dist/button-utility/index.d.ts

@@ -0,0 +1,2 @@
+import { ButtonUtility, ButtonUtilityLinkProps, ButtonUtilityProps, buttonUtilityStyles } from "./button-utility.js";
+export { ButtonUtility, type ButtonUtilityLinkProps, type ButtonUtilityProps, buttonUtilityStyles };

package/dist/button-utility/index.js

@@ -0,0 +1,2 @@
+import { ButtonUtility, buttonUtilityStyles } from "./button-utility.js";
+export { ButtonUtility, buttonUtilityStyles };

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { CheckboxProps as CheckboxProps$1 } from "react-aria-components";
+//#region src/checkbox/checkbox.d.ts
+export interface CheckboxBaseProps {
+  size?: 'sm' | 'md';
+  className?: string;
+  isFocusVisible?: boolean;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  isIndeterminate?: boolean;
+}
+export declare const CheckboxBase: {
+  ({ className, isSelected, isDisabled, isIndeterminate, size, isFocusVisible }: CheckboxBaseProps): import("react").JSX.Element;
+  displayName: string;
+};
+export interface CheckboxProps extends CheckboxProps$1 {
+  size?: 'sm' | 'md';
+  label?: ReactNode;
+  hint?: ReactNode;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement>>;
+//#endregion
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"mappings":";;;iBAUiB;EACf;EACA;EACA;EACA;EACA;EACA;;qBAGW;KAOV,WAAA,YAAA,YAAA,iBAAA,MAAA,kBAAA,oCAAiB,IAAA;;;iBA6DH,sBAAsB;EACrC;EACA,QAAQ;EACR,OAAO;;qBAGI,0BAAQ,0BAAA,gCAAA,cAAA"}

package/dist/checkbox/checkbox.js

@@ -0,0 +1,81 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "react-aria-components";
+//#region src/checkbox/checkbox.tsx
+const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset", size === "md" && "size-5 rounded-md", (isSelected || isIndeterminate) && "bg-brand-solid ring-brand-solid", isDisabled && "cursor-not-allowed opacity-50", isDisabled && !(isSelected || isIndeterminate) && "bg-tertiary", isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring", className),
+		children: [/* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 14 14",
+			fill: "none",
+			className: cx("pointer-events-none absolute h-3 w-2.5 text-fg-white opacity-0 transition-inherit-all", size === "md" && "size-3.5", isIndeterminate && "opacity-100"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M2.91675 7H11.0834",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}), /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 14 14",
+			fill: "none",
+			className: cx("pointer-events-none absolute size-3 text-fg-white opacity-0 transition-inherit-all", size === "md" && "size-3.5", isSelected && !isIndeterminate && "opacity-100"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+};
+CheckboxBase.displayName = "CheckboxBase";
+const checkboxSizes = {
+	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 Checkbox = forwardRef(function Checkbox({ label, hint, size = "sm", className, ...ariaCheckboxProps }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox$1, {
+		...ariaCheckboxProps,
+		ref,
+		className: (state) => cx("flex items-start", state.isDisabled && "cursor-not-allowed", checkboxSizes[size].root, typeof className === "function" ? className(state) : className),
+		children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckboxBase, {
+			size,
+			isSelected,
+			isIndeterminate,
+			isDisabled,
+			isFocusVisible,
+			className: label || hint ? "mt-0.5" : ""
+		}), (label || hint) && /* @__PURE__ */ jsxs("div", {
+			className: cx("inline-flex flex-col", checkboxSizes[size].textWrapper),
+			children: [label && /* @__PURE__ */ jsx("p", {
+				className: cx("text-secondary select-none", checkboxSizes[size].label),
+				children: label
+			}), hint && /* @__PURE__ */ jsx("span", {
+				className: cx("text-tertiary", checkboxSizes[size].hint),
+				onClick: (event) => event.stopPropagation(),
+				children: hint
+			})]
+		})] })
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox, CheckboxBase };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/checkbox/checkbox.tsx */\n\nimport type { ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport type { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';\nimport { Checkbox as AriaCheckbox } from 'react-aria-components';\nimport { cx } from '../utils/cx';\n\nexport interface CheckboxBaseProps {\n  size?: 'sm' | 'md';\n  className?: string;\n  isFocusVisible?: boolean;\n  isSelected?: boolean;\n  isDisabled?: boolean;\n  isIndeterminate?: boolean;\n}\n\nexport const CheckboxBase = ({\n  className,\n  isSelected,\n  isDisabled,\n  isIndeterminate,\n  size = 'sm',\n  isFocusVisible = false,\n}: CheckboxBaseProps) => {\n  return (\n    <div\n      className={cx(\n        'relative flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset',\n        size === 'md' && 'size-5 rounded-md',\n        (isSelected || isIndeterminate) && 'bg-brand-solid ring-brand-solid',\n        isDisabled && 'cursor-not-allowed opacity-50',\n        isDisabled && !(isSelected || isIndeterminate) && 'bg-tertiary',\n        isFocusVisible && 'outline-2 outline-offset-2 outline-focus-ring',\n        className,\n      )}\n    >\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 14 14\"\n        fill=\"none\"\n        className={cx(\n          'pointer-events-none absolute h-3 w-2.5 text-fg-white opacity-0 transition-inherit-all',\n          size === 'md' && 'size-3.5',\n          isIndeterminate && 'opacity-100',\n        )}\n      >\n        <path\n          d=\"M2.91675 7H11.0834\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 14 14\"\n        fill=\"none\"\n        className={cx(\n          'pointer-events-none absolute size-3 text-fg-white opacity-0 transition-inherit-all',\n          size === 'md' && 'size-3.5',\n          isSelected && !isIndeterminate && 'opacity-100',\n        )}\n      >\n        <path\n          d=\"M11.6666 3.5L5.24992 9.91667L2.33325 7\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </div>\n  );\n};\n\nCheckboxBase.displayName = 'CheckboxBase';\n\nconst checkboxSizes = {\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 CheckboxProps extends AriaCheckboxProps {\n  size?: 'sm' | 'md';\n  label?: ReactNode;\n  hint?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(function Checkbox(\n  { label, hint, size = 'sm', className, ...ariaCheckboxProps },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...ariaCheckboxProps}\n      ref={ref}\n      className={(state) =>\n        cx(\n          'flex items-start',\n          state.isDisabled && 'cursor-not-allowed',\n          checkboxSizes[size].root,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (\n        <>\n          <CheckboxBase\n            size={size}\n            isSelected={isSelected}\n            isIndeterminate={isIndeterminate}\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', checkboxSizes[size].textWrapper)}>\n              {label && (\n                <p className={cx('text-secondary select-none', checkboxSizes[size].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 checkbox.\n                // biome-ignore lint/a11y/useKeyWithClickEvents: not a keyboard-operable control, purely stops propagation.\n                <span\n                  className={cx('text-tertiary', checkboxSizes[size].hint)}\n                  onClick={(event) => event.stopPropagation()}\n                >\n                  {hint}\n                </span>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":";;;;;;AAmBA,MAAa,gBAAgB,EAC3B,WACA,YACA,YACA,iBACA,OAAO,MACP,iBAAiB,YACM;CACvB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,8IACA,SAAS,QAAQ,sBAChB,cAAc,oBAAoB,mCACnC,cAAc,iCACd,cAAc,EAAE,cAAc,oBAAoB,eAClD,kBAAkB,iDAClB,SACF;EATF,UAAA,CAWE,oBAAC,OAAD;GACE,eAAY;GACZ,SAAQ;GACR,MAAK;GACL,WAAW,GACT,yFACA,SAAS,QAAQ,YACjB,mBAAmB,aACrB;GAEA,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,GAEL,oBAAC,OAAD;GACE,eAAY;GACZ,SAAQ;GACR,MAAK;GACL,WAAW,GACT,sFACA,SAAS,QAAQ,YACjB,cAAc,CAAC,mBAAmB,aACpC;GAEA,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,CACF;;AAET;AAEA,aAAa,cAAc;AAE3B,MAAM,gBAAgB;CACpB,IAAI;EAAE,MAAM;EAAS,aAAa;EAAI,OAAO;EAAuB,MAAM;CAAU;CACpF,IAAI;EAAE,MAAM;EAAS,aAAa;EAAW,OAAO;EAAuB,MAAM;CAAU;AAC7F;AAQA,MAAa,WAAW,WAA4C,SAAS,SAC3E,EAAE,OAAO,MAAM,OAAO,MAAM,WAAW,GAAG,qBAC1C,KACA;CACA,OACE,oBAACA,YAAD;EACE,GAAI;EACC;EACL,YAAY,UACV,GACE,oBACA,MAAM,cAAc,sBACpB,cAAc,KAAK,CAAC,MACpB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAGA,WAAA,EAAE,YAAY,iBAAiB,YAAY,qBAC3C,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,cAAD;GACQ;GACM;GACK;GACL;GACI;GAChB,WAAW,SAAS,OAAO,WAAW;EACvC,CAAA,IACC,SAAS,SACT,qBAAC,OAAD;GAAK,WAAW,GAAG,wBAAwB,cAAc,KAAK,CAAC,WAAW;GAA1E,UAAA,CACG,SACC,oBAAC,KAAD;IAAG,WAAW,GAAG,8BAA8B,cAAc,KAAK,CAAC,KAAK;IACrE,UAAA;GACA,CAAA,GAEJ,QAGC,oBAAC,QAAD;IACE,WAAW,GAAG,iBAAiB,cAAc,KAAK,CAAC,IAAI;IACvD,UAAU,UAAU,MAAM,gBAAgB;IAEzC,UAAA;GACG,CAAA,CAEL;EAEP,CAAA,CAAA,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC;AAED,SAAS,cAAc"}

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxBase, CheckboxBaseProps, CheckboxProps } from "./checkbox.js";
+export { Checkbox, CheckboxBase, type CheckboxBaseProps, type CheckboxProps };

package/dist/checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxBase } from "./checkbox.js";
+export { Checkbox, CheckboxBase };

package/dist/dropdown/dropdown.d.ts

@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { ButtonProps, MenuItemProps, MenuProps, MenuTrigger, PopoverProps, SeparatorProps } from "react-aria-components";
+//#region src/dropdown/dropdown.d.ts
+export interface DropdownItemProps extends MenuItemProps {
+  /** The label of the item to be displayed. */
+  label?: string;
+  /** An addon to be displayed on the right side of the item. */
+  addon?: string;
+  /** If true, the item renders with no built-in styling (custom content only). */
+  unstyled?: boolean;
+  /** An icon to be displayed on the left side of the item. */
+  icon?: FC<{
+    className?: string;
+  }>;
+  /** Avatar image URL to be displayed on the left side of the item. */
+  avatarUrl?: string;
+  /** The selection indicator to be displayed on the item. */
+  selectionIndicator?: 'checkmark' | 'checkbox' | 'radio' | 'none';
+}
+export interface DropdownMenuProps<T extends object> extends MenuProps<T> {}
+export interface DropdownPopoverProps extends PopoverProps {}
+export declare const Dropdown: {
+  Root: typeof MenuTrigger;
+  Popover: (props: DropdownPopoverProps) => import("react").JSX.Element;
+  Menu: <T extends object>(props: DropdownMenuProps<T>) => import("react").JSX.Element;
+  Section: <T>(props: import("react-aria-components").MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => import("react").ReactElement | null;
+  SectionHeader: (props: import("react-aria-components").HeaderProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+  Item: ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator, ...props }: DropdownItemProps) => import("react").JSX.Element;
+  Separator: (props: SeparatorProps) => import("react").JSX.Element;
+  DotsButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/dropdown/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","names":[],"sources":["../../src/dropdown/dropdown.tsx"],"mappings":";;;iBA6BiB,0BAA0B;;EAEzC;;EAEA;;EAEA;;EAEA,OAAO;IAAK;;;EAEZ;;EAEA;;iBA+He,kBAAkB,0BAA0B,UAAc;iBAgB1D,6BAA6B;qBAuDjC;;EArDmB,UAAA,OAAA,yCAAoB,IAAA;EAhB9B,OAAA,kBAAgB,OAAS,kBAAkB,uBAAE,IAAA;;;EArHhE,SAAA,OAAA,UAAA,OAAA,MAAA,MAAA,WAAA,UAAA,uBAAA,SAAA,sCAAiB,IAAA;EA0Jc,YAAA,OAAA,mCAAkB,IAAA"}

package/dist/dropdown/dropdown.js

@@ -0,0 +1,128 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { Avatar } from "../avatar/avatar.js";
+import "../avatar/index.js";
+import { CheckboxBase } from "../checkbox/checkbox.js";
+import "../checkbox/index.js";
+import { RadioButtonBase } from "../radio-buttons/radio-buttons.js";
+import "../radio-buttons/index.js";
+import { Check, ChevronRight, DotsVertical } from "@kavagy/icons";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, Separator } from "react-aria-components";
+//#region src/dropdown/dropdown.tsx
+const DropdownItem = ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator = "checkmark", ...props }) => {
+	if (unstyled) return /* @__PURE__ */ jsx(MenuItem, {
+		id: label,
+		textValue: label,
+		...props
+	});
+	return /* @__PURE__ */ jsx(MenuItem, {
+		...props,
+		className: (state) => cx("group block cursor-pointer px-1.5 py-px outline-hidden", state.isDisabled && "cursor-not-allowed opacity-50", typeof props.className === "function" ? props.className(state) : props.className),
+		children: (state) => /* @__PURE__ */ jsxs("div", {
+			className: cx("relative flex items-center rounded-md px-2.5 py-2 outline-focus-ring transition duration-100 ease-linear", !state.isDisabled && "group-hover:bg-primary_hover", state.isFocused && "bg-primary_hover", state.isFocusVisible && "outline-2 -outline-offset-2", state.hasSubmenu && "pr-1.5"),
+			children: [
+				state.selectionMode !== "none" && !avatarUrl && !Icon && selectionIndicator !== "none" && /* @__PURE__ */ jsxs(Fragment, { children: [
+					selectionIndicator === "checkmark" && /* @__PURE__ */ jsx(Check, {
+						"aria-hidden": "true",
+						className: cx("mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary", !state.isSelected && "invisible")
+					}),
+					selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, {
+						size: "sm",
+						isSelected: state.isSelected,
+						className: "mr-2 shrink-0"
+					}),
+					selectionIndicator === "radio" && /* @__PURE__ */ jsx(RadioButtonBase, {
+						size: "sm",
+						isSelected: state.isSelected,
+						className: "mr-2 shrink-0"
+					})
+				] }),
+				avatarUrl && /* @__PURE__ */ jsx(Avatar, {
+					src: avatarUrl,
+					alt: "",
+					size: "xs",
+					rounded: true,
+					className: "mr-2 size-5 shrink-0"
+				}),
+				Icon && /* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					className: "mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cx("grow truncate text-sm font-semibold text-secondary", state.isFocused && "text-secondary_hover"),
+					children: label || (typeof children === "function" ? children(state) : children)
+				}),
+				addon && /* @__PURE__ */ jsx("span", {
+					className: "ml-1 shrink-0 pr-1 text-xs font-medium text-quaternary",
+					children: addon
+				}),
+				state.selectionMode !== "none" && (avatarUrl || Icon) && selectionIndicator !== "none" && /* @__PURE__ */ jsxs(Fragment, { children: [
+					selectionIndicator === "checkmark" && /* @__PURE__ */ jsx(Check, {
+						"aria-hidden": "true",
+						className: cx("ml-1 size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary", !state.isSelected && "invisible")
+					}),
+					selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, {
+						size: "sm",
+						isSelected: state.isSelected,
+						className: "ml-1 shrink-0"
+					}),
+					selectionIndicator === "radio" && /* @__PURE__ */ jsx(RadioButtonBase, {
+						size: "sm",
+						isSelected: state.isSelected,
+						className: "ml-1 shrink-0"
+					})
+				] }),
+				state.hasSubmenu && /* @__PURE__ */ jsx(ChevronRight, {
+					"aria-hidden": "true",
+					className: "ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-quaternary"
+				})
+			]
+		})
+	});
+};
+const DropdownMenu = (props) => {
+	return /* @__PURE__ */ jsx(Menu, {
+		...props,
+		className: (state) => cx("h-min overflow-y-auto py-1 outline-hidden select-none", typeof props.className === "function" ? props.className(state) : props.className)
+	});
+};
+const DropdownPopover = (props) => {
+	return /* @__PURE__ */ jsx(Popover, {
+		placement: "bottom right",
+		...props,
+		className: (state) => cx("w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt 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", typeof props.className === "function" ? props.className(state) : props.className),
+		children: props.children
+	});
+};
+const DropdownSeparator = (props) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		...props,
+		className: cx("my-1 h-px w-full bg-border-secondary", props.className)
+	});
+};
+const DropdownDotsButton = forwardRef(function DropdownDotsButton(props, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? "Open menu",
+		className: (state) => cx("cursor-pointer rounded-md text-fg-quaternary outline-focus-ring transition duration-100 ease-linear", (state.isPressed || state.isHovered) && "text-fg-quaternary_hover", (state.isPressed || state.isFocusVisible) && "outline-2 outline-offset-2", typeof props.className === "function" ? props.className(state) : props.className),
+		children: /* @__PURE__ */ jsx(DotsVertical, { className: "size-5 transition-inherit-all" })
+	});
+});
+DropdownDotsButton.displayName = "DropdownDotsButton";
+const Dropdown = {
+	Root: MenuTrigger,
+	Popover: DropdownPopover,
+	Menu: DropdownMenu,
+	Section: MenuSection,
+	SectionHeader: Header,
+	Item: DropdownItem,
+	Separator: DropdownSeparator,
+	DotsButton: DropdownDotsButton
+};
+//#endregion
+export { Dropdown };
+
+//# sourceMappingURL=dropdown.js.map

package/dist/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","names":["AriaMenuItem","AriaMenu","AriaPopover","AriaSeparator","AriaButton","AriaMenuTrigger","AriaMenuSection","AriaHeader"],"sources":["../../src/dropdown/dropdown.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/dropdown/dropdown.tsx */\n\nimport { Check, ChevronRight, DotsVertical } from '@kavagy/icons';\nimport type { FC } from 'react';\nimport { forwardRef } from 'react';\nimport type {\n  ButtonProps as AriaButtonProps,\n  MenuItemProps as AriaMenuItemProps,\n  MenuProps as AriaMenuProps,\n  PopoverProps as AriaPopoverProps,\n  SeparatorProps as AriaSeparatorProps,\n} from 'react-aria-components';\nimport {\n  Button as AriaButton,\n  Header as AriaHeader,\n  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  MenuSection as AriaMenuSection,\n  MenuTrigger as AriaMenuTrigger,\n  Popover as AriaPopover,\n  Separator as AriaSeparator,\n} from 'react-aria-components';\nimport { Avatar } from '../avatar';\nimport { CheckboxBase } from '../checkbox';\nimport { RadioButtonBase } from '../radio-buttons';\nimport { cx } from '../utils/cx';\n\nexport interface DropdownItemProps extends AriaMenuItemProps {\n  /** The label of the item to be displayed. */\n  label?: string;\n  /** An addon to be displayed on the right side of the item. */\n  addon?: string;\n  /** If true, the item renders with no built-in styling (custom content only). */\n  unstyled?: boolean;\n  /** An icon to be displayed on the left side of the item. */\n  icon?: FC<{ className?: string }>;\n  /** Avatar image URL to be displayed on the left side of the item. */\n  avatarUrl?: string;\n  /** The selection indicator to be displayed on the item. */\n  selectionIndicator?: 'checkmark' | 'checkbox' | 'radio' | 'none';\n}\n\nconst DropdownItem = ({\n  label,\n  children,\n  addon,\n  icon: Icon,\n  avatarUrl,\n  unstyled,\n  selectionIndicator = 'checkmark',\n  ...props\n}: DropdownItemProps) => {\n  if (unstyled) {\n    return <AriaMenuItem id={label} textValue={label} {...props} />;\n  }\n\n  return (\n    <AriaMenuItem\n      {...props}\n      className={(state) =>\n        cx(\n          'group block cursor-pointer px-1.5 py-px outline-hidden',\n          state.isDisabled && 'cursor-not-allowed opacity-50',\n          typeof props.className === 'function' ? props.className(state) : props.className,\n        )\n      }\n    >\n      {(state) => (\n        <div\n          className={cx(\n            'relative flex items-center rounded-md px-2.5 py-2 outline-focus-ring transition duration-100 ease-linear',\n            !state.isDisabled && 'group-hover:bg-primary_hover',\n            state.isFocused && 'bg-primary_hover',\n            state.isFocusVisible && 'outline-2 -outline-offset-2',\n            state.hasSubmenu && 'pr-1.5',\n          )}\n        >\n          {state.selectionMode !== 'none' &&\n            !avatarUrl &&\n            !Icon &&\n            selectionIndicator !== 'none' && (\n              <>\n                {selectionIndicator === 'checkmark' && (\n                  <Check\n                    aria-hidden=\"true\"\n                    className={cx(\n                      'mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary',\n                      !state.isSelected && 'invisible',\n                    )}\n                  />\n                )}\n                {selectionIndicator === 'checkbox' && (\n                  <CheckboxBase size=\"sm\" isSelected={state.isSelected} className=\"mr-2 shrink-0\" />\n                )}\n                {selectionIndicator === 'radio' && (\n                  <RadioButtonBase\n                    size=\"sm\"\n                    isSelected={state.isSelected}\n                    className=\"mr-2 shrink-0\"\n                  />\n                )}\n              </>\n            )}\n\n          {avatarUrl && (\n            <Avatar src={avatarUrl} alt=\"\" size=\"xs\" rounded className=\"mr-2 size-5 shrink-0\" />\n          )}\n\n          {Icon && (\n            <Icon\n              aria-hidden=\"true\"\n              className=\"mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary\"\n            />\n          )}\n\n          <span\n            className={cx(\n              'grow truncate text-sm font-semibold text-secondary',\n              state.isFocused && 'text-secondary_hover',\n            )}\n          >\n            {label || (typeof children === 'function' ? children(state) : children)}\n          </span>\n\n          {addon && (\n            <span className=\"ml-1 shrink-0 pr-1 text-xs font-medium text-quaternary\">{addon}</span>\n          )}\n\n          {state.selectionMode !== 'none' &&\n            (avatarUrl || Icon) &&\n            selectionIndicator !== 'none' && (\n              <>\n                {selectionIndicator === 'checkmark' && (\n                  <Check\n                    aria-hidden=\"true\"\n                    className={cx(\n                      'ml-1 size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary',\n                      !state.isSelected && 'invisible',\n                    )}\n                  />\n                )}\n                {selectionIndicator === 'checkbox' && (\n                  <CheckboxBase size=\"sm\" isSelected={state.isSelected} className=\"ml-1 shrink-0\" />\n                )}\n                {selectionIndicator === 'radio' && (\n                  <RadioButtonBase\n                    size=\"sm\"\n                    isSelected={state.isSelected}\n                    className=\"ml-1 shrink-0\"\n                  />\n                )}\n              </>\n            )}\n\n          {state.hasSubmenu && (\n            <ChevronRight\n              aria-hidden=\"true\"\n              className=\"ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-quaternary\"\n            />\n          )}\n        </div>\n      )}\n    </AriaMenuItem>\n  );\n};\n\nexport interface DropdownMenuProps<T extends object> extends AriaMenuProps<T> {}\n\nconst DropdownMenu = <T extends object>(props: DropdownMenuProps<T>) => {\n  return (\n    <AriaMenu\n      {...props}\n      className={(state) =>\n        cx(\n          'h-min overflow-y-auto py-1 outline-hidden select-none',\n          typeof props.className === 'function' ? props.className(state) : props.className,\n        )\n      }\n    />\n  );\n};\n\nexport interface DropdownPopoverProps extends AriaPopoverProps {}\n\nconst DropdownPopover = (props: DropdownPopoverProps) => {\n  return (\n    <AriaPopover\n      placement=\"bottom right\"\n      {...props}\n      className={(state) =>\n        cx(\n          'w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt 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          typeof props.className === 'function' ? props.className(state) : props.className,\n        )\n      }\n    >\n      {props.children}\n    </AriaPopover>\n  );\n};\n\nconst DropdownSeparator = (props: AriaSeparatorProps) => {\n  return (\n    <AriaSeparator\n      {...props}\n      className={cx('my-1 h-px w-full bg-border-secondary', props.className)}\n    />\n  );\n};\n\nconst DropdownDotsButton = forwardRef<HTMLButtonElement, AriaButtonProps>(\n  function DropdownDotsButton(props, ref) {\n    return (\n      <AriaButton\n        {...props}\n        ref={ref}\n        aria-label={props['aria-label'] ?? 'Open menu'}\n        className={(state) =>\n          cx(\n            'cursor-pointer rounded-md text-fg-quaternary outline-focus-ring transition duration-100 ease-linear',\n            (state.isPressed || state.isHovered) && 'text-fg-quaternary_hover',\n            (state.isPressed || state.isFocusVisible) && 'outline-2 outline-offset-2',\n            typeof props.className === 'function' ? props.className(state) : props.className,\n          )\n        }\n      >\n        <DotsVertical className=\"size-5 transition-inherit-all\" />\n      </AriaButton>\n    );\n  },\n);\nDropdownDotsButton.displayName = 'DropdownDotsButton';\n\nexport const Dropdown = {\n  Root: AriaMenuTrigger,\n  Popover: DropdownPopover,\n  Menu: DropdownMenu,\n  Section: AriaMenuSection,\n  SectionHeader: AriaHeader,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n  DotsButton: DropdownDotsButton,\n};\n"],"mappings":"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"}

package/dist/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+import { Dropdown, DropdownItemProps, DropdownMenuProps, DropdownPopoverProps } from "./dropdown.js";
+export { Dropdown, type DropdownItemProps, type DropdownMenuProps, type DropdownPopoverProps };

package/dist/dropdown/index.js

@@ -0,0 +1,2 @@
+import { Dropdown } from "./dropdown.js";
+export { Dropdown };