@lerianstudio/sindarian-ui 1.2.0-beta.7 → 1.2.0-beta.8

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
 export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
@@ -16,5 +17,5 @@ export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
     'data-testid'?: string;
     valueAsString?: boolean;
 };
-export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, ...others }: DatePickerFieldProps<T>) => import("react").JSX.Element;
+export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,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,CAAC,CAAC,CAAA;IACnB,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;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oJAelE,oBAAoB,CAAC,CAAC,CAAC,gCAsFzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,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,CAAC,CAAC,CAAA;IACnB,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;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oJAelE,oBAAoB,CAAC,CAAC,CAAC,sBA4FzB,CAAA"}

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

@@ -1,5 +1,38 @@
 '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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,7 +46,9 @@ 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 React = __importStar(require("react"));
 const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, ...others }) => {
+    const [open, setOpen] = React.useState(false);
     return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
             const convertFieldValueToDate = (fieldValue) => {
                 if (!fieldValue)
@@ -37,7 +72,7 @@ const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeh
             const handleSelect = (date) => {
                 field.onChange(convertDateToOutputFormat(date));
             };
-            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: handleSelect, disabled: disabled || readOnly }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+            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, { open: open, onOpenChange: setOpen, 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)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: (0, dayjs_1.default)(value).format(dateFormat) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", 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: handleSelect, 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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
 export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
@@ -16,5 +17,5 @@ export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
     align?: 'start' | 'center' | 'end';
     'data-testid'?: string;
 };
-export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps<T>) => import("react").JSX.Element;
+export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,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,CAAC,CAAC,CAAA;IACnB,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,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,qJAejE,mBAAmB,CAAC,CAAC,CAAC,gCAoExB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,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,CAAC,CAAC,CAAA;IACnB,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,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,qJAejE,mBAAmB,CAAC,CAAC,CAAC,sBA0ExB,CAAA"}

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

@@ -1,5 +1,38 @@
 '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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,10 +46,12 @@ 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 React = __importStar(require("react"));
 const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
+    const [open, setOpen] = React.useState(false);
     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 })] }));
+            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, { open: open, onOpenChange: setOpen, 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)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: 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", { className: "text-muted-foreground flex-1 text-left", 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/date-time-picker-field/index.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    control: Control<T>;
+    required?: boolean;
+    dateFormat?: string;
+    align?: 'start' | 'center' | 'end';
+    'data-testid'?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    defaultTime?: string;
+};
+export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,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,CAAC,CAAC,CAAA;IACnB,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;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oKAiBtE,wBAAwB,CAAC,CAAC,CAAC,sBA6J7B,CAAA"}

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

@@ -0,0 +1,113 @@
+'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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePickerField = 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 time_picker_1 = require("../../../components/ui/time-picker");
+const utils_1 = require("../../../lib/utils");
+const dayjs_1 = __importDefault(require("dayjs"));
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', minDate, maxDate, defaultTime = '00:00', ...others }) => {
+    const [open, setOpen] = React.useState(false);
+    const parseDefaultTime = (time) => {
+        const [h, m] = time.split(':').map(Number);
+        return {
+            hour: Number.isFinite(h) && h >= 0 && h <= 23 ? h : 0,
+            minute: Number.isFinite(m) && m >= 0 && m <= 59 ? m : 0
+        };
+    };
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
+            const current = field.value ? (0, dayjs_1.default)(field.value) : null;
+            const isValid = current?.isValid() ?? false;
+            const validCurrent = isValid ? current : null;
+            const handleDateSelect = (date) => {
+                if (!date)
+                    return;
+                const time = validCurrent
+                    ? { hour: validCurrent.hour(), minute: validCurrent.minute() }
+                    : parseDefaultTime(defaultTime);
+                const combined = (0, dayjs_1.default)(date)
+                    .hour(time.hour)
+                    .minute(time.minute)
+                    .second(0)
+                    .millisecond(0);
+                field.onChange(combined.toISOString());
+            };
+            const handleTimeChange = (time) => {
+                if (!validCurrent)
+                    return;
+                const updated = validCurrent
+                    .hour(time.hour)
+                    .minute(time.minute)
+                    .second(0)
+                    .millisecond(0);
+                field.onChange(updated.toISOString());
+            };
+            const handleClear = (e) => {
+                e.stopPropagation();
+                field.onChange('');
+                setOpen(false);
+            };
+            const showClear = !!field.value && !readOnly && !disabled;
+            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, { open: open, onOpenChange: setOpen, 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.jsxs)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
+                                                    ? validCurrent.format(dateFormat)
+                                                    : placeholder }), showClear && ((0, jsx_runtime_1.jsx)("span", { role: "button", tabIndex: 0, "aria-label": "Clear date and time", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring ml-2 inline-flex shrink-0 rounded-sm outline-none focus-visible:ring-2", onClick: handleClear, onKeyDown: (e) => {
+                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                        e.preventDefault();
+                                                        handleClear(e);
+                                                    }
+                                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "size-4" }) }))] }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, disabled: (date) => {
+                                                if (disabled || readOnly)
+                                                    return true;
+                                                if (minDate &&
+                                                    date < (0, dayjs_1.default)(minDate).startOf('day').toDate())
+                                                    return true;
+                                                if (maxDate &&
+                                                    date > (0, dayjs_1.default)(maxDate).endOf('day').toDate())
+                                                    return true;
+                                                return false;
+                                            } }), (0, jsx_runtime_1.jsx)("div", { className: "bg-border hidden w-px self-stretch sm:block" }), (0, jsx_runtime_1.jsx)("div", { className: "border-border border-t sm:hidden" }), (0, jsx_runtime_1.jsx)(time_picker_1.TimePicker, { hour: validCurrent ? validCurrent.hour() : undefined, minute: validCurrent ? validCurrent.minute() : undefined, onChange: handleTimeChange, disabled: disabled || readOnly || !validCurrent })] }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+        } }));
+};
+exports.DateTimePickerField = DateTimePickerField;

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

@@ -7,5 +7,6 @@ export * from './country-field';
 export * from './state-field';
 export * from './date-range-field';
 export * from './date-picker-field';
+export * from './date-time-picker-field';
 export * from './password-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;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,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;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA"}

package/dist/components/form/index.js

@@ -23,4 +23,5 @@ __exportStar(require("./country-field"), exports);
 __exportStar(require("./state-field"), exports);
 __exportStar(require("./date-range-field"), exports);
 __exportStar(require("./date-picker-field"), exports);
+__exportStar(require("./date-time-picker-field"), exports);
 __exportStar(require("./password-field"), exports);

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

@@ -1 +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,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBA0CxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
+{"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,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBA2CxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}

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

@@ -44,7 +44,7 @@ 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: {
+    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:34px] [--nav-size:28px] [[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: {
@@ -52,29 +52,29 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             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),
+            button_previous: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant: buttonVariant }), 'size-(--nav-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-(--nav-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
+            month_caption: (0, utils_1.cn)('flex items-center justify-center h-(--nav-size) w-full px-(--nav-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'
+            caption_label: (0, utils_1.cn)('select-none font-bold', 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),
+            weekdays: (0, utils_1.cn)('flex gap-0.5', 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: (0, utils_1.cn)('flex w-full gap-0.5', 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_start: (0, utils_1.cn)('rounded-l-(--cell-radius) bg-accent-mute relative after:bg-accent-mute 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),
+            range_end: (0, utils_1.cn)('rounded-r-(--cell-radius) bg-accent-mute relative after:bg-accent-mute after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate', defaultClassNames.range_end),
+            today: (0, utils_1.cn)('text-foreground rounded-(--cell-radius)', defaultClassNames.today),
+            outside: (0, utils_1.cn)('text-muted-foreground opacity-60 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
@@ -111,5 +111,5 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
     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 }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !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-[today=true]:bg-accent data-[today=true]:text-accent-foreground data-[today=true]:font-bold data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground data-[range-middle=true]:bg-accent-mute data-[range-middle=true]:text-foreground data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground focus-visible:border-accent focus-visible:ring-accent/50 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 focus-visible:ring-[3px] focus-visible:outline-none data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:font-bold data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:font-bold data-[selected-single=true]:font-bold [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
 }

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

@@ -48,7 +48,7 @@ function PopoverTrigger({ ...props }) {
     return (0, jsx_runtime_1.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(PopoverPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: (0, utils_1.cn)('bg-popover text-popover-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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(PopoverPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: (0, utils_1.cn)('bg-popover text-popover-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 border-border z-50 w-72 rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
 }
 function PopoverAnchor({ ...props }) {
     return (0, jsx_runtime_1.jsx)(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });

package/dist/components/ui/time-picker/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export declare const HOURS: string[];
+export declare const MINUTES: string[];
+export type TimePickerProps = {
+    hour?: number;
+    minute?: number;
+    onChange?: (time: {
+        hour: number;
+        minute: number;
+    }) => void;
+    disabled?: boolean;
+    className?: string;
+    hourLabel?: string;
+    minuteLabel?: string;
+};
+declare function TimePicker({ hour, minute, onChange, disabled, className, hourLabel, minuteLabel }: TimePickerProps): React.JSX.Element;
+export { TimePicker };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/time-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/time-picker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,eAAO,MAAM,KAAK,UAEjB,CAAA;AAED,eAAO,MAAM,OAAO,UAEnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AA8ED,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAkB,EAClB,WAAsB,EACvB,EAAE,eAAe,qBAqCjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/time-picker/index.js

@@ -0,0 +1,78 @@
+'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.MINUTES = exports.HOURS = void 0;
+exports.TimePicker = TimePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../../../lib/utils");
+exports.HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+exports.MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
+function TimeScrollColumn({ items, selected, onSelect, label, disabled }) {
+    const listRef = React.useRef(null);
+    const hasScrolled = React.useRef(false);
+    React.useEffect(() => {
+        if (hasScrolled.current)
+            return;
+        if (!listRef.current || !selected)
+            return;
+        const selectedIndex = items.indexOf(selected);
+        if (selectedIndex < 0)
+            return;
+        const selectedElement = listRef.current.children[0]?.children[selectedIndex];
+        if (selectedElement) {
+            selectedElement.scrollIntoView({ block: 'nearest' });
+            hasScrolled.current = true;
+        }
+    }, [selected, items]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground text-xs font-medium select-none", children: label }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5" }), (0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "max-h-60 overflow-y-auto", role: "group", "aria-label": label, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1 p-1", children: items.map((item) => {
+                        const isSelected = item === selected;
+                        return ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-pressed": isSelected, disabled: disabled, className: (0, utils_1.cn)('flex h-8 w-11 items-center justify-center rounded-md text-sm tabular-nums transition-colors', isSelected
+                                ? 'bg-accent text-accent-foreground font-bold'
+                                : 'text-muted-foreground hover:bg-muted font-normal', disabled && 'pointer-events-none opacity-50'), onClick: () => onSelect(item), children: item }, item));
+                    }) }) })] }));
+}
+function TimePicker({ hour, minute, onChange, disabled, className, hourLabel = 'Hour', minuteLabel = 'Minute' }) {
+    const selectedHour = String(hour ?? 0).padStart(2, '0');
+    const selectedMinute = String(minute ?? 0).padStart(2, '0');
+    const handleHourSelect = React.useCallback((value) => {
+        onChange?.({ hour: parseInt(value, 10), minute: minute ?? 0 });
+    }, [onChange, minute]);
+    const handleMinuteSelect = React.useCallback((value) => {
+        onChange?.({ hour: hour ?? 0, minute: parseInt(value, 10) });
+    }, [onChange, hour]);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "time-picker", className: (0, utils_1.cn)('flex gap-2 p-3', className), children: [(0, jsx_runtime_1.jsx)(TimeScrollColumn, { items: exports.HOURS, selected: selectedHour, onSelect: handleHourSelect, label: hourLabel, disabled: disabled }), (0, jsx_runtime_1.jsx)(TimeScrollColumn, { items: exports.MINUTES, selected: selectedMinute, onSelect: handleMinuteSelect, label: minuteLabel, disabled: disabled })] }));
+}

