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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/form/date-picker-field/index.d.ts +2 -1
  2. package/dist/components/form/date-picker-field/index.d.ts.map +1 -1
  3. package/dist/components/form/date-picker-field/index.js +36 -1
  4. package/dist/components/form/date-range-field/index.d.ts +2 -1
  5. package/dist/components/form/date-range-field/index.d.ts.map +1 -1
  6. package/dist/components/form/date-range-field/index.js +36 -1
  7. package/dist/components/form/date-time-picker-field/index.d.ts +23 -0
  8. package/dist/components/form/date-time-picker-field/index.d.ts.map +1 -0
  9. package/dist/components/form/date-time-picker-field/index.js +113 -0
  10. package/dist/components/form/index.d.ts +2 -0
  11. package/dist/components/form/index.d.ts.map +1 -1
  12. package/dist/components/form/index.js +2 -0
  13. package/dist/components/form/otp-field/index.d.ts +18 -0
  14. package/dist/components/form/otp-field/index.d.ts.map +1 -0
  15. package/dist/components/form/otp-field/index.js +19 -0
  16. package/dist/components/ui/calendar/index.d.ts.map +1 -1
  17. package/dist/components/ui/calendar/index.js +12 -12
  18. package/dist/components/ui/otp-input/index.d.ts +13 -0
  19. package/dist/components/ui/otp-input/index.d.ts.map +1 -0
  20. package/dist/components/ui/otp-input/index.js +62 -0
  21. package/dist/components/ui/popover/index.js +1 -1
  22. package/dist/components/ui/time-picker/index.d.ts +18 -0
  23. package/dist/components/ui/time-picker/index.d.ts.map +1 -0
  24. package/dist/components/ui/time-picker/index.js +78 -0
  25. package/dist/globals.css +17 -1
  26. package/dist/index.d.ts +2 -0
  27. package/dist/index.d.ts.map +1 -1
  28. package/dist/index.js +2 -0
  29. package/package.json +4 -3
@@ -1,3 +1,4 @@
1
+ import * as React from 'react';
1
2
  import { ReactNode } from 'react';
2
3
  import { Control, FieldValues } from 'react-hook-form';
3
4
  export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
@@ -16,5 +17,5 @@ export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
16
17
  'data-testid'?: string;
17
18
  valueAsString?: boolean;
18
19
  };
19
- 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;
20
+ 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;
20
21
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,5 +1,38 @@
1
1
  'use client';
2
2
  "use strict";
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || (function () {
20
+ var ownKeys = function(o) {
21
+ ownKeys = Object.getOwnPropertyNames || function (o) {
22
+ var ar = [];
23
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
24
+ return ar;
25
+ };
26
+ return ownKeys(o);
27
+ };
28
+ return function (mod) {
29
+ if (mod && mod.__esModule) return mod;
30
+ var result = {};
31
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
32
+ __setModuleDefault(result, mod);
33
+ return result;
34
+ };
35
+ })();
3
36
  var __importDefault = (this && this.__importDefault) || function (mod) {
4
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
5
38
  };
@@ -13,7 +46,9 @@ const popover_1 = require("../../../components/ui/popover");
13
46
  const utils_1 = require("../../../lib/utils");
14
47
  const dayjs_1 = __importDefault(require("dayjs"));
15
48
  const lucide_react_1 = require("lucide-react");
49
+ const React = __importStar(require("react"));
16
50
  const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, ...others }) => {
51
+ const [open, setOpen] = React.useState(false);
17
52
  return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
18
53
  const convertFieldValueToDate = (fieldValue) => {
19
54
  if (!fieldValue)
@@ -37,7 +72,7 @@ const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeh
37
72
  const handleSelect = (date) => {
38
73
  field.onChange(convertDateToOutputFormat(date));
39
74
  };
40
- 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 })] }));
75
+ 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 })] }));
41
76
  } }));
42
77
  };
43
78
  exports.DatePickerField = DatePickerField;
@@ -1,3 +1,4 @@
1
+ import * as React from 'react';
1
2
  import { ReactNode } from 'react';
2
3
  import { Control, FieldValues } from 'react-hook-form';
3
4
  export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
@@ -16,5 +17,5 @@ export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
16
17
  align?: 'start' | 'center' | 'end';
17
18
  'data-testid'?: string;
18
19
  };
19
- 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;
20
+ 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;
20
21
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,5 +1,38 @@
1
1
  'use client';
2
2
  "use strict";
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || (function () {
20
+ var ownKeys = function(o) {
21
+ ownKeys = Object.getOwnPropertyNames || function (o) {
22
+ var ar = [];
23
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
24
+ return ar;
25
+ };
26
+ return ownKeys(o);
27
+ };
28
+ return function (mod) {
29
+ if (mod && mod.__esModule) return mod;
30
+ var result = {};
31
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
32
+ __setModuleDefault(result, mod);
33
+ return result;
34
+ };
35
+ })();
3
36
  var __importDefault = (this && this.__importDefault) || function (mod) {
4
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
5
38
  };
@@ -13,10 +46,12 @@ const popover_1 = require("../../../components/ui/popover");
13
46
  const utils_1 = require("../../../lib/utils");
14
47
  const dayjs_1 = __importDefault(require("dayjs"));
15
48
  const lucide_react_1 = require("lucide-react");
49
+ const React = __importStar(require("react"));
16
50
  const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
51
+ const [open, setOpen] = React.useState(false);
17
52
  return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
18
53
  const value = field.value;
19
- 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 })] }));
54
+ 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 })] }));
20
55
  } }));
21
56
  };
22
57
  exports.DateRangeField = DateRangeField;
@@ -0,0 +1,23 @@
1
+ import * as React from 'react';
2
+ import { type ReactNode } from 'react';
3
+ import { Control, FieldValues } from 'react-hook-form';
4
+ export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
5
+ name: string;
6
+ label?: ReactNode;
7
+ tooltip?: string;
8
+ labelExtra?: ReactNode;
9
+ description?: ReactNode;
10
+ placeholder?: string;
11
+ disabled?: boolean;
12
+ readOnly?: boolean;
13
+ control: Control<T>;
14
+ required?: boolean;
15
+ dateFormat?: string;
16
+ align?: 'start' | 'center' | 'end';
17
+ 'data-testid'?: string;
18
+ minDate?: Date;
19
+ maxDate?: Date;
20
+ defaultTime?: string;
21
+ };
22
+ 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;
23
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,113 @@
1
+ 'use client';
2
+ "use strict";
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || (function () {
20
+ var ownKeys = function(o) {
21
+ ownKeys = Object.getOwnPropertyNames || function (o) {
22
+ var ar = [];
23
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
24
+ return ar;
25
+ };
26
+ return ownKeys(o);
27
+ };
28
+ return function (mod) {
29
+ if (mod && mod.__esModule) return mod;
30
+ var result = {};
31
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
32
+ __setModuleDefault(result, mod);
33
+ return result;
34
+ };
35
+ })();
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.DateTimePickerField = void 0;
41
+ const jsx_runtime_1 = require("react/jsx-runtime");
42
+ const button_1 = require("../../../components/ui/button");
43
+ const calendar_1 = require("../../../components/ui/calendar");
44
+ const form_1 = require("../../../components/ui/form");
45
+ const popover_1 = require("../../../components/ui/popover");
46
+ const time_picker_1 = require("../../../components/ui/time-picker");
47
+ const utils_1 = require("../../../lib/utils");
48
+ const dayjs_1 = __importDefault(require("dayjs"));
49
+ const lucide_react_1 = require("lucide-react");
50
+ const React = __importStar(require("react"));
51
+ 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 }) => {
52
+ const [open, setOpen] = React.useState(false);
53
+ const parseDefaultTime = (time) => {
54
+ const [h, m] = time.split(':').map(Number);
55
+ return {
56
+ hour: Number.isFinite(h) && h >= 0 && h <= 23 ? h : 0,
57
+ minute: Number.isFinite(m) && m >= 0 && m <= 59 ? m : 0
58
+ };
59
+ };
60
+ return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
61
+ const current = field.value ? (0, dayjs_1.default)(field.value) : null;
62
+ const isValid = current?.isValid() ?? false;
63
+ const validCurrent = isValid ? current : null;
64
+ const handleDateSelect = (date) => {
65
+ if (!date)
66
+ return;
67
+ const time = validCurrent
68
+ ? { hour: validCurrent.hour(), minute: validCurrent.minute() }
69
+ : parseDefaultTime(defaultTime);
70
+ const combined = (0, dayjs_1.default)(date)
71
+ .hour(time.hour)
72
+ .minute(time.minute)
73
+ .second(0)
74
+ .millisecond(0);
75
+ field.onChange(combined.toISOString());
76
+ };
77
+ const handleTimeChange = (time) => {
78
+ if (!validCurrent)
79
+ return;
80
+ const updated = validCurrent
81
+ .hour(time.hour)
82
+ .minute(time.minute)
83
+ .second(0)
84
+ .millisecond(0);
85
+ field.onChange(updated.toISOString());
86
+ };
87
+ const handleClear = (e) => {
88
+ e.stopPropagation();
89
+ field.onChange('');
90
+ setOpen(false);
91
+ };
92
+ const showClear = !!field.value && !readOnly && !disabled;
93
+ 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
94
+ ? validCurrent.format(dateFormat)
95
+ : 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) => {
96
+ if (e.key === 'Enter' || e.key === ' ') {
97
+ e.preventDefault();
98
+ handleClear(e);
99
+ }
100
+ }, 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) => {
101
+ if (disabled || readOnly)
102
+ return true;
103
+ if (minDate &&
104
+ date < (0, dayjs_1.default)(minDate).startOf('day').toDate())
105
+ return true;
106
+ if (maxDate &&
107
+ date > (0, dayjs_1.default)(maxDate).endOf('day').toDate())
108
+ return true;
109
+ return false;
110
+ } }), (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 })] }));
111
+ } }));
112
+ };
113
+ exports.DateTimePickerField = DateTimePickerField;
@@ -7,5 +7,7 @@ export * from './country-field';
7
7
  export * from './state-field';
