@lerianstudio/sindarian-ui 1.0.0-beta.1

package/README.md

@@ -0,0 +1,235 @@
+# Sindarian UI
+
+A modern, accessible React component library built on top of [Radix UI](https://www.radix-ui.com/) and [ShadCN](https://ui.shadcn.com/) design system, providing a comprehensive set of customizable components with full TypeScript support and Storybook documentation.
+
+## ✨ Features
+
+- 🎨 **35+ High-quality Components** - Complete set of UI primitives and application-specific components
+- 🔧 **Built on Radix UI** - Leveraging the power of headless, accessible component primitives
+- 🎯 **ShadCN Compatible** - Following ShadCN design patterns and conventions
+- 📖 **Comprehensive Storybook** - Interactive documentation with live examples and controls
+- 🔍 **TypeScript First** - Full type safety with detailed prop interfaces
+- 🎭 **Tailwind CSS** - Utility-first styling with customizable design tokens
+- ♿ **Accessibility** - WAI-ARIA compliant components with keyboard navigation
+- 🧪 **Thoroughly Tested** - Jest test coverage for reliability
+- 🎨 **Customizable** - Flexible theming and styling options
+- 📱 **Responsive** - Mobile-first design approach
+
+## 📦 Installation
+
+Install the package using your preferred package manager:
+
+```bash
+npm install @lerianstudio/sindarian-ui
+```
+
+```bash
+yarn add @lerianstudio/sindarian-ui
+```
+
+```bash
+pnpm add @lerianstudio/sindarian-ui
+```
+
+### Peer Dependencies
+
+Make sure you have the required peer dependencies installed:
+
+```bash
+npm install react@>=19.0.0 react-dom@>=19.0.0 react-hook-form@>=7.60.0 lucide-react@>=0.536.0 lodash@>=4.17.0
+```
+
+### Tailwind CSS Setup
+
+Add the package path to your `tailwind.config.js` to ensure proper styling:
+
+```js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/sindarian-ui/**/*.{js,ts,jsx,tsx}' // Add this line
+  ]
+  // ... rest of your config
+}
+```
+
+## 🚀 Quick Start
+
+```tsx
+import {
+  Button,
+  Input,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from 'sindarian-ui'
+
+function App() {
+  return (
+    <Card className="w-96">
+      <CardHeader>
+        <CardTitle>Welcome to Sindarian UI</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <Input placeholder="Enter your name" />
+        <Button>Get Started</Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+## 📚 Component Categories
+
+### UI Primitives
+
+Core building blocks based on Radix UI:
+
+- **Layout**: `Card`, `Paper`, `Separator`, `Sheet`
+- **Typography**: `Label`, `Badge`
+- **Form Controls**: `Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`
+- **Navigation**: `Breadcrumb`, `Tabs`, `Dropdown Menu`
+- **Feedback**: `Alert`, `Toast`, `Progress`, `Skeleton`, `Loading Button`
+- **Overlay**: `Dialog`, `Popover`, `Tooltip`
+- **Data Display**: `Avatar`, `Table`, `Stepper`
+- **Advanced**: `Autocomplete`, `Command`, `Multiple Select`, `Collapsible`
+
+### Application Components
+
+Higher-level components for common use cases:
+
+- **Layout**: `Page` - Complete page layout structure
+- **Data**: `Entity Box`, `Entity Data Table` - Entity display and management
+- **Navigation**: `Application Breadcrumb` - Enhanced breadcrumb with path generation
+- **Pagination**: `Pagination` - Data pagination controls
+- **Table**: `ID Table Cell`, `Name Table Cell`, `Locked Table Actions` - Specialized table components
+
+### Form Components
+
+Enhanced form fields with validation:
+
+- `Input Field`, `Password Field`, `Select Field`, `Switch Field`
+- `Combo Box Field`, `Country Field`, `State Field`
+- `Pagination Limit Field`
+
+### Hooks
+
+Custom React hooks for common functionality:
+
+- `useToast` - Toast notification management
+- `useStepper` - Step-by-step navigation
+- `useClickAway` - Click outside detection
+- `usePagination` - Pagination logic
+
+## 📖 Documentation
+
+### Storybook
+
+Explore all components interactively with Storybook:
+
+```bash
+# Clone the repository and navigate to the package
+cd packages/sindarian-ui
+
+# Install dependencies
+npm install
+
+# Start Storybook
+npm run storybook
+```
+
+Storybook will be available at `http://localhost:6007` with:
+
+- **Interactive examples** for every component
+- **Props documentation** with controls
+- **Usage guidelines** and best practices
+- **Accessibility information**
+- **Design tokens** and theming options
+
+### Component Documentation
+
+Each component includes comprehensive documentation:
+
+- Type definitions with detailed prop descriptions
+- Usage examples and common patterns
+- Accessibility guidelines
+- Styling customization options
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js 18+
+- npm/yarn/pnpm
+
+### Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Run tests
+npm test
+
+# Build the library
+npm run build
+
+# Start development with Storybook
+npm run storybook
+
+# Type checking
+npm run check-types
+
+# Linting
+npm run lint
+```
+
+### Testing
+
+The library includes comprehensive test coverage:
+
+```bash
+# Run tests
+npm test
+
+# Run tests with coverage
+npm run test:cov
+```
+
+### Building
+
+```bash
+# Build for production
+npm run build
+
+# Build Storybook for deployment
+npm run build-storybook
+```
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/amazing-feature`
+3. Commit your changes: `git commit -m 'Add amazing feature'`
+4. Push to the branch: `git push origin feature/amazing-feature`
+5. Open a Pull Request
+
+Please ensure your code follows the project's coding standards and includes appropriate tests.
+
+## 📝 Changelog
+
+See [CHANGELOG.md](../../CHANGELOG.md) for a detailed history of changes.
+
+## 📄 License
+
+This project is licensed under the ISC License.
+
+---
+
+**Sindarian UI** is developed and maintained by [**Lerian Studio**](https://lerian.studio).
+
+**Contact**: [contato@lerian.studio](mailto:contato@lerian.studio)  
+**Website**: [https://lerian.studio](https://lerian.studio)
+
+---

package/dist/components/breadcrumb/get-breadcrumb-paths.d.ts

@@ -0,0 +1,10 @@
+import { BreadcrumbPath } from '.';
+type BreadcrumbPathTabs = (BreadcrumbPath & {
+    active?: () => boolean;
+})[];
+export declare function getBreadcrumbPaths(paths: BreadcrumbPathTabs): {
+    name: string;
+    href?: string;
+}[];
+export {};
+//# sourceMappingURL=get-breadcrumb-paths.d.ts.map

package/dist/components/breadcrumb/get-breadcrumb-paths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-breadcrumb-paths.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/get-breadcrumb-paths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAA;AAGlC,KAAK,kBAAkB,GAAG,CAAC,cAAc,GAAG;IAC1C,MAAM,CAAC,EAAE,MAAM,OAAO,CAAA;CACvB,CAAC,EAAE,CAAA;AAEJ,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB;;;IAa3D"}

package/dist/components/breadcrumb/get-breadcrumb-paths.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBreadcrumbPaths = getBreadcrumbPaths;
+const lodash_1 = require("lodash");
+function getBreadcrumbPaths(paths) {
+    return (paths
+        .filter((path) => {
+        if ((0, lodash_1.isNil)(path.active)) {
+            return true;
+        }
+        return path.active();
+    })
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .map(({ active, ...path }) => path));
+}

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

@@ -0,0 +1,10 @@
+export type BreadcrumbPath = {
+    name: string;
+    href?: string;
+};
+type BreadcrumbProps = {
+    paths: BreadcrumbPath[];
+};
+export declare const Breadcrumb: ({ paths }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,WAAW,eAAe,4CAoBpD,CAAA"}

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const breadcrumb_1 = require("../../components/ui/breadcrumb");
+const react_1 = __importDefault(require("react"));
+const Breadcrumb = ({ paths }) => {
+    return ((0, jsx_runtime_1.jsx)(breadcrumb_1.Breadcrumb, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbList, { children: paths.map((path, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbItem, { children: path.href ? ((0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbLink, { href: path.href, children: path.name })) : ((0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbPage, { children: path.name })) }), index < paths.length - 1 && (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbSeparator, {})] }, index))) }) }));
+};
+exports.Breadcrumb = Breadcrumb;

package/dist/components/entity-box/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+declare function EntityBox({ className, children, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function EntityBoxCollapsible({ className, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+declare function EntityBoxCollapsibleTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function EntityBoxCollapsibleContent({ children, ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+interface EntityBoxHeaderProps extends React.ComponentProps<'div'> {
+    title: string;
+    subtitle?: string;
+    tooltip?: string;
+    tooltipWidth?: string | number;
+}
+declare function EntityBoxHeaderTitle({ title, subtitle, tooltip, tooltipWidth, className, ...props }: EntityBoxHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function EntityBoxBanner({ className, children, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function EntityBoxActions({ className, children, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { EntityBox, EntityBoxCollapsible, EntityBoxCollapsibleTrigger, EntityBoxCollapsibleContent, EntityBoxHeaderTitle, EntityBoxBanner, EntityBoxActions };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/entity-box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAa7B;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAUtE;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,uBAAuB,2CAQlE;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAOzB;AAED,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAgCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}

package/dist/components/entity-box/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityBox = EntityBox;
+exports.EntityBoxCollapsible = EntityBoxCollapsible;
+exports.EntityBoxCollapsibleTrigger = EntityBoxCollapsibleTrigger;
+exports.EntityBoxCollapsibleContent = EntityBoxCollapsibleContent;
+exports.EntityBoxHeaderTitle = EntityBoxHeaderTitle;
+exports.EntityBoxBanner = EntityBoxBanner;
+exports.EntityBoxActions = EntityBoxActions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
+const tooltip_1 = require("../ui/tooltip");
+const lucide_react_1 = require("lucide-react");
+const collapsible_1 = require("../ui/collapsible");
+const button_1 = require("../ui/button");
+const separator_1 = require("../ui/separator");
+function EntityBox({ className, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "entity-box", className: (0, utils_1.cn)('shadow-entity-box mb-2 flex items-center justify-between rounded-lg bg-white p-6', className), ...props, children: children }));
+}
+function EntityBoxCollapsible({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(collapsible_1.Collapsible, { className: (0, utils_1.cn)('shadow-entity-box mb-2 flex flex-col rounded-lg bg-white', className), ...props }));
+}
+function EntityBoxCollapsibleTrigger(props) {
+    return ((0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleTrigger, { ...props, asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings2, { size: 16 }) }) }));
+}
+function EntityBoxCollapsibleContent({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(collapsible_1.CollapsibleContent, { ...props, children: [(0, jsx_runtime_1.jsx)(separator_1.Separator, { orientation: "horizontal" }), (0, jsx_runtime_1.jsx)("div", { className: "grid w-full grid-cols-3 p-6", children: children })] }));
+}
+function EntityBoxHeaderTitle({ title, subtitle, tooltip, tooltipWidth, className, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "entity-box-header", className: (0, utils_1.cn)('flex flex-col items-start', className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-[10px]", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-lg font-medium text-zinc-600", children: title }), tooltip && ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { className: "pointer text-shadcn-400 h-5 w-5" }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", style: tooltipWidth
+                                        ? { width: tooltipWidth, maxWidth: tooltipWidth }
+                                        : undefined, children: tooltip })] }) }))] }), subtitle && (0, jsx_runtime_1.jsx)("p", { className: "text-shadcn-400 text-sm", children: subtitle })] }));
+}
+function EntityBoxBanner({ className, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "entity-box-banner", className: (0, utils_1.cn)('grid grid-cols-3 p-6', className), ...props, children: children }));
+}
+function EntityBoxActions({ className, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "entity-box-actions", className: (0, utils_1.cn)('col-start-3 flex flex-row items-center justify-end gap-4', className), ...props, children: children }));
+}

package/dist/components/entity-data-table/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Paper } from '../ui/paper';
+declare function EntityDataTableRoot({ className, ...props }: React.ComponentProps<typeof Paper>): import("react/jsx-runtime").JSX.Element;
+declare function EntityDataTableFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function EntityDataTableFooterText({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export type EntityDataTableFooterLabelProps = React.PropsWithChildren & {
+    label: React.ReactNode;
+    empty?: boolean;
+    emptyLabel?: React.ReactNode;
+};
+export declare const EntityDataTable: {
+    Root: typeof EntityDataTableRoot;
+    Footer: typeof EntityDataTableFooter;
+    FooterText: typeof EntityDataTableFooterText;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/entity-data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/entity-data-table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAEpC;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAQ3B;AAED,MAAM,MAAM,+BAA+B,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACtE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,eAAe;;;;CAI3B,CAAA"}

package/dist/components/entity-data-table/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityDataTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
+const paper_1 = require("../ui/paper");
+function EntityDataTableRoot({ className, ...props }) {
+    return (0, jsx_runtime_1.jsx)(paper_1.Paper, { className: className, ...props });
+}
+function EntityDataTableFooter({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "data-table-footer", className: (0, utils_1.cn)('flex flex-row items-center justify-between px-6 py-3', className), ...props }));
+}
+function EntityDataTableFooterText({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "data-table-footer-text", className: (0, utils_1.cn)('text-shadcn-400 text-sm leading-8 italic', className), ...props }));
+}
+exports.EntityDataTable = {
+    Root: EntityDataTableRoot,
+    Footer: EntityDataTableFooter,
+    FooterText: EntityDataTableFooterText
+};