package/dist/globals.css

@@ -298,7 +298,7 @@
     --secondary-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
 
     /* Shadcn — Accent (Brand Lerian) */
-    --accent: 47 92% 51%; /* sunglow = #F5C211 */
+    --accent: 46 98% 57%; /* sunglow/400 = #FDCB28 */
     --accent-hover: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /70 */
     --accent-mute: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /50 */
 

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export * from './components/ui/textarea';
 export * from './components/ui/toast';
 export * from './components/ui/toast/toaster';
 export * from './hooks/use-toast';
+export * from './components/ui/time-picker';
 export * from './components/ui/tooltip';
 export * from './components/ui/form';
 export { Breadcrumb as ApplicationBreadcrumb } from './components/breadcrumb';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA"}

package/dist/index.js

@@ -54,6 +54,7 @@ __exportStar(require("./components/ui/textarea"), exports);
 __exportStar(require("./components/ui/toast"), exports);
 __exportStar(require("./components/ui/toast/toaster"), exports);
 __exportStar(require("./hooks/use-toast"), exports);
+__exportStar(require("./components/ui/time-picker"), exports);
 __exportStar(require("./components/ui/tooltip"), exports);
 __exportStar(require("./components/ui/form"), exports);
 // Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.2.0-beta.7",
+  "version": "1.2.0-beta.8",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {