@arobo/react 1.0.1 → 1.1.1

package/dist/components/icons.js

@@ -15,6 +15,55 @@ const IconChevronDown = props => /*#__PURE__*/jsx("svg", {
     fillRule: "evenodd"
   })
 });
+const IconChevronRight = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Chevron right icon",
+  fill: "none",
+  role: "presentation",
+  viewBox: "0 0 16 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",
@@ -32,5 +81,124 @@ const CloseIcon = props => /*#__PURE__*/jsx("svg", {
     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"
+  })
+});
 
-export { CloseIcon, IconChevronDown };
+export { CircleDashedIcon, CloseIcon, DangerIcon, ExternalLinkIcon, IconChevronDown, IconChevronRight, IconMinus, IconPlus, IconSearch, InfoIcon, SuccessIcon, WarningIcon };

package/dist/components/index.d.ts

@@ -1,3 +1,8 @@
+export * from "./container";
+export * from "./fieldset";
+export * from "./heading";
+export * from "./icons";
+export * from "./rac";
 export * from "./button";
 export * from "./button-group";
 export * from "./calendar";
@@ -12,9 +17,48 @@ export * from "./date-range-picker";
 export * from "./description";
 export * from "./error-message";
 export * from "./field-error";
-export * from "./field-group";
 export * from "./input";
+export * from "./accordion";
+export * from "./input-group";
+export * from "./input-otp";
+export * from "./number-field";
+export * from "./surface";
+export * from "./close-button";
+export * from "./spinner";
+export * from "./alert";
+export * from "./alert-dialog";
+export * from "./chip";
+export * from "./breadcrumbs";
+export * from "./dropdown";
+export * from "./empty";
+export * from "./menu-section";
+export * from "./menu-item";
+export * from "./menu";
+export * from "./kbd";
+export * from "./header";
 export * from "./label";
+export * from "./pagination";
+export * from "./avatar";
+export * from "./radio";
+export * from "./radio-group";
+export * from "./modal";
+export * from "./listbox-item";
+export * from "./listbox-section";
+export * from "./listbox";
+export * from "./slider";
+export * from "./tabs";
+export * from "./textarea";
+export * from "./toggle-button";
+export * from "./select";
+export * from "./tooltip";
+export * from "./empty-state";
+export * from "./tag";
+export * from "./tag-group";
+export * from "./toast";
+export * from "./separator";
+export * from "./carousel";
+export * from "./scroll-shadow";
+export * from "./drawer";
 export * from "./popover";
 export * from "./range-calendar";
 export * from "./surface";

package/dist/components/input/index.js

@@ -1,5 +1,5 @@
 import { InputRoot } from './input.js';
-export { inputVariants } from '../../styles/src/components/input/input.styles.js';
+export { inputVariants } from '../../packages/styles/src/components/input/input.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/input/input.js

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { Input } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 import { TextFieldContext } from '../text-field/text-field.js';
-import { inputVariants } from '../../styles/src/components/input/input.styles.js';
+import { inputVariants } from '../../packages/styles/src/components/input/input.styles.js';
 import { composeTwRenderProps } from '../../utils/compose.js';
 
 const 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 "@arobo/styles";
+export type { InputGroupVariants } from "@arobo/styles";

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

@@ -0,0 +1,15 @@
+import { InputGroupRoot, InputGroupSuffix, InputGroupPrefix, InputGroupTextArea, InputGroupInput } from './input-group.js';
+export { inputGroupVariants } from '../../packages/styles/src/components/input-group/input-group.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 "@arobo/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,128 @@
+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 '../text-field/text-field.js';
+import { inputGroupVariants } from '../../packages/styles/src/components/input-group/input-group.styles.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 "@arobo/styles";
+export type { InputOTPVariants } from "@arobo/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,20 @@
+import { InputOTPRoot, InputOTPSeparator, InputOTPSlot, InputOTPGroup } from './input-otp.js';
+export { inputOTPVariants } from '../../packages/styles/src/components/input-otp/input-otp.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 "@arobo/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, };

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

@@ -0,0 +1,138 @@
+import { OTPInput, OTPInputContext } from 'input-otp';
+import React__default, { createContext, useContext } from 'react';
+import { FieldErrorContext } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { inputOTPVariants } from '../../packages/styles/src/components/input-otp/input-otp.styles.js';
+
+const InputOTPContext = /*#__PURE__*/createContext({
+  isDisabled: false,
+  isInvalid: false
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPRoot = ({
+  className,
+  inputClassName,
+  isDisabled = false,
+  isInvalid = false,
+  validationDetails,
+  validationErrors = [],
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => inputOTPVariants({
+    variant
+  }), [variant]);
+  const validation = React__default.useMemo(() => ({
+    isInvalid,
+    validationErrors,
+    validationDetails
+  }), [isInvalid, validationErrors, validationDetails]);
+  return /*#__PURE__*/jsx(InputOTPContext, {
+    value: {
+      slots,
+      isDisabled,
+      isInvalid
+    },
+    children: /*#__PURE__*/jsx(FieldErrorContext, {
+      value: validation,
+      children: /*#__PURE__*/jsx(OTPInput
+      // OTP Input package uses the `className` prop for the actual `input` element which is not visible to the user so no need to pass it to the base container
+      , {
+        className: slots.input({
+          className: inputClassName
+        }),
+        containerClassName: slots.base({
+          className
+        }),
+        "data-disabled": dataAttr(isDisabled),
+        "data-invalid": dataAttr(isInvalid),
+        "data-slot": "input-otp",
+        disabled: isDisabled,
+        ...props
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Group
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPGroup = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputOTPContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.group, className),
+    "data-slot": "input-otp-group",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Slot
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPSlot = ({
+  className,
+  index,
+  ...props
+}) => {
+  const {
+    isDisabled,
+    isInvalid,
+    slots
+  } = useContext(InputOTPContext);
+  const inputOTPContext = useContext(OTPInputContext);
+  const {
+    char,
+    hasFakeCaret,
+    isActive
+  } = inputOTPContext?.slots[index] ?? {};
+  return /*#__PURE__*/jsxs("div", {
+    ...props,
+    className: composeSlotClassName(slots?.slot, className),
+    "data-active": dataAttr(isActive),
+    "data-disabled": dataAttr(isDisabled),
+    "data-filled": dataAttr(!!char),
+    "data-invalid": dataAttr(isInvalid),
+    "data-slot": "input-otp-slot",
+    children: [char ? /*#__PURE__*/jsx("div", {
+      className: slots?.slotValue(),
+      "data-slot": "input-otp-slot-value",
+      children: char
+    }) : null, hasFakeCaret && isActive ? /*#__PURE__*/jsx("div", {
+      className: slots?.caret(),
+      "data-slot": "input-otp-caret"
+    }) : null]
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPSeparator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputOTPContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.separator, className),
+    "data-slot": "input-otp-separator",
+    ...props
+  });
+};
+
+export { InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot };