@kavagy/react 0.1.1

package/dist/featured-icon/featured-icon.d.ts

@@ -0,0 +1,141 @@
+import { VariantProps } from "../utils/tv.js";
+import { FC, ReactNode } from "react";
+//#region src/featured-icon/featured-icon.d.ts
+export declare const featuredIconStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+  theme: {
+    light: {
+      root: string;
+    };
+    gradient: {
+      root: string;
+    };
+    dark: {
+      root: string;
+    };
+    modern: {
+      root: string;
+    };
+    outline: {
+      root: string;
+    };
+  };
+  color: {
+    brand: {};
+    gray: {};
+    error: {};
+    warning: {};
+    success: {};
+  };
+}, {
+  root: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+  theme: {
+    light: {
+      root: string;
+    };
+    gradient: {
+      root: string;
+    };
+    dark: {
+      root: string;
+    };
+    modern: {
+      root: string;
+    };
+    outline: {
+      root: string;
+    };
+  };
+  color: {
+    brand: {};
+    gray: {};
+    error: {};
+    warning: {};
+    success: {};
+  };
+}, {
+  root: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+  theme: {
+    light: {
+      root: string;
+    };
+    gradient: {
+      root: string;
+    };
+    dark: {
+      root: string;
+    };
+    modern: {
+      root: string;
+    };
+    outline: {
+      root: string;
+    };
+  };
+  color: {
+    brand: {};
+    gray: {};
+    error: {};
+    warning: {};
+    success: {};
+  };
+}, {
+  root: string;
+}, undefined, unknown, unknown, undefined>>;
+type FeaturedIconVariants = VariantProps<typeof featuredIconStyles>;
+export interface FeaturedIconProps {
+  children?: ReactNode;
+  className?: string;
+  icon?: FC<{
+    className?: string;
+  }> | ReactNode;
+  size?: FeaturedIconVariants['size'];
+  color?: FeaturedIconVariants['color'];
+  theme?: FeaturedIconVariants['theme'];
+}
+export declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=featured-icon.d.ts.map

package/dist/featured-icon/featured-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"featured-icon.d.ts","names":[],"sources":["../../src/featured-icon/featured-icon.tsx"],"mappings":";;;qBAYa,gDAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4K1B,uBAAuB,oBAAoB;iBAE/B;EACf,WAAW;EACX;EACA,OAAO;IAAK;OAAwB;EACpC,OAAO;EACP,QAAQ;EACR,QAAQ;;qBAGG,8BAAY,0BAAA,oCAAA,cAAA"}

package/dist/featured-icon/featured-icon.js

