@rovula/ui 0.1.7 → 0.1.8

package/dist/components/Button/Buttons.stories.js

@@ -111,8 +111,8 @@ const previewStates = [
     { label: "Disable", isLoading: false, disabled: true },
 ];
 export const FigmaPreview = {
-    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "flex flex-col gap-10", children: previewColors.map((color) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("h3", { className: "text-xl font-semibold tracking-wide text-text-white capitalize", children: [color, " btn"] }), previewStates.map((state) => (_jsx("div", { className: "grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-2", children: previewStyles.map((style) => (_jsxs("div", { className: "h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3", children: [_jsxs("span", { className: "text-xs font-semibold tracking-wide text-text-white uppercase", children: [style.label, " (", state.label, ")"] }), _jsx("div", { className: "mt-3 flex flex-col gap-2", children: previewSizes.map((size) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], startIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], endIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false })] }, size))) })] }, style.label))) }, state.label)))] }, color))) }) })),
+    render: () => (_jsx("div", { className: "bg-bg-bg2 p-8 min-h-screen", children: _jsx("div", { className: "flex flex-col gap-10", children: previewColors.map((color) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("h3", { className: "text-xl font-semibold tracking-wide text-text-contrast-max capitalize", children: [color, " btn"] }), previewStates.map((state) => (_jsx("div", { className: "grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-2", children: previewStyles.map((style) => (_jsxs("div", { className: "h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3", children: [_jsxs("span", { className: "text-xs font-semibold tracking-wide text-text-contrast-max uppercase", children: [style.label, " (", state.label, ")"] }), _jsx("div", { className: "mt-3 flex flex-col gap-2", children: previewSizes.map((size) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], startIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], endIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false })] }, size))) })] }, style.label))) }, state.label)))] }, color))) }) })),
 };
 export const FigmaPreviewCapsule = {
-    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "flex flex-col gap-10", children: previewColors.map((color) => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("h3", { className: "text-xl font-semibold tracking-wide text-text-white capitalize", children: [color, " btn"] }), previewStates.map((state) => (_jsx("div", { className: "grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-4", children: previewStyles.map((style) => (_jsxs("div", { className: "h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3", children: [_jsxs("span", { className: "text-xs font-semibold tracking-wide text-text-white uppercase", children: [style.label, " (", state.label, ")"] }), _jsx("div", { className: "mt-3 flex flex-col gap-2", children: previewSizes.map((size) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], startIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], endIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false })] }, size))) })] }, style.label))) }, state.label)))] }, color))) }) })),
+    render: () => (_jsx("div", { className: "bg-bg-bg2 p-8 min-h-screen", children: _jsx("div", { className: "flex flex-col gap-10", children: previewColors.map((color) => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("h3", { className: "text-xl font-semibold tracking-wide text-text-contrast-max capitalize", children: [color, " btn"] }), previewStates.map((state) => (_jsx("div", { className: "grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-4", children: previewStyles.map((style) => (_jsxs("div", { className: "h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3", children: [_jsxs("span", { className: "text-xs font-semibold tracking-wide text-text-contrast-max uppercase", children: [style.label, " (", state.label, ")"] }), _jsx("div", { className: "mt-3 flex flex-col gap-2", children: previewSizes.map((size) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], startIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], endIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false })] }, size))) })] }, style.label))) }, state.label)))] }, color))) }) })),
 };

package/dist/components/Calendar/Calendar.js

@@ -17,7 +17,7 @@ import { cn } from "@/utils/cn";
 function Calendar(_a) {
     var { className, classNames, showOutsideDays = true } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
     const defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, Object.assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-surface text-surface-foreground border-surface", className), classNames: Object.assign(Object.assign(Object.assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9"), day: "typography-subtitle1 ", today: "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary !text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6 absolute flex right-0"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4"), caption_label: cn(defaultClassNames.caption_label, "gap-2 flex items-center"), months: "flex flex-col relative", disabled: "[&_button]:rounded-full [&_button]:!text-input-disable-text" }), classNames), styles: {
+    return (_jsx(DayPicker, Object.assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-bg-bg1 text-common-black border-bg-bg1", className), classNames: Object.assign(Object.assign(Object.assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9"), day: "typography-subtitle1 ", today: "text-bold text-common-black [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary !text-state-primary-text-solid rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6 absolute flex right-0"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4"), caption_label: cn(defaultClassNames.caption_label, "gap-2 flex items-center"), months: "flex flex-col relative", disabled: "[&_button]:rounded-full [&_button]:!text-input-disable-text" }), classNames), styles: {
             caption_label: {
                 zIndex: 1,
                 position: "relative",

package/dist/components/Checkbox/Checkbox.js

@@ -17,7 +17,7 @@ import { CheckIcon, MinusIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Checkbox = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background", "hover:border-function-default-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline disabled:data-[state=checked]:bg-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid", {
+    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-bg-bg1", "hover:border-function-default-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-input-active-stroke focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-state-disable-outline disabled:text-state-disable-outline", "disabled:data-[state=checked]:border-state-disable-solid disabled:data-[state=checked]:bg-state-disable-solid", "disabled:data-[state=indeterminate]:border-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid", {
             "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon data-[state=indeterminate]:border-function-active-solid data-[state=indeterminate]:bg-function-active-solid data-[state=indeterminate]:text-function-active-icon": !props.disabled,
             "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover hover:data-[state=indeterminate]:border-function-active-hover hover:data-[state=indeterminate]:bg-function-active-hover": !props.disabled,
         }, className) }, props, { children: _jsxs(CheckboxPrimitive.Indicator, { className: cn("flex size-[14px] items-center justify-center text-current", "[&[data-state=checked]_.checkbox-check-icon]:block", "[&[data-state=indeterminate]_.checkbox-minus-icon]:block"), children: [_jsx(CheckIcon, { className: "checkbox-check-icon hidden size-[14px]" }), _jsx(MinusIcon, { className: "checkbox-minus-icon hidden size-[14px]" })] }) })));

package/dist/components/Checkbox/Checkbox.stories.js

@@ -8,7 +8,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -19,26 +19,30 @@ export const Default = {
     },
     render: (args) => {
         const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, Object.assign({ id: "terms" }, props)), _jsx("label", { htmlFor: "terms", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] }) }));
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, Object.assign({ id: "terms" }, props)), _jsx("label", { htmlFor: "terms", className: "text-sm font-medium leading-none text-text-contrast-max peer-disabled:cursor-not-allowed peer-disabled:text-state-disable-outline", children: "Accept terms and conditions" })] }) }));
     },
 };
 export const WithText = {
     args: {},
     render: (args) => {
         const props = Object.assign({}, args);
-        return (_jsxs("div", { className: "items-top flex space-x-2", children: [_jsx(Checkbox, { id: "terms1" }), _jsxs("div", { className: "grid gap-1.5 leading-none", children: [_jsx("label", { htmlFor: "terms1", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "You agree to our Terms of Service and Privacy Policy." })] })] }));
+        return (_jsxs("div", { className: "items-top flex space-x-2", children: [_jsx(Checkbox, { id: "terms1" }), _jsxs("div", { className: "grid gap-1.5 leading-none", children: [_jsx("label", { htmlFor: "terms1", className: "text-sm font-medium leading-none text-text-contrast-max peer-disabled:cursor-not-allowed peer-disabled:text-state-disable-outline", children: "Accept terms and conditions" }), _jsx("p", { className: "text-sm text-text-g-contrast-medium", children: "You agree to our Terms of Service and Privacy Policy." })] })] }));
     },
 };
 export const Disabled = {
     args: {},
     render: (args) => {
         const props = Object.assign({}, args);
-        return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms2", disabled: true }), _jsx("label", { htmlFor: "terms2", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] }));
+        return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms2", disabled: true }), _jsx("label", { htmlFor: "terms2", className: "text-sm font-medium leading-none text-state-disable-outline peer-disabled:cursor-not-allowed", children: "Accept terms and conditions" })] }));
     },
 };
 const checkboxPreviewRows = [
     { label: "Default", checked: false },
-    { label: "Hover", checked: false, className: "!border-function-default-hover" },
+    {
+        label: "Hover",
+        checked: false,
+        className: "!border-function-default-hover",
+    },
     { label: "Disable", checked: false, disabled: true },
     { label: "Checked", checked: true },
     {
@@ -53,8 +57,14 @@ const checkboxPreviewRows = [
         checked: "indeterminate",
         className: "!data-[state=indeterminate]:border-function-active-hover !data-[state=indeterminate]:bg-function-active-hover",
     },
-    { label: "Indeterminate - Disable", checked: "indeterminate", disabled: true },
+    {
+        label: "Indeterminate - Disable",
+        checked: "indeterminate",
+        disabled: true,
+    },
 ];
 export const FigmaPreview = {
-    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: checkboxPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(Checkbox, { checked: row.checked, disabled: row.disabled, className: row.className })] }, row.label))) }) })),
+    render: () => (_jsx("div", { className: "bg-bg-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-bg-stroke1 bg-bg-bg1 p-6", children: checkboxPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: `text-sm font-medium ${row.disabled
+                            ? "text-state-disable-outline"
+                            : "text-text-contrast-max"}`, children: row.label }), _jsx(Checkbox, { checked: row.checked, disabled: row.disabled, className: row.className })] }, row.label))) }) })),
 };