8
8
  export * from './date-range-field';
9
9
  export * from './date-picker-field';
10
+ export * from './date-time-picker-field';
11
+ export * from './otp-field';
10
12
  export * from './password-field';
11
13
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
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,0BAA0B,CAAA;AACxC,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA"}
@@ -23,4 +23,6 @@ __exportStar(require("./country-field"), exports);
23
23
  __exportStar(require("./state-field"), exports);
24
24
  __exportStar(require("./date-range-field"), exports);
25
25
  __exportStar(require("./date-picker-field"), exports);
26
+ __exportStar(require("./date-time-picker-field"), exports);
27
+ __exportStar(require("./otp-field"), exports);
26
28
  __exportStar(require("./password-field"), exports);
@@ -0,0 +1,18 @@
1
+ import { ReactNode } from 'react';
2
+ import { Control, FieldValues } from 'react-hook-form';
3
+ export type OtpFieldProps<T extends FieldValues = FieldValues> = {
4
+ name: string;
5
+ label?: ReactNode;
6
+ tooltip?: string;
7
+ labelExtra?: ReactNode;
8
+ description?: ReactNode;
9
+ control: Control<T>;
10
+ disabled?: boolean;
11
+ required?: boolean;
12
+ maxLength?: number;
13
+ pattern?: string;
14
+ separator?: boolean;
15
+ 'data-testid'?: string;
16
+ };
17
+ export declare const OtpField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, maxLength, pattern, separator, ...others }: OtpFieldProps<T>) => import("react").JSX.Element;
18
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/otp-field/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC/D,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,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6FAU3D,aAAa,CAAC,CAAC,CAAC,gCAmElB,CAAA"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.OtpField = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const form_1 = require("../../../components/ui/form");
6
+ const otp_input_1 = require("../../../components/ui/otp-input");
7
+ const OtpField = ({ name, label, tooltip, labelExtra, description, maxLength = 6, pattern, separator = false, ...others }) => {
8
+ const midpoint = Math.floor(maxLength / 2);
9
+ const renderSlots = () => {
10
+ if (separator && maxLength > 1) {
11
+ const firstGroup = Array.from({ length: midpoint }, (_, i) => ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: i }, i)));
12
+ const secondGroup = Array.from({ length: maxLength - midpoint }, (_, i) => (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: midpoint + i }, midpoint + i));
13
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: firstGroup }), (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSeparator, {}), (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: secondGroup })] }));
14
+ }
15
+ return ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: Array.from({ length: maxLength }, (_, i) => ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: i }, i))) }));
16
+ };
17
+ return ((0, jsx_runtime_1.jsx)(form_1.FormField, { ...others, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: others.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.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(otp_input_1.InputOTP, { maxLength: maxLength, pattern: pattern, value: field.value ?? '', onChange: field.onChange, onBlur: field.onBlur, ref: field.ref, name: field.name, disabled: others.disabled, "data-testid": others['data-testid'], children: renderSlots() }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] })) }));
18
+ };
19
+ exports.OtpField = OtpField;
@@ -1 +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"}
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,qBA2CxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
@@ -44,7 +44,7 @@ const button_1 = require("../../../components/ui/button");
44
44
  const lucide_react_1 = require("lucide-react");
