@masaraxui/react 1.0.0

package/dist/components/icons.js

@@ -0,0 +1,243 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+
+const IconChevronDown = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Chevron down icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M2.97 5.47a.75.75 0 0 1 1.06 0L8 9.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const IconChevronLeft = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Chevron left icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M10.53 2.97a.75.75 0 0 1 0 1.06L6.56 8l3.97 3.97a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const IconChevronRight = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Chevron right icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M5.47 2.97a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06L9.44 8 5.47 4.03a.75.75 0 0 1 0-1.06Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const ExternalLinkIcon = ({
+  height = 9,
+  width = 9,
+  ...props
+}) => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "External link icon",
+  fill: "none",
+  height: height,
+  role: "presentation",
+  viewBox: "0 0 7 7",
+  width: width,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    d: "M1.20592 6.84333L0.379822 6.01723L4.52594 1.8672H1.37819L1.38601 0.731812H6.48742V5.83714H5.34421L5.35203 2.6933L1.20592 6.84333Z",
+    fill: "currentColor"
+  })
+});
+const CircleDashedIcon = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Circle dashed icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    d: "M6.906 1.085a7.047 7.047 0 0 1 2.188 0 .75.75 0 0 1-.232 1.482 5.546 5.546 0 0 0-1.724 0 .75.75 0 0 1-.232-1.482ZM4.933 2.502a.75.75 0 0 1-.166 1.048c-.466.34-.878.75-1.217 1.217a.75.75 0 0 1-1.213-.882 7.036 7.036 0 0 1 1.548-1.548.75.75 0 0 1 1.048.165Zm6.135 0a.75.75 0 0 1 1.047-.165 7.037 7.037 0 0 1 1.548 1.548.75.75 0 0 1-1.213.882 5.533 5.533 0 0 0-1.217-1.217.75.75 0 0 1-.165-1.048ZM1.943 6.28a.75.75 0 0 1 .624.857 5.546 5.546 0 0 0 0 1.724.75.75 0 0 1-1.482.232 7.047 7.047 0 0 1 0-2.188.75.75 0 0 1 .858-.625Zm12.114 0a.75.75 0 0 1 .858.625 7.048 7.048 0 0 1 0 2.188.75.75 0 1 1-1.482-.232 5.54 5.54 0 0 0 0-1.724.75.75 0 0 1 .624-.857ZM2.502 11.068a.75.75 0 0 1 1.048.165c.34.466.75.878 1.217 1.217a.75.75 0 0 1-.882 1.213 7.037 7.037 0 0 1-1.548-1.548.75.75 0 0 1 .165-1.047Zm10.996 0a.75.75 0 0 1 .165 1.047 7.037 7.037 0 0 1-1.548 1.548.75.75 0 0 1-.883-1.213 5.53 5.53 0 0 0 1.218-1.217.75.75 0 0 1 1.048-.165Zm-7.217 2.99a.75.75 0 0 1 .857-.625 5.54 5.54 0 0 0 1.724 0 .75.75 0 0 1 .232 1.482 7.048 7.048 0 0 1-2.188 0 .75.75 0 0 1-.625-.857Z",
+    fill: "currentColor"
+  })
+});
+const CloseIcon = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Close icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const InfoIcon = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Info icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M8 13.5a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m1-9.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const WarningIcon = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Warning icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M7.134 2.994L2.217 11.5a1 1 0 0 0 .866 1.5h9.834a1 1 0 0 0 .866-1.5L8.866 2.993a1 1 0 0 0-1.732 0m3.03-.75c-.962-1.665-3.366-1.665-4.329 0L.918 10.749c-.963 1.666.24 3.751 2.165 3.751h9.834c1.925 0 3.128-2.085 2.164-3.751zM8 5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2A.75.75 0 0 1 8 5m1 5.75a1 1 0 1 1-2 0a1 1 0 0 1 2 0",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const DangerIcon = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Danger icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M8 13.5a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m1-4.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0M8.75 5a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const SuccessIcon = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Success icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M13.5 8a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.9-1.55a.75.75 0 1 0-1.2-.9L7.419 8.858L6.03 7.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.13-.08z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const IconMinus = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Minus icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M1.75 8a.75.75 0 0 1 .75-.75h11a.75.75 0 0 1 0 1.5h-11A.75.75 0 0 1 1.75 8",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const IconPlus = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Plus icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M8 1.75a.75.75 0 0 1 .75.75v4.75h4.75a.75.75 0 0 1 0 1.5H8.75v4.75a.75.75 0 0 1-1.5 0V8.75H2.5a.75.75 0 0 1 0-1.5h4.75V2.5A.75.75 0 0 1 8 1.75",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const IconSearch = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Search icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M11.5 7a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-.82 4.74a6 6 0 1 1 1.06-1.06l2.79 2.79a.75.75 0 1 1-1.06 1.06z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const IconCalendar = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Calendar icon",
+  fill: "none",
+  height: "1em",
+  role: "presentation",
+  viewBox: "0 0 13 14",
+  width: "1em",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M3.75 4.5A.75.75 0 0 1 3 3.75v-.748a1.5 1.5 0 0 0-1.5 1.5v1h10v-1a1.5 1.5 0 0 0-1.5-1.5v.75a.75.75 0 1 1-1.5 0v-.75h-4v.747a.75.75 0 0 1-.75.75ZM8.5 1.501h-4V.75a.75.75 0 0 0-1.5 0v.752a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3v-.75a.75.75 0 0 0-1.5 0v.75Zm-7 5.5v3.5a1.5 1.5 0 0 0 1.5 1.5h7a1.5 1.5 0 0 0 1.5-1.5v-3.5h-10Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+
+export { CircleDashedIcon, CloseIcon, DangerIcon, ExternalLinkIcon, IconCalendar, IconChevronDown, IconChevronLeft, IconChevronRight, IconMinus, IconPlus, IconSearch, InfoIcon, SuccessIcon, WarningIcon };