package/dist/components/Collapsible/Collapsible.styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 export const collapseButtonVariants = cva([
-    "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-secondary-foreground",
+    "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-state-secondary-text-solid",
     "focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
 ], {
     variants: {

package/dist/components/DataTable/DataTable.js

@@ -65,6 +65,6 @@ export function DataTable({ data, columns, manualSorting = false, onSorting, fet
                                             : flexRender(header.column.columnDef.header, header.getContext()), (_a = {
                                             asc: _jsx(ArrowUpIcon, { className: "ml-3 h-4 w-4" }),
                                             desc: _jsx(ArrowDownIcon, { className: "ml-3 h-4 w-4" }),
-                                        }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : (header.column.getCanSort() ? (_jsx(ArrowsUpDownIcon, { className: "ml-3 h-4 w-4 text-text-grey-light" })) : null)] }) }, header.id));
-                        }) }, headerGroup.id))) }), _jsx(TableBody, { className: "overflow-y-scroll", children: !isEmpty ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", className: "", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { className: "h-full self-stretch", children: _jsx(TableCell, { colSpan: columns.length, className: "typography-body1 text-text-grey-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3", children: [_jsx(ClipboardDocumentListIcon, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) })] }) }));
+                                        }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : (header.column.getCanSort() ? (_jsx(ArrowsUpDownIcon, { className: "ml-3 h-4 w-4 text-text-g-contrast-high" })) : null)] }) }, header.id));
+                        }) }, headerGroup.id))) }), _jsx(TableBody, { className: "overflow-y-scroll", children: !isEmpty ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", className: "", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { className: "h-full self-stretch", children: _jsx(TableCell, { colSpan: columns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3", children: [_jsx(ClipboardDocumentListIcon, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) })] }) }));
 }

package/dist/components/Dialog/Dialog.js

@@ -21,32 +21,37 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-base-popup-curtain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
+    return (_jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-modal-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef((_a, ref) => {
     var { className, children, showCloseButton = false, closeButtonClassName } = _a, props = __rest(_a, ["className", "children", "showCloseButton", "closeButtonClassName"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground", closeButtonClassName), children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("absolute right-8 top-8 rounded-sm opacity-70 ring-offset-bg-bg1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-input-active-stroke focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-state-primary-text-solid", closeButtonClassName), children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col gap-2 text-left", className) }, props)));
 };
 DialogHeader.displayName = "DialogHeader";
