@rovula/ui 0.0.76 → 0.0.78

package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts

@@ -279,9 +279,9 @@ declare const meta: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         required?: boolean | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
         loop?: boolean | undefined;
         asChild?: boolean | undefined;
-        onValueChange?: ((value: string) => void) | undefined;
         ref?: React.LegacyRef<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/esm/types/components/Search/Search.stories.d.ts

@@ -314,6 +314,13 @@ declare const meta: {
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/esm/types/components/Slider/Slider.stories.d.ts

@@ -289,10 +289,10 @@ declare const meta: {
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        onValueChange?: ((value: number[]) => void) | undefined;
         asChild?: boolean | undefined;
         inverted?: boolean | undefined;
         minStepsBetweenThumbs?: number | undefined;
-        onValueChange?: ((value: number[]) => void) | undefined;
         onValueCommit?: ((value: number[]) => void) | undefined;
         ref?: React.LegacyRef<HTMLSpanElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/esm/types/components/TextInput/TextInput.d.ts

@@ -21,6 +21,13 @@ export type InputProps = {
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
@@ -48,6 +55,13 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;

package/dist/esm/types/components/TextInput/TextInput.stories.d.ts

@@ -23,6 +23,13 @@ declare const meta: {
         endIcon?: React.ReactNode;
         className?: string;
         labelClassName?: string;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        };
         onClickStartIcon?: () => void;
         onClickEndIcon?: () => void;
         renderStartIcon?: () => React.ReactNode;
@@ -54,6 +61,13 @@ declare const meta: {
         endIcon?: React.ReactNode;
         className?: string | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/esm/types/index.d.ts

@@ -2,6 +2,8 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as MaskedTextInput } from "./components/MaskedTextInput";
+export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
@@ -38,6 +40,8 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { MaskedTextInputProps, MaskRule, } from "./components/MaskedTextInput";
+export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps } from "./components/Navbar/Navbar";

package/dist/index.d.ts

@@ -66,6 +66,13 @@ type InputProps = {
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
@@ -93,12 +100,114 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
+type MaskRule = {
+    pattern: RegExp;
+    placeholder: string;
+    isLiteral?: boolean;
+    validator?: (char: string) => boolean;
+};
+type MaskedTextInputProps = InputProps & {
+    mask?: string;
+    maskChar?: string;
+    showMask?: boolean;
+    guide?: boolean;
+    keepCharPositions?: boolean;
+    rules?: Record<string, RegExp | ((char: string) => boolean)>;
+    onMaskedChange?: (value: string, rawValue: string) => void;
+};
+declare const MaskedTextInput: React__default.ForwardRefExoticComponent<{
+    id?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    rounded?: "none" | "normal" | "full";
+    variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
+    type?: React__default.HTMLInputTypeAttribute;
+    helperText?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    isFloatingLabel?: boolean;
+    keepCloseIconOnValue?: boolean;
+    hasClearIcon?: boolean;
+    hasSearchIcon?: boolean;
+    startIcon?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+    className?: string;
+    labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
+    onClickStartIcon?: () => void;
+    onClickEndIcon?: () => void;
+    renderStartIcon?: () => React__default.ReactNode;
+    renderEndIcon?: () => React__default.ReactNode;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    mask?: string;
+    maskChar?: string;
+    showMask?: boolean;
+    guide?: boolean;
+    keepCharPositions?: boolean;
+    rules?: Record<string, RegExp | ((char: string) => boolean)>;
+    onMaskedChange?: (value: string, rawValue: string) => void;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+type NumberInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: number | string;
+    defaultValue?: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    hideControls?: boolean;
+    allowDecimal?: boolean;
+    allowNegative?: boolean;
+    formatDisplay?: boolean;
+    thousandSeparator?: string;
+    decimalSeparator?: string;
+    prefix?: string;
+    suffix?: string;
+    onChange?: (value: number | undefined) => void;
+    onValueChange?: (value: string) => void;
+};
+declare const NumberInput: React__default.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange" | "value" | "defaultValue"> & {
+    value?: number | string;
+    defaultValue?: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    hideControls?: boolean;
+    allowDecimal?: boolean;
+    allowNegative?: boolean;
+    formatDisplay?: boolean;
+    thousandSeparator?: string;
+    decimalSeparator?: string;
+    prefix?: string;
+    suffix?: string;
+    onChange?: (value: number | undefined) => void;
+    onValueChange?: (value: string) => void;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
 type TextAreaProps = {
     id?: string;
     label?: string;
@@ -809,4 +918,4 @@ declare function usePrevious<T>(value: T): T | undefined;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };

package/dist/index.js

@@ -4,6 +4,8 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as MaskedTextInput } from "./components/MaskedTextInput";
+export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";

package/dist/src/theme/global.css

@@ -2312,6 +2312,14 @@ input[type=number] {
   top: 0px;
 }
 
+.top-0\.5 {
+  top: 0.125rem;
+}
+
+.top-1 {
+  top: 0.25rem;
+}
+
 .top-4 {
   top: 1rem;
 }
@@ -2340,6 +2348,10 @@ input[type=number] {
   z-index: 50;
 }
 
+.z-\[1000\] {
+  z-index: 1000;
+}
+
 .z-\[100\] {
   z-index: 100;
 }
@@ -2770,6 +2782,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .max-w-\[300px\] {
   max-width: 300px;
 }
@@ -2782,6 +2798,10 @@ input[type=number] {
   max-width: 32rem;
 }
 
+.max-w-md {
+  max-width: 28rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -3883,6 +3903,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--function-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
@@ -5519,6 +5544,11 @@ input[type=number] {
   font-weight: var(--label-label2-weight, 400);
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -5632,6 +5662,10 @@ input[type=number] {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -5885,6 +5919,11 @@ input[type=number] {
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -6671,6 +6710,10 @@ input[type=number] {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-input-active-stroke\/10:hover {
+  background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 0.1), transparent);
+}
+
 .hover\:bg-input-disable-bg:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -8041,6 +8084,10 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.disabled\:opacity-30:disabled {
+  opacity: 0.3;
+}
+
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -8854,6 +8901,10 @@ input[type=number] {
   .md\:right-\[40px\] {
     right: 40px;
   }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",