@@ -0,0 +1,292 @@
+import { cx } from "../utils/cx.js";
+import { tv } from "../utils/tv.js";
+import { isReactComponent } from "../utils/is-react-component.js";
+import { forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/featured-icon/featured-icon.tsx
+const featuredIconStyles = tv({
+	slots: { root: "relative flex shrink-0 items-center justify-center" },
+	variants: {
+		size: {
+			sm: { root: "*:data-icon:size-4 *:data-icon:stroke-[2.25px]" },
+			md: { root: "*:data-icon:size-5" },
+			lg: { root: "*:data-icon:size-6" },
+			xl: { root: "*:data-icon:size-7" }
+		},
+		theme: {
+			light: { root: "rounded-full" },
+			gradient: { root: "rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full" },
+			dark: { root: "text-fg-white shadow-xs-skeuomorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%" },
+			modern: { root: "bg-primary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset" },
+			outline: { root: "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2" }
+		},
+		color: {
+			brand: {},
+			gray: {},
+			error: {},
+			warning: {},
+			success: {}
+		}
+	},
+	compoundVariants: [
+		{
+			theme: "light",
+			size: "sm",
+			class: { root: "size-8" }
+		},
+		{
+			theme: "light",
+			size: "md",
+			class: { root: "size-10" }
+		},
+		{
+			theme: "light",
+			size: "lg",
+			class: { root: "size-12" }
+		},
+		{
+			theme: "light",
+			size: "xl",
+			class: { root: "size-14" }
+		},
+		{
+			theme: "light",
+			color: "brand",
+			class: { root: "bg-brand-secondary text-fg-brand-primary" }
+		},
+		{
+			theme: "light",
+			color: "gray",
+			class: { root: "bg-tertiary text-fg-secondary" }
+		},
+		{
+			theme: "light",
+			color: "error",
+			class: { root: "bg-error-secondary text-fg-error-primary" }
+		},
+		{
+			theme: "light",
+			color: "warning",
+			class: { root: "bg-warning-secondary text-fg-warning-primary" }
+		},
+		{
+			theme: "light",
+			color: "success",
+			class: { root: "bg-success-secondary text-fg-success-primary" }
+		},
+		{
+			theme: "gradient",
+			size: "sm",
+			class: { root: "size-8 after:size-6 *:data-icon:size-4" }
+		},
+		{
+			theme: "gradient",
+			size: "md",
+			class: { root: "size-10 after:size-7 *:data-icon:size-4" }
+		},
+		{
+			theme: "gradient",
+			size: "lg",
+			class: { root: "size-12 after:size-8 *:data-icon:size-5" }
+		},
+		{
+			theme: "gradient",
+			size: "xl",
+			class: { root: "size-14 after:size-10 *:data-icon:size-5" }
+		},
+		{
+			theme: "gradient",
+			color: "brand",
+			class: { root: "before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid" }
+		},
+		{
+			theme: "gradient",
+			color: "gray",
+			class: { root: "before:border-utility-neutral-200 before:bg-utility-neutral-50 after:bg-secondary-solid" }
+		},
+		{
+			theme: "gradient",
+			color: "error",
+			class: { root: "before:border-utility-red-200 before:bg-utility-red-50 after:bg-error-solid" }
+		},
+		{
+			theme: "gradient",
+			color: "warning",
+			class: { root: "before:border-utility-yellow-200 before:bg-utility-yellow-50 after:bg-warning-solid" }
+		},
+		{
+			theme: "gradient",
+			color: "success",
+			class: { root: "before:border-utility-green-200 before:bg-utility-green-50 after:bg-success-solid" }
+		},
+		{
+			theme: "dark",
+			size: "sm",
+			class: { root: "size-8 rounded-md before:rounded-[5px]" }
+		},
+		{
+			theme: "dark",
+			size: "md",
+			class: { root: "size-10 rounded-lg before:rounded-[7px]" }
+		},
+		{
+			theme: "dark",
+			size: "lg",
+			class: { root: "size-12 rounded-[10px] before:rounded-[9px]" }
+		},
+		{
+			theme: "dark",
+			size: "xl",
+			class: { root: "size-14 rounded-xl before:rounded-[11px]" }
+		},
+		{
+			theme: "dark",
+			color: "brand",
+			class: { root: "bg-brand-solid before:border-utility-brand-200/12" }
+		},
+		{
+			theme: "dark",
+			color: "gray",
+			class: { root: "bg-secondary-solid before:border-utility-neutral-200/12" }
+		},
+		{
+			theme: "dark",
+			color: "error",
+			class: { root: "bg-error-solid before:border-utility-red-200/12" }
+		},
+		{
+			theme: "dark",
+			color: "warning",
+			class: { root: "bg-warning-solid before:border-utility-yellow-200/12" }
+		},
+		{
+			theme: "dark",
+			color: "success",
+			class: { root: "bg-success-solid before:border-utility-green-200/12" }
+		},
+		{
+			theme: "modern",
+			size: "sm",
+			class: { root: "size-8 rounded-md" }
+		},
+		{
+			theme: "modern",
+			size: "md",
+			class: { root: "size-10 rounded-lg" }
+		},
+		{
+			theme: "modern",
+			size: "lg",
+			class: { root: "size-12 rounded-[10px]" }
+		},
+		{
+			theme: "modern",
+			size: "xl",
+			class: { root: "size-14 rounded-xl" }
+		},
+		{
+			theme: "modern",
+			color: "brand",
+			class: { root: "text-fg-brand-primary" }
+		},
+		{
+			theme: "modern",
+			color: "gray",
+			class: { root: "text-fg-secondary" }
+		},
+		{
+			theme: "modern",
+			color: "error",
+			class: { root: "text-fg-error-primary" }
+		},
+		{
+			theme: "modern",
+			color: "warning",
+			class: { root: "text-fg-warning-primary" }
+		},
+		{
+			theme: "modern",
+			color: "success",
+			class: { root: "text-fg-success-primary" }
+		},
+		{
+			theme: "outline",
+			size: "sm",
+			class: { root: "size-4 before:size-6 after:size-8.5" }
+		},
+		{
+			theme: "outline",
+			size: "md",
+			class: { root: "size-5 before:size-7 after:size-9.5" }
+		},
+		{
+			theme: "outline",
+			size: "lg",
+			class: { root: "size-6 before:size-8 after:size-10.5" }
+		},
+		{
+			theme: "outline",
+			size: "xl",
+			class: { root: "size-7 before:size-9 after:size-11.5" }
+		},
+		{
+			theme: "outline",
+			color: "brand",
+			class: { root: "text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10" }
+		},
+		{
+			theme: "outline",
+			color: "gray",
+			class: { root: "text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10" }
+		},
+		{
+			theme: "outline",
+			color: "error",
+			class: { root: "text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10" }
+		},
+		{
+			theme: "outline",
+			color: "warning",
+			class: { root: "text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10" }
+		},
+		{
+			theme: "outline",
+			color: "success",
+			class: { root: "text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10" }
+		}
+	],
+	defaultVariants: {
+		size: "sm",
+		theme: "light",
+		color: "brand"
+	}
+});
+const FeaturedIcon = forwardRef(function FeaturedIcon(props, ref) {
+	const { size, theme, color, icon: Icon, children, className, ...rest } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref,
+		"data-featured-icon": true,
+		className: cx(featuredIconStyles({
+			size,
+			theme,
+			color
+		}).root(), className),
+		children: [
+			isReactComponent(Icon) && /* @__PURE__ */ jsx(Icon, {
+				"data-icon": true,
+				className: "z-1"
+			}),
+			isValidElement(Icon) && /* @__PURE__ */ jsx("div", {
+				className: "z-1",
+				children: Icon
+			}),
+			children
+		]
+	});
+});
+FeaturedIcon.displayName = "FeaturedIcon";
+//#endregion
+export { FeaturedIcon, featuredIconStyles };
+
+//# sourceMappingURL=featured-icon.js.map

