chiperos-ai-components-library 0.0.1 → 0.1.0

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

@@ -0,0 +1,66 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').InputProps & import('react').RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        value: {
+            control: "text";
+            description: string;
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+        };
+        type: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        error: {
+            control: "text";
+            description: string;
+        };
+        showPasswordToggle: {
+            control: "boolean";
+            description: string;
+        };
+        onChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const WithErrorMessage: Story;
+export declare const PasswordInput: Story;
+export declare const EmailInput: Story;
+export declare const NumberInput: Story;
+export declare const Required: Story;
+export declare const WithAutoComplete: Story;
+export declare const LongValue: Story;
+export declare const AllStates: Story;
+export declare const ResponsiveWidth: Story;
+export declare const ValidationEmail: Story;
+export declare const ValidationNumber: Story;
+export declare const ValidationPhone: Story;
+export declare const ValidationMinLength: Story;
+export declare const ValidationMaxLength: Story;
+export declare const ValidationRequired: Story;
+export declare const ValidationCustomRegex: Story;
+export declare const ValidationMultiple: Story;
+export declare const AllValidations: Story;
+export declare const FormExample: Story;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,94 @@
+import { default as React, InputHTMLAttributes } from 'react';
+import { CountryCode } from 'libphonenumber-js';
+
+export interface InputValidation {
+    /**
+     * Validate as email
+     */
+    email?: boolean | string;
+    /**
+     * Validate as number
+     */
+    number?: boolean | string;
+    /**
+     * Validate as phone number for specific country
+     */
+    phone?: {
+        country?: CountryCode;
+        message?: string;
+    };
+    /**
+     * Minimum length validation
+     */
+    minLength?: {
+        value: number;
+        message?: string;
+    };
+    /**
+     * Maximum length validation
+     */
+    maxLength?: {
+        value: number;
+        message?: string;
+    };
+    /**
+     * Custom regex validation
+     */
+    regex?: {
+        pattern: RegExp;
+        message?: string;
+    };
+    /**
+     * Required field validation
+     */
+    required?: boolean | string;
+}
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * The current value of the input
+     */
+    value?: string;
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: (text: string) => void;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error message or state - shows error styling when truthy
+     * External error (overrides validation errors)
+     */
+    error?: string | boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Input type (text, password, email, etc.)
+     */
+    type?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Show password toggle for password inputs
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * Validation rules
+     */
+    validation?: InputValidation;
+    /**
+     * Validate on change (default: true)
+     */
+    validateOnChange?: boolean;
+    /**
+     * Validate on blur (default: true)
+     */
+    validateOnBlur?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

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

@@ -0,0 +1,50 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').SelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        value: {
+            control: "text";
+            description: string;
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+        };
+        label: {
+            control: "text";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        options: {
+            control: "object";
+            description: string;
+        };
+        onChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;
+export declare const DisabledWithValue: Story;
+export declare const ManyOptions: Story;
+export declare const CountrySelector: Story;
+export declare const LongTextOptions: Story;
+export declare const CustomWidth: Story;
+export declare const AllStates: Story;
+export declare const FormExample: Story;
+export declare const Interactive: Story;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,36 @@
+export interface SelectOption {
+    id: string;
+    text: string;
+}
+export interface SelectProps {
+    /**
+     * The currently selected value (id)
+     */
+    value?: string;
+    /**
+     * Callback fired when selection changes
+     */
+    onChange?: (text: string) => void;
+    /**
+     * Whether the select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Array of options to display
+     */
+    options: SelectOption[];
+    /**
+     * Placeholder text when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Label text shown above the selected value
+     */
+    label?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Select;

package/dist/components/Table/Table.stories.d.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TableProps } from './index';
+
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: string;
+    status: string;
+}
+declare const meta: Meta<TableProps<User>>;
+export default meta;
+type Story = StoryObj<TableProps<User>>;
+export declare const Default: Story;
+export declare const WithPagination: Story;
+export declare const CustomRowsPerPage: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const CustomEmptyMessage: Story;
+export declare const WithCustomRender: Story;
+export declare const WithTwoLineCell: Story;
+interface ExtendedUser {
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    department: string;
+    role: string;
+}
+export declare const ManyColumns: StoryObj<TableProps<ExtendedUser>>;
+export declare const RowHighlighting: Story;
+export declare const Interactive: Story;
+export declare const ClickableRows: Story;
+export declare const SortableExample: Story;

package/dist/components/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+
+export interface TableColumn<T = any> {
+    /**
+     * Unique key for the column
+     */
+    key: string;
+    /**
+     * Header label for the column
+     */
+    label: string;
+    /**
+     * Custom render function for cell content
+     */
+    render?: (row: T, rowIndex: number) => React.ReactNode;
+    /**
+     * Additional CSS classes for the column
+     */
+    className?: string;
+}
+export interface TableProps<T = any> {
+    /**
+     * Array of column definitions
+     */
+    columns: TableColumn<T>[];
+    /**
+     * Array of data rows
+     */
+    data: T[];
+    /**
+     * Number of rows per page
+     */
+    rowsPerPage?: number;
+    /**
+     * Show pagination (default: true)
+     */
+    showPagination?: boolean;
+    /**
+     * Custom className for the table container
+     */
+    className?: string;
+    /**
+     * Custom className for table rows
+     */
+    rowClassName?: string | ((row: T, rowIndex: number) => string);
+    /**
+     * Callback when page changes
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Current page (for controlled component)
+     */
+    currentPage?: number;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * Empty state message
+     */
+    emptyMessage?: string;
+}
+export declare function Table<T = any>({ columns, data, rowsPerPage, showPagination, className, rowClassName, onPageChange, currentPage: controlledPage, loading, emptyMessage, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/components/TableHeader/TableHeader.stories.d.ts

@@ -0,0 +1,48 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./index').TableHeaderProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        title: {
+            control: "text";
+            description: string;
+        };
+        showTitle: {
+            control: "boolean";
+            description: string;
+        };
+        searchPlaceholder: {
+            control: "text";
+            description: string;
+        };
+        showFilters: {
+            control: "boolean";
+            description: string;
+        };
+        showButtons: {
+            control: "boolean";
+            description: string;
+        };
+        showCards: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithTitle: Story;
+export declare const WithFilters: Story;
+export declare const WithButtons: Story;
+export declare const WithCards: Story;
+export declare const Complete: Story;
+export declare const OnlySearch: Story;
+export declare const SearchAndButtons: Story;
+export declare const ManyFilters: Story;
+export declare const CustomCards: Story;

package/dist/components/TableHeader/TableHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,125 @@
+import { default as React } from 'react';
+import { SelectOption } from '../Select';
+
+export interface TableHeaderFilter {
+    /**
+     * Unique key for the filter
+     */
+    key: string;
+    /**
+     * Label for the filter (used as placeholder if placeholder not provided)
+     */
+    label: string;
+    /**
+     * Placeholder text shown when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Options for dropdown filter
+     */
+    options?: SelectOption[];
+    /**
+     * Selected value
+     */
+    value?: string;
+    /**
+     * Callback when filter changes
+     */
+    onChange?: (value: string) => void;
+}
+export interface TableHeaderButton {
+    /**
+     * Button label
+     */
+    label: string;
+    /**
+     * Button variant (primary = green, outline = white with border)
+     */
+    variant?: 'primary' | 'outline';
+    /**
+     * Is this a dropdown button?
+     */
+    isDropdown?: boolean;
+    /**
+     * Dropdown options (if isDropdown is true)
+     */
+    dropdownOptions?: SelectOption[];
+    /**
+     * Selected dropdown value
+     */
+    dropdownValue?: string;
+    /**
+     * Click handler for regular button
+     */
+    onClick?: () => void;
+    /**
+     * Change handler for dropdown button
+     */
+    onDropdownChange?: (value: string) => void;
+}
+export interface TableHeaderCard {
+    /**
+     * Card label
+     */
+    label: string;
+    /**
+     * Card value
+     */
+    value: string | number;
+    /**
+     * Icon element
+     */
+    icon?: React.ReactNode;
+}
+export interface TableHeaderProps {
+    /**
+     * Title shown at the top (optional)
+     */
+    title?: string;
+    /**
+     * Show title
+     */
+    showTitle?: boolean;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Search value
+     */
+    searchValue?: string;
+    /**
+     * Search callback
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Array of filters
+     */
+    filters?: TableHeaderFilter[];
+    /**
+     * Show filters row
+     */
+    showFilters?: boolean;
+    /**
+     * Array of buttons
+     */
+    buttons?: TableHeaderButton[];
+    /**
+     * Show buttons
+     */
+    showButtons?: boolean;
+    /**
+     * Array of KPI cards to show
+     */
+    cards?: TableHeaderCard[];
+    /**
+     * Show cards
+     */
+    showCards?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const TableHeader: React.FC<TableHeaderProps>;
+export default TableHeader;

package/dist/components/index.d.ts

@@ -4,11 +4,15 @@ export * from './ButtonRadix';
 export * from './BrandIcons';
 export * from './CardsGrid';
 export * from './FeatureCard';
+export * from './Input';
 export * from './KPIComparison';
 export * from './KPICard';
 export * from './Loader';
 export * from './OptionCard';
 export * from './OrderCard';
 export * from './PaginationLib';
+export * from './Select';
 export * from './Switcher';
+export * from './Table';
+export * from './TableHeader';
 export * from './Toasts';

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "chiperos-ai-components-library",
   "private": false,
-  "version": "0.0.1",
-  "description": "Chiper Components Library - A modern React component library built with Vite, TypeScript and Tailwind CSS.",
+  "version": "0.1.0",
+  "description": "Chiperos AI Components Library - A modern React component library built with Vite, TypeScript and Tailwind CSS.",
   "type": "module",
-  "main": "./dist/chiper-components-library.cjs",
-  "module": "./dist/chiper-components-library.js",
+  "main": "./dist/chiperos-ai-components-library.cjs",
+  "module": "./dist/chiperos-ai-components-library.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/chiper-components-library.js",
-      "require": "./dist/chiper-components-library.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/chiperos-ai-components-library.js",
+      "require": "./dist/chiperos-ai-components-library.cjs"
     }
   },
   "files": [
@@ -25,19 +26,47 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "libphonenumber-js": "^1.12.31",
+    "zod": "^4.1.13"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
-    "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.534.0",
     "next-intl": "^4.3.4",
     "radix-ui": "^1.4.3"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "peerDependenciesMeta": {
+    "@radix-ui/react-radio-group": {
+      "optional": true
+    },
+    "@radix-ui/react-slot": {
+      "optional": true
+    },
+    "@radix-ui/react-switch": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "next-intl": {
+      "optional": true
+    },
+    "radix-ui": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "lucide-react": "^0.534.0",
+    "next-intl": "^4.3.4",
+    "radix-ui": "^1.4.3",
     "@chromatic-com/storybook": "^1.5.0",
     "@storybook/addon-essentials": "^8.1.10",
     "@storybook/addon-interactions": "^8.1.10",
@@ -87,10 +116,10 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/chiper-team/chiper-components-library.git"
+    "url": "https://github.com/chiperos-ai/chiperos-ai-components-library.git"
   },
-  "homepage": "https://github.com/chiper-team/chiper-components-library#readme",
+  "homepage": "https://github.com/chiperos-ai/chiperos-ai-components-library#readme",
   "bugs": {
-    "url": "https://github.com/chiper-team/chiper-components-library/issues"
+    "url": "https://github.com/chiperos-ai/chiperos-ai-components-library/issues"
   }
 }