@rovula/ui 0.0.75 → 0.0.77

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

@@ -362,6 +362,13 @@ declare const meta: {
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | 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/InputFilter/InputFilter.stories.d.ts

@@ -352,6 +352,13 @@ declare const meta: {
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | 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/NumberInput/NumberInput.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { InputProps as TextInputProps } from "../TextInput/TextInput";
+export type NumberInputProps = Omit<TextInputProps, "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;
+};
+export declare const NumberInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "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.RefAttributes<HTMLInputElement>>;
+export default NumberInput;

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberInput } from "@/index";
+declare const meta: Meta<typeof NumberInput>;
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+export declare const Default: Story;
+export declare const WithMinMax: Story;
+export declare const WithStep: Story;
+export declare const IntegerOnly: Story;
+export declare const ControllWithOutLine: Story;
+export declare const WithoutControls: Story;
+export declare const ErrorState: Story;
+export declare const HelperText: Story;
+export declare const Disabled: Story;
+export declare const FormattedNumber: Story;
+export declare const CurrencyFormat: Story;
+export declare const CurrencyThailand: Story;
+export declare const CustomSeparators: Story;

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

@@ -0,0 +1,2 @@
+export { NumberInput, default } from "./NumberInput";
+export type { NumberInputProps } from "./NumberInput";

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,7 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+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 +39,7 @@ 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 { 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,56 @@ 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 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 +860,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, 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,7 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+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;
 }
@@ -6671,6 +6679,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 +8053,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;
 }

package/package.json

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

package/src/components/Button/Button.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const buttonVariants = cva(
   [
-    "gap-2 font-bold inline-flex items-center outline-none transition ease-in-out duration-45",
+    "gap-2 font-bold inline-flex items-center justify-center outline-none transition ease-in-out duration-45",
   ],
   {
     variants: {