package/dist/featured-icon/featured-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"featured-icon.js","names":[],"sources":["../../src/featured-icon/featured-icon.tsx"],"sourcesContent":["/* @kavagy-source: untitledui/foundations/featured-icon/featured-icon.tsx */\n\nimport type { FC, ReactNode } from 'react';\nimport { forwardRef, isValidElement } from 'react';\nimport { cx } from '../utils/cx';\nimport { isReactComponent } from '../utils/is-react-component';\nimport type { VariantProps } from '../utils/tv';\nimport { tv } from '../utils/tv';\n\n// The original scaffold references `text-featured-icon-<theme>-fg-<color>` tokens that\n// don't exist in the Kavagy semantic taxonomy (see docs/ARCHITECTURE.md). Replaced with\n// the equivalent `fg-*` tokens already used by the scaffold's own \"modern\" theme.\nexport const featuredIconStyles = tv({\n  slots: {\n    root: 'relative flex shrink-0 items-center justify-center',\n  },\n  variants: {\n    size: {\n      sm: { root: '*:data-icon:size-4 *:data-icon:stroke-[2.25px]' },\n      md: { root: '*:data-icon:size-5' },\n      lg: { root: '*:data-icon:size-6' },\n      xl: { root: '*:data-icon:size-7' },\n    },\n    theme: {\n      light: { root: 'rounded-full' },\n      gradient: {\n        root: 'rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full',\n      },\n      dark: {\n        root: 'text-fg-white shadow-xs-skeuomorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%',\n      },\n      modern: { root: 'bg-primary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset' },\n      outline: {\n        root: 'before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2',\n      },\n    },\n    color: {\n      brand: {},\n      gray: {},\n      error: {},\n      warning: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { theme: 'light', size: 'sm', class: { root: 'size-8' } },\n    { theme: 'light', size: 'md', class: { root: 'size-10' } },\n    { theme: 'light', size: 'lg', class: { root: 'size-12' } },\n    { theme: 'light', size: 'xl', class: { root: 'size-14' } },\n    { theme: 'light', color: 'brand', class: { root: 'bg-brand-secondary text-fg-brand-primary' } },\n    { theme: 'light', color: 'gray', class: { root: 'bg-tertiary text-fg-secondary' } },\n    { theme: 'light', color: 'error', class: { root: 'bg-error-secondary text-fg-error-primary' } },\n    {\n      theme: 'light',\n      color: 'warning',\n      class: { root: 'bg-warning-secondary text-fg-warning-primary' },\n    },\n    {\n      theme: 'light',\n      color: 'success',\n      class: { root: 'bg-success-secondary text-fg-success-primary' },\n    },\n\n    { theme: 'gradient', size: 'sm', class: { root: 'size-8 after:size-6 *:data-icon:size-4' } },\n    { theme: 'gradient', size: 'md', class: { root: 'size-10 after:size-7 *:data-icon:size-4' } },\n    { theme: 'gradient', size: 'lg', class: { root: 'size-12 after:size-8 *:data-icon:size-5' } },\n    { theme: 'gradient', size: 'xl', class: { root: 'size-14 after:size-10 *:data-icon:size-5' } },\n    {\n      theme: 'gradient',\n      color: 'brand',\n      class: {\n        root: 'before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid',\n      },\n    },\n    {\n      theme: 'gradient',\n      color: 'gray',\n      class: {\n        root: 'before:border-utility-neutral-200 before:bg-utility-neutral-50 after:bg-secondary-solid',\n      },\n    },\n    {\n      theme: 'gradient',\n      color: 'error',\n      class: {\n        root: 'before:border-utility-red-200 before:bg-utility-red-50 after:bg-error-solid',\n      },\n    },\n    {\n      theme: 'gradient',\n      color: 'warning',\n      class: {\n        root: 'before:border-utility-yellow-200 before:bg-utility-yellow-50 after:bg-warning-solid',\n      },\n    },\n    {\n      theme: 'gradient',\n      color: 'success',\n      class: {\n        root: 'before:border-utility-green-200 before:bg-utility-green-50 after:bg-success-solid',\n      },\n    },\n\n    { theme: 'dark', size: 'sm', class: { root: 'size-8 rounded-md before:rounded-[5px]' } },\n    { theme: 'dark', size: 'md', class: { root: 'size-10 rounded-lg before:rounded-[7px]' } },\n    { theme: 'dark', size: 'lg', class: { root: 'size-12 rounded-[10px] before:rounded-[9px]' } },\n    { theme: 'dark', size: 'xl', class: { root: 'size-14 rounded-xl before:rounded-[11px]' } },\n    {\n      theme: 'dark',\n      color: 'brand',\n      class: { root: 'bg-brand-solid before:border-utility-brand-200/12' },\n    },\n    {\n      theme: 'dark',\n      color: 'gray',\n      class: { root: 'bg-secondary-solid before:border-utility-neutral-200/12' },\n    },\n    {\n      theme: 'dark',\n      color: 'error',\n      class: { root: 'bg-error-solid before:border-utility-red-200/12' },\n    },\n    {\n      theme: 'dark',\n      color: 'warning',\n      class: { root: 'bg-warning-solid before:border-utility-yellow-200/12' },\n    },\n    {\n      theme: 'dark',\n      color: 'success',\n      class: { root: 'bg-success-solid before:border-utility-green-200/12' },\n    },\n\n    { theme: 'modern', size: 'sm', class: { root: 'size-8 rounded-md' } },\n    { theme: 'modern', size: 'md', class: { root: 'size-10 rounded-lg' } },\n    { theme: 'modern', size: 'lg', class: { root: 'size-12 rounded-[10px]' } },\n    { theme: 'modern', size: 'xl', class: { root: 'size-14 rounded-xl' } },\n    { theme: 'modern', color: 'brand', class: { root: 'text-fg-brand-primary' } },\n    { theme: 'modern', color: 'gray', class: { root: 'text-fg-secondary' } },\n    { theme: 'modern', color: 'error', class: { root: 'text-fg-error-primary' } },\n    { theme: 'modern', color: 'warning', class: { root: 'text-fg-warning-primary' } },\n    { theme: 'modern', color: 'success', class: { root: 'text-fg-success-primary' } },\n\n    { theme: 'outline', size: 'sm', class: { root: 'size-4 before:size-6 after:size-8.5' } },\n    { theme: 'outline', size: 'md', class: { root: 'size-5 before:size-7 after:size-9.5' } },\n    { theme: 'outline', size: 'lg', class: { root: 'size-6 before:size-8 after:size-10.5' } },\n    { theme: 'outline', size: 'xl', class: { root: 'size-7 before:size-9 after:size-11.5' } },\n    {\n      theme: 'outline',\n      color: 'brand',\n      class: {\n        root: 'text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10',\n      },\n    },\n    {\n      theme: 'outline',\n      color: 'gray',\n      class: { root: 'text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10' },\n    },\n    {\n      theme: 'outline',\n      color: 'error',\n      class: {\n        root: 'text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10',\n      },\n    },\n    {\n      theme: 'outline',\n      color: 'warning',\n      class: {\n        root: 'text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10',\n      },\n    },\n    {\n      theme: 'outline',\n      color: 'success',\n      class: {\n        root: 'text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10',\n      },\n    },\n  ],\n  defaultVariants: { size: 'sm', theme: 'light', color: 'brand' },\n});\n\ntype FeaturedIconVariants = VariantProps<typeof featuredIconStyles>;\n\nexport interface FeaturedIconProps {\n  children?: ReactNode;\n  className?: string;\n  icon?: FC<{ className?: string }> | ReactNode;\n  size?: FeaturedIconVariants['size'];\n  color?: FeaturedIconVariants['color'];\n  theme?: FeaturedIconVariants['theme'];\n}\n\nexport const FeaturedIcon = forwardRef<HTMLDivElement, FeaturedIconProps>(\n  function FeaturedIcon(props, ref) {\n    const { size, theme, color, icon: Icon, children, className, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        data-featured-icon\n        className={cx(featuredIconStyles({ size, theme, color }).root(), className)}\n      >\n        {isReactComponent(Icon) && <Icon data-icon className=\"z-1\" />}\n        {isValidElement(Icon) && <div className=\"z-1\">{Icon}</div>}\n        {children}\n      </div>\n    );\n  },\n);\n\nFeaturedIcon.displayName = 'FeaturedIcon';\n"],"mappings":"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"}

package/dist/featured-icon/index.d.ts

@@ -0,0 +1,2 @@
+import { FeaturedIcon, FeaturedIconProps, featuredIconStyles } from "./featured-icon.js";
+export { FeaturedIcon, type FeaturedIconProps, featuredIconStyles };

package/dist/featured-icon/index.js

@@ -0,0 +1,2 @@
+import { FeaturedIcon, featuredIconStyles } from "./featured-icon.js";
+export { FeaturedIcon, featuredIconStyles };

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+import { HintText, HintTextProps, Input, InputBase, InputBaseProps, InputProps, Label, LabelProps } from "./input.js";
+export { HintText, type HintTextProps, Input, InputBase, type InputBaseProps, type InputProps, Label, type LabelProps };

package/dist/input/index.js

@@ -0,0 +1,2 @@
+import { HintText, Input, InputBase, Label } from "./input.js";
+export { HintText, Input, InputBase, Label };

package/dist/input/input.d.ts

@@ -0,0 +1,42 @@
+import { TooltipProps as TooltipProps$1 } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import { ComponentType, HTMLAttributes, ReactNode, Ref } from "react";
+import { InputProps as InputProps$1, LabelProps as LabelProps$1, TextFieldProps, TextProps } from "react-aria-components";
+//#region src/input/input.d.ts
+export interface LabelProps extends LabelProps$1 {
+  children: ReactNode;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+}
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export interface HintTextProps extends TextProps {
+  isInvalid?: boolean;
+  size?: 'sm' | 'md';
+  children: ReactNode;
+}
+export declare const HintText: import("react").ForwardRefExoticComponent<HintTextProps & import("react").RefAttributes<HTMLElement>>;
+export interface InputBaseProps extends Omit<InputProps$1, 'size'> {
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  placeholder?: string;
+  iconClassName?: string;
+  inputClassName?: string;
+  wrapperClassName?: string;
+  groupRef?: Ref<HTMLDivElement>;
+  icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
+}
+export declare const InputBase: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface InputProps extends TextFieldProps, Pick<InputBaseProps, 'placeholder' | 'icon' | 'groupRef' | 'size' | 'wrapperClassName' | 'inputClassName' | 'iconClassName'> {
+  label?: string;
+  hint?: ReactNode;
+  hideRequiredIndicator?: boolean;
+  /** Tooltip content displayed next to the label. */
+  tooltip?: ReactNode;
+  /** Placement of the tooltip. @default 'top' */
+  tooltipPlacement?: TooltipProps$1['placement'];
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=input.d.ts.map

package/dist/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"mappings":";;;;;iBAyBiB,mBAAmB;EAClC,UAAU;EACV;EACA;;qBAGW,uBAAK,0BAAA,6BAAA,cAAA;iBAgCD,sBAAsB;EACrC;EACA;EACA,UAAU;;qBAGC,0BAAQ,0BAAA,gCAAA,cAAA;iBAuBJ,uBAAuB,KAAK;EAC3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,IAAI;EACf,OAAO,cAAc,eAAe;;qBA+BzB,2BAAS,0BAAA,iCAAA,cAAA;iBAqGL,mBACP,gBACN,KACE;EASJ;EACA,OAAO;EACP;;EAEA,UAAU;;EAEV,mBAAmB;;qBAGR,uBAAK,0BAAA,6BAAA,cAAA"}