+const DialogBody = (_a) => {
+    var { className, scrollable = false } = _a, props = __rest(_a, ["className", "scrollable"]);
+    return (_jsx("div", Object.assign({ className: cn("flex flex-1 min-h-0 flex-col mt-8", scrollable && "overflow-y-auto", className) }, props)));
+};
+DialogBody.displayName = "DialogBody";
 const DialogFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-6", className) }, props)));
 };
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h5 tracking-tight ", className) }, props)));
+    return (_jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h4 tracking-tight text-text-contrast-max", className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm", className) }, props)));
+    return (_jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-subtitle1 text-text-g-contrast-medium", className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

package/dist/components/Dialog/Dialog.stories.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./Dialog";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as yup from "yup";
+import { Dialog, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./Dialog";
 import Button from "../Button/Button";
 import { Label } from "../Label/Label";
 import { Input } from "../Input/Input";
+import { Field, Form, ValidationHintList } from "../Form";
+import PasswordInput from "../PasswordInput";
 const meta = {
     title: "Components/Dialog",
     component: Dialog,
@@ -39,3 +42,88 @@ export const Demo = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Edit Profile" }) }), _jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Edit profile" }), _jsx(DialogDescription, { children: "Make changes to your profile here. Click save when you're done." })] }), _jsxs("div", { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "name", className: "text-right", children: "Name" }), _jsx(Input, { id: "name", defaultValue: "Pedro Duarte", className: "col-span-3" })] }), _jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "username", className: "text-right", children: "Username" }), _jsx(Input, { id: "username", defaultValue: "@peduarte", className: "col-span-3" })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { type: "submit", children: "Save changes" }) })] })] }) }));
     },
 };
+const passwordHints = [
+    {
+        id: "min-length",
+        label: "Minimum 12 characters",
+        validate: (values) => values.newPassword.length >= 12,
+        when: (values) => Boolean(values.newPassword),
+    },
+    {
+        id: "lower-and-upper",
+        label: "At least a lower and upper case",
+        validate: (values) => /[a-z]/.test(values.newPassword) && /[A-Z]/.test(values.newPassword),
+        when: (values) => Boolean(values.newPassword),
+    },
+    {
+        id: "special",
+        label: "At least 1 special character",
+        validate: (values) => /[^A-Za-z0-9]/.test(values.newPassword),
+        when: (values) => Boolean(values.newPassword),
+    },
+    {
+        id: "numeral",
+        label: "At least 1 numeral",
+        validate: (values) => /\d/.test(values.newPassword),
+        when: (values) => Boolean(values.newPassword),
+    },
+    {
+        id: "capital",
+        label: "At least 1 capital letter",
+        validate: (values) => /[A-Z]/.test(values.newPassword),
+        when: (values) => Boolean(values.newPassword),
+    },
+    {
+        id: "match",
+        label: "Password and confirmation are matching",
+        validate: (values) => Boolean(values.newPassword) &&
+            values.newPassword === values.confirmPassword,
+        when: (values) => Boolean(values.newPassword) && Boolean(values.confirmPassword),
+    },
+];
+const changePasswordSchema = yup.object({
+    newPassword: yup
+        .string()
+        .required("New password is required")
+        .min(12, "Password must be at least 12 characters")
+        .matches(/[a-z]/, "Password must include a lowercase letter")
+        .matches(/[A-Z]/, "Password must include an uppercase letter")
+        .matches(/\d/, "Password must include a numeral")
+        .matches(/[^A-Za-z0-9]/, "Password must include a special character"),
+    confirmPassword: yup
+        .string()
+        .required("Please confirm your password")
+        .oneOf([yup.ref("newPassword")], "Passwords must match"),
+});
+export const FigmaChangePassword = {
+    render: () => {
+        return (_jsx("div", { className: "flex w-full", children: _jsx(Dialog, { defaultOpen: true, children: _jsx(DialogContent, { className: "min-h-[686px] max-w-[650px]", children: _jsx(Form, { className: "contents", defaultValues: {
+                            newPassword: "",
+                            confirmPassword: "",
+                        }, mode: "onTouched", validationSchema: changePasswordSchema, onSubmit: (values) => {
+                            // eslint-disable-next-line no-console
+                            console.log("Change password submit:", values);
+                        }, children: ({ formState, watch }) => {
+                            const newPassword = watch("newPassword");
+                            const confirmPassword = watch("confirmPassword");
+                            return (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Welcome!" }), _jsx(DialogDescription, { children: "Please create a new password to replace the temporary password." })] }), _jsx(DialogBody, { children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Field, { name: "newPassword", component: PasswordInput, componentProps: {
+                                                        id: "new-password",
+                                                        label: "New password",
+                                                        type: "password",
+                                                        required: true,
+                                                        fullwidth: true,
+                                                        size: "lg",
+                                                    } }), _jsx(Field, { name: "confirmPassword", component: PasswordInput, componentProps: {
+                                                        id: "confirm-password",
+                                                        label: "Confirm password",
+                                                        type: "password",
+                                                        required: true,
+                                                        fullwidth: true,
+                                                        size: "lg",
+                                                    } }), _jsx(ValidationHintList, { values: {
+                                                        newPassword: newPassword || "",
+                                                        confirmPassword: confirmPassword || "",
+                                                    }, rules: passwordHints })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", color: "primary", size: "lg", fullwidth: false, children: "Back" }), _jsx(Button, { type: "submit", size: "lg", fullwidth: false, className: "w-[180px]", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Save changes" })] })] }));
+                        } }) }) }) }));
+    },
+};