package/dist/components/form/combo-box-field/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Control } from 'react-hook-form';
+export type ComboBoxFieldProps = React.PropsWithChildren & {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    emptyMessage?: string;
+    control: Control<any>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+};
+export declare const ComboBoxField: ({ name, label, placeholder, emptyMessage, required, children, readOnly, ...others }: ComboBoxFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/combo-box-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/combo-box-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAiBzC,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACzD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,qFAS3B,kBAAkB,4CA0FpB,CAAA"}

package/dist/components/form/combo-box-field/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBoxField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const form_1 = require("../../../components/ui/form");
+const popover_1 = require("../../../components/ui/popover");
+const command_1 = require("../../../components/ui/command");
+const button_1 = require("../../../components/ui/button");
+const utils_1 = require("../../../lib/utils");
+const lucide_react_1 = require("lucide-react");
+const ComboBoxField = ({ name, label, placeholder, emptyMessage, required, children, readOnly, ...others }) => {
+    const [open, setOpen] = react_1.default.useState(false);
+    // with the value and label
+    const options = react_1.default.useMemo(() => react_1.default.Children.map(react_1.default.Children.toArray(children), (child) => react_1.default.isValidElement(child) && {
+        value: child.props.value,
+        label: child.props.children
+    }), [children]);
+    const getDisplayValue = react_1.default.useCallback((value) => {
+        return options.find((option) => option.value === value)?.label ?? null;
+    }, [options]);
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, ...others, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && (0, jsx_runtime_1.jsx)(form_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: readOnly ? false : open, onOpenChange: readOnly ? () => { } : setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", role: "combobox", "aria-expanded": readOnly ? false : open, readOnly: readOnly, tabIndex: 0, className: (0, utils_1.cn)('w-full justify-between', !field.value && 'text-muted-foreground'), children: [getDisplayValue(field.value) ?? placeholder, !readOnly && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }))] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-(--radix-popover-trigger-width) p-0", children: (0, jsx_runtime_1.jsxs)(command_1.Command, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandInput, { placeholder: placeholder }), (0, jsx_runtime_1.jsxs)(command_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandEmpty, { children: emptyMessage }), (0, jsx_runtime_1.jsx)(command_1.CommandGroup, { children: react_1.default.Children.map(react_1.default.Children.toArray(children), (child) => react_1.default.isValidElement(child)
+                                                    ? react_1.default.cloneElement(child, {
+                                                        keywords: [child.props.children],
+                                                        onSelect: (value) => {
+                                                            field.onChange(field.value !== value ? value : '');
+                                                            setOpen(false);
+                                                        }
+                                                    })
+                                                    : child) })] })] }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] })) }));
+};
+exports.ComboBoxField = ComboBoxField;

package/dist/components/form/country-field/index.d.ts