package/dist/input/input.js

@@ -0,0 +1,136 @@
+"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 { Eye, EyeOff, HelpCircle, InfoCircle } from "@kavagy/icons";
+import { createContext, forwardRef, useContext, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Group, Input as Input$1, Label as Label$1, Text, TextField } from "react-aria-components";
+//#region src/input/input.tsx
+const Label = forwardRef(function Label({ isInvalid, isRequired, className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Label$1, {
+		"data-label": "true",
+		ref,
+		...props,
+		className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className),
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block", isInvalid && "text-error-primary", typeof isInvalid === "undefined" && "group-invalid:text-error-primary"),
+			children: "*"
+		})]
+	});
+});
+Label.displayName = "Label";
+const HintText = forwardRef(function HintText({ isInvalid, className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Text, {
+		ref,
+		...props,
+		slot: isInvalid ? "errorMessage" : "description",
+		className: cx("text-sm text-tertiary", size === "sm" && "text-xs", "in-data-[input-size=sm]:text-xs", isInvalid && "text-error-primary", "group-invalid:text-error-primary", className)
+	});
+});
+HintText.displayName = "HintText";
+const TextFieldContext = createContext({});
+const inputSizes = {
+	sm: {
+		root: (hasLeading, hasTrailing) => cx("px-3 py-2 text-sm", hasLeading && "pl-9", hasTrailing && "pr-9"),
+		iconLeading: "left-3 size-4 stroke-[2.25px]",
+		iconTrailing: "right-3"
+	},
+	md: {
+		root: (hasLeading, hasTrailing) => cx("px-3 py-2 text-md", hasLeading && "pl-10", hasTrailing && "pr-9"),
+		iconLeading: "left-3 size-5",
+		iconTrailing: "right-3"
+	},
+	lg: {
+		root: (hasLeading, hasTrailing) => cx("px-3.5 py-2.5 text-md", hasLeading && "pl-10.5", hasTrailing && "pr-9.5"),
+		iconLeading: "left-3.5 size-5",
+		iconTrailing: "right-3.5"
+	}
+};
+const InputBase = forwardRef(function InputBase({ groupRef, size = "md", isInvalid, isDisabled, isRequired, icon: Icon, placeholder, wrapperClassName, inputClassName, iconClassName, type = "text", ...inputProps }, ref) {
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+	const hasTrailingIcon = Boolean(isInvalid) || type === "password";
+	const hasLeadingIcon = Boolean(Icon);
+	const context = useContext(TextFieldContext);
+	const inputSize = context.size ?? size;
+	const sizeConfig = inputSizes[inputSize];
+	return /* @__PURE__ */ jsxs(Group, {
+		isDisabled,
+		isInvalid,
+		ref: groupRef,
+		className: ({ isFocusWithin, isDisabled: disabled, isInvalid: invalid }) => cx("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", isFocusWithin && !disabled && "ring-2 ring-focus-ring", disabled && "cursor-not-allowed opacity-50", "group-disabled:cursor-not-allowed group-disabled:opacity-50", invalid && "ring-error_subtle", "group-invalid:ring-error_subtle", invalid && isFocusWithin && "ring-2 ring-error", isFocusWithin && "group-invalid:ring-2 group-invalid:ring-error", context.wrapperClassName, wrapperClassName),
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: cx("pointer-events-none absolute text-fg-quaternary", sizeConfig.iconLeading, context.iconClassName, iconClassName) }),
+			/* @__PURE__ */ jsx(Input$1, {
+				...inputProps,
+				ref,
+				required: isRequired,
+				type: type === "password" && isPasswordVisible ? "text" : type,
+				placeholder,
+				className: cx("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", sizeConfig.root(hasLeadingIcon, hasTrailingIcon), context.inputClassName, inputClassName)
+			}),
+			type !== "password" && /* @__PURE__ */ jsx(InfoCircle, { className: cx("pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block", sizeConfig.iconTrailing) }),
+			type === "password" && /* @__PURE__ */ jsx(Button, {
+				"aria-label": "Toggle password visibility",
+				onPress: () => setIsPasswordVisible((visible) => !visible),
+				className: cx("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", sizeConfig.iconTrailing),
+				children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4 stroke-[2.25px]" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4 stroke-[2.25px]" })
+			})
+		]
+	});
+});
+InputBase.displayName = "InputBase";
+const Input = forwardRef(function Input({ size = "md", placeholder, icon: Icon, label, hint, hideRequiredIndicator, tooltip, tooltipPlacement, className, groupRef, iconClassName, inputClassName, wrapperClassName, type = "text", ...props }, ref) {
+	return /* @__PURE__ */ jsx(TextField, {
+		"aria-label": !label ? placeholder : void 0,
+		...props,
+		"data-input-wrapper": true,
+		"data-input-size": size,
+		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: ({ isRequired, isInvalid }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			(label || tooltip) && /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center justify-between gap-1",
+				children: [label && /* @__PURE__ */ jsx(Label, {
+					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(InputBase, {
+				ref,
+				groupRef,
+				size,
+				placeholder,
+				icon: Icon,
+				iconClassName,
+				inputClassName,
+				wrapperClassName,
+				isInvalid,
+				isRequired,
+				type
+			}),
+			hint && /* @__PURE__ */ jsx(HintText, {
+				isInvalid,
+				children: hint
+			})
+		] })
+	});
+});
+Input.displayName = "Input";
+//#endregion
+export { HintText, Input, InputBase, Label };
+
+//# sourceMappingURL=input.js.map