45
45
  function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'plain', formatters, components, ...props }) {
46
46
  const defaultClassNames = (0, react_day_picker_1.getDefaultClassNames)();
47
- 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: {
47
+ 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: {
48
48
  formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
49
49
  ...formatters
50
50
  }, classNames: {
@@ -52,29 +52,29 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
52
52
  months: (0, utils_1.cn)('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
53
53
  month: (0, utils_1.cn)('flex flex-col w-full gap-4', defaultClassNames.month),
54
54
  nav: (0, utils_1.cn)('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
55
- 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),
56
- 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),
57
- month_caption: (0, utils_1.cn)('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
55
+ 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),
56
+ 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),
57
+ month_caption: (0, utils_1.cn)('flex items-center justify-center h-(--nav-size) w-full px-(--nav-size)', defaultClassNames.month_caption),
58
58
  dropdowns: (0, utils_1.cn)('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
59
59
  dropdown_root: (0, utils_1.cn)('relative cn-calendar-dropdown-root rounded-(--cell-radius)', defaultClassNames.dropdown_root),
60
60
  dropdown: (0, utils_1.cn)('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
61
- caption_label: (0, utils_1.cn)('select-none font-medium', captionLayout === 'label'
61
+ caption_label: (0, utils_1.cn)('select-none font-bold', captionLayout === 'label'
62
62
  ? 'text-sm'
63
63
  : '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),
64
64
  table: 'w-full border-collapse',
65
- weekdays: (0, utils_1.cn)('flex', defaultClassNames.weekdays),
65
+ weekdays: (0, utils_1.cn)('flex gap-0.5', defaultClassNames.weekdays),
66
66
  weekday: (0, utils_1.cn)('text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
67
- week: (0, utils_1.cn)('flex w-full mt-2', defaultClassNames.week),
67
+ week: (0, utils_1.cn)('flex w-full gap-0.5', defaultClassNames.week),
68
68
  week_number_header: (0, utils_1.cn)('select-none w-(--cell-size)', defaultClassNames.week_number_header),
69
69
  week_number: (0, utils_1.cn)('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
70
70
  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
71
71
  ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
72
72
  : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)', defaultClassNames.day),
73
- 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),
73
+ 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),
74
74
  range_middle: (0, utils_1.cn)('rounded-none', defaultClassNames.range_middle),
75
- 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),
76
- today: (0, utils_1.cn)('bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none', defaultClassNames.today),
77
- outside: (0, utils_1.cn)('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
75
+ 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),
76
+ today: (0, utils_1.cn)('text-foreground rounded-(--cell-radius)', defaultClassNames.today),
77
+ outside: (0, utils_1.cn)('text-muted-foreground opacity-60 aria-selected:text-muted-foreground', defaultClassNames.outside),
78
78
  disabled: (0, utils_1.cn)('text-muted-foreground opacity-50', defaultClassNames.disabled),
79
79
  hidden: (0, utils_1.cn)('invisible', defaultClassNames.hidden),
80
80
  ...classNames
@@ -111,5 +111,5 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
111
111
  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 &&
112
112
  !modifiers.range_start &&
113
113
  !modifiers.range_end &&
114
- !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 }));
114
+ !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 }));
115
115
  }
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { OTPInput } from 'input-otp';
3
+ declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
4
+ containerClassName?: string;
5
+ }): React.JSX.Element;
6
+ declare function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
7
+ declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<'div'> & {
8
+ index: number;
9
+ }): React.JSX.Element;
10
+ declare function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>): React.JSX.Element;
11
+ export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
12
+ export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
13
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/otp-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAA;AAKrD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYzE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBAwBjD;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAMnE;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAA"}
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ exports.REGEXP_ONLY_DIGITS_AND_CHARS = exports.REGEXP_ONLY_DIGITS = void 0;
37
+ exports.InputOTP = InputOTP;
38
+ exports.InputOTPGroup = InputOTPGroup;
39
+ exports.InputOTPSlot = InputOTPSlot;
40
+ exports.InputOTPSeparator = InputOTPSeparator;
41
+ const jsx_runtime_1 = require("react/jsx-runtime");
42
+ const React = __importStar(require("react"));
43
+ const input_otp_1 = require("input-otp");
44
+ const lucide_react_1 = require("lucide-react");
45
+ const utils_1 = require("../../../lib/utils");
46
+ function InputOTP({ className, containerClassName, ...props }) {
47
+ return ((0, jsx_runtime_1.jsx)(input_otp_1.OTPInput, { "data-slot": "input-otp", containerClassName: (0, utils_1.cn)('flex items-center gap-2 has-disabled:opacity-50', containerClassName), className: (0, utils_1.cn)('disabled:cursor-not-allowed', className), ...props }));
48
+ }
49
+ function InputOTPGroup({ className, ...props }) {
50
+ return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-otp-group", className: (0, utils_1.cn)('flex items-center', className), ...props }));
51
+ }
52
+ function InputOTPSlot({ index, className, ...props }) {
53
+ const inputOTPContext = React.useContext(input_otp_1.OTPInputContext);
54
+ const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
55
+ return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: (0, utils_1.cn)('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50', className), ...props, children: [char, hasFakeCaret && ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
56
+ }
57
+ function InputOTPSeparator({ ...props }) {
58
+ return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MinusIcon, {}) }));
59
+ }
60
+ var input_otp_2 = require("input-otp");
61
+ Object.defineProperty(exports, "REGEXP_ONLY_DIGITS", { enumerable: true, get: function () { return input_otp_2.REGEXP_ONLY_DIGITS; } });
62
+ Object.defineProperty(exports, "REGEXP_ONLY_DIGITS_AND_CHARS", { enumerable: true, get: function () { return input_otp_2.REGEXP_ONLY_DIGITS_AND_CHARS; } });
@@ -48,7 +48,7 @@ function PopoverTrigger({ ...props }) {
48
48
  return (0, jsx_runtime_1.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
49
49
  }
50
50
  function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
51
- 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 }) }));
51
+ 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 }) }));
52
52
  }
