@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.
- package/dist/components/form/date-picker-field/index.d.ts +2 -1
- package/dist/components/form/date-picker-field/index.d.ts.map +1 -1
- package/dist/components/form/date-picker-field/index.js +36 -1
- package/dist/components/form/date-range-field/index.d.ts +2 -1
- package/dist/components/form/date-range-field/index.d.ts.map +1 -1
- package/dist/components/form/date-range-field/index.js +36 -1
- package/dist/components/form/date-time-picker-field/index.d.ts +23 -0
- package/dist/components/form/date-time-picker-field/index.d.ts.map +1 -0
- package/dist/components/form/date-time-picker-field/index.js +113 -0
- package/dist/components/form/index.d.ts +2 -0
- package/dist/components/form/index.d.ts.map +1 -1
- package/dist/components/form/index.js +2 -0
- package/dist/components/form/otp-field/index.d.ts +18 -0
- package/dist/components/form/otp-field/index.d.ts.map +1 -0
- package/dist/components/form/otp-field/index.js +19 -0
- package/dist/components/ui/calendar/index.d.ts.map +1 -1
- package/dist/components/ui/calendar/index.js +12 -12
- package/dist/components/ui/otp-input/index.d.ts +13 -0
- package/dist/components/ui/otp-input/index.d.ts.map +1 -0
- package/dist/components/ui/otp-input/index.js +62 -0
- package/dist/components/ui/popover/index.js +1 -1
- package/dist/components/ui/time-picker/index.d.ts +18 -0
- package/dist/components/ui/time-picker/index.d.ts.map +1 -0
- package/dist/components/ui/time-picker/index.js +78 -0
- package/dist/globals.css +17 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- 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>) =>
|
|
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,
|
|
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-
|
|
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>) =>
|
|
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,
|
|
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-
|
|
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,
|
|
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
|
|
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-(--
|
|
56
|
-
button_next: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant: buttonVariant }), 'size-(--
|
|
57
|
-
month_caption: (0, utils_1.cn)('flex items-center justify-center h-(--
|
|
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-
|
|
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
|
|
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-
|
|
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-
|
|
76
|
-
today: (0, utils_1.cn)('
|
|
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-
|
|
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:
|
|
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';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -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.
|
|
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": {
|