@kavagy/react 0.1.1

package/dist/textarea/textarea.js

@@ -0,0 +1,74 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import { HintText, Label as Label$1 } from "../input/input.js";
+import "../input/index.js";
+import { HelpCircle } from "@kavagy/icons";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TextArea as TextArea$1, TextField } from "react-aria-components";
+//#region src/textarea/textarea.tsx
+const getResizeHandleBg = (color) => {
+	return `url(data:image/svg+xml;base64,${btoa(`<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 10" stroke="${color}" stroke-linecap="round"/><path d="M11 7L7 11" stroke="${color}" stroke-linecap="round"/></svg>`)})`;
+};
+const TextAreaBase = forwardRef(function TextAreaBase({ className, size = "md", style, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TextArea$1, {
+		...props,
+		ref,
+		style: {
+			...style,
+			"--resize-handle-bg": getResizeHandleBg("#D5D7DA"),
+			"--resize-handle-bg-dark": getResizeHandleBg("#373A41")
+		},
+		className: (state) => cx("w-full scroll-py-3 rounded-lg bg-primary text-primary shadow-xs ring-1 ring-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden", size === "sm" && "p-3 text-sm", size === "md" && "px-3.5 py-3 text-md", "[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)", state.isFocused && !state.isDisabled && "ring-2 ring-focus-ring", state.isDisabled && "cursor-not-allowed opacity-50", state.isInvalid && "ring-error_subtle", state.isInvalid && state.isFocused && "ring-2 ring-error", typeof className === "function" ? className(state) : className)
+	});
+});
+TextAreaBase.displayName = "TextAreaBase";
+const TextArea = forwardRef(function TextArea({ label, hint, hideRequiredIndicator, tooltip, tooltipPlacement, textAreaClassName, placeholder, className, rows, cols, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(TextField, {
+		...props,
+		className: (state) => cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className),
+		children: ({ isInvalid, isRequired }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			(label || tooltip) && /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center justify-between gap-1",
+				children: [label && /* @__PURE__ */ jsx(Label$1, {
+					isRequired: hideRequiredIndicator ? !hideRequiredIndicator : isRequired,
+					isInvalid,
+					children: label
+				}), tooltip && /* @__PURE__ */ jsx(Tooltip$1, {
+					title: tooltip,
+					placement: tooltipPlacement ?? "top",
+					children: /* @__PURE__ */ jsxs(TooltipTrigger$1, {
+						className: "text-fg-quaternary hover:text-fg-quaternary_hover",
+						children: [/* @__PURE__ */ jsx(HelpCircle, {
+							"aria-hidden": "true",
+							className: "size-4"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "More information"
+						})]
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(TextAreaBase, {
+				ref,
+				placeholder,
+				className: textAreaClassName,
+				rows,
+				cols,
+				size
+			}),
+			hint && /* @__PURE__ */ jsx(HintText, {
+				isInvalid,
+				size,
+				children: hint
+			})
+		] })
+	});
+});
+TextArea.displayName = "TextArea";
+//#endregion
+export { TextArea, TextAreaBase };
+
+//# sourceMappingURL=textarea.js.map

package/dist/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":["AriaTextArea","AriaTextField","Label","Tooltip","TooltipTrigger"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/textarea/textarea.tsx */\n\nimport { HelpCircle } from '@kavagy/icons';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport type {\n  TextAreaProps as AriaTextAreaProps,\n  TextFieldProps as AriaTextFieldProps,\n} from 'react-aria-components';\nimport { TextArea as AriaTextArea, TextField as AriaTextField } from 'react-aria-components';\nimport { HintText, Label } from '../input';\nimport type { TooltipProps } from '../tooltip';\nimport { Tooltip, TooltipTrigger } from '../tooltip';\nimport { cx } from '../utils/cx';\n\nconst getResizeHandleBg = (color: string) => {\n  return `url(data:image/svg+xml;base64,${btoa(\n    `<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 2L2 10\" stroke=\"${color}\" stroke-linecap=\"round\"/><path d=\"M11 7L7 11\" stroke=\"${color}\" stroke-linecap=\"round\"/></svg>`,\n  )})`;\n};\n\nexport interface TextAreaBaseProps extends AriaTextAreaProps {\n  size?: 'sm' | 'md';\n}\n\nexport const TextAreaBase = forwardRef<HTMLTextAreaElement, TextAreaBaseProps>(\n  function TextAreaBase({ className, size = 'md', style, ...props }, ref) {\n    return (\n      <AriaTextArea\n        {...props}\n        ref={ref}\n        style={\n          {\n            ...style,\n            '--resize-handle-bg': getResizeHandleBg('#D5D7DA'),\n            '--resize-handle-bg-dark': getResizeHandleBg('#373A41'),\n          } as CSSProperties\n        }\n        className={(state) =>\n          cx(\n            'w-full scroll-py-3 rounded-lg bg-primary text-primary shadow-xs ring-1 ring-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden',\n            size === 'sm' && 'p-3 text-sm',\n            size === 'md' && 'px-3.5 py-3 text-md',\n            '[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)',\n            state.isFocused && !state.isDisabled && 'ring-2 ring-focus-ring',\n            state.isDisabled && 'cursor-not-allowed opacity-50',\n            state.isInvalid && 'ring-error_subtle',\n            state.isInvalid && state.isFocused && 'ring-2 ring-error',\n            typeof className === 'function' ? className(state) : className,\n          )\n        }\n      />\n    );\n  },\n);\n\nTextAreaBase.displayName = 'TextAreaBase';\n\nexport interface TextAreaProps extends AriaTextFieldProps {\n  label?: string;\n  hint?: ReactNode;\n  size?: TextAreaBaseProps['size'];\n  textAreaClassName?: TextAreaBaseProps['className'];\n  hideRequiredIndicator?: boolean;\n  placeholder?: string;\n  rows?: number;\n  cols?: number;\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 TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n  {\n    label,\n    hint,\n    hideRequiredIndicator,\n    tooltip,\n    tooltipPlacement,\n    textAreaClassName,\n    placeholder,\n    className,\n    rows,\n    cols,\n    size = 'md',\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaTextField\n      {...props}\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      {({ isInvalid, isRequired }) => (\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          <TextAreaBase\n            ref={ref}\n            placeholder={placeholder}\n            className={textAreaClassName}\n            rows={rows}\n            cols={cols}\n            size={size}\n          />\n\n          {hint && (\n            <HintText isInvalid={isInvalid} size={size}>\n              {hint}\n            </HintText>\n          )}\n        </>\n      )}\n    </AriaTextField>\n  );\n});\n\nTextArea.displayName = 'TextArea';\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,qBAAqB,UAAkB;CAC3C,OAAO,iCAAiC,KACtC,+HAA+H,MAAM,yDAAyD,MAAM,iCACtM,EAAE;AACJ;AAMA,MAAa,eAAe,WAC1B,SAAS,aAAa,EAAE,WAAW,OAAO,MAAM,OAAO,GAAG,SAAS,KAAK;CACtE,OACE,oBAACA,YAAD;EACE,GAAI;EACC;EACL,OACE;GACE,GAAG;GACH,sBAAsB,kBAAkB,SAAS;GACjD,2BAA2B,kBAAkB,SAAS;EACxD;EAEF,YAAY,UACV,GACE,kOACA,SAAS,QAAQ,eACjB,SAAS,QAAQ,uBACjB,mJACA,MAAM,aAAa,CAAC,MAAM,cAAc,0BACxC,MAAM,cAAc,iCACpB,MAAM,aAAa,qBACnB,MAAM,aAAa,MAAM,aAAa,qBACtC,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;CAEH,CAAA;AAEL,CACF;AAEA,aAAa,cAAc;AAiB3B,MAAa,WAAW,WAA+C,SAAS,SAC9E,EACE,OACA,MACA,uBACA,SACA,kBACA,mBACA,aACA,WACA,MACA,MACA,OAAO,MACP,GAAG,SAEL,KACA;CACA,OACE,oBAACC,WAAD;EACE,GAAI;EACJ,YAAY,UACV,GACE,sEACA,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAGA,WAAA,EAAE,WAAW,iBACb,qBAAA,UAAA,EAAA,UAAA;IACI,SAAS,YACT,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SACC,oBAACC,SAAD;KACE,YAAY,wBAAwB,CAAC,wBAAwB;KAClD;KAEV,UAAA;IACI,CAAA,GAGR,WACC,oBAACC,WAAD;KAAS,OAAO;KAAS,WAAW,oBAAoB;KACtD,UAAA,qBAACC,kBAAD;MAAgB,WAAU;MAA1B,UAAA,CACE,oBAAC,YAAD;OAAY,eAAY;OAAO,WAAU;MAAU,CAAA,GACnD,oBAAC,QAAD;OAAM,WAAU;OAAU,UAAA;MAAsB,CAAA,CAClC;;IACT,CAAA,CAER;;GAGP,oBAAC,cAAD;IACO;IACQ;IACb,WAAW;IACL;IACA;IACA;GACP,CAAA;GAEA,QACC,oBAAC,UAAD;IAAqB;IAAiB;IACnC,UAAA;GACO,CAAA;EAEZ,EAAA,CAAA;CAES,CAAA;AAEnB,CAAC;AAED,SAAS,cAAc"}

package/dist/toggle/index.d.ts

@@ -0,0 +1,2 @@
+import { Toggle, ToggleProps, toggleStyles } from "./toggle.js";
+export { Toggle, type ToggleProps, toggleStyles };

package/dist/toggle/index.js

@@ -0,0 +1,2 @@
+import { Toggle, toggleStyles } from "./toggle.js";
+export { Toggle, toggleStyles };

package/dist/toggle/toggle.d.ts

@@ -0,0 +1,151 @@
+import { VariantProps } from "../utils/tv.js";
+import { ReactNode } from "react";
+import { SwitchProps } from "react-aria-components";
+//#region src/toggle/toggle.d.ts
+export declare const toggleStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      track: string;
+      thumb: string;
+      label: string;
+      hint: string;
+    };
+    md: {
+      root: string;
+      track: string;
+      thumb: string;
+      textWrapper: string;
+      label: string;
+      hint: string;
+    };
+  };
+  slim: {
+    true: {};
+  };
+  isSelected: {
+    true: {};
+  };
+  isDisabled: {
+    true: {
+      root: string;
+      track: string;
+    };
+  };
+  isFocusVisible: {
+    true: {
+      track: string;
+    };
+  };
+  isHovered: {
+    true: {};
+  };
+}, {
+  root: string;
+  track: string;
+  thumb: string;
+  textWrapper: string;
+  label: string;
+  hint: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+      track: string;
+      thumb: string;
+      label: string;
+      hint: string;
+    };
+    md: {
+      root: string;
+      track: string;
+      thumb: string;
+      textWrapper: string;
+      label: string;
+      hint: string;
+    };
+  };
+  slim: {
+    true: {};
+  };
+  isSelected: {
+    true: {};
+  };
+  isDisabled: {
+    true: {
+      root: string;
+      track: string;
+    };
+  };
+  isFocusVisible: {
+    true: {
+      track: string;
+    };
+  };
+  isHovered: {
+    true: {};
+  };
+}, {
+  root: string;
+  track: string;
+  thumb: string;
+  textWrapper: string;
+  label: string;
+  hint: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      track: string;
+      thumb: string;
+      label: string;
+      hint: string;
+    };
+    md: {
+      root: string;
+      track: string;
+      thumb: string;
+      textWrapper: string;
+      label: string;
+      hint: string;
+    };
+  };
+  slim: {
+    true: {};
+  };
+  isSelected: {
+    true: {};
+  };
+  isDisabled: {
+    true: {
+      root: string;
+      track: string;
+    };
+  };
+  isFocusVisible: {
+    true: {
+      track: string;
+    };
+  };
+  isHovered: {
+    true: {};
+  };
+}, {
+  root: string;
+  track: string;
+  thumb: string;
+  textWrapper: string;
+  label: string;
+  hint: string;
+}, undefined, unknown, unknown, undefined>>;
+type ToggleVariants = VariantProps<typeof toggleStyles>;
+export interface ToggleProps extends Omit<SwitchProps, 'className' | 'children'> {
+  size?: ToggleVariants['size'];
+  label?: string;
+  hint?: ReactNode;
+  slim?: boolean;
+  className?: string;
+}
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLLabelElement>>;
+//#endregion
+//# sourceMappingURL=toggle.d.ts.map