53
53
  function PopoverAnchor({ ...props }) {
54
54
  return (0, jsx_runtime_1.jsx)(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ export declare const HOURS: string[];
3
+ export declare const MINUTES: string[];
4
+ export type TimePickerProps = {
5
+ hour?: number;
6
+ minute?: number;
7
+ onChange?: (time: {
8
+ hour: number;
9
+ minute: number;
10
+ }) => void;
11
+ disabled?: boolean;
12
+ className?: string;
13
+ hourLabel?: string;
14
+ minuteLabel?: string;
15
+ };
16
+ declare function TimePicker({ hour, minute, onChange, disabled, className, hourLabel, minuteLabel }: TimePickerProps): React.JSX.Element;
17
+ export { TimePicker };
18
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,78 @@
1
+ 'use client';
2
+ "use strict";
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || (function () {
20
+ var ownKeys = function(o) {
21
+ ownKeys = Object.getOwnPropertyNames || function (o) {
22
+ var ar = [];
23
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
24
+ return ar;
25
+ };
26
+ return ownKeys(o);
27
+ };
28
+ return function (mod) {
29
+ if (mod && mod.__esModule) return mod;
30
+ var result = {};
31
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
32
+ __setModuleDefault(result, mod);
33
+ return result;
34
+ };
35
+ })();
36
+ Object.defineProperty(exports, "__esModule", { value: true });
37
+ exports.MINUTES = exports.HOURS = void 0;
38
+ exports.TimePicker = TimePicker;
39
+ const jsx_runtime_1 = require("react/jsx-runtime");
40
+ const React = __importStar(require("react"));
41
+ const utils_1 = require("../../../lib/utils");
42
+ exports.HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
43
+ exports.MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
44
+ function TimeScrollColumn({ items, selected, onSelect, label, disabled }) {
45
+ const listRef = React.useRef(null);
46
+ const hasScrolled = React.useRef(false);
47
+ React.useEffect(() => {
48
+ if (hasScrolled.current)
49
+ return;
50
+ if (!listRef.current || !selected)
51
+ return;
52
+ const selectedIndex = items.indexOf(selected);
53
+ if (selectedIndex < 0)
54
+ return;
55
+ const selectedElement = listRef.current.children[0]?.children[selectedIndex];
56
+ if (selectedElement) {
57
+ selectedElement.scrollIntoView({ block: 'nearest' });
58
+ hasScrolled.current = true;
59
+ }
60
+ }, [selected, items]);
61
+ 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) => {
62
+ const isSelected = item === selected;
63
+ 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
64
+ ? 'bg-accent text-accent-foreground font-bold'
65
+ : 'text-muted-foreground hover:bg-muted font-normal', disabled && 'pointer-events-none opacity-50'), onClick: () => onSelect(item), children: item }, item));
66
+ }) }) })] }));
67
+ }
68
+ function TimePicker({ hour, minute, onChange, disabled, className, hourLabel = 'Hour', minuteLabel = 'Minute' }) {
69
+ const selectedHour = String(hour ?? 0).padStart(2, '0');
70
+ const selectedMinute = String(minute ?? 0).padStart(2, '0');
71
+ const handleHourSelect = React.useCallback((value) => {
72
+ onChange?.({ hour: parseInt(value, 10), minute: minute ?? 0 });
73
+ }, [onChange, minute]);
74
+ const handleMinuteSelect = React.useCallback((value) => {
75
+ onChange?.({ hour: hour ?? 0, minute: parseInt(value, 10) });
76
+ }, [onChange, hour]);
77
+ 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 })] }));
78
+ }
package/dist/globals.css CHANGED
@@ -298,7 +298,7 @@
298
298
  --secondary-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