package/dist/components/index.d.ts

@@ -0,0 +1,84 @@
+export * from "./accordion";
+export * from "./alert-dialog";
+export * from "./autocomplete";
+export * from "./avatar";
+export * from "./badge";
+export * from "./breadcrumbs";
+export * from "./button";
+export * from "./button-group";
+export * from "./card";
+export * from "./checkbox";
+export * from "./checkbox-group";
+export * from "./chip";
+export * from "./color-area";
+export * from "./color-field";
+export * from "./color-picker";
+export * from "./color-slider";
+export * from "./color-swatch";
+export * from "./color-swatch-picker";
+export * from "./close-button";
+export * from "./combo-box";
+export * from "./date-field";
+export * from "./date-picker";
+export * from "./date-range-picker";
+export * from "./drawer";
+export * from "./progress-bar";
+export * from "./progress-circle";
+export * from "./time-field";
+export * from "./disclosure";
+export * from "./disclosure-group";
+export * from "./error-message";
+export * from "./kbd";
+export * from "./link";
+export * from "./popover";
+export * from "./scroll-shadow";
+export * from "./separator";
+export * from "./skeleton";
+export * from "./spinner";
+export * from "./surface";
+export * from "./toast";
+export * from "./toggle-button";
+export * from "./switch";
+export * from "./switch-group";
+export * from "./tabs";
+export * from "./tag";
+export * from "./tag-group";
+export * from "./toggle-button-group";
+export * from "./toolbar";
+export * from "./tooltip";
+export * from "./input";
+export * from "./input-group";
+export * from "./textarea";
+export * from "./textfield";
+export * from "./search-field";
+export * from "./text";
+export * from "./label";
+export * from "./description";
+export * from "./empty-state";
+export * from "./field-error";
+export * from "./fieldset";
+export * from "./form";
+export * from "./header";
+export * from "./radio";
+export * from "./radio-group";
+export * from "./input-otp";
+export * from "./alert";
+export * from "./list-box";
+export * from "./list-box-item";
+export * from "./list-box-section";
+export * from "./dropdown";
+export * from "./menu";
+export * from "./menu-item";
+export * from "./menu-section";
+export * from "./modal";
+export * from "./number-field";
+export * from "./pagination";
+export * from "./select";
+export * from "./meter";
+export * from "./slider";
+export * from "./table";
+export * from "./calendar";
+export * from "./calendar-year-picker";
+export * from "./range-calendar";
+export * from "./icons";
+export * from "./rac";

package/dist/components/input/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { InputRoot } from "./input";
+export declare const Input: (({ className, fullWidth, variant: variantProp, ...rest }: import("./input").InputRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, fullWidth, variant: variantProp, ...rest }: import("./input").InputRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Input = {
+    Props: ComponentProps<typeof InputRoot>;
+    RootProps: ComponentProps<typeof InputRoot>;
+};
+export { InputRoot };
+export type { InputRootProps, InputRootProps as InputProps } from "./input";
+export { inputVariants } from "@masaraxui/styles";
+export type { InputVariants } from "@masaraxui/styles";

package/dist/components/input/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { InputRoot } from './input.js';
+export { inputVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Input = Object.assign(InputRoot, {
+  Root: InputRoot
+});
+
+export { Input, InputRoot };

package/dist/components/input/input.d.ts

@@ -0,0 +1,8 @@
+import type { InputVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Input as InputPrimitive } from "react-aria-components";
+interface InputRootProps extends ComponentPropsWithRef<typeof InputPrimitive>, InputVariants {
+}
+declare const InputRoot: ({ className, fullWidth, variant: variantProp, ...rest }: InputRootProps) => import("react/jsx-runtime").JSX.Element;
+export { InputRoot };
+export type { InputRootProps };

package/dist/components/input/input.js

@@ -0,0 +1,31 @@
+"use client";
+import { inputVariants } from '@masaraxui/styles';
+import { useContext } from 'react';
+import { Input } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { TextFieldContext } from '../textfield/textfield.js';
+import { ComboBoxContext } from '../combo-box/combo-box.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const InputRoot = ({
+  className,
+  fullWidth,
+  variant: variantProp,
+  ...rest
+}) => {
+  const textFieldContext = useContext(TextFieldContext);
+  const comboBoxContext = useContext(ComboBoxContext);
+
+  // Use variant from context if not explicitly provided
+  const variant = variantProp ?? textFieldContext.variant ?? comboBoxContext.variant;
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, inputVariants({
+      fullWidth,
+      variant
+    })),
+    "data-slot": "input",
+    ...rest
+  });
+};
+
+export { InputRoot };

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea } from "./input-group";
+export declare const InputGroup: (({ children, className, fullWidth, onClick, variant, ...props }: import("./input-group").InputGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, onClick, variant, ...props }: import("./input-group").InputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("./input-group").InputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+    TextArea: ({ className, ...props }: import("./input-group").InputGroupTextAreaProps) => import("react/jsx-runtime").JSX.Element;
+    Prefix: ({ children, className, ...props }: import("./input-group").InputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Suffix: ({ children, className, ...props }: import("./input-group").InputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type InputGroup = {
+    Props: ComponentProps<typeof InputGroupRoot>;
+    RootProps: ComponentProps<typeof InputGroupRoot>;
+    InputProps: ComponentProps<typeof InputGroupInput>;
+    TextAreaProps: ComponentProps<typeof InputGroupTextArea>;
+    PrefixProps: ComponentProps<typeof InputGroupPrefix>;
+    SuffixProps: ComponentProps<typeof InputGroupSuffix>;
+};
+export { InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea };
+export type { InputGroupRootProps, InputGroupRootProps as InputGroupProps, InputGroupInputProps, InputGroupTextAreaProps, InputGroupPrefixProps, InputGroupSuffixProps, } from "./input-group";
+export { inputGroupVariants } from "@masaraxui/styles";
+export type { InputGroupVariants } from "@masaraxui/styles";

package/dist/components/input-group/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { InputGroupRoot, InputGroupSuffix, InputGroupPrefix, InputGroupTextArea, InputGroupInput } from './input-group.js';
+export { inputGroupVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const InputGroup = Object.assign(InputGroupRoot, {
+  Root: InputGroupRoot,
+  Input: InputGroupInput,
+  TextArea: InputGroupTextArea,
+  Prefix: InputGroupPrefix,
+  Suffix: InputGroupSuffix
+});
+
+export { InputGroup, InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea };

package/dist/components/input-group/input-group.d.ts

@@ -0,0 +1,20 @@
+import type { InputGroupVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Group as GroupPrimitive, Input as InputPrimitive, TextArea as TextAreaPrimitive } from "react-aria-components";
+interface InputGroupRootProps extends ComponentPropsWithRef<typeof GroupPrimitive>, InputGroupVariants {
+}
+declare const InputGroupRoot: ({ children, className, fullWidth, onClick, variant, ...props }: InputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+interface InputGroupInputProps extends ComponentPropsWithRef<typeof InputPrimitive> {
+}
+declare const InputGroupInput: ({ className, ...props }: InputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+interface InputGroupPrefixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const InputGroupPrefix: ({ children, className, ...props }: InputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+interface InputGroupTextAreaProps extends ComponentPropsWithRef<typeof TextAreaPrimitive> {
+}
+declare const InputGroupTextArea: ({ className, ...props }: InputGroupTextAreaProps) => import("react/jsx-runtime").JSX.Element;
+interface InputGroupSuffixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const InputGroupSuffix: ({ children, className, ...props }: InputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+export { InputGroupRoot, InputGroupInput, InputGroupTextArea, InputGroupPrefix, InputGroupSuffix };
+export type { InputGroupRootProps, InputGroupInputProps, InputGroupTextAreaProps, InputGroupPrefixProps, InputGroupSuffixProps, };

package/dist/components/input-group/input-group.js

@@ -0,0 +1,129 @@
+"use client";
+import { inputGroupVariants } from '@masaraxui/styles';
+import React__default, { useContext, createContext } from 'react';
+import { Group, TextArea, Input } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { TextFieldContext } from '../textfield/textfield.js';
+
+const InputGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * InputGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputGroupRoot = ({
+  children,
+  className,
+  fullWidth,
+  onClick,
+  variant,
+  ...props
+}) => {
+  const textFieldContext = useContext(TextFieldContext);
+  const resolvedVariant = variant ?? textFieldContext?.variant;
+  const groupRef = React__default.useRef(null);
+  const slots = React__default.useMemo(() => inputGroupVariants({
+    fullWidth,
+    variant: resolvedVariant
+  }), [fullWidth, resolvedVariant]);
+  const handleClick = e => {
+    const target = e.target;
+    const input = groupRef.current?.querySelector("input");
+    if (input && target !== input && !input.contains(target)) {
+      input.focus();
+    }
+    onClick?.(e);
+  };
+  return /*#__PURE__*/jsx(InputGroupContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Group, {
+      ...props,
+      ref: groupRef,
+      className: composeTwRenderProps(className, slots?.base()),
+      "data-slot": "input-group",
+      onClick: handleClick,
+      children: renderProps => typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * InputGroup Input
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputGroupInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputGroupContext);
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "input-group-input",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * InputGroup Prefix
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputGroupPrefix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.prefix, className),
+    "data-slot": "input-group-prefix",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * InputGroup TextArea
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputGroupTextArea = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputGroupContext);
+  return /*#__PURE__*/jsx(TextArea, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "input-group-textarea",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * InputGroup Suffix
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputGroupSuffix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.suffix, className),
+    "data-slot": "input-group-suffix",
+    ...props,
+    children: children
+  });
+};
+
+export { InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea };

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+import { InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot } from "./input-otp";
+export declare const InputOTP: (({ className, inputClassName, isDisabled, isInvalid, validationDetails, validationErrors, variant, ...props }: import("./input-otp").InputOTPRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, inputClassName, isDisabled, isInvalid, validationDetails, validationErrors, variant, ...props }: import("./input-otp").InputOTPRootProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ className, ...props }: import("./input-otp").InputOTPGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Slot: ({ className, index, ...props }: import("./input-otp").InputOTPSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: import("./input-otp").InputOTPSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type InputOTP = {
+    Props: ComponentProps<typeof InputOTPRoot>;
+    RootProps: ComponentProps<typeof InputOTPRoot>;
+    GroupProps: ComponentProps<typeof InputOTPGroup>;
+    SlotProps: ComponentProps<typeof InputOTPSlot>;
+    SeparatorProps: ComponentProps<typeof InputOTPSeparator>;
+};
+export { InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export type { InputOTPRootProps, InputOTPRootProps as InputOTPProps, InputOTPGroupProps, InputOTPSlotProps, InputOTPSeparatorProps, } from "./input-otp";
+export { inputOTPVariants } from "@masaraxui/styles";
+export type { InputOTPVariants } from "@masaraxui/styles";
+export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
+export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";

package/dist/components/input-otp/index.js

@@ -0,0 +1,21 @@
+"use strict";
+import { InputOTPRoot, InputOTPSeparator, InputOTPSlot, InputOTPGroup } from './input-otp.js';
+export { inputOTPVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const InputOTP = Object.assign(InputOTPRoot, {
+  Root: InputOTPRoot,
+  Group: InputOTPGroup,
+  Slot: InputOTPSlot,
+  Separator: InputOTPSeparator
+});
+//  ===================================
+// Regular Expressions
+//  ===================================
+const REGEXP_ONLY_DIGITS = "^\\d+$";
+const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+
+export { InputOTP, InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/components/input-otp/input-otp.d.ts

@@ -0,0 +1,26 @@
+import type { InputOTPVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { OTPInput } from "input-otp";
+import React from "react";
+interface InputOTPRootProps extends Omit<ComponentPropsWithRef<typeof OTPInput>, "disabled" | "containerClassName" | "render">, InputOTPVariants {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    validationErrors?: string[];
+    validationDetails?: ValidityState;
+    inputClassName?: string;
+    children: React.ReactNode;
+}
+declare const InputOTPRoot: ({ className, inputClassName, isDisabled, isInvalid, validationDetails, validationErrors, variant, ...props }: InputOTPRootProps) => import("react/jsx-runtime").JSX.Element;
+interface InputOTPGroupProps extends ComponentPropsWithRef<"div"> {
+}
+declare const InputOTPGroup: ({ className, ...props }: InputOTPGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface InputOTPSlotProps extends ComponentPropsWithRef<"div"> {
+    index: number;
+}
+declare const InputOTPSlot: ({ className, index, ...props }: InputOTPSlotProps) => import("react/jsx-runtime").JSX.Element;
+interface InputOTPSeparatorProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const InputOTPSeparator: ({ className, ...props }: InputOTPSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export type { InputOTPRootProps, InputOTPGroupProps, InputOTPSlotProps, InputOTPSeparatorProps };