package/dist/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","names":[],"sources":["../../src/toggle/toggle.tsx"],"mappings":";;;;qBAYa,0CAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDpB,iBAAiB,oBAAoB;iBAEzB,oBAAoB,KAAK;EACxC,OAAO;EACP;EACA,OAAO;EACP;EACA;;qBAGW,wBAAM,0BAAA,8BAAA,cAAA"}

package/dist/toggle/toggle.js

@@ -0,0 +1,145 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { tv } from "../utils/tv.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "react-aria-components";
+//#region src/toggle/toggle.tsx
+const toggleStyles = tv({
+	slots: {
+		root: "flex w-max items-start",
+		track: "cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
+		thumb: "rounded-full bg-fg-white shadow-sm transition-transform duration-150 ease-in-out",
+		textWrapper: "flex flex-col",
+		label: "text-secondary font-medium select-none",
+		hint: "text-tertiary"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "gap-2",
+				track: "h-5 w-9 p-0.5",
+				thumb: "size-4",
+				label: "text-sm",
+				hint: "text-sm"
+			},
+			md: {
+				root: "gap-3",
+				track: "h-6 w-11 p-0.5",
+				thumb: "size-5",
+				textWrapper: "gap-0.5",
+				label: "text-md",
+				hint: "text-md"
+			}
+		},
+		slim: { true: {} },
+		isSelected: { true: {} },
+		isDisabled: { true: {
+			root: "cursor-not-allowed",
+			track: "cursor-not-allowed opacity-50"
+		} },
+		isFocusVisible: { true: { track: "outline-2 outline-offset-2" } },
+		isHovered: { true: {} }
+	},
+	compoundVariants: [
+		{
+			slim: true,
+			size: "sm",
+			class: { track: "h-4 w-8 p-0" }
+		},
+		{
+			slim: true,
+			size: "md",
+			class: { track: "h-5 w-10 p-0" }
+		},
+		{
+			slim: true,
+			class: {
+				track: "ring-1",
+				thumb: "shadow-xs border border-primary"
+			}
+		},
+		{
+			slim: true,
+			isSelected: true,
+			class: {
+				track: "ring-transparent",
+				thumb: "border-brand"
+			}
+		},
+		{
+			slim: true,
+			isSelected: true,
+			isHovered: true,
+			class: { thumb: "border-brand_alt" }
+		},
+		{
+			isSelected: true,
+			size: "sm",
+			class: { thumb: "translate-x-4" }
+		},
+		{
+			isSelected: true,
+			size: "md",
+			class: { thumb: "translate-x-5" }
+		},
+		{
+			isSelected: true,
+			class: { track: "bg-brand-solid" }
+		},
+		{
+			isSelected: true,
+			isHovered: true,
+			class: { track: "bg-brand-solid_hover" }
+		}
+	],
+	defaultVariants: { size: "sm" }
+});
+const Toggle = forwardRef(function Toggle(props, ref) {
+	const { label, hint, className, size = "sm", slim, ...rest } = props;
+	return /* @__PURE__ */ jsx(Switch, {
+		...rest,
+		ref,
+		className: (state) => cx(toggleStyles({
+			size,
+			isDisabled: state.isDisabled
+		}).root(), className),
+		children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => {
+			const slots = toggleStyles({
+				size,
+				slim,
+				isSelected,
+				isDisabled,
+				isFocusVisible,
+				isHovered
+			});
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"data-track": true,
+				className: cx(slots.track(), slim && "mt-0.5"),
+				children: /* @__PURE__ */ jsx("span", {
+					"data-thumb": true,
+					className: slots.thumb()
+				})
+			}), (label || hint) && /* @__PURE__ */ jsxs("span", {
+				className: slots.textWrapper(),
+				children: [label && /* @__PURE__ */ jsx("p", {
+					className: slots.label(),
+					children: label
+				}), hint && /* @__PURE__ */ jsx("span", {
+					className: slots.hint(),
+					onPointerDown: (event) => event.stopPropagation(),
+					onClick: (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+					},
+					children: hint
+				})]
+			})] });
+		}
+	});
+});
+Toggle.displayName = "Toggle";
+//#endregion
+export { Toggle, toggleStyles };
+
+//# sourceMappingURL=toggle.js.map