299
299
 
300
300
  /* Shadcn — Accent (Brand Lerian) */
301
- --accent: 47 92% 51%; /* sunglow = #F5C211 */
301
+ --accent: 46 98% 57%; /* sunglow/400 = #FDCB28 */
302
302
  --accent-hover: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /70 */
303
303
  --accent-mute: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /50 */
304
304
 
@@ -483,6 +483,22 @@
483
483
  }
484
484
  }
485
485
 
486
+ @keyframes caret-blink {
487
+ 0%,
488
+ 70%,
489
+ 100% {
490
+ opacity: 1;
491
+ }
492
+ 20%,
493
+ 50% {
494
+ opacity: 0;
495
+ }
496
+ }
497
+
498
+ @utility animate-caret-blink {
499
+ animation: caret-blink 1.25s ease-out infinite;
500
+ }
501
+
486
502
  .ticket {
487
503
  mask: radial-gradient(21px 13px at 50% 102%, #0000 98%, #000) 50%
488
504
  calc(100% - 16px) / 64px 100% repeat-x;
package/dist/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export * from './components/ui/command';
14
14
  export * from './components/ui/dialog';
15
15
  export * from './components/ui/dropdown-menu';
16
16
  export * from './components/ui/input';
17
+ export * from './components/ui/otp-input';
17
18
  export * from './components/ui/label';
18
19
  export * from './components/ui/loading-button';
19
20
  export * from './components/ui/multiple-select';
@@ -35,6 +36,7 @@ export * from './components/ui/textarea';
35
36
  export * from './components/ui/toast';
36
37
  export * from './components/ui/toast/toaster';
37
38
  export * from './hooks/use-toast';
39
+ export * from './components/ui/time-picker';
38
40
  export * from './components/ui/tooltip';
39
41
  export * from './components/ui/form';
40
42
  export { Breadcrumb as ApplicationBreadcrumb } from './components/breadcrumb';
@@ -1 +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"}
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,2BAA2B,CAAA;AACzC,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 CHANGED
@@ -33,6 +33,7 @@ __exportStar(require("./components/ui/command"), exports);
33
33
  __exportStar(require("./components/ui/dialog"), exports);
34
34
  __exportStar(require("./components/ui/dropdown-menu"), exports);
35
35
  __exportStar(require("./components/ui/input"), exports);
36
+ __exportStar(require("./components/ui/otp-input"), exports);
36
37
  __exportStar(require("./components/ui/label"), exports);
37
38
  __exportStar(require("./components/ui/loading-button"), exports);
38
39
  __exportStar(require("./components/ui/multiple-select"), exports);
@@ -54,6 +55,7 @@ __exportStar(require("./components/ui/textarea"), exports);
54
55
  __exportStar(require("./components/ui/toast"), exports);
55
56
  __exportStar(require("./components/ui/toast/toaster"), exports);
56
57
  __exportStar(require("./hooks/use-toast"), exports);
58
+ __exportStar(require("./components/ui/time-picker"), exports);
57
59
  __exportStar(require("./components/ui/tooltip"), exports);
58
60
  __exportStar(require("./components/ui/form"), exports);
59
61
  // Components
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lerianstudio/sindarian-ui",
3
- "version": "1.2.0-beta.7",
3
+ "version": "1.2.0-beta.9",
4
4
  "description": "Sindarian UI - A UI library for Midaz Console",
5
5
  "license": "ISC",
6
6
  "author": {
@@ -45,14 +45,15 @@
45
45
  "@radix-ui/react-slot": "^1.3.0",
46
46
  "@radix-ui/react-switch": "^1.3.2",
47
47
  "@radix-ui/react-tabs": "^1.1.16",
48
- "sonner": "^2.0.7",
49
48
  "@radix-ui/react-tooltip": "^1.2.11",
50
49
  "@tailwindcss/postcss": "^4.3.2",
51
50
  "class-variance-authority": "^0.7.1",
52
51
  "clsx": "^2.1.1",
53
52
  "cmdk": "^1.1.1",
54
53
  "dayjs": "^1.11.21",
54
+ "input-otp": "^1.4.2",
55
55
  "postcss": "^8.5.16",
56
+ "sonner": "^2.0.7",
56
57
  "tailwind-merge": "^3.6.0",
57
58
  "tailwindcss": "^4.3.2",
58
59
  "tw-animate-css": "^1.4.0"
@@ -61,8 +62,8 @@
61
62
  "lodash": ">=4.17.0",
62
63
  "lucide-react": ">=0.536.0",
63
64
  "react": ">=19.0.0",
64
- "react-dom": ">=19.0.0",
65
65
  "react-day-picker": ">=9.13.0",
66
+ "react-dom": ">=19.0.0",
66
67
  "react-hook-form": ">=7.60.0"
67
68
  },
68
69
  "devDependencies": {