@lerianstudio/sindarian-ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/form/date-picker-field/index.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Control } from 'react-hook-form';
+export type DatePickerFieldProps = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    control: Control<any>;
+    required?: boolean;
+    dateFormat?: string;
+    align?: 'start' | 'center' | 'end';
+    'data-testid'?: string;
+};
+export declare const DatePickerField: ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, ...others }: DatePickerFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/date-picker-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,qIAc7B,oBAAoB,4CA4DtB,CAAA"}

package/dist/components/form/date-picker-field/index.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("../../../components/ui/button");
+const calendar_1 = require("../../../components/ui/calendar");
+const form_1 = require("../../../components/ui/form");
+const popover_1 = require("../../../components/ui/popover");
+const utils_1 = require("../../../lib/utils");
+const dayjs_1 = __importDefault(require("dayjs"));
+const lucide_react_1 = require("lucide-react");
+const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
+            const value = field.value;
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('border-button-border w-full justify-start px-2.5 font-normal', !value && 'text-muted-foreground', readOnly && 'pointer-events-none'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, dayjs_1.default)(value).format(dateFormat)) : ((0, jsx_runtime_1.jsx)("span", { children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", defaultMonth: value, selected: value, onSelect: field.onChange, disabled: disabled || readOnly }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+        } }));
+};
+exports.DatePickerField = DatePickerField;

package/dist/components/form/date-range-field/index.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { Control } from 'react-hook-form';
+export type DateRangeFieldProps = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    control: Control<any>;
+    required?: boolean;
+    numberOfMonths?: number;
+    dateFormat?: string;
+    align?: 'start' | 'center' | 'end';
+    'data-testid'?: string;
+};
+export declare const DateRangeField: ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/date-range-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,qJAe5B,mBAAmB,4CAoErB,CAAA"}

package/dist/components/form/date-range-field/index.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("../../../components/ui/button");
+const calendar_1 = require("../../../components/ui/calendar");
+const form_1 = require("../../../components/ui/form");
+const popover_1 = require("../../../components/ui/popover");
+const utils_1 = require("../../../lib/utils");
+const dayjs_1 = __importDefault(require("dayjs"));
+const lucide_react_1 = require("lucide-react");
+const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
+            const value = field.value;
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('border-button-border w-full justify-start px-2.5 font-normal', !value && 'text-muted-foreground', readOnly && 'pointer-events-none'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? (value.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, dayjs_1.default)(value.from).format(dateFormat), " -", ' ', (0, dayjs_1.default)(value.to).format(dateFormat)] })) : ((0, dayjs_1.default)(value.from).format(dateFormat))) : ((0, jsx_runtime_1.jsx)("span", { children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+        } }));
+};
+exports.DateRangeField = DateRangeField;

package/dist/components/form/index.d.ts

@@ -5,4 +5,6 @@ export * from './pagination-limit-field';
 export * from './combo-box-field';
 export * from './country-field';
 export * from './state-field';
+export * from './date-range-field';
+export * from './date-picker-field';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA"}

package/dist/components/form/index.js

@@ -21,3 +21,5 @@ __exportStar(require("./pagination-limit-field"), exports);
 __exportStar(require("./combo-box-field"), exports);
 __exportStar(require("./country-field"), exports);
 __exportStar(require("./state-field"), exports);
+__exportStar(require("./date-range-field"), exports);
+__exportStar(require("./date-picker-field"), exports);

package/dist/components/ui/calendar/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DayPicker, type DayButton } from 'react-day-picker';
+import { Button } from '../../../components/ui/button';
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,2CA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CA0CxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/calendar/index.js

