@parrot-co/parrot-ui 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/index.d.mts

@@ -135,6 +135,45 @@ type NumberInputProps = Omit<NumberFieldProps, "className" | "style" | "children
 };
 declare function NumberInput({ appearance, size, color, classNames, styles, append, prepend, placeholder, showSteppers, error, label, description, incrementIcon, decrementIcon, inputRef, wrapperRef, validationStatus, shape, radius, ...props }: NumberInputProps): React$1.JSX.Element;
 
+type PinInputType = "numeric" | "alphanumeric" | "all";
+type PinInputProps = Omit<FieldComponentProps<"input" | "control" | "group" | "slot">, "prepend" | "append" | "shape"> & {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    /** Number of characters. Alias: `maxLength`. Defaults to 6. */
+    length?: number;
+    maxLength?: number;
+    type?: PinInputType;
+    /** Overrides `type`'s value filter. A `^...$` anchored source is expected. */
+    pattern?: RegExp;
+    /** Render each filled slot as a dot instead of the character. */
+    mask?: boolean;
+    /** Placeholder character shown in empty slots. */
+    placeholder?: string;
+    isReadOnly?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    /** Auto-render mode only: split slots into groups of this size. */
+    groupSize?: number;
+    /** Auto-render mode only: node rendered between groups. */
+    separator?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+};
+declare function PinInput({ value, defaultValue, onChange, onComplete, length, maxLength, type, pattern, mask, placeholder, isReadOnly, autoFocus, name, groupSize, separator, children, inputRef: inputRefProp, classNames, styles, ...fieldProps }: PinInputProps): React$1.JSX.Element;
+interface PinInputGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    _SILENCE_TS?: boolean;
+}
+declare function PinInputGroup({ className, ...props }: PinInputGroupProps): React$1.JSX.Element;
+interface PinInputSlotProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    index: number;
+}
+declare function PinInputSlot({ index, className, ...props }: PinInputSlotProps): React$1.JSX.Element;
+interface PinInputSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    _SILENCE_TS?: boolean;
+}
+declare function PinInputSeparator({ className, children, ...props }: PinInputSeparatorProps): React$1.JSX.Element;
+
 type TextWeight = "light" | "regular" | "medium" | "semi-bold" | "bold" | "heavy" | "inherit";
 type TextColorVariant = "light" | "lighter" | "dark" | "default";
 interface TextProps extends Omit<React$1.ComponentPropsWithRef<"span">, "color"> {
@@ -929,4 +968,4 @@ declare function pattern<T>(regex: RegExp, message?: string): FieldValidator<T>;
 declare function matches<T>(fieldName: keyof T & string, message?: string): FieldValidator<T>;
 declare function compose<T>(...fns: Array<FieldValidator<T>>): FieldValidator<T>;
 
-export { Avatar, AvatarGroup, type BaseModalProps, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, type CustomToastRender, DateField, DatePicker, DateRangePicker, type FieldValidator, FileUploader, HoverCard, type HoverCardProps, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, type ModalControls, type ModalDef, type ModalInputProps, type ModalKey, type ModalProps, ModalProvider, type ModalProviderProps, type ModalRegistry, type ModalResult, NumberInput, ListBoxItem as Option, type ParrotModalRegistry, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, type ToastAction, type ToastOptions, type ToastPosition, ToastRegion, type ToastRegionProps, type ToastVariant, Toggle, ToggleButton, ToggleGroup, Tooltip, type TooltipProps, type UseFormOptions, type UseFormReturn, compose, email, matches, max, maxLength, min, minLength, parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };
+export { Avatar, AvatarGroup, type BaseModalProps, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, type CustomToastRender, DateField, DatePicker, DateRangePicker, type FieldValidator, FileUploader, HoverCard, type HoverCardProps, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, type ModalControls, type ModalDef, type ModalInputProps, type ModalKey, type ModalProps, ModalProvider, type ModalProviderProps, type ModalRegistry, type ModalResult, NumberInput, ListBoxItem as Option, type ParrotModalRegistry, PinInput, PinInputGroup, type PinInputGroupProps, type PinInputProps, PinInputSeparator, type PinInputSeparatorProps, PinInputSlot, type PinInputSlotProps, type PinInputType, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, type ToastAction, type ToastOptions, type ToastPosition, ToastRegion, type ToastRegionProps, type ToastVariant, Toggle, ToggleButton, ToggleGroup, Tooltip, type TooltipProps, type UseFormOptions, type UseFormReturn, compose, email, matches, max, maxLength, min, minLength, parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };

package/dist/index.d.ts

@@ -135,6 +135,45 @@ type NumberInputProps = Omit<NumberFieldProps, "className" | "style" | "children
 };
 declare function NumberInput({ appearance, size, color, classNames, styles, append, prepend, placeholder, showSteppers, error, label, description, incrementIcon, decrementIcon, inputRef, wrapperRef, validationStatus, shape, radius, ...props }: NumberInputProps): React$1.JSX.Element;
 