package/dist/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":["AriaSwitch"],"sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/toggle/toggle.tsx */\n\nimport type { ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport type { SwitchProps as AriaSwitchProps } from 'react-aria-components';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport { cx } from '../utils/cx';\nimport type { VariantProps } from '../utils/tv';\nimport { tv } from '../utils/tv';\n\nexport const toggleStyles = tv({\n  slots: {\n    root: 'flex w-max items-start',\n    track:\n      'cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset',\n    thumb: 'rounded-full bg-fg-white shadow-sm transition-transform duration-150 ease-in-out',\n    textWrapper: 'flex flex-col',\n    label: 'text-secondary font-medium select-none',\n    hint: 'text-tertiary',\n  },\n  variants: {\n    size: {\n      sm: {\n        root: 'gap-2',\n        track: 'h-5 w-9 p-0.5',\n        thumb: 'size-4',\n        label: 'text-sm',\n        hint: 'text-sm',\n      },\n      md: {\n        root: 'gap-3',\n        track: 'h-6 w-11 p-0.5',\n        thumb: 'size-5',\n        textWrapper: 'gap-0.5',\n        label: 'text-md',\n        hint: 'text-md',\n      },\n    },\n    slim: { true: {} },\n    isSelected: { true: {} },\n    isDisabled: {\n      true: { root: 'cursor-not-allowed', track: 'cursor-not-allowed opacity-50' },\n    },\n    isFocusVisible: {\n      true: { track: 'outline-2 outline-offset-2' },\n    },\n    isHovered: { true: {} },\n  },\n  compoundVariants: [\n    { slim: true, size: 'sm', class: { track: 'h-4 w-8 p-0' } },\n    { slim: true, size: 'md', class: { track: 'h-5 w-10 p-0' } },\n    { slim: true, class: { track: 'ring-1', thumb: 'shadow-xs border border-primary' } },\n    { slim: true, isSelected: true, class: { track: 'ring-transparent', thumb: 'border-brand' } },\n    {\n      slim: true,\n      isSelected: true,\n      isHovered: true,\n      class: { thumb: 'border-brand_alt' },\n    },\n    { isSelected: true, size: 'sm', class: { thumb: 'translate-x-4' } },\n    { isSelected: true, size: 'md', class: { thumb: 'translate-x-5' } },\n    { isSelected: true, class: { track: 'bg-brand-solid' } },\n    { isSelected: true, isHovered: true, class: { track: 'bg-brand-solid_hover' } },\n  ],\n  defaultVariants: { size: 'sm' },\n});\n\ntype ToggleVariants = VariantProps<typeof toggleStyles>;\n\nexport interface ToggleProps extends Omit<AriaSwitchProps, 'className' | 'children'> {\n  size?: ToggleVariants['size'];\n  label?: string;\n  hint?: ReactNode;\n  slim?: boolean;\n  className?: string;\n}\n\nexport const Toggle = forwardRef<HTMLLabelElement, ToggleProps>(function Toggle(props, ref) {\n  const { label, hint, className, size = 'sm', slim, ...rest } = props;\n\n  return (\n    <AriaSwitch\n      {...rest}\n      ref={ref}\n      className={(state) =>\n        cx(toggleStyles({ size, isDisabled: state.isDisabled }).root(), className)\n      }\n    >\n      {({ isSelected, isDisabled, isFocusVisible, isHovered }) => {\n        const slots = toggleStyles({\n          size,\n          slim,\n          isSelected,\n          isDisabled,\n          isFocusVisible,\n          isHovered,\n        });\n\n        return (\n          <>\n            <span data-track className={cx(slots.track(), slim && 'mt-0.5')}>\n              <span data-thumb className={slots.thumb()} />\n            </span>\n\n            {(label || hint) && (\n              <span className={slots.textWrapper()}>\n                {label && <p className={slots.label()}>{label}</p>}\n                {hint && (\n                  // biome-ignore lint/a11y/noStaticElementInteractions: blocks the native <label>-to-switch click-forwarding; this isn't its own control.\n                  // biome-ignore lint/a11y/useKeyWithClickEvents: no keyboard action to mirror, just suppressing a <label> side effect.\n                  <span\n                    className={slots.hint()}\n                    onPointerDown={(event) => event.stopPropagation()}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                    }}\n                  >\n                    {hint}\n                  </span>\n                )}\n              </span>\n            )}\n          </>\n        );\n      }}\n    </AriaSwitch>\n  );\n});\n\nToggle.displayName = 'Toggle';\n"],"mappings":";;;;;;;AAYA,MAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;EACN,OACE;EACF,OAAO;EACP,aAAa;EACb,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,OAAO;IACP,OAAO;IACP,aAAa;IACb,OAAO;IACP,MAAM;GACR;EACF;EACA,MAAM,EAAE,MAAM,CAAC,EAAE;EACjB,YAAY,EAAE,MAAM,CAAC,EAAE;EACvB,YAAY,EACV,MAAM;GAAE,MAAM;GAAsB,OAAO;EAAgC,EAC7E;EACA,gBAAgB,EACd,MAAM,EAAE,OAAO,6BAA6B,EAC9C;EACA,WAAW,EAAE,MAAM,CAAC,EAAE;CACxB;CACA,kBAAkB;EAChB;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,OAAO,cAAc;EAAE;EAC1D;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,OAAO,eAAe;EAAE;EAC3D;GAAE,MAAM;GAAM,OAAO;IAAE,OAAO;IAAU,OAAO;GAAkC;EAAE;EACnF;GAAE,MAAM;GAAM,YAAY;GAAM,OAAO;IAAE,OAAO;IAAoB,OAAO;GAAe;EAAE;EAC5F;GACE,MAAM;GACN,YAAY;GACZ,WAAW;GACX,OAAO,EAAE,OAAO,mBAAmB;EACrC;EACA;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO,EAAE,OAAO,gBAAgB;EAAE;EAClE;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO,EAAE,OAAO,gBAAgB;EAAE;EAClE;GAAE,YAAY;GAAM,OAAO,EAAE,OAAO,iBAAiB;EAAE;EACvD;GAAE,YAAY;GAAM,WAAW;GAAM,OAAO,EAAE,OAAO,uBAAuB;EAAE;CAChF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAYD,MAAa,SAAS,WAA0C,SAAS,OAAO,OAAO,KAAK;CAC1F,MAAM,EAAE,OAAO,MAAM,WAAW,OAAO,MAAM,MAAM,GAAG,SAAS;CAE/D,OACE,oBAACA,QAAD;EACE,GAAI;EACC;EACL,YAAY,UACV,GAAG,aAAa;GAAE;GAAM,YAAY,MAAM;EAAW,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS;EAGzE,WAAA,EAAE,YAAY,YAAY,gBAAgB,gBAAgB;GAC1D,MAAM,QAAQ,aAAa;IACzB;IACA;IACA;IACA;IACA;IACA;GACF,CAAC;GAED,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;IAAM,cAAA;IAAW,WAAW,GAAG,MAAM,MAAM,GAAG,QAAQ,QAAQ;IAC5D,UAAA,oBAAC,QAAD;KAAM,cAAA;KAAW,WAAW,MAAM,MAAM;IAAI,CAAA;GACxC,CAAA,IAEJ,SAAS,SACT,qBAAC,QAAD;IAAM,WAAW,MAAM,YAAY;IAAnC,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAW,MAAM,MAAM;KAAI,UAAA;IAAS,CAAA,GAChD,QAGC,oBAAC,QAAD;KACE,WAAW,MAAM,KAAK;KACtB,gBAAgB,UAAU,MAAM,gBAAgB;KAChD,UAAU,UAAU;MAClB,MAAM,eAAe;MACrB,MAAM,gBAAgB;KACxB;KAEC,UAAA;IACG,CAAA,CAEJ;GAER,CAAA,CAAA,EAAA,CAAA;EAEN;CACU,CAAA;AAEhB,CAAC;AAED,OAAO,cAAc"}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipStyles } from "./tooltip.js";
+export { Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, tooltipStyles };

package/dist/tooltip/index.js

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipTrigger, tooltipStyles } from "./tooltip.js";
+export { Tooltip, TooltipTrigger, tooltipStyles };

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+import { ButtonProps, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps } from "react-aria-components";
+//#region src/tooltip/tooltip.d.ts
+export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
+  hasDescription: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+}, {
+  content: string;
+  title: string;
+  description: string;
+  arrow: string;
+}, undefined, {
+  hasDescription: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+}, {
+  content: string;
+  title: string;
+  description: string;
+  arrow: string;
+}, import("tailwind-variants").TVReturnType<{
+  hasDescription: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+}, {
+  content: string;
+  title: string;
+  description: string;
+  arrow: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface TooltipProps extends TooltipTriggerComponentProps, Omit<TooltipProps$1, 'children'> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** @default false */
+  arrow?: boolean;
+  /** Delay in ms before the tooltip appears. @default 300 */
+  delay?: number;
+}
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface TooltipTriggerProps extends ButtonProps {}
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;qBAoBa,2CAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAcT,qBACP,8BACN,KAAK;EACP,OAAO;EACP,cAAc;;EAEd;;EAEA;;qBAGW,yBAAO,0BAAA,+BAAA,cAAA;iBA2EH,4BAA4B;qBAEhC,gCAAc,0BAAA,sCAAA,cAAA"}

package/dist/tooltip/tooltip.js

@@ -0,0 +1,86 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { tv } from "../utils/tv.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, OverlayArrow, Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from "react-aria-components";
+//#region src/tooltip/tooltip.tsx
+const tooltipStyles = tv({
+	slots: {
+		content: "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+		title: "text-xs font-semibold text-white",
+		description: "text-xs font-medium text-secondary_on-brand",
+		arrow: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180"
+	},
+	variants: { hasDescription: {
+		true: { content: "py-3" },
+		false: { content: "py-2" }
+	} }
+});
+const Tooltip = forwardRef(function Tooltip(props, ref) {
+	const { title, description, children, arrow = false, delay = 300, closeDelay = 0, trigger, isDisabled, isOpen, defaultOpen, offset = 6, crossOffset, placement = "top", onOpenChange, ...tooltipProps } = props;
+	const isTopOrBottomLeft = [
+		"top left",
+		"top end",
+		"bottom left",
+		"bottom end"
+	].includes(placement);
+	const isTopOrBottomRight = [
+		"top right",
+		"top start",
+		"bottom right",
+		"bottom start"
+	].includes(placement);
+	const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+	const slots = tooltipStyles({ hasDescription: Boolean(description) });
+	return /* @__PURE__ */ jsxs(TooltipTrigger$1, {
+		trigger,
+		delay,
+		closeDelay,
+		isDisabled,
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		children: [children, /* @__PURE__ */ jsx(Tooltip$1, {
+			...tooltipProps,
+			offset,
+			placement,
+			crossOffset: crossOffset ?? calculatedCrossOffset,
+			className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+			children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs("div", {
+				ref,
+				className: cx(slots.content(), isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5", isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: slots.title(),
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx("span", {
+						className: slots.description(),
+						children: description
+					}),
+					arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx("svg", {
+						"aria-hidden": "true",
+						viewBox: "0 0 100 100",
+						className: slots.arrow(),
+						children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+					}) })
+				]
+			})
+		})]
+	});
+});
+Tooltip.displayName = "Tooltip";
+const TooltipTrigger = forwardRef(function TooltipTrigger({ children, className, ...buttonProps }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		ref,
+		className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className),
+		children
+	});
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+//#endregion
+export { Tooltip, TooltipTrigger, tooltipStyles };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["AriaTooltipTrigger","AriaTooltip","AriaOverlayArrow","AriaButton"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/tooltip/tooltip.tsx */\n\nimport type { ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport type {\n  ButtonProps as AriaButtonProps,\n  TooltipProps as AriaTooltipProps,\n  TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport {\n  Button as AriaButton,\n  OverlayArrow as AriaOverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n} from 'react-aria-components';\nimport { cx } from '../utils/cx';\nimport { tv } from '../utils/tv';\n\nexport const tooltipStyles = tv({\n  slots: {\n    content:\n      'z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform',\n    title: 'text-xs font-semibold text-white',\n    description: 'text-xs font-medium text-secondary_on-brand',\n    arrow:\n      'size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180',\n  },\n  variants: {\n    hasDescription: { true: { content: 'py-3' }, false: { content: 'py-2' } },\n  },\n});\n\nexport interface TooltipProps\n  extends AriaTooltipTriggerComponentProps,\n    Omit<AriaTooltipProps, 'children'> {\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default false */\n  arrow?: boolean;\n  /** Delay in ms before the tooltip appears. @default 300 */\n  delay?: number;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {\n  const {\n    title,\n    description,\n    children,\n    arrow = false,\n    delay = 300,\n    closeDelay = 0,\n    trigger,\n    isDisabled,\n    isOpen,\n    defaultOpen,\n    offset = 6,\n    crossOffset,\n    placement = 'top',\n    onOpenChange,\n    ...tooltipProps\n  } = props;\n\n  const isTopOrBottomLeft = ['top left', 'top end', 'bottom left', 'bottom end'].includes(\n    placement as string,\n  );\n  const isTopOrBottomRight = ['top right', 'top start', 'bottom right', 'bottom start'].includes(\n    placement as string,\n  );\n  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;\n\n  const slots = tooltipStyles({ hasDescription: Boolean(description) });\n\n  return (\n    <AriaTooltipTrigger\n      {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}\n    >\n      {children}\n\n      <AriaTooltip\n        {...tooltipProps}\n        offset={offset}\n        placement={placement}\n        crossOffset={crossOffset ?? calculatedCrossOffset}\n        className={({ isEntering, isExiting }) =>\n          cx(isEntering && 'ease-out animate-in', isExiting && 'ease-in animate-out')\n        }\n      >\n        {({ isEntering, isExiting }) => (\n          <div\n            ref={ref}\n            className={cx(\n              slots.content(),\n              isEntering &&\n                'ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5',\n              isExiting &&\n                'ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5',\n            )}\n          >\n            <span className={slots.title()}>{title}</span>\n\n            {description && <span className={slots.description()}>{description}</span>}\n\n            {arrow && (\n              <AriaOverlayArrow>\n                <svg aria-hidden=\"true\" viewBox=\"0 0 100 100\" className={slots.arrow()}>\n                  <path d=\"M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z\" />\n                </svg>\n              </AriaOverlayArrow>\n            )}\n          </div>\n        )}\n      </AriaTooltip>\n    </AriaTooltipTrigger>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport interface TooltipTriggerProps extends AriaButtonProps {}\n\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(\n  function TooltipTrigger({ children, className, ...buttonProps }, ref) {\n    return (\n      <AriaButton\n        {...buttonProps}\n        ref={ref}\n        className={(values) =>\n          cx(\n            'h-max w-max outline-hidden',\n            typeof className === 'function' ? className(values) : className,\n          )\n        }\n      >\n        {children}\n      </AriaButton>\n    );\n  },\n);\n\nTooltipTrigger.displayName = 'TooltipTrigger';\n"],"mappings":";;;;;;;AAoBA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,SACE;EACF,OAAO;EACP,aAAa;EACb,OACE;CACJ;CACA,UAAU,EACR,gBAAgB;EAAE,MAAM,EAAE,SAAS,OAAO;EAAG,OAAO,EAAE,SAAS,OAAO;CAAE,EAC1E;AACF,CAAC;AAaD,MAAa,UAAU,WAAyC,SAAS,QAAQ,OAAO,KAAK;CAC3F,MAAM,EACJ,OACA,aACA,UACA,QAAQ,OACR,QAAQ,KACR,aAAa,GACb,SACA,YACA,QACA,aACA,SAAS,GACT,aACA,YAAY,OACZ,cACA,GAAG,iBACD;CAEJ,MAAM,oBAAoB;EAAC;EAAY;EAAW;EAAe;CAAY,CAAC,CAAC,SAC7E,SACF;CACA,MAAM,qBAAqB;EAAC;EAAa;EAAa;EAAgB;CAAc,CAAC,CAAC,SACpF,SACF;CACA,MAAM,wBAAwB,oBAAoB,MAAM,qBAAqB,KAAK;CAElF,MAAM,QAAQ,cAAc,EAAE,gBAAgB,QAAQ,WAAW,EAAE,CAAC;CAEpE,OACE,qBAACA,kBAAD;EACQ;EAAS;EAAO;EAAY;EAAY;EAAQ;EAAa;EADrE,UAAA,CAGG,UAED,oBAACC,WAAD;GACE,GAAI;GACI;GACG;GACX,aAAa,eAAe;GAC5B,YAAY,EAAE,YAAY,gBACxB,GAAG,cAAc,uBAAuB,aAAa,qBAAqB;GAG1E,WAAA,EAAE,YAAY,gBACd,qBAAC,OAAD;IACO;IACL,WAAW,GACT,MAAM,QAAQ,GACd,cACE,kNACF,aACE,8MACJ;IARF,UAAA;KAUE,oBAAC,QAAD;MAAM,WAAW,MAAM,MAAM;MAAI,UAAA;KAAY,CAAA;KAE5C,eAAe,oBAAC,QAAD;MAAM,WAAW,MAAM,YAAY;MAAI,UAAA;KAAkB,CAAA;KAExE,SACC,oBAACC,cAAD,EAAA,UACE,oBAAC,OAAD;MAAK,eAAY;MAAO,SAAQ;MAAc,WAAW,MAAM,MAAM;MACnE,UAAA,oBAAC,QAAD,EAAM,GAAE,oDAAqD,CAAA;KAC1D,CAAA,EACW,CAAA;IAEjB;;EAEI,CAAA,CACK;;AAExB,CAAC;AAED,QAAQ,cAAc;AAItB,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,UAAU,WAAW,GAAG,eAAe,KAAK;CACpE,OACE,oBAACC,QAAD;EACE,GAAI;EACC;EACL,YAAY,WACV,GACE,8BACA,OAAO,cAAc,aAAa,UAAU,MAAM,IAAI,SACxD;EAGD;CACS,CAAA;AAEhB,CACF;AAEA,eAAe,cAAc"}

package/dist/utils/cx.d.ts

@@ -0,0 +1,21 @@
+//#region src/utils/cx.d.ts
+export declare const twMergeConfig: {
+  readonly extend: {
+    readonly theme: {
+      readonly text: readonly ["xxs", "xs", "sm", "md", "lg", "xl", "display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"];
+      readonly radius: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "full"];
+      readonly shadow: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "skeuomorphic", "xs-skeuomorphic"];
+    };
+    readonly classGroups: {
+      readonly 'ring-color': readonly [{
+        readonly ring: readonly ["primary", "secondary", "secondary_alt", "tertiary", "disabled", "error", "error_subtle", "brand", "brand_alt", "brand-solid", "brand-solid_hover"];
+      }];
+      readonly 'outline-color': readonly [{
+        readonly outline: readonly ["primary", "secondary", "secondary_alt", "tertiary", "disabled", "error", "error_subtle", "brand", "brand_alt", "brand-solid", "brand-solid_hover"];
+      }];
+    };
+  };
+};
+export declare const cx: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+//#endregion
+//# sourceMappingURL=cx.d.ts.map

package/dist/utils/cx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.d.ts","names":[],"sources":["../../src/utils/cx.ts"],"mappings":";qBAEa;;;;;;;;;;;;;;;;;qBA2DA,QAAE,qCAAA"}