@@ -0,0 +1,115 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = Calendar;
+exports.CalendarDayButton = CalendarDayButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const utils_1 = require("../../../lib/utils");
+const button_1 = require("../../../components/ui/button");
+const lucide_react_1 = require("lucide-react");
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'plain', formatters, components, ...props }) {
+    const defaultClassNames = (0, react_day_picker_1.getDefaultClassNames)();
+    return ((0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { showOutsideDays: showOutsideDays, className: (0, utils_1.cn)('bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+            ...formatters
+        }, classNames: {
+            root: (0, utils_1.cn)('w-fit', defaultClassNames.root),
+            months: (0, utils_1.cn)('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
+            month: (0, utils_1.cn)('flex flex-col w-full gap-4', defaultClassNames.month),
+            nav: (0, utils_1.cn)('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
+            button_previous: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
+            button_next: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
+            month_caption: (0, utils_1.cn)('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
+            dropdowns: (0, utils_1.cn)('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
+            dropdown_root: (0, utils_1.cn)('relative cn-calendar-dropdown-root rounded-(--cell-radius)', defaultClassNames.dropdown_root),
+            dropdown: (0, utils_1.cn)('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
+            caption_label: (0, utils_1.cn)('select-none font-medium', captionLayout === 'label'
+                ? 'text-sm'
+                : 'cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label),
+            table: 'w-full border-collapse',
+            weekdays: (0, utils_1.cn)('flex', defaultClassNames.weekdays),
+            weekday: (0, utils_1.cn)('text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
+            week: (0, utils_1.cn)('flex w-full mt-2', defaultClassNames.week),
+            week_number_header: (0, utils_1.cn)('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+            week_number: (0, utils_1.cn)('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
+            day: (0, utils_1.cn)('relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none', props.showWeekNumber
+                ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+                : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)', defaultClassNames.day),
+            range_start: (0, utils_1.cn)('rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate', defaultClassNames.range_start),
+            range_middle: (0, utils_1.cn)('rounded-none', defaultClassNames.range_middle),
+            range_end: (0, utils_1.cn)('rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate', defaultClassNames.range_end),
+            today: (0, utils_1.cn)('bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none', defaultClassNames.today),
+            outside: (0, utils_1.cn)('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+            disabled: (0, utils_1.cn)('text-muted-foreground opacity-50', defaultClassNames.disabled),
+            hidden: (0, utils_1.cn)('invisible', defaultClassNames.hidden),
+            ...classNames
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "calendar", ref: rootRef, className: (0, utils_1.cn)(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === 'left') {
+                    return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, { className: (0, utils_1.cn)('size-4', className), ...props }));
+                }
+                if (orientation === 'right') {
+                    return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { className: (0, utils_1.cn)('size-4', className), ...props }));
+                }
+                return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: (0, utils_1.cn)('size-4', className), ...props }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props }) => {
+                return ((0, jsx_runtime_1.jsx)("td", { ...props, children: (0, jsx_runtime_1.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = (0, react_day_picker_1.getDefaultClassNames)();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    const dayNumber = day.date.getDate();
+    const monthName = day.date.toLocaleDateString('en', { month: 'long' });
+    const year = day.date.getFullYear();
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, variant: "plain", size: "small", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "aria-label": `${monthName} ${dayNumber}, ${year}`, "aria-selected": modifiers.selected, "aria-current": modifiers.today ? 'date' : undefined, "aria-disabled": modifiers.disabled, role: "gridcell", tabIndex: modifiers.focused ? 0 : -1, className: (0, utils_1.cn)('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+}

package/dist/components/ui/field/index.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Label } from '../../../components/ui/label';
+declare function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<'legend'> & {
+    variant?: 'legend' | 'label';
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<'div'> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<'div'> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAG7C,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAW1E;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,2CAYnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,QAAA,MAAM,aAAa;;8EAgBlB,CAAA;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAUlE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAYpC;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAa3E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,2CAsBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAA;CACjD,kDA0CA;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,EACX,CAAA"}

package/dist/components/ui/field/index.js

@@ -0,0 +1,79 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = Field;
+exports.FieldLabel = FieldLabel;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldGroup = FieldGroup;
+exports.FieldLegend = FieldLegend;
+exports.FieldSeparator = FieldSeparator;
+exports.FieldSet = FieldSet;
+exports.FieldContent = FieldContent;
+exports.FieldTitle = FieldTitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../../lib/utils");
+const label_1 = require("../../../components/ui/label");
+const separator_1 = require("../../../components/ui/separator");
+function FieldSet({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("fieldset", { "data-slot": "field-set", className: (0, utils_1.cn)('flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className), ...props }));
+}
+function FieldLegend({ className, variant = 'legend', ...props }) {
+    return ((0, jsx_runtime_1.jsx)("legend", { "data-slot": "field-legend", "data-variant": variant, className: (0, utils_1.cn)('mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className), ...props }));
+}
+function FieldGroup({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "field-group", className: (0, utils_1.cn)('group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4', className), ...props }));
+}
+const fieldVariants = (0, class_variance_authority_1.cva)('data-[invalid=true]:text-destructive gap-2 group/field flex w-full', {
+    variants: {
+        orientation: {
+            vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+            horizontal: 'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            responsive: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical'
+    }
+});
+function Field({ className, orientation = 'vertical', ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: (0, utils_1.cn)(fieldVariants({ orientation }), className), ...props }));
+}
+function FieldContent({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "field-content", className: (0, utils_1.cn)('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(label_1.Label, { "data-slot": "field-label", className: (0, utils_1.cn)('has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col', className), ...props }));
+}
+function FieldTitle({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "field-label", className: (0, utils_1.cn)('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "field-description", className: (0, utils_1.cn)('text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5', 'last:mt-0 nth-last-2:-mt-1', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+function FieldSeparator({ children, className, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "field-separator", "data-content": !!children, className: (0, utils_1.cn)('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className), ...props, children: [(0, jsx_runtime_1.jsx)(separator_1.Separator, { className: "absolute inset-0 top-1/2" }), children && ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground bg-background relative mx-auto block w-fit px-2", "data-slot": "field-separator-content", children: children }))] }));
+}
+function FieldError({ className, children, errors, ...props }) {
+    const content = (0, react_1.useMemo)(() => {
+        if (children) {
+            return children;
+        }
+        if (!errors?.length) {
+            return null;
+        }
+        const uniqueErrors = [
+            ...new Map(errors.map((error) => [error?.message, error])).values()
+        ];
+        if (uniqueErrors?.length === 1) {
+            return uniqueErrors[0]?.message;
+        }
+        return ((0, jsx_runtime_1.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && (0, jsx_runtime_1.jsx)("li", { children: error.message }, index)) }));
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { role: "alert", "data-slot": "field-error", className: (0, utils_1.cn)('text-destructive text-sm font-normal', className), ...props, children: content }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {
@@ -32,29 +32,29 @@
     "test:cov": "jest --coverage"
   },
   "dependencies": {
-    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "^4.1.16",
+    "@tailwindcss/postcss": "^4.1.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "postcss": "^8.5.6",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0"
   },
   "peerDependencies": {
@@ -62,16 +62,16 @@
     "lucide-react": ">=0.536.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
+    "react-day-picker": ">=9.13.0",
     "react-hook-form": ">=7.60.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.0",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
-    "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/nextjs": "^9.1.1",
-    "@types/react": "^19.2.2",
-    "storybook": "^9.1.1"
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-docs": "^10.2.0",
+    "@storybook/addon-links": "^10.2.0",
+    "@storybook/nextjs": "^10.2.0",
+    "@types/react": "^19.2.9",
+    "storybook": "^10.2.0"
   },
   "publishConfig": {
     "access": "public"