+type PinInputType = "numeric" | "alphanumeric" | "all";
+type PinInputProps = Omit<FieldComponentProps<"input" | "control" | "group" | "slot">, "prepend" | "append" | "shape"> & {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    /** Number of characters. Alias: `maxLength`. Defaults to 6. */
+    length?: number;
+    maxLength?: number;
+    type?: PinInputType;
+    /** Overrides `type`'s value filter. A `^...$` anchored source is expected. */
+    pattern?: RegExp;
+    /** Render each filled slot as a dot instead of the character. */
+    mask?: boolean;
+    /** Placeholder character shown in empty slots. */
+    placeholder?: string;
+    isReadOnly?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    /** Auto-render mode only: split slots into groups of this size. */
+    groupSize?: number;
+    /** Auto-render mode only: node rendered between groups. */
+    separator?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+};
+declare function PinInput({ value, defaultValue, onChange, onComplete, length, maxLength, type, pattern, mask, placeholder, isReadOnly, autoFocus, name, groupSize, separator, children, inputRef: inputRefProp, classNames, styles, ...fieldProps }: PinInputProps): React$1.JSX.Element;
+interface PinInputGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    _SILENCE_TS?: boolean;
+}
+declare function PinInputGroup({ className, ...props }: PinInputGroupProps): React$1.JSX.Element;
+interface PinInputSlotProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    index: number;
+}
+declare function PinInputSlot({ index, className, ...props }: PinInputSlotProps): React$1.JSX.Element;
+interface PinInputSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    _SILENCE_TS?: boolean;
+}
+declare function PinInputSeparator({ className, children, ...props }: PinInputSeparatorProps): React$1.JSX.Element;
+
 type TextWeight = "light" | "regular" | "medium" | "semi-bold" | "bold" | "heavy" | "inherit";
 type TextColorVariant = "light" | "lighter" | "dark" | "default";
 interface TextProps extends Omit<React$1.ComponentPropsWithRef<"span">, "color"> {
@@ -929,4 +968,4 @@ declare function pattern<T>(regex: RegExp, message?: string): FieldValidator<T>;
 declare function matches<T>(fieldName: keyof T & string, message?: string): FieldValidator<T>;
 declare function compose<T>(...fns: Array<FieldValidator<T>>): FieldValidator<T>;
 
-export { Avatar, AvatarGroup, type BaseModalProps, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, type CustomToastRender, DateField, DatePicker, DateRangePicker, type FieldValidator, FileUploader, HoverCard, type HoverCardProps, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, type ModalControls, type ModalDef, type ModalInputProps, type ModalKey, type ModalProps, ModalProvider, type ModalProviderProps, type ModalRegistry, type ModalResult, NumberInput, ListBoxItem as Option, type ParrotModalRegistry, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, type ToastAction, type ToastOptions, type ToastPosition, ToastRegion, type ToastRegionProps, type ToastVariant, Toggle, ToggleButton, ToggleGroup, Tooltip, type TooltipProps, type UseFormOptions, type UseFormReturn, compose, email, matches, max, maxLength, min, minLength, parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };
+export { Avatar, AvatarGroup, type BaseModalProps, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, type CustomToastRender, DateField, DatePicker, DateRangePicker, type FieldValidator, FileUploader, HoverCard, type HoverCardProps, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, type ModalControls, type ModalDef, type ModalInputProps, type ModalKey, type ModalProps, ModalProvider, type ModalProviderProps, type ModalRegistry, type ModalResult, NumberInput, ListBoxItem as Option, type ParrotModalRegistry, PinInput, PinInputGroup, type PinInputGroupProps, type PinInputProps, PinInputSeparator, type PinInputSeparatorProps, PinInputSlot, type PinInputSlotProps, type PinInputType, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, type ToastAction, type ToastOptions, type ToastPosition, ToastRegion, type ToastRegionProps, type ToastVariant, Toggle, ToggleButton, ToggleGroup, Tooltip, type TooltipProps, type UseFormOptions, type UseFormReturn, compose, email, matches, max, maxLength, min, minLength, parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };

package/dist/index.js

@@ -2,6 +2,7 @@
 
 var React13 = require('react');
 var reactAriaComponents = require('react-aria-components');
+var inputOtp = require('input-otp');
 var date = require('@internationalized/date');
 var reactStately = require('react-stately');
 var reactDom = require('react-dom');
@@ -962,6 +963,176 @@ function HiSelector({ size = "1em", ...props }) {
 function HiX({ size = "1em", ...props }) {
   return /* @__PURE__ */ React13__namespace.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13__namespace.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }));
 }
