@innotechjsc/ui-kit 0.1.0 → 0.2.0

package/README.md

@@ -1,149 +1,178 @@
 # @innotechjsc/ui-kit
 
-Thư viện Component UI chuẩn mực dành riêng cho các dự án React của Innotech JSC, được xây dựng với **Vite**, **TypeScript**, và **Tailwind CSS v4**. Hỗ trợ xuất ra các chuẩn ESM, UMD kèm Types đầy đủ và Tree-shaking.
+Thư viện Component UI chuẩn mực dành riêng cho các dự án React của Innotech JSC, được xây dựng với **Vite**, **TypeScript**, và **Tailwind CSS v4**.
 
-## 📦 Cài đặt
+---
 
-Sử dụng package manager yêu thích của bạn để cài đặt thư viện. Tuy nhiên, thư viện khuyên dùng **PNPM** cho các dự án React trong hệ sinh thái của team.
+## 🚀 Dành cho Nhà phát triển (Human Developers)
 
-```bash
-# Sử dụng pnpm
-pnpm add @innotechjsc/ui-kit
+### 📦 Cài đặt
 
-# Sử dụng npm
-npm install @innotechjsc/ui-kit
+Sử dụng **PNPM** (khuyên dùng) hoặc các package manager khác:
 
-# Sử dụng yarn
-yarn add @innotechjsc/ui-kit
+```bash
+pnpm add @innotechjsc/ui-kit
 ```
 
-## 🚀 Cấu hình
+### ⚙️ Cấu hình ban đầu
 
-Để các components hiển thị đúng style của Tailwind CSS, bạn cần import file CSS toàn cục vào file gốc (entry point) của dự án ứng dụng của bạn (ví dụ: `main.tsx` hoặc `App.tsx`):
+Import file CSS toàn cục vào file entry point của dự án (ví dụ: `main.tsx` hoặc `App.tsx`):
 
 ```tsx
-// main.tsx
-import "@innotechjsc/ui-kit/styles/globals.css";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+import "@innotechjsc/ui-kit/dist/index.css";
 ```
 
-## 🧩 Hướng dẫn sử dụng Components
+### 🧩 Hướng dẫn sử dụng các Components chính
 
-Mọi component đều có thể import trực tiếp từ index của thư viện (@innotechjsc/ui-kit).
+Thư viện cung cấp các components được tối ưu về UI/UX. Dưới đây là cách sử dụng một số component phổ biến nhất:
 
-> **Lưu ý Tree-shaking:** Thư viện không dùng `export default` nhằm hỗ trợ tự động loại bỏ code thừa khi build ứng dụng.
+#### 1. Button (Nút bấm)
 
-### 1. Button
+Hỗ trợ 3 variants chính: `primary`, `secondary`, `danger`.
 
 ```tsx
 import { Button } from "@innotechjsc/ui-kit";
 
-function App() {
-  return (
-    <div className="flex gap-4 p-4">
-      <Button variant="primary" onClick={() => alert("Clicked!")}>
-        Xác nhận
-      </Button>
-      <Button variant="secondary">Hủy bỏ</Button>
-      <Button variant="danger">Xóa dữ liệu</Button>
-    </div>
-  );
-}
+<Button variant="primary" onClick={() => console.log("Clicked")}>
+  Xác nhận
+</Button>
+<Button variant="secondary" disabled>
+  Vô hiệu hóa
+</Button>
 ```
 
-### 2. Input
+#### 2. Input (Ô nhập liệu)
+
+Tích hợp sẵn label, thông báo lỗi và icon.
 
 ```tsx
 import { Input } from "@innotechjsc/ui-kit";
+import { User } from "lucide-react";
+
+<Input
+  label="Email"
+  placeholder="example@gmail.com"
+  startIcon={<User size={16} />}
+  error="Email không hợp lệ"
+/>;
+```
+
+#### 3. Select (Hộp chọn)
+
+Xây dựng trên nền tảng Radix UI, hỗ trợ chọn một hoặc nhiều item.
 
-function Form() {
-  return (
-    <div className="p-4 max-w-sm">
-      <Input label="Tên đăng nhập" placeholder="Nhập username..." />
-      <Input
-        label="Mật khẩu"
-        type="password"
-        error="Mật khẩu không được để trống"
-      />
-    </div>
-  );
-}
+```tsx
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@innotechjsc/ui-kit";
+
+<Select onValueChange={(value) => console.log(value)}>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Chọn ngôn ngữ" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="vi">Tiếng Việt</SelectItem>
+    <SelectItem value="en">Tiếng Anh</SelectItem>
+  </SelectContent>
+</Select>;
 ```
 
-### 3. Modal
+#### 4. DatePicker (Chọn ngày)
+
+Tích hợp `date-fns` và hỗ trợ đa ngôn ngữ (vi/en).
 
 ```tsx
+import { DatePicker } from "@innotechjsc/ui-kit";
 import { useState } from "react";
-import { Modal, Button } from "@innotechjsc/ui-kit";
 
-function Example() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Mở Modal</Button>
-
-      <Modal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        title="Thông báo hệ thống"
-      >
-        <p className="text-gray-600 mb-4">
-          Cập nhật component thành công! Bạn có thể đóng modal này.
-        </p>
-        <div className="flex justify-end">
-          <Button onClick={() => setIsOpen(false)}>Đóng</Button>
-        </div>
-      </Modal>
-    </>
-  );
-}
+const [date, setDate] = useState<Date>();
+
+<DatePicker date={date} setDate={setDate} label="Ngày sinh" language="vi" />;
 ```
 
-## 📚 Storybook (Dành cho Innotech Dev Team)
+#### 5. Modal (Hội thoại)
+
+Sử dụng Portal để đảm bảo hiển thị trên cùng.
+
+```tsx
+import { Modal, Button } from "@innotechjsc/ui-kit";
+import { useState } from "react";
+
+const [isOpen, setIsOpen] = useState(false);
+
+<Button onClick={() => setIsOpen(true)}>Mở Modal</Button>
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Tiêu đề Modal"
+>
+  <p>Nội dung hiển thị bên trong modal...</p>
+</Modal>
+```
 
-Thư viện tích hợp sẵn Storybook để quá trình phát triển, review UI và onboarding cho thành viên mới thuận lợi nhất.
+### 📚 Toàn bộ Component
 
-Cách khởi chạy giao diện kiểm thử component (Storybook Server):
+Để xem chi tiết danh sách tất cả props và demo trực quan, hãy chạy:
 
 ```bash
 pnpm storybook
 ```
 
-## ⚙️ Quy trình Build & Publish (Dành cho Maintainers)
+---
 
-Dự án có sử dụng `Changesets` để quản lý phiên bản (semver) theo chuẩn mực quốc tế:
+## 🤖 Dành cho AI Agents (Cursor, Copilot, etc.)
 
-1. Khi code xong một tính năng mới (hoặc bug fix), chạy lệnh sau để khai báo mức độ thay đổi (patch/minor/major):
+Phần này giúp AI hiểu cấu trúc và quy chuẩn của project để hỗ trợ code chính xác hơn.
 
-```bash
-npx changeset
-```
+### 📂 Cấu trúc dự án
 
-2. Commit các file thay đổi (bao gồm cả file markdown được sinh ra trong `.changeset`).
-3. Khi bạn muốn release phiên bản mới (bundle app), hãy chạy:
+- `src/components/`: Chứa mã nguồn của tất cả components. Mỗi component đặt trong một thư mục riêng.
+- `src/styles/`: Chứa `globals.css` và `tokens.ts`.
+- `index.ts`: Entry point chính, export tất cả components và styles.
 
-```bash
-# Update versions trong package.json và tạo ra CHANGELOG.md
-npx changeset version
+### 🛠 Tech Stack sử dụng
 
-# Build toàn bộ components ra định dạng ESM, UMD
-pnpm build
-```
+- **React 19 + TypeScript**: Strict mode.
+- **Tailwind CSS v4**: Sử dụng các tiện ích CSS mới nhất.
+- **Radix UI**: Primitive components cho accessibility (Checkbox, Popover, Select, v.v.).
+- **CVA (class-variance-authority)**: Quản lý variants cho components (ví dụ: `variant="primary"`, `size="sm"`).
+- **Lucide React**: Thư viện icon chuẩn.
 
-4. Publish lên registries:
+### 📝 Quy trình tạo Component mới
 
-```bash
-npm publish # Hoặc pnpm publish
-```
+1. Tạo thư mục `src/components/NewComponent`.
+2. Sử dụng `Radix UI` if possible để đảm bảo tính tiếp cận (a11y).
+3. Sử dụng `cva` để định nghĩa styles và variants.
+4. Export component qua `index.ts` trong thư mục component và `src/index.ts`.
+5. Tạo file Storybook `*.stories.tsx` để test.
+
+### 🔍 Cách tìm kiếm Code
+
+- Nếu cần xem logic của Input, hãy tìm tại `src/components/Input/Input.tsx`.
+- Nếu cần xem cách define theme/màu sắc, hãy tìm tại `src/styles/tokens.ts` và `tailwind.config.ts`.
+
+---
+
+## ⚙️ Quy trình Build & Publish (Maintainers)
+
+1. **Thay đổi code**: Thực hiện logic fix/thêm mới.
+2. **Khai báo version**:
+   ```bash
+   npx changeset
+   ```
+3. **Build**:
+   ```bash
+   pnpm build
+   ```
+4. **Publish**:
+   ```bash
+   pnpm publish
+   ```
 
 ---
 

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,14 @@
+export type AutocompleteOption = {
+    label: string;
+    value: string;
+};
+export interface AutocompleteProps {
+    options: AutocompleteOption[];
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    error?: string;
+    label?: string;
+}
+export declare function Autocomplete({ options, value, onChange, placeholder, className, error, label, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+declare const avatarVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+}
+declare const AvatarRoot: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface CompositeAvatarProps extends AvatarProps {
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+    status?: "online" | "offline" | "busy" | "away";
+}
+declare const Avatar: React.ForwardRefExoticComponent<CompositeAvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarRoot, AvatarImage, AvatarFallback };

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "primary" | "success" | "warning" | "danger" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    dot?: boolean;
+}
+declare function Badge({ className, variant, size, dot, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export type ButtonProps = {
+    /** The variant style of the button */
+    variant?: 'primary' | 'secondary' | 'danger';
+    /** Button content */
+    children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function Button({ variant, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,10 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from "react";
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    selectedColor?: string;
+};
+declare function Calendar({ className, classNames, showOutsideDays, selectedColor, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export { Calendar };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    hasError?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,8 @@
+export interface ColorPickerProps {
+    color?: string;
+    onChange?: (color: string) => void;
+    className?: string;
+    error?: string;
+    label?: string;
+}
+export declare function ColorPicker({ color, onChange, className, error, label, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,11 @@
+export interface DatePickerProps {
+    date?: Date;
+    setDate: (date?: Date) => void;
+    placeholder?: string;
+    className?: string;
+    error?: boolean;
+    label?: string;
+    selectedColor?: string;
+    language?: "vi" | "en";
+}
+export declare function DatePicker({ date, setDate, placeholder, className, error, label, selectedColor, language, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,11 @@
+export interface DateTimePickerProps {
+    date?: Date;
+    setDate: (date?: Date) => void;
+    placeholder?: string;
+    className?: string;
+    error?: boolean;
+    label?: string;
+    selectedColor?: string;
+    language?: "vi" | "en";
+}
+export declare function DateTimePicker({ date, setDate, placeholder, className, error, label, selectedColor, language, }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/EmailInput.d.ts

@@ -0,0 +1,4 @@
+import { InputProps } from './Input';
+import * as React from "react";
+declare const EmailInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { EmailInput };

package/dist/components/Input/HiddenInput.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface HiddenInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const HiddenInput: React.ForwardRefExoticComponent<HiddenInputProps & React.RefAttributes<HTMLInputElement>>;
+export { HiddenInput };

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const inputVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
+    label?: string;
+    error?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    wrapperClassName?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input, inputVariants };

package/dist/components/Input/NumberInput.d.ts

@@ -0,0 +1,4 @@
+import { InputProps } from './Input';
+import * as React from "react";
+declare const NumberInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberInput };

package/dist/components/Input/PasswordInput.d.ts

@@ -0,0 +1,4 @@
+import { InputProps } from './Input';
+import * as React from "react";
+declare const PasswordInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { PasswordInput };

package/dist/components/Input/SearchInput.d.ts

@@ -0,0 +1,4 @@
+import { InputProps } from './Input';
+import * as React from "react";
+declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { SearchInput };

package/dist/components/Input/Textarea.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    wrapperClassName?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

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

@@ -0,0 +1,7 @@
+export * from './Input';
+export * from './PasswordInput';
+export * from './SearchInput';
+export * from './Textarea';
+export * from './NumberInput';
+export * from './EmailInput';
+export * from './HiddenInput';

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export type ModalProps = {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Function to call when modal requests to close */
+    onClose: () => void;
+    /** Modal content */
+    children: React.ReactNode;
+    /** Modal title */
+    title?: React.ReactNode;
+    /** Optional class name */
+    className?: string;
+};
+export declare function Modal({ isOpen, onClose, title, children, className }: ModalProps): React.ReactPortal | null;

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

@@ -0,0 +1 @@
+export * from './Modal';

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+declare const radioVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, VariantProps<typeof radioVariants> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}
+declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/components/Select/MultiSelect.d.ts

@@ -0,0 +1,13 @@
+export type Option = {
+    label: string;
+    value: string;
+};
+export interface MultiSelectProps {
+    options: Option[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    placeholder?: string;
+    className?: string;
+    error?: boolean;
+}
+export declare function MultiSelect({ options, selected, onChange, placeholder, className, error, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    error?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,4 @@
+import { InputProps } from '../Input/Input';
+import * as React from "react";
+declare const TimePicker: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { TimePicker };