@@ -0,0 +1,4 @@
+import { ComboBoxFieldProps } from '../combo-box-field';
+export type CountryFieldProps = Omit<ComboBoxFieldProps, 'children'> & {};
+export declare const CountryField: ({ ...others }: CountryFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/country-field/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAGtE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAAG,EAAE,CAAA;AAEzE,eAAO,MAAM,YAAY,GAAI,eAAe,iBAAiB,4CAU5D,CAAA"}

package/dist/components/form/country-field/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountryField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const command_1 = require("../../../components/ui/command");
+const combo_box_field_1 = require("../combo-box-field");
+const country_utils_1 = require("../../../utils/country-utils");
+const CountryField = ({ ...others }) => {
+    return ((0, jsx_runtime_1.jsx)(combo_box_field_1.ComboBoxField, { ...others, children: (0, country_utils_1.getCountries)().map((country) => ((0, jsx_runtime_1.jsx)(command_1.CommandItem, { value: country.code, children: country.name }, country.code))) }));
+};
+exports.CountryField = CountryField;

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

@@ -0,0 +1,8 @@
+export * from './input-field';
+export * from './select-field';
+export * from './switch-field';
+export * from './pagination-limit-field';
+export * from './combo-box-field';
+export * from './country-field';
+export * from './state-field';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/form/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./input-field"), exports);
+__exportStar(require("./select-field"), exports);
+__exportStar(require("./switch-field"), exports);
+__exportStar(require("./pagination-limit-field"), exports);
+__exportStar(require("./combo-box-field"), exports);
+__exportStar(require("./country-field"), exports);
+__exportStar(require("./state-field"), exports);

package/dist/components/form/input-field/index.d.ts

@@ -0,0 +1,23 @@
+import { HTMLInputTypeAttribute, ReactNode } from 'react';
+import { Control } from 'react-hook-form';
+export type InputFieldProps = {
+    className?: string;
+    name: string;
+    type?: HTMLInputTypeAttribute;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    placeholder?: string;
+    description?: ReactNode;
+    control: Control<any>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    minHeight?: number;
+    maxHeight?: number;
+    textArea?: boolean;
+    required?: boolean;
+    defaultValue?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+export declare const InputField: ({ className, type, label, tooltip, labelExtra, placeholder, description, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }: InputFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KACzD,IAAI,CAAA;CACV,CAAA;AACD,eAAO,MAAM,UAAU,GAAI,kKAgBxB,eAAe,4CA8CjB,CAAA"}

package/dist/components/form/input-field/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const autosize_textarea_1 = require("../../../components/ui/autosize-textarea");
+const form_1 = require("../../../components/ui/form");
+const input_1 = require("../../../components/ui/input");
+const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }) => {
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { ...others, render: ({ field }) => ((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.jsx)(form_1.FormControl, { children: textArea ? ((0, jsx_runtime_1.jsx)(autosize_textarea_1.AutosizeTextarea, { className: className, placeholder: placeholder, readOnly: readOnly, minHeight: minHeight, maxHeight: maxHeight, defaultValue: defaultValue, ...field, onChange: (e) => {
+                            field.onChange(e);
+                            onChange?.(e);
+                        } })) : ((0, jsx_runtime_1.jsx)(input_1.Input, { className: className, type: type, placeholder: placeholder, readOnly: readOnly, ...field })) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] })) }));
+};
+exports.InputField = InputField;

package/dist/components/form/pagination-limit-field/index.d.ts

@@ -0,0 +1,8 @@
+import { Control } from 'react-hook-form';
+export type PaginationLimitFieldProps = {
+    label?: string;
+    options?: number[];
+    control: Control<any>;
+};
+export declare const PaginationLimitField: ({ options, label, control }: PaginationLimitFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/pagination-limit-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/pagination-limit-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAIzC,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,6BAIlC,yBAAyB,4CAe3B,CAAA"}

package/dist/components/form/pagination-limit-field/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationLimitField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const select_field_1 = require("../select-field");
+const select_1 = require("../../../components/ui/select");
+const PaginationLimitField = ({ options = [10, 50, 100], label = 'Items per page', control }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium whitespace-nowrap text-gray-600", children: label }), (0, jsx_runtime_1.jsx)(select_field_1.SelectField, { name: "limit", control: control, children: options.map((pageSize) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: String(pageSize), children: pageSize }, pageSize))) })] }));
+};
+exports.PaginationLimitField = PaginationLimitField;

package/dist/components/form/password-field/index.d.ts

@@ -0,0 +1,12 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+interface PasswordFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    name: TName;
+    label: string;
+    tooltip?: string;
+    control: Control<TFieldValues>;
+    required?: boolean;
+    disabled?: boolean;
+}
+export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, control, required, disabled }: PasswordFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAYjE,UAAU,kBAAkB,CAC1B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC;IAE/D,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAgB,EAChB,QAAgB,EACjB,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,2CAwCzC"}

package/dist/components/form/password-field/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordField = PasswordField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const form_1 = require("../../../components/ui/form");
+const input_1 = require("../../../components/ui/input");
+const lucide_react_1 = require("lucide-react");
+function PasswordField({ name, label, tooltip, control, required = false, disabled = false }) {
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { control: control, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [(0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : undefined, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(input_1.Input, { ...field, type: showPassword ? 'text' : 'password', disabled: disabled, className: "pr-10" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-500 focus:outline-hidden", tabIndex: -1, onMouseDown: (e) => {
+                                e.preventDefault();
+                                setShowPassword(!showPassword);
+                            }, children: showPassword ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOffIcon, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.EyeIcon, { size: 20 }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] })) }));
+}