+var PATTERNS = {
+  numeric: inputOtp.REGEXP_ONLY_DIGITS,
+  alphanumeric: inputOtp.REGEXP_ONLY_DIGITS_AND_CHARS,
+  all: void 0
+};
+var INPUT_MODE = {
+  numeric: "numeric",
+  alphanumeric: "text",
+  all: "text"
+};
+var PinInputConfigContext = React13__namespace.createContext(null);
+function usePinInputConfig() {
+  const ctx = React13__namespace.useContext(PinInputConfigContext);
+  if (!ctx) {
+    throw new Error(
+      "PinInput compound components must be rendered inside <PinInput>"
+    );
+  }
+  return ctx;
+}
+function PinInput({
+  value,
+  defaultValue,
+  onChange,
+  onComplete,
+  length,
+  maxLength: maxLength2,
+  type = "numeric",
+  pattern: pattern2,
+  mask = false,
+  placeholder,
+  isReadOnly = false,
+  autoFocus,
+  name,
+  groupSize,
+  separator,
+  children,
+  inputRef: inputRefProp,
+  classNames,
+  styles,
+  ...fieldProps
+}) {
+  const resolvedMax = maxLength2 ?? length ?? 6;
+  const isDisabled = fieldProps.isDisabled ?? false;
+  const isInvalid = !!fieldProps.error;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React13__namespace.useState(defaultValue ?? "");
+  const currentValue = isControlled ? value : internalValue;
+  function handleChange(next) {
+    if (!isControlled) setInternalValue(next);
+    onChange?.(next);
+  }
+  const config = React13__namespace.useMemo(
+    () => ({ mask, placeholder, isDisabled, isInvalid }),
+    [mask, placeholder, isDisabled, isInvalid]
+  );
+  const fieldError = React13__namespace.useMemo(
+    () => ({
+      isInvalid,
+      validationErrors: [],
+      validationDetails: {}
+    }),
+    [isInvalid]
+  );
+  const content = children ?? renderSlots(resolvedMax, groupSize, separator, classNames?.slot);
+  return /* @__PURE__ */ React13__namespace.createElement(PinInputConfigContext.Provider, { value: config }, /* @__PURE__ */ React13__namespace.createElement(reactAriaComponents.FieldErrorContext.Provider, { value: fieldError }, /* @__PURE__ */ React13__namespace.createElement(
+    Field,
+    {
+      ...fieldProps,
+      classNames,
+      styles,
+      replaceDefaultControlWrapper: true
+    },
+    /* @__PURE__ */ React13__namespace.createElement(
+      "div",
+      {
+        className: cn("prt-pin", classNames?.control),
+        style: styles?.control,
+        "data-disabled": isDisabled || void 0,
+        "data-invalid": isInvalid || void 0
+      },
+      /* @__PURE__ */ React13__namespace.createElement(
+        inputOtp.OTPInput,
+        {
+          ref: inputRefProp,
+          value: currentValue,
+          onChange: handleChange,
+          onComplete,
+          maxLength: resolvedMax,
+          pattern: pattern2?.source ?? PATTERNS[type],
+          inputMode: INPUT_MODE[type],
+          textAlign: "center",
+          autoComplete: "one-time-code",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: false,
+          autoFocus,
+          disabled: isDisabled,
+          readOnly: isReadOnly,
+          name,
+          "aria-invalid": isInvalid || void 0,
+          containerClassName: "prt-pin-otp",
+          className: cn("prt-pin-input", classNames?.input),
+          style: styles?.input
+        },
+        content
+      )
+    )
+  )));
+}
+function renderSlots(maxLength2, groupSize, separator, slotClassName) {
+  const size = groupSize && groupSize > 0 ? groupSize : maxLength2;
+  const groups = [];
+  for (let i = 0; i < maxLength2; i += size) {
+    groups.push(
+      Array.from({ length: Math.min(size, maxLength2 - i) }, (_, j) => i + j)
+    );
+  }
+  return groups.map((indices, groupIndex) => /* @__PURE__ */ React13__namespace.createElement(React13__namespace.Fragment, { key: groupIndex }, groupIndex > 0 && /* @__PURE__ */ React13__namespace.createElement(PinInputSeparator, null, separator), /* @__PURE__ */ React13__namespace.createElement(PinInputGroup, null, indices.map((index) => /* @__PURE__ */ React13__namespace.createElement(PinInputSlot, { key: index, index, className: slotClassName })))));
+}
+function PinInputGroup({ className, ...props }) {
+  return /* @__PURE__ */ React13__namespace.createElement(
+    "div",
+    {
+      className: cn("prt-pin-group", className),
+      "data-slot": "group",
+      ...props
+    }
+  );
+}
+function PinInputSlot({
+  index,
+  className,
+  ...props
+}) {
+  const { mask, placeholder, isDisabled, isInvalid } = usePinInputConfig();
+  const { slots } = React13__namespace.useContext(inputOtp.OTPInputContext);
+  const slot = slots[index];
+  const char = slot?.char ?? null;
+  return /* @__PURE__ */ React13__namespace.createElement(
+    "div",
+    {
+      ...props,
+      className: cn("prt-pin-slot", className),
+      "data-slot": "slot",
+      "data-active": slot?.isActive || void 0,
+      "data-filled": !!char || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": isInvalid || void 0
+    },
+    char !== null ? /* @__PURE__ */ React13__namespace.createElement("span", { className: "prt-pin-char" }, mask ? "\u2022" : char) : placeholder ? /* @__PURE__ */ React13__namespace.createElement("span", { className: "prt-pin-placeholder" }, placeholder) : null,
+    slot?.hasFakeCaret && /* @__PURE__ */ React13__namespace.createElement("div", { className: "prt-pin-caret", "aria-hidden": true })
+  );
+}
+function PinInputSeparator({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React13__namespace.createElement(
+    "div",
+    {
+      className: cn("prt-pin-separator", className),
+      "data-slot": "separator",
+      "aria-hidden": true,
+      ...props
+    },
+    children ?? "-"
+  );
+}
 
 // src/utils/theme.ts
 var supportedColors = [
@@ -4675,6 +4846,10 @@ exports.Modal = Modal;
 exports.ModalProvider = ModalProvider;
 exports.NumberInput = NumberInput;
 exports.Option = ListBoxItem;
+exports.PinInput = PinInput;
+exports.PinInputGroup = PinInputGroup;
+exports.PinInputSeparator = PinInputSeparator;
+exports.PinInputSlot = PinInputSlot;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;