@blencm/ui 0.0.1

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 (97) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +128 -0
  3. package/bin/blencm-ui.mjs +99 -0
  4. package/dist/components/Accordion/accordin.test.d.ts +1 -0
  5. package/dist/components/Accordion/accordion.d.ts +7 -0
  6. package/dist/components/Button/button.d.ts +26 -0
  7. package/dist/components/Button/button.test.d.ts +1 -0
  8. package/dist/components/Button/icon-button.d.ts +26 -0
  9. package/dist/components/Form/form-checkbox.d.ts +27 -0
  10. package/dist/components/Form/form-component.d.ts +44 -0
  11. package/dist/components/Form/form-date.d.ts +60 -0
  12. package/dist/components/Form/form-field.d.ts +33 -0
  13. package/dist/components/Form/form-select.d.ts +43 -0
  14. package/dist/components/Form/form-textarea.d.ts +31 -0
  15. package/dist/components/Form/form-time.d.ts +59 -0
  16. package/dist/components/Form/form.d.ts +11 -0
  17. package/dist/components/Form/form.test.d.ts +1 -0
  18. package/dist/components/Label/label.d.ts +5 -0
  19. package/dist/components/Label/label.test.d.ts +1 -0
  20. package/dist/components/alert-dialog.d.ts +20 -0
  21. package/dist/components/alert.d.ts +8 -0
  22. package/dist/components/aspect-ratio.d.ts +3 -0
  23. package/dist/components/avatar.d.ts +6 -0
  24. package/dist/components/badge.d.ts +9 -0
  25. package/dist/components/breadcrumb.d.ts +19 -0
  26. package/dist/components/calendar.d.ts +8 -0
  27. package/dist/components/card.d.ts +8 -0
  28. package/dist/components/carousel.d.ts +34 -0
  29. package/dist/components/checkbox.d.ts +12 -0
  30. package/dist/components/collapsible.d.ts +5 -0
  31. package/dist/components/command.d.ts +82 -0
  32. package/dist/components/context-menu.d.ts +27 -0
  33. package/dist/components/dialog.d.ts +19 -0
  34. package/dist/components/drawer.d.ts +22 -0
  35. package/dist/components/dropdown-menu.d.ts +27 -0
  36. package/dist/components/hover-card.d.ts +6 -0
  37. package/dist/components/icons.d.ts +2 -0
  38. package/dist/components/input-otp.d.ts +36 -0
  39. package/dist/components/input.d.ts +15 -0
  40. package/dist/components/menubar.d.ts +28 -0
  41. package/dist/components/modal.d.ts +11 -0
  42. package/dist/components/navigation-menu.d.ts +12 -0
  43. package/dist/components/pagination.d.ts +36 -0
  44. package/dist/components/popover.d.ts +7 -0
  45. package/dist/components/progress.d.ts +4 -0
  46. package/dist/components/radio-group.d.ts +5 -0
  47. package/dist/components/resizable.d.ts +8 -0
  48. package/dist/components/scroll-area.d.ts +5 -0
  49. package/dist/components/scroll-view.d.ts +21 -0
  50. package/dist/components/search-input.d.ts +9 -0
  51. package/dist/components/searchable-select.d.ts +33 -0
  52. package/dist/components/select.d.ts +69 -0
  53. package/dist/components/separator.d.ts +4 -0
  54. package/dist/components/sheet.d.ts +25 -0
  55. package/dist/components/skeleton.d.ts +3 -0
  56. package/dist/components/slider.d.ts +4 -0
  57. package/dist/components/sonner.d.ts +5 -0
  58. package/dist/components/switch.d.ts +4 -0
  59. package/dist/components/table.d.ts +12 -0
  60. package/dist/components/tabs.d.ts +7 -0
  61. package/dist/components/textarea.d.ts +13 -0
  62. package/dist/components/toast.d.ts +15 -0
  63. package/dist/components/toaster.d.ts +2 -0
  64. package/dist/components/toggle-group.d.ts +12 -0
  65. package/dist/components/toggle.d.ts +12 -0
  66. package/dist/components/tooltip.d.ts +7 -0
  67. package/dist/components/ui/input.d.ts +14 -0
  68. package/dist/components/ui/select.d.ts +37 -0
  69. package/dist/components/ui/ui-checkbox.d.ts +17 -0
  70. package/dist/components/ui/ui-date.d.ts +44 -0
  71. package/dist/components/ui/ui-textarea.d.ts +14 -0
  72. package/dist/components/ui/ui-time.d.ts +58 -0
  73. package/dist/components/use-toast.d.ts +44 -0
  74. package/dist/helper/time.d.ts +1 -0
  75. package/dist/hooks/use-sidebar.d.ts +8 -0
  76. package/dist/index.cjs +12723 -0
  77. package/dist/index.d.ts +78 -0
  78. package/dist/index.js +12514 -0
  79. package/dist/interface/icon.d.ts +30 -0
  80. package/dist/shared/alert-modal.d.ts +15 -0
  81. package/dist/shared/breadcrumbs.d.ts +14 -0
  82. package/dist/shared/data-table-skeleton.d.ts +10 -0
  83. package/dist/shared/data-table.d.ts +175 -0
  84. package/dist/shared/dropzone.d.ts +19 -0
  85. package/dist/shared/fileupload.d.ts +15 -0
  86. package/dist/shared/heading.d.ts +7 -0
  87. package/dist/shared/page-head.d.ts +5 -0
  88. package/dist/shared/pagination-section.d.ts +8 -0
  89. package/dist/style.css +4350 -0
  90. package/dist/types/input.d.ts +4 -0
  91. package/dist/types/select.d.ts +4 -0
  92. package/dist/utils/date-formats.d.ts +387 -0
  93. package/dist/utils/form-utils.d.ts +43 -0
  94. package/dist/utils/time-formats.d.ts +157 -0
  95. package/dist/utils/utils.d.ts +2 -0
  96. package/package.json +210 -0
  97. package/templates/vscode-settings.json +11 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 blencm
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,128 @@
1
+ # @blencm/ui
2
+
3
+ **Accessible, reusable React components built with Radix UI and Tailwind CSS.**
4
+
5
+ Install the package, import the components you need, and start building.
6
+ No copying components into `src/components`, no manual setup, and no duplicated UI code across projects.
7
+
8
+ ## Documentation & Live Components
9
+
10
+ **Explore all components, live examples, and copy the demo code:**
11
+
12
+ View components [here](https://ui.blencm.com).
13
+
14
+ ---
15
+
16
+ ## Installation
17
+
18
+ Install the package with your preferred package manager:
19
+
20
+ ```bash
21
+ pnpm add @blencm/ui
22
+ ```
23
+
24
+ React and React DOM are peer dependencies:
25
+
26
+ ```text
27
+ react >=17 <21
28
+ react-dom >=17 <21
29
+ ```
30
+
31
+ ---
32
+
33
+ ## Quick Start
34
+
35
+ Import components directly from the package:
36
+
37
+ ```tsx
38
+ import { Button } from '@blencm/ui';
39
+
40
+ export function Example() {
41
+ return (
42
+ <div className="flex gap-3">
43
+ <Button>Save</Button>
44
+ <Button variant="outline">Cancel</Button>
45
+ </div>
46
+ );
47
+ }
48
+ ```
49
+
50
+ That's it. Components, theme tokens, base styles, and the CSS reset are included with the package.
51
+
52
+ ---
53
+
54
+ ## Styles
55
+
56
+ In most setups, styles are loaded automatically.
57
+
58
+ If your bundler does not process CSS side-effect imports, import the stylesheet manually:
59
+
60
+ ```tsx
61
+ import '@blencm/ui/style.css';
62
+ ```
63
+
64
+ ### Dark Mode
65
+
66
+ Dark mode is controlled by adding the `dark` class to an ancestor element, typically `<html>`:
67
+
68
+ ```html
69
+ <html class="dark">
70
+ ```
71
+
72
+ ### Theme Customization
73
+
74
+ Customize the design system by overriding CSS variables in your application.
75
+
76
+ For example:
77
+
78
+ ```css
79
+ :root {
80
+ --primary: 160 84% 39%;
81
+ --radius: 0.5rem;
82
+ }
83
+ ```
84
+
85
+ This allows you to adapt colors, border radius, and other theme tokens without modifying the library itself.
86
+
87
+ ---
88
+
89
+ ## Why @blencm/ui?
90
+
91
+ `@blencm/ui` is designed for teams and developers who want a consistent component system without maintaining a local copy of every UI component.
92
+
93
+ * **Accessible by default** — built on top of Radix UI primitives.
94
+ * **Reusable** — install once and use across multiple React projects.
95
+ * **Tailwind CSS friendly** — designed to work naturally with utility-first styling.
96
+ * **Themeable** — customize the appearance through CSS variables.
97
+ * **Dark mode ready** — supports class-based dark mode.
98
+ * **TypeScript friendly** — designed for modern React and TypeScript applications.
99
+ * **No copy-paste workflow** — components are imported directly from the package.
100
+
101
+ ---
102
+
103
+ ## Sponsor
104
+
105
+ ### MultiBase Studio
106
+
107
+ **[MultiBase Studio](https://multibasestudio.com/)** is a cross-platform desktop database client for **SQL, NoSQL, and cloud databases**.
108
+
109
+ Connect to PostgreSQL, MySQL, MongoDB, Redis, SQLite, and **40+ database engines** from a single application.
110
+
111
+ With MultiBase Studio you can:
112
+
113
+ * Write queries with autocomplete
114
+ * Explore databases, tables, collections, and schemas
115
+ * Browse and edit data
116
+ * Manage multiple database connections
117
+ * Run backups
118
+ * Work across different database engines without switching tools
119
+
120
+ Available for **Windows, macOS, and Linux**.
121
+
122
+ The **[free plan](https://multibasestudio.com/)** does not expire and does not require a credit card.
123
+
124
+ ---
125
+
126
+ ## License
127
+
128
+ Licensed under the [MIT License](./LICENSE).
package/bin/blencm-ui.mjs ADDED
@@ -0,0 +1,99 @@
1
+ #!/usr/bin/env node
2
+ import fs from "node:fs";
3
+ import path from "node:path";
4
+ import { fileURLToPath } from "node:url";
5
+
6
+ const __filename = fileURLToPath(import.meta.url);
7
+ const __dirname = path.dirname(__filename);
8
+
9
+ const cmd = process.argv[2];
10
+
11
+ const uniq = (arr) => {
12
+ const seen = new Set();
13
+ const out = [];
14
+ for (const item of arr) {
15
+ const key = JSON.stringify(item);
16
+ if (seen.has(key)) continue;
17
+ seen.add(key);
18
+ out.push(item);
19
+ }
20
+ return out;
21
+ };
22
+
23
+ function ensureDir(dir) {
24
+ if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
25
+ }
26
+
27
+ function readJson(p) {
28
+ if (!fs.existsSync(p)) return null;
29
+ try {
30
+ return JSON.parse(fs.readFileSync(p, "utf8"));
31
+ } catch (e) {
32
+ console.error(`❌ No pude leer JSON: ${p}`);
33
+ console.error(e?.message ?? e);
34
+ process.exit(1);
35
+ }
36
+ }
37
+
38
+ function writeJson(p, obj) {
39
+ fs.writeFileSync(p, JSON.stringify(obj, null, 2) + "\n", "utf8");
40
+ }
41
+
42
+ function initVscode() {
43
+ const tplPath = path.join(__dirname, "..", "templates", "vscode-settings.json");
44
+ const tpl = readJson(tplPath) ?? {};
45
+
46
+ const vscodeDir = path.join(process.cwd(), ".vscode");
47
+ const settingsPath = path.join(vscodeDir, "settings.json");
48
+
49
+ ensureDir(vscodeDir);
50
+
51
+ const current = readJson(settingsPath) ?? {};
52
+ const next = { ...current };
53
+
54
+ // classRegex (merge + dedupe)
55
+ const curRegex = current["tailwindCSS.experimental.classRegex"] ?? [];
56
+ const tplRegex = tpl["tailwindCSS.experimental.classRegex"] ?? [];
57
+ next["tailwindCSS.experimental.classRegex"] = uniq([
58
+ ...(Array.isArray(curRegex) ? curRegex : []),
59
+ ...(Array.isArray(tplRegex) ? tplRegex : [])
60
+ ]);
61
+
62
+ // includeLanguages (merge)
63
+ const curLang = current["tailwindCSS.includeLanguages"] ?? {};
64
+ const tplLang = tpl["tailwindCSS.includeLanguages"] ?? {};
65
+ next["tailwindCSS.includeLanguages"] = { ...(curLang || {}), ...(tplLang || {}) };
66
+
67
+ writeJson(settingsPath, next);
68
+ console.log("✅ Listo: actualizado .vscode/settings.json (Tailwind IntelliSense).");
69
+ }
70
+
71
+ function initExtensions() {
72
+ const vscodeDir = path.join(process.cwd(), ".vscode");
73
+ const extPath = path.join(vscodeDir, "extensions.json");
74
+ ensureDir(vscodeDir);
75
+
76
+ const current = readJson(extPath) ?? {};
77
+ const recs = Array.isArray(current.recommendations) ? current.recommendations : [];
78
+ const add = "bradlc.vscode-tailwindcss";
79
+
80
+ const next = {
81
+ ...current,
82
+ recommendations: Array.from(new Set([...recs, add]))
83
+ };
84
+
85
+ writeJson(extPath, next);
86
+ console.log("✅ Listo: actualizado .vscode/extensions.json (recomendación Tailwind CSS).");
87
+ }
88
+
89
+ switch (cmd) {
90
+ case "init-vscode":
91
+ initVscode();
92
+ initExtensions();
93
+ break;
94
+ default:
95
+ console.log(`Uso:
96
+ npx blencm-ui init-vscode
97
+ `);
98
+ process.exit(cmd ? 1 : 0);
99
+ }
package/dist/components/Accordion/accordin.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ import "@testing-library/jest-dom";
package/dist/components/Accordion/accordion.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import * as AccordionPrimitive from '@radix-ui/react-accordion';
2
+ import * as React from 'react';
3
+ declare const Accordion: typeof AccordionPrimitive.Root;
4
+ declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
+ declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
6
+ declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
package/dist/components/Button/button.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import { type VariantProps } from "class-variance-authority";
2
+ import * as React from "react";
3
+ declare const buttonVariants: (props?: ({
4
+ variant?: "dangerGhost" | "dark" | "default" | "destructive" | "ghost" | "glass" | "gradient" | "gradientDanger" | "gradientSuccess" | "gradientWarning" | "info" | "infoGhost" | "light" | "link" | "neon" | "outline" | "outlineDestructive" | "outlineInfo" | "outlineSuccess" | "outlineWarning" | "premium" | "secondary" | "soft" | "softDestructive" | "softInfo" | "softSuccess" | "softWarning" | "success" | "successGhost" | "warning" | "warningGhost" | null | undefined;
5
+ size?: "2xl" | "2xs" | "default" | "icon" | "icon2xl" | "iconLg" | "iconMd" | "iconSm" | "iconXl" | "iconXs" | "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
6
+ rounded?: "default" | "full" | "lg" | "sm" | "xl" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
+ export type ButtonVariantProps = VariantProps<typeof buttonVariants>;
9
+ export type ButtonVariant = ButtonVariantProps["variant"];
10
+ export type ButtonSize = ButtonVariantProps["size"];
11
+ export type ButtonRounded = ButtonVariantProps["rounded"];
12
+ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
13
+ asChild?: boolean;
14
+ loading?: boolean;
15
+ loaderClassName?: string;
16
+ };
17
+ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
18
+ variant?: "dangerGhost" | "dark" | "default" | "destructive" | "ghost" | "glass" | "gradient" | "gradientDanger" | "gradientSuccess" | "gradientWarning" | "info" | "infoGhost" | "light" | "link" | "neon" | "outline" | "outlineDestructive" | "outlineInfo" | "outlineSuccess" | "outlineWarning" | "premium" | "secondary" | "soft" | "softDestructive" | "softInfo" | "softSuccess" | "softWarning" | "success" | "successGhost" | "warning" | "warningGhost" | null | undefined;
19
+ size?: "2xl" | "2xs" | "default" | "icon" | "icon2xl" | "iconLg" | "iconMd" | "iconSm" | "iconXl" | "iconXs" | "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
20
+ rounded?: "default" | "full" | "lg" | "sm" | "xl" | null | undefined;
21
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
22
+ asChild?: boolean;
23
+ loading?: boolean;
24
+ loaderClassName?: string;
25
+ } & React.RefAttributes<HTMLButtonElement>>;
26
+ export { Button, buttonVariants };
package/dist/components/Button/button.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ import "@testing-library/jest-dom";
package/dist/components/Button/icon-button.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import { type VariantProps } from 'class-variance-authority';
2
+ import * as React from 'react';
3
+ declare const iconButtonVariants: (props?: ({
4
+ variant?: "default" | "destructive" | "ghost" | "glass" | "info" | "outline" | "secondary" | "soft" | "softDestructive" | "softInfo" | "softSuccess" | "softWarning" | "success" | "warning" | null | undefined;
5
+ size?: "default" | "lg" | "sm" | "xl" | "xs" | null | undefined;
6
+ rounded?: "default" | "full" | "lg" | "sm" | "xl" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
+ export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & VariantProps<typeof iconButtonVariants> & {
9
+ asChild?: boolean;
10
+ loading?: boolean;
11
+ loaderClassName?: string;
12
+ children: React.ReactNode;
13
+ 'aria-label': string;
14
+ };
15
+ declare const IconButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & VariantProps<(props?: ({
16
+ variant?: "default" | "destructive" | "ghost" | "glass" | "info" | "outline" | "secondary" | "soft" | "softDestructive" | "softInfo" | "softSuccess" | "softWarning" | "success" | "warning" | null | undefined;
17
+ size?: "default" | "lg" | "sm" | "xl" | "xs" | null | undefined;
18
+ rounded?: "default" | "full" | "lg" | "sm" | "xl" | null | undefined;
19
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
20
+ asChild?: boolean;
21
+ loading?: boolean;
22
+ loaderClassName?: string;
23
+ children: React.ReactNode;
24
+ 'aria-label': string;
25
+ } & React.RefAttributes<HTMLButtonElement>>;
26
+ export { IconButton, iconButtonVariants };
package/dist/components/Form/form-checkbox.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import * as React from "react";
2
+ import { Control, FieldPath, FieldPathValue, FieldValues, RegisterOptions } from "react-hook-form";
3
+ import { type CheckboxProps } from "../checkbox";
4
+ type CheckboxRules<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues, TName>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
5
+ type FormCheckboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
6
+ name: TName;
7
+ control?: Control<TFieldValues>;
8
+ rules?: CheckboxRules<TFieldValues, TName>;
9
+ shouldUnregister?: boolean;
10
+ defaultValue?: FieldPathValue<TFieldValues, TName>;
11
+ label?: React.ReactNode;
12
+ description?: React.ReactNode;
13
+ requiredLabel?: boolean;
14
+ className?: string;
15
+ itemClassName?: string;
16
+ checkboxClassName?: string;
17
+ labelClassName?: string;
18
+ descriptionClassName?: string;
19
+ messageClassName?: string;
20
+ requiredLabelClassName?: string;
21
+ onChange?: (checked: boolean) => void;
22
+ } & Omit<CheckboxProps, "checked" | "defaultChecked" | "onCheckedChange">;
23
+ declare function FormCheckbox<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, rules, shouldUnregister, defaultValue, label, description, requiredLabel, className, itemClassName, checkboxClassName, labelClassName, descriptionClassName, messageClassName, requiredLabelClassName, onChange, ...checkboxProps }: FormCheckboxProps<TFieldValues, TName>): React.JSX.Element;
24
+ declare namespace FormCheckbox {
25
+ var displayName: string;
26
+ }
27
+ export { FormCheckbox, type FormCheckboxProps, type CheckboxRules };
package/dist/components/Form/form-component.d.ts ADDED
@@ -0,0 +1,44 @@
1
+ import * as React from "react";
2
+ import * as LabelPrimitive from "@radix-ui/react-label";
3
+ import { FieldError, FieldPath, FieldValues, RegisterOptions } from "react-hook-form";
4
+ import { SelectOption } from "../../utils/form-utils";
5
+ type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
6
+ name: TName;
7
+ };
8
+ declare const FormFieldContext: React.Context<FormFieldContextValue<FieldValues, string> | null>;
9
+ type FieldRules<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues, TName>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled" | "size">;
10
+ declare function getErrorMessage(error?: FieldError): string | undefined;
11
+ declare function normalizeSearchText(value: React.ReactNode): string;
12
+ declare function getDefaultOptionValue<TItem>(item: TItem): string;
13
+ declare function getDefaultOptionLabel<TItem>(item: TItem): React.ReactNode;
14
+ declare function getNextEnabledIndex<TItem>(options: SelectOption<TItem>[], currentIndex: number, direction: 1 | -1): number;
15
+ type FormItemContextValue = {
16
+ id: string;
17
+ };
18
+ declare const FormItemContext: React.Context<FormItemContextValue | null>;
19
+ declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
20
+ declare const useFormField: () => {
21
+ id: string;
22
+ formItemId: string;
23
+ formDescriptionId: string;
24
+ formMessageId: string;
25
+ error: undefined;
26
+ } | {
27
+ invalid: boolean;
28
+ isDirty: boolean;
29
+ isTouched: boolean;
30
+ isValidating: boolean;
31
+ error?: FieldError | undefined;
32
+ id: string;
33
+ name: string;
34
+ formItemId: string;
35
+ formDescriptionId: string;
36
+ formMessageId: string;
37
+ };
38
+ declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
39
+ declare const FormControl: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & {
40
+ children?: React.ReactNode;
41
+ } & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
42
+ declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
43
+ declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
44
+ export { FormFieldContext, FormItemContext, FormItem, FormLabel, FormDescription, FormControl, FormMessage, type FieldRules, type FormFieldContextValue, getDefaultOptionValue, getDefaultOptionLabel, normalizeSearchText, getNextEnabledIndex, getErrorMessage, useFormField, };
package/dist/components/Form/form-date.d.ts ADDED
@@ -0,0 +1,60 @@
1
+ import * as React from "react";
2
+ import { type Locale } from "date-fns";
3
+ import { Control, FieldPath, FieldPathValue, FieldValues } from "react-hook-form";
4
+ import { VariantProps, type CustomSize, type SizeProps } from "../../utils/form-utils";
5
+ import { FieldRules } from "./form-component";
6
+ import { type DateFormatValue } from "../../utils/date-formats";
7
+ type DateValueMode = "date" | "string";
8
+ type DateInputValue = Date | string | null | undefined;
9
+ type CustomFormDateProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
10
+ name: TName;
11
+ control?: Control<TFieldValues>;
12
+ rules?: FieldRules<TFieldValues, TName>;
13
+ shouldUnregister?: boolean;
14
+ defaultValue?: FieldPathValue<TFieldValues, TName>;
15
+ label?: React.ReactNode;
16
+ requiredLabel?: boolean;
17
+ placeholder?: string;
18
+ disabled?: boolean;
19
+ invalid?: boolean;
20
+ /**
21
+ * Rango permitido.
22
+ * Si es null o undefined, queda libre.
23
+ */
24
+ start_date?: DateInputValue;
25
+ end_date?: DateInputValue;
26
+ /**
27
+ * Alias opcional.
28
+ */
29
+ startDate?: DateInputValue;
30
+ endDate?: DateInputValue;
31
+ /**
32
+ * date: guarda Date.
33
+ * string: guarda usando valueFormat.
34
+ */
35
+ valueMode?: DateValueMode;
36
+ dateFormat?: DateFormatValue;
37
+ valueFormat?: DateFormatValue;
38
+ formatPattern?: string;
39
+ valueFormatPattern?: string;
40
+ locale?: Locale | null;
41
+ defaultMonth?: Date;
42
+ onChange?: (date: Date | undefined) => void;
43
+ onChangeValue?: (value: Date | string | null) => void;
44
+ size?: SizeProps;
45
+ customSize?: CustomSize;
46
+ variant?: VariantProps;
47
+ className?: string;
48
+ itemClassName?: string;
49
+ contentClassName?: string;
50
+ labelClassName?: string;
51
+ messageClassName?: string;
52
+ requiredLabelClassName?: string;
53
+ contentAlign?: "start" | "center" | "end";
54
+ contentSideOffset?: number;
55
+ };
56
+ declare function FormDate<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, rules, shouldUnregister, defaultValue, label, requiredLabel, placeholder, disabled, invalid, start_date, end_date, startDate, endDate, valueMode, dateFormat, valueFormat, formatPattern, valueFormatPattern, locale, defaultMonth, onChange, onChangeValue, size, customSize, variant, className, itemClassName, contentClassName, labelClassName, messageClassName, requiredLabelClassName, contentAlign, contentSideOffset, }: CustomFormDateProps<TFieldValues, TName>): React.JSX.Element;
57
+ declare namespace FormDate {
58
+ var displayName: string;
59
+ }
60
+ export { FormDate, type CustomFormDateProps };
package/dist/components/Form/form-field.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import * as React from "react";
2
+ import { Control, FieldPath, FieldPathValue, FieldValues, RegisterOptions } from "react-hook-form";
3
+ import { type InputProps } from "../input";
4
+ import { type CustomSize, type SizeProps, type VariantProps } from "../../utils/form-utils";
5
+ type FieldRules<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues, TName>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled" | "size">;
6
+ export type CustomFormFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
7
+ name: TName;
8
+ control?: Control<TFieldValues>;
9
+ rules?: FieldRules<TFieldValues, TName>;
10
+ shouldUnregister?: boolean;
11
+ defaultValue?: FieldPathValue<TFieldValues, TName>;
12
+ label?: React.ReactNode;
13
+ requiredLabel?: boolean;
14
+ placeholder?: string;
15
+ size?: SizeProps;
16
+ customSize?: CustomSize;
17
+ variant?: VariantProps;
18
+ leading?: React.ReactNode;
19
+ trailing?: React.ReactNode;
20
+ invalid?: boolean;
21
+ className?: string;
22
+ classNameDefault?: boolean;
23
+ itemClassName?: string;
24
+ labelClassName?: string;
25
+ messageClassName?: string;
26
+ requiredLabelClassName?: string;
27
+ onChange?: (value: string) => void;
28
+ } & Omit<InputProps, "name" | "defaultValue" | "size" | "value" | "onChange">;
29
+ declare function FormField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, requiredLabel, className, classNameDefault, itemClassName, labelClassName, messageClassName, requiredLabelClassName, variant, size, customSize, rules, shouldUnregister, defaultValue, leading, trailing, invalid, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>): React.JSX.Element;
30
+ declare namespace FormField {
31
+ var displayName: string;
32
+ }
33
+ export { FormField };
package/dist/components/Form/form-select.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ import * as React from "react";
2
+ import { Control, FieldPath, FieldPathValue, FieldValues } from "react-hook-form";
3
+ import { type SelectOption, type CustomSize, type SizeProps, type VariantProps } from "../../utils/form-utils";
4
+ import { FieldRules } from "./form-component";
5
+ type CustomFormSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TItem = SelectOption> = {
6
+ name: TName;
7
+ control?: Control<TFieldValues>;
8
+ rules?: FieldRules<TFieldValues, TName>;
9
+ shouldUnregister?: boolean;
10
+ defaultValue?: FieldPathValue<TFieldValues, TName>;
11
+ label?: React.ReactNode;
12
+ requiredLabel?: boolean;
13
+ placeholder?: string;
14
+ options?: SelectOption<TItem>[];
15
+ items?: TItem[];
16
+ getOptionValue?: (item: TItem) => string;
17
+ getOptionLabel?: (item: TItem) => React.ReactNode;
18
+ getOptionDisabled?: (item: TItem) => boolean;
19
+ getOptionData?: (item: TItem) => unknown;
20
+ onChange?: (value: string) => void;
21
+ onChangeItem?: (item: TItem | null) => void;
22
+ disabled?: boolean;
23
+ size?: SizeProps;
24
+ customSize?: CustomSize;
25
+ variant?: VariantProps;
26
+ invalid?: boolean;
27
+ searchable?: boolean;
28
+ searchPlaceholder?: string;
29
+ emptyText?: React.ReactNode;
30
+ classNameDefault?: boolean;
31
+ className?: string;
32
+ itemClassName?: string;
33
+ contentClassName?: string;
34
+ searchInputClassName?: string;
35
+ labelClassName?: string;
36
+ messageClassName?: string;
37
+ requiredLabelClassName?: string;
38
+ };
39
+ declare function FormSelect<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TItem = SelectOption>({ name, control, rules, shouldUnregister, defaultValue, placeholder, label, requiredLabel, className, itemClassName, contentClassName, searchInputClassName, labelClassName, messageClassName, requiredLabelClassName, options, items, getOptionValue, getOptionLabel, getOptionDisabled, getOptionData, onChange, onChangeItem, disabled, size, customSize, variant, invalid, searchable, searchPlaceholder, emptyText, classNameDefault, }: CustomFormSelectProps<TFieldValues, TName, TItem>): React.JSX.Element;
40
+ declare namespace FormSelect {
41
+ var displayName: string;
42
+ }
43
+ export { FormSelect, type CustomFormSelectProps };
package/dist/components/Form/form-textarea.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ import * as React from "react";
2
+ import { Control, FieldPath, FieldPathValue, FieldValues, RegisterOptions } from "react-hook-form";
3
+ import { type TextareaProps } from "../textarea";
4
+ import { type CustomSize, type SizeProps, type VariantProps } from "../../utils/form-utils";
5
+ type FieldRules<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues, TName>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled" | "size">;
6
+ export type CustomFormTextareaProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
7
+ name: TName;
8
+ control?: Control<TFieldValues>;
9
+ rules?: FieldRules<TFieldValues, TName>;
10
+ shouldUnregister?: boolean;
11
+ defaultValue?: FieldPathValue<TFieldValues, TName>;
12
+ label?: React.ReactNode;
13
+ requiredLabel?: boolean;
14
+ placeholder?: string;
15
+ size?: SizeProps;
16
+ customSize?: CustomSize;
17
+ variant?: VariantProps;
18
+ invalid?: boolean;
19
+ className?: string;
20
+ classNameDefault?: boolean;
21
+ itemClassName?: string;
22
+ labelClassName?: string;
23
+ messageClassName?: string;
24
+ requiredLabelClassName?: string;
25
+ onChange?: (value: string) => void;
26
+ } & Omit<TextareaProps, "name" | "defaultValue" | "size" | "value" | "onChange">;
27
+ declare function FormTextarea<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, requiredLabel, className, classNameDefault, itemClassName, labelClassName, messageClassName, requiredLabelClassName, variant, size, customSize, rules, shouldUnregister, defaultValue, invalid, onChange, ...textareaProps }: CustomFormTextareaProps<TFieldValues, TName>): React.JSX.Element;
28
+ declare namespace FormTextarea {
29
+ var displayName: string;
30
+ }
31
+ export { FormTextarea };
package/dist/components/Form/form-time.d.ts ADDED
@@ -0,0 +1,59 @@
1
+ import * as React from "react";
2
+ import { type Locale } from "date-fns";
3
+ import { Control, FieldPath, FieldPathValue, FieldValues } from "react-hook-form";
4
+ import { VariantProps, type CustomSize, type SizeProps } from "../../utils/form-utils";
5
+ import { FieldRules } from "./form-component";
6
+ import { type UiTimeOption } from "../ui/ui-time";
7
+ import { type TimeFormatValue } from "../../utils/time-formats";
8
+ type TimeValueMode = "date" | "string";
9
+ type HourCycle = "12" | "24";
10
+ type CustomFormTimeProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
11
+ name: TName;
12
+ control?: Control<TFieldValues>;
13
+ rules?: FieldRules<TFieldValues, TName>;
14
+ shouldUnregister?: boolean;
15
+ defaultValue?: FieldPathValue<TFieldValues, TName>;
16
+ label?: React.ReactNode;
17
+ requiredLabel?: boolean;
18
+ placeholder?: string;
19
+ disabled?: boolean;
20
+ invalid?: boolean;
21
+ /**
22
+ * date: guarda un Date.
23
+ * string: guarda usando valueFormat.
24
+ */
25
+ valueMode?: TimeValueMode;
26
+ timeFormat?: TimeFormatValue;
27
+ valueFormat?: TimeFormatValue;
28
+ formatPattern?: string;
29
+ valueFormatPattern?: string;
30
+ locale?: Locale;
31
+ minuteStep?: number;
32
+ minTime?: string;
33
+ maxTime?: string;
34
+ options?: UiTimeOption[];
35
+ /**
36
+ * "12" = selector hora / minuto / AM-PM.
37
+ * "24" = selector hora / minuto en formato 24H.
38
+ */
39
+ hourCycle?: HourCycle;
40
+ onChange?: (date: Date | undefined) => void;
41
+ onChangeValue?: (value: Date | string | null) => void;
42
+ size?: SizeProps;
43
+ customSize?: CustomSize;
44
+ variant?: VariantProps;
45
+ className?: string;
46
+ itemClassName?: string;
47
+ contentClassName?: string;
48
+ optionClassName?: string;
49
+ labelClassName?: string;
50
+ messageClassName?: string;
51
+ requiredLabelClassName?: string;
52
+ contentAlign?: "start" | "center" | "end";
53
+ contentSideOffset?: number;
54
+ };
55
+ declare function FormTime<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, rules, shouldUnregister, defaultValue, label, requiredLabel, placeholder, disabled, invalid, valueMode, timeFormat, valueFormat, formatPattern, valueFormatPattern, locale, minuteStep, minTime, maxTime, options, hourCycle, onChange, onChangeValue, size, customSize, variant, className, itemClassName, contentClassName, optionClassName, labelClassName, messageClassName, requiredLabelClassName, contentAlign, contentSideOffset, }: CustomFormTimeProps<TFieldValues, TName>): React.JSX.Element;
56
+ declare namespace FormTime {
57
+ var displayName: string;
58
+ }
59
+ export { FormTime, type CustomFormTimeProps };
package/dist/components/Form/form.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import * as React from 'react';
2
+ import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
3
+ type FormProps<TFieldValues extends FieldValues> = {
4
+ children: React.ReactNode;
5
+ methods: UseFormReturn<TFieldValues>;
6
+ onSubmit?: SubmitHandler<TFieldValues>;
7
+ onError?: SubmitErrorHandler<TFieldValues>;
8
+ formProps?: Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'>;
9
+ };
10
+ declare function Form<TFieldValues extends FieldValues>({ children, methods, onSubmit, onError, formProps }: FormProps<TFieldValues>): React.JSX.Element;
11
+ export { Form, type FormProps };
package/dist/components/Form/form.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ import "@testing-library/jest-dom";
package/dist/components/Label/label.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import * as LabelPrimitive from "@radix-ui/react-label";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ import * as React from "react";
4
+ declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
5
+ export { Label };
package/dist/components/Label/label.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ import "@testing-library/jest-dom";