@tqc-solution/design-system 0.1.73

package/README.md

@@ -0,0 +1,207 @@
+# @tqc-solution/design-system
+
+A production-ready React Design System with **multi-theme support**, **CSS variables**, and **Tailwind preset** integration.
+
+## Features
+
+- 🎨 **Multi-theme support** - PubFuture and OIO themes
+- 🎯 **CSS Variables** - All design tokens exposed as CSS variables
+- ⚡ **Tailwind Preset** - Seamless Tailwind CSS integration
+- 📦 **Auto-injected CSS** - No manual CSS imports needed
+- 🔧 **TypeScript** - Full TypeScript support
+- ⚛️ **React 18/19** - Compatible with React 18 and 19
+
+---
+
+## Installation
+
+Install the package with your preferred theme tag:
+
+### PubFuture Theme
+
+```bash
+npm i @tqc-solution/design-system@pubfuture
+```
+
+### OIO Theme
+
+```bash
+npm i @tqc-solution/design-system@oio
+```
+
+---
+
+## Quick Start
+
+All theme CSS is **automatically injected** into your bundle, so **no manual CSS import is needed**.
+
+```tsx
+// App.tsx
+import { Button } from '@tqc-solution/design-system';
+
+function App() {
+  return (
+    <div>
+      <Button type="primary" size="large" label="Click me" />
+    </div>
+  );
+}
+```
+
+---
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and sizes.
+
+#### Import
+
+```tsx
+import { Button } from '@tqc-solution/design-system';
+```
+
+#### Usage Examples
+
+```tsx
+// Basic primary button
+<Button type="primary" size="large" label="Primary" />
+
+// Secondary variant
+<Button variant="secondary" label="Secondary" />
+
+// Text button
+<Button variant="text" label="Text" />
+
+// Link style button
+<Button variant="link" href="/about" label="Go to about" />
+
+// With icon
+<Button startIcon={<Icon />} label="With icon" />
+
+// Disabled state
+<Button disabled label="Disabled" />
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Button text label |
+| `variant` | `'primary' \| 'secondary' \| 'text' \| 'link' \| 'negative-primary' \| 'negative-secondary'` | `'primary'` | Button style variant |
+| `size` | `'large' \| 'medium' \| 'full'` | `'large'` | Button size |
+| `startIcon` | `ReactNode` | - | Icon displayed at the start of the button |
+| `endIcon` | `ReactNode` | - | Icon displayed at the end of the button |
+| `href` | `string` | - | Only used when `variant="link"` |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+---
+
+## CSS Variables
+
+The Design System exposes all **design tokens** as CSS variables on `:root`, making them available throughout your application.
+
+### Available Variables
+
+```css
+:root {
+  --background-fill-negative: #E84118;
+  --background-fill-brand: #3FAE3B;
+  --text-primary: #000000;
+  --spacing-16: 16px;
+  --radius-8: 8px;
+  /* ... and many more */
+}
+```
+
+### Usage in Your CSS
+
+```css
+/* example.css */
+.danger-box {
+  background-color: var(--background-fill-negative);
+  color: var(--text-inverse);
+  padding: var(--spacing-16);
+  border-radius: var(--radius-8);
+}
+
+.card {
+  background-color: var(--background-fill-primary);
+  box-shadow: var(--shadow-shadow-md);
+}
+```
+
+> **Note:** Variable names do **not** include a `color-` prefix. Use `var(--background-fill-negative)`, **not** `var(--color-background-fill-negative)`. Variables are available immediately after importing any component from `@tqc-solution/design-system`.
+
+---
+
+## Tailwind CSS Integration
+
+The package provides a **Tailwind preset** for each theme, allowing you to use design system tokens directly in your Tailwind classes.
+
+### Theme Mapping
+
+- `@tqc-solution/design-system@pubfuture` → PubFuture preset
+- `@tqc-solution/design-system@oio` → OIO preset
+
+### Configuration
+
+```js
+// tailwind.config.js
+import tqcPreset from '@tqc-solution/design-system/tailwind';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [tqcPreset],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      // You can add custom theme extensions here
+    },
+  },
+  plugins: [],
+};
+```
+
+### Usage Example
+
+```tsx
+// App.tsx
+import { Button } from '@tqc-solution/design-system';
+
+function App() {
+  return (
+    <div className="bg-background-fill-primary p-24">
+      <h1 className="text-heading-2xl text-text-brand">
+        Hello Tailwind!
+      </h1>
+
+      <button className="bg-background-fill-brand text-text-inverse px-24 py-12 rounded-8 shadow-shadow-md">
+        Native HTML button with DS tokens
+      </button>
+
+      <Button className="ml-16" label="DS Button" />
+    </div>
+  );
+}
+```
+
+### Available Tailwind Classes
+
+Classes are mapped directly from the Design System's CSS variables:
+
+- `bg-background-fill-primary` - Background colors
+- `text-text-brand` - Text colors
+- `rounded-8` - Border radius
+- `shadow-shadow-md` - Shadows
+- And many more...
+
+---
+
+## License
+
+MIT © TQC Solution

package/dist/assets/icon/IconAi.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconAi: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconAi;

package/dist/assets/icon/IconAlertTriangleSolid.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconAlertTriangleSolid: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconAlertTriangleSolid;

package/dist/assets/icon/IconAudio.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconAudio: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconAudio;

package/dist/assets/icon/IconCalendar.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCalendar: ({ className, width, height, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCalendar;

package/dist/assets/icon/IconCaretDown.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCaretDown: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCaretDown;

package/dist/assets/icon/IconCheck.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCheck: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCheck;

package/dist/assets/icon/IconCheckCircleSolid.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCheckCircleSolid: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCheckCircleSolid;

package/dist/assets/icon/IconChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconChevronLeft: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconChevronLeft;

package/dist/assets/icon/IconChevronRight.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconChevronRight: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconChevronRight;

package/dist/assets/icon/IconCircleArrowLeftSolid.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCircleArrowLeftSolid: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCircleArrowLeftSolid;

package/dist/assets/icon/IconCircleArrowRightSolid.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCircleArrowRightSolid: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCircleArrowRightSolid;

package/dist/assets/icon/IconClock.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconClock: ({ className, width, height, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconClock;

package/dist/assets/icon/IconClose.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconClose: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconClose;

package/dist/assets/icon/IconCloseCircleSolid.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCloseCircleSolid: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCloseCircleSolid;

package/dist/assets/icon/IconColumns.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconColumns: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconColumns;

package/dist/assets/icon/IconCopy.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconCopy: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconCopy;

package/dist/assets/icon/IconDelete.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconDelete: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconDelete;

package/dist/assets/icon/IconDocument.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconDocument: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconDocument;

package/dist/assets/icon/IconExcel.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconExcel: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconExcel;

package/dist/assets/icon/IconEye.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconEye: ({ className, width, height, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconEye;

package/dist/assets/icon/IconEyeSlash.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconEyeSlash: ({ className, width, height, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconEyeSlash;

package/dist/assets/icon/IconFile.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconFile: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconFile;

package/dist/assets/icon/IconFolder.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconFolder: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconFolder;

package/dist/assets/icon/IconImg.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconImg: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconImg;

package/dist/assets/icon/IconInfoSolid.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconInfoSolid: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconInfoSolid;

package/dist/assets/icon/IconPdf.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconPdf: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconPdf;

package/dist/assets/icon/IconPowerPoint.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconPowerPoint: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconPowerPoint;

package/dist/assets/icon/IconPts.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconPts: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconPts;

package/dist/assets/icon/IconSearch.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconSearch: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconSearch;

package/dist/assets/icon/IconSmallCaretRightSolid.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconSmallCaretRightSolid: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconSmallCaretRightSolid;

package/dist/assets/icon/IconTemplate.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconTemplate: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconTemplate;

package/dist/assets/icon/IconTxt.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconTxt: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconTxt;

package/dist/assets/icon/IconUpload.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconUpload: ({ className, width, height, color, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconUpload;

package/dist/assets/icon/IconVideo.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconVideo: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconVideo;

package/dist/assets/icon/IconWord.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconWord: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconWord;

package/dist/assets/icon/IconZip.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../../types";
+declare const IconZip: ({ className, width, height, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default IconZip;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type AlertType = 'info' | 'success' | 'error' | 'alert';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+    type: AlertType;
+    title: string;
+    supportText?: string;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    onClose?: () => void;
+    showClose?: boolean;
+    isAlertRadius?: boolean;
+}
+export declare const Alert: React.FC<AlertProps>;

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertType } from './Alert';

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

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type AvatarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Avatar size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Avatar type */
+    type?: 'image' | 'text' | 'icon';
+    /** Image source URL (required when type='image') */
+    src?: string;
+    /** Alt text for image */
+    alt?: string;
+    /** Text to display (1-2 characters, required when type='text') */
+    text?: string;
+    /** Icon element to display (required when type='icon') */
+    icon?: ReactNode;
+    /** Show status indicator dot */
+    statusIcon?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+};
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Avatar size */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /** Avatar type */
+    type?: "image" | "text" | "icon";
+    /** Image source URL (required when type='image') */
+    src?: string;
+    /** Alt text for image */
+    alt?: string;
+    /** Text to display (1-2 characters, required when type='text') */
+    text?: string;
+    /** Icon element to display (required when type='icon') */
+    icon?: ReactNode;
+    /** Show status indicator dot */
+    statusIcon?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';

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

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'color'> & {
+    /** Badge text content */
+    children: ReactNode;
+    /** Visual type of the badge */
+    type?: 'active' | 'secondary' | 'default' | 'negative' | 'pending' | 'disabled';
+    /** Style variant of the badge */
+    badgeStyle?: 'soft' | 'outline';
+    /** Size of the badge */
+    size?: 'sm' | 'md' | 'lg';
+    /** Icon to display at the start of the badge */
+    startIcon?: ReactNode;
+    /** Icon to display at the end of the badge */
+    endIcon?: ReactNode;
+    /** Dot indicator instead of text - shows only a colored dot */
+    dot?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+};
+export declare const Badge: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "color"> & {
+    /** Badge text content */
+    children: ReactNode;
+    /** Visual type of the badge */
+    type?: "active" | "secondary" | "default" | "negative" | "pending" | "disabled";
+    /** Style variant of the badge */
+    badgeStyle?: "soft" | "outline";
+    /** Size of the badge */
+    size?: "sm" | "md" | "lg";
+    /** Icon to display at the start of the badge */
+    startIcon?: ReactNode;
+    /** Icon to display at the end of the badge */
+    endIcon?: ReactNode;
+    /** Dot indicator instead of text - shows only a colored dot */
+    dot?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+} & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

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

@@ -0,0 +1,19 @@
+import { type ButtonHTMLAttributes, type AnchorHTMLAttributes, type ReactNode } from 'react';
+type BaseButtonProps = {
+    type?: 'primary' | 'secondary' | 'text' | 'link' | 'negative-secondary' | 'negative-primary';
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+    label?: string;
+    minWidth?: string;
+};
+export type ButtonProps = BaseButtonProps & ((Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
+    type?: Exclude<BaseButtonProps['type'], 'link'>;
+}) | (AnchorHTMLAttributes<HTMLAnchorElement> & {
+    type: 'link';
+    href: string;
+}));
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/CardTable/CardTable.d.ts

@@ -0,0 +1,87 @@
+import { type ReactNode } from 'react';
+export type ColumnType<T = any> = {
+    title?: ReactNode | ((props: any) => ReactNode);
+    dataIndex?: string | string[];
+    key?: string | number;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    render?: (value: any, record: T, index: number) => ReactNode;
+    ellipsis?: boolean;
+    align?: 'left' | 'right' | 'center';
+    className?: string;
+    onCell?: (record: T, index: number) => any;
+    onHeaderCell?: () => any;
+    children?: ColumnType<T>[];
+};
+export type ColumnsType<T = any> = ColumnType<T>[];
+export interface CardTableProps<T = any> {
+    /** Show add button */
+    showAddButton?: ReactNode;
+    /** Data source for the table */
+    dataSource?: T[];
+    /** Pagination configuration */
+    pagination?: {
+        /** Total number of items (if not provided, will use dataSource.length) */
+        total?: number;
+        /** Current page (1-indexed) - controlled mode */
+        current?: number;
+        /** Number of items per page */
+        pageSize?: number;
+        /** Available page size options */
+        pageSizeOptions?: number[];
+        /** Callback when page changes */
+        onChange?: (page: number, pageSize: number) => void;
+        /** Callback when page size changes */
+        onPageSizeChange?: (pageSize: number) => void;
+        /** Show pagination controls */
+        showPagination?: boolean;
+        /** Enable automatic pagination (default: true if dataSource is provided) */
+        autoPagination?: boolean;
+    };
+    /** Row selection configuration */
+    rowSelection?: {
+        /** Selected row keys (controlled mode) */
+        selectedRowKeys?: (string | number)[];
+        /** Callback when selection changes */
+        onChange?: (selectedRowKeys: (string | number)[], selectedRows: T[]) => void;
+        /** Get checkbox props for a row */
+        getCheckboxProps?: (record: T) => {
+            disabled?: boolean;
+        };
+        /** Preserve selected rows when page changes (default: false) */
+        preserveSelectedRowKeys?: boolean;
+    };
+    /** Show more options icon */
+    showMoreOptions?: boolean;
+    /** Column keys that cannot be hidden (default columns) */
+    defaultColumns?: (string | number)[];
+    /** Column keys that are visible by default (if not provided, all columns are visible) */
+    defaultVisibleColumns?: (string | number)[];
+    /** Enable column resizing */
+    resize?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Table columns */
+    columns?: ColumnsType<T>;
+    /** Row key function or string */
+    rowKey?: string | ((record: T) => string | number);
+    /** Row className function */
+    rowClassName?: string | ((record: T, index: number) => string);
+    /** Scroll configuration */
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    /** Table layout */
+    tableLayout?: 'auto' | 'fixed';
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state */
+    emptyText?: ReactNode;
+    /** Show header */
+    showHeader?: boolean;
+    /** Additional table props */
+    [key: string]: any;
+}
+export declare const CardTable: import("react").ForwardRefExoticComponent<Omit<CardTableProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { CardTable } from './CardTable';
+export type { CardTableProps, ColumnsType, ColumnType } from './CardTable';