package/dist/components/Dropdown/Dropdown.js

@@ -18,7 +18,7 @@ import { Menu } from "../Menu/Menu";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", defaultMenuItemType = "checkbox", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal = false, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "defaultMenuItemType", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", defaultMenuItemType = "checkbox", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal = false, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName, segmentedInput = true } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "defaultMenuItemType", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName", "segmentedInput"]);
     const _id = id || `${label}-select`;
     const [isFocused, setIsFocused] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
@@ -192,7 +192,7 @@ const Dropdown = forwardRef((_a, ref) => {
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: isFocused }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
+    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: isFocused }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
                 (usePortal ? (_jsx(Portal.Root, { container: document.body, children: renderOptions() })) : (renderOptions()))] }));
 });
 export default Dropdown;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -31,13 +31,13 @@ DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })));
+    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })));
 });
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef((_a, ref) => {
     var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef((_a, ref) => {
@@ -58,7 +58,7 @@ const DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 const DropdownMenuLabel = React.forwardRef((_a, ref) => {
     var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
-    return (_jsx(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: cn("px-3 py-2 typography-small4 text-text-grey-medium", inset && "pl-8", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: cn("px-3 py-2 typography-small4 text-text-g-contrast-medium", inset && "pl-8", className) }, props)));
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef((_a, ref) => {

package/dist/components/FocusedScrollView/FocusedScrollView.stories.js

@@ -15,9 +15,9 @@ const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);
 export const VerticalScroll = {
     render: (args) => {
         const [selected, setSelected] = useState("item-5");
-        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-20"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 20" }), _jsx("button", { onClick: () => setSelected("item-29"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 30" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `px-4 py-2 ${selected === `item-${index + 1}`
-                            ? "bg-secondary text-secondary-foreground"
-                            : "bg-white"}`, children: item }, `item-${index + 1}`))) }))] }));
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-state-primary-text-solid rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-20"), className: "px-3 py-1 bg-primary text-state-primary-text-solid rounded", children: "Scroll to Item 20" }), _jsx("button", { onClick: () => setSelected("item-29"), className: "px-3 py-1 bg-primary text-state-primary-text-solid rounded", children: "Scroll to Item 30" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `px-4 py-2 ${selected === `item-${index + 1}`
+                            ? "bg-secondary text-state-secondary-text-solid"
+                            : "bg-bg-bg1"}`, children: item }, `item-${index + 1}`))) }))] }));
     },
 };
 export const HorizontalScroll = {
@@ -26,8 +26,8 @@ export const HorizontalScroll = {
     },
     render: (args) => {
         const [selected, setSelected] = useState("item-15");
-        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-15"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 15" }), _jsx("button", { onClick: () => setSelected("item-25"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 25" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `inline-block w-28 h-12 mx-2 text-center leading-[3rem] rounded ${selected === `item-${index + 1}`
-                            ? "bg-secondary text-secondary-foreground"
-                            : "bg-gray-200"}`, children: item }, `item-${index + 1}`))) }))] }));
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-state-primary-text-solid rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-15"), className: "px-3 py-1 bg-primary text-state-primary-text-solid rounded", children: "Scroll to Item 15" }), _jsx("button", { onClick: () => setSelected("item-25"), className: "px-3 py-1 bg-primary text-state-primary-text-solid rounded", children: "Scroll to Item 25" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `inline-block w-28 h-12 mx-2 text-center leading-[3rem] rounded ${selected === `item-${index + 1}`
+                            ? "bg-secondary text-state-secondary-text-solid"
+                            : "bg-transparent-grey2-16"}`, children: item }, `item-${index + 1}`))) }))] }));
     },
 };

package/dist/components/Form/Field.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { useController, } from "react-hook-form";
+const extractChangedValue = (payload) => {
+    if (payload &&
+        typeof payload === "object" &&
+        "target" in payload &&
+        payload.target &&
+        typeof payload.target === "object") {
+        const target = payload.target;
+        if (target.type === "checkbox") {
+            return target.checked;
+        }
+        return target.value;
+    }
+    return payload;
+};
+export const Field = ({ name, component: Component, componentProps, rules, defaultValue, disabled = false, shouldUnregister = false, id, describedBy, valuePropName = "value", changePropName = "onChange", blurPropName = "onBlur", refPropName = "ref", errorMessagePropName = "errorMessage", invalidPropName = "error", parseValue, formatValue, onChange, onBlur, }) => {
+    const fieldId = useId();
+    const resolvedId = id || `${name.replace(/\./g, "-")}-${fieldId}`;
+    const { field, fieldState: { error, invalid }, } = useController({
+        name,
+        rules,
+        disabled,
+        defaultValue,
+        shouldUnregister,
+    });
+    const handleChange = (rawPayload) => {
+        const extractedValue = extractChangedValue(rawPayload);
+        const parsedValue = parseValue
+            ? parseValue(extractedValue, rawPayload)
+            : extractedValue;
+        field.onChange(parsedValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsedValue, rawPayload);
+    };
+    const handleBlur = () => {
+        field.onBlur();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    const componentValue = formatValue
+        ? formatValue(field.value)
+        : field.value;
+    const sharedProps = Object.assign(Object.assign({}, componentProps), { id: resolvedId, name: field.name, disabled, "aria-invalid": invalid || undefined, "aria-describedby": describedBy });
+    sharedProps[valuePropName] = componentValue;
+    sharedProps[changePropName] = handleChange;
+    if (blurPropName) {
+        sharedProps[blurPropName] = handleBlur;
+    }
+    if (refPropName) {
+        sharedProps[refPropName] = field.ref;
+    }
+    if (errorMessagePropName) {
+        sharedProps[errorMessagePropName] = error === null || error === void 0 ? void 0 : error.message;
+    }
+    if (invalidPropName) {
+        sharedProps[invalidPropName] = invalid;
+    }
+    return _jsx(Component, Object.assign({}, sharedProps));
+};
+export default Field;

package/dist/components/Form/FieldMessage.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+import { cn } from "@/utils/cn";
+export const FieldMessage = (_a) => {
+    var { name, className } = _a, props = __rest(_a, ["name", "className"]);
+    const { getFieldState, formState } = useFormContext();
+    const { error } = getFieldState(name, formState);
+    if (!(error === null || error === void 0 ? void 0 : error.message)) {
+        return null;
+    }
+    return (_jsx("p", Object.assign({}, props, { className: cn("text-sm text-input-error mt-1", className), role: "alert", children: error.message })));
+};
+export default FieldMessage;

package/dist/components/Form/Form.js

@@ -1,45 +1,77 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// src/Form.tsx
-import { useState } from "react";
-import * as yup from "yup";
-const schema = yup.object().shape({
-    name: yup.string().required("Name is required"),
-    email: yup.string().email("Invalid email").required("Email is required"),
-    password: yup
-        .string()
-        .min(6, "Password must be at least 6 characters")
-        .required("Password is required"),
-});
-const Form = ({ onSubmit, className = "" }) => {
-    const [values, setValues] = useState({
-        name: "",
-        email: "",
-        password: "",
-    });
-    const [errors, setErrors] = useState({});
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setValues(Object.assign(Object.assign({}, values), { [name]: value }));
-    };
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            await schema.validate(values, { abortEarly: false });
-            setErrors({});
-            onSubmit(values);
-        }
-        catch (err) {
-            if (err instanceof yup.ValidationError) {
-                const validationErrors = {};
-                err.inner.forEach((error) => {
-                    if (error.path) {
-                        validationErrors[error.path] = error.message;
-                    }
-                });
-                setErrors(validationErrors);
-            }
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
         }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { FormProvider, useForm, } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+export const createYupResolver = (schema) => yupResolver(schema);
+export const createControlledForm = ({ methods, defaultValues, controllerRef, }) => {
+    const FormRoot = React.forwardRef((_a, ref) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return (_jsx(Form, Object.assign({}, props, { ref: ref, methods: methods, defaultValues: defaultValues, controllerRef: controllerRef, children: children })));
+    });
+    FormRoot.displayName = "ControlledFormRoot";
+    return {
+        methods,
+        FormRoot,
     };
-    return (_jsxs("form", { className: `form ${className}`, onSubmit: handleSubmit, children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "name", children: "Name" }), _jsx("input", { id: "name", name: "name", type: "text", value: values.name, onChange: handleChange }), errors.name && _jsx("span", { className: "error", children: errors.name })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", name: "email", type: "email", value: values.email, onChange: handleChange }), errors.email && _jsx("span", { className: "error", children: errors.email })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "password", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", value: values.password, onChange: handleChange }), errors.password && _jsx("span", { className: "error", children: errors.password })] }), _jsx("button", { type: "submit", children: "Submit" })] }));
 };
+export const useControlledForm = ({ defaultValues, controllerRef, resolver, validationSchema, mode = "onSubmit", reValidateMode = "onChange", }) => {
+    const resolvedResolver = resolver !== null && resolver !== void 0 ? resolver : (validationSchema
+        ? createYupResolver(validationSchema)
+        : undefined);
+    const methods = useForm({
+        defaultValues,
+        resolver: resolvedResolver,
+        mode,
+        reValidateMode,
+    });
+    return createControlledForm({
+        methods,
+        defaultValues,
+        controllerRef,
+    });
+};
+const FormInner = (_a, ref) => {
+    var { children, defaultValues, methods: externalMethods, controllerRef, onSubmit, onInvalidSubmit, resolver, validationSchema, mode = "onSubmit", reValidateMode = "onChange", noValidate = true } = _a, formProps = __rest(_a, ["children", "defaultValues", "methods", "controllerRef", "onSubmit", "onInvalidSubmit", "resolver", "validationSchema", "mode", "reValidateMode", "noValidate"]);
+    const resolvedResolver = resolver !== null && resolver !== void 0 ? resolver : (validationSchema
+        ? createYupResolver(validationSchema)
+        : undefined);
+    const internalMethods = useForm({
+        defaultValues,
+        resolver: resolvedResolver,
+        mode,
+        reValidateMode,
+    });
+    const methods = externalMethods !== null && externalMethods !== void 0 ? externalMethods : internalMethods;
+    const controller = React.useMemo(() => ({
+        submit: async () => {
+            await methods.handleSubmit(onSubmit, onInvalidSubmit)();
+        },
+        getValues: () => methods.getValues(),
+        setValue: methods.setValue,
+        trigger: methods.trigger,
+        reset: methods.reset,
+    }), [methods, onSubmit, onInvalidSubmit]);
+    React.useImperativeHandle(ref, () => controller, [controller]);
+    React.useEffect(() => {
+        if (!controllerRef)
+            return;
+        controllerRef.current = controller;
+        return () => {
+            controllerRef.current = null;
+        };
+    }, [controllerRef, controller]);
+    return (_jsx(FormProvider, Object.assign({}, methods, { children: _jsx("form", Object.assign({}, formProps, { noValidate: noValidate, onSubmit: methods.handleSubmit(onSubmit, onInvalidSubmit), children: typeof children === "function" ? children(methods) : children })) })));
+};
+export const Form = React.forwardRef(FormInner);
 export default Form;