@neasg/design-system 0.1.3 → 0.2.1

package/dist/table.d.ts

@@ -1,8 +1,12 @@
 import * as React from "react";
-interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+import { type PaginationProps } from "./pagination";
+interface TableRootProps extends React.HTMLAttributes<HTMLTableElement> {
     wrapperClassName?: string;
 }
-declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLTableElement>>;
+interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -20,4 +24,84 @@ declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<
     wrap?: boolean;
 } & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+type TableAlign = "left" | "center" | "right";
+export type TableSortDirection = "asc" | "desc";
+export type SortDirection = TableSortDirection;
+export type TableSkeletonLine = {
+    width?: string;
+    height?: string;
+    badge?: boolean;
+};
+export type TableSkeletonConfig = {
+    width?: string;
+    height?: string;
+    badge?: boolean;
+    lines?: TableSkeletonLine[];
+    actions?: number;
+};
+export interface TableRowSkeletonProps {
+    columns: TableSkeletonConfig[];
+    rows?: number;
+}
+declare function TableRowSkeleton({ columns, rows }: TableRowSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const TABLE_SKELETON_PRESETS: {
+    readonly text: (width?: string, height?: string) => TableSkeletonConfig;
+    readonly badge: (width?: string, height?: string) => TableSkeletonConfig;
+    readonly actions: (count?: number) => TableSkeletonConfig;
+    readonly textWithSubtitle: (textWidth?: string, subtitleWidth?: string) => TableSkeletonConfig;
+    readonly badgeGroup: (count?: number, width?: string) => TableSkeletonConfig;
+};
+export interface TableColumn<Row> {
+    key: string;
+    header: React.ReactNode;
+    accessorKey?: keyof Row;
+    cell?: (row: Row, rowIndex: number) => React.ReactNode;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    wrap?: boolean;
+    align?: TableAlign;
+    sortable?: boolean;
+    sortKey?: string;
+    sortLabel?: string;
+    skeleton?: TableSkeletonConfig;
+    headerClassName?: string;
+    cellClassName?: string;
+}
+export interface TableSortingProps {
+    field: string | null;
+    direction: TableSortDirection;
+    onSort: (field: string) => void;
+}
+interface SortableTableHeadProps<T extends string> {
+    field: T;
+    children: React.ReactNode;
+    currentSortField: T | null;
+    currentSortDirection: SortDirection;
+    onSort: (field: T) => void;
+    className?: string;
+    allowWrap?: boolean;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    align?: TableAlign;
+    sortLabel?: string;
+}
+declare function SortableTableHead<T extends string>({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap, width, minWidth, maxWidth, align, sortLabel, }: SortableTableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    getRowKey: (row: Row, index: number) => string;
+    emptyState?: React.ReactNode;
+    toolbar?: React.ReactNode;
+    caption?: React.ReactNode;
+    containerClassName?: string;
+    tableClassName?: string;
+    rowClassName?: string | ((row: Row, index: number) => string | undefined);
+    sorting?: TableSortingProps;
+    pagination?: Omit<PaginationProps, "className">;
+    loading?: boolean;
+    loadingRows?: number;
+}
+declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading, loadingRows, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/table.js

@@ -1,9 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { ArrowUpDown } from "lucide-react";
+import { ArrowDownIcon } from "./animated-icons/arrow-down";
+import { ArrowUpIcon } from "./animated-icons/arrow-up";
+import { EmptyState } from "./empty-state";
+import { Pagination } from "./pagination";
 import { cn } from "./lib/utils";
-const Table = React.forwardRef(({ className, wrapperClassName, ...props }, ref) => (_jsx("div", { className: cn("w-full overflow-x-auto", wrapperClassName), children: _jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })));
-Table.displayName = "Table";
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("bg-muted [&_tr]:border-b", className), ...props })));
+const TableRoot = React.forwardRef(({ className, wrapperClassName: _wrapperClassName, ...props }, ref) => (_jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props })));
+TableRoot.displayName = "TableRoot";
+const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("overflow-x-auto rounded-lg border bg-card", className), ...props })));
+TableContainer.displayName = "TableContainer";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-muted/50 [&_tr]:border-b", className), ...props })));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
 TableBody.displayName = "TableBody";
@@ -13,6 +20,7 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr",
 TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: {
         ...style,
+        fontWeight: 500,
         ...(width ? { width } : {}),
         ...(minWidth ? { minWidth } : {}),
         ...(maxWidth ? { maxWidth } : {}),
@@ -27,4 +35,93 @@ const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidt
 TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
 TableCaption.displayName = "TableCaption";
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+function alignClassName(align) {
+    switch (align) {
+        case "center":
+            return "text-center";
+        case "right":
+            return "text-right";
+        default:
+            return "text-left";
+    }
+}
+function SkeletonBlock({ width = "6rem", height = "1rem", badge = false, }) {
+    return (_jsx("div", { className: cn("animate-pulse bg-muted/80", badge ? "rounded-full" : "rounded"), style: { width, height }, "aria-hidden": "true" }));
+}
+function SkeletonCell({ config }) {
+    var _a;
+    if (config.actions) {
+        return (_jsx(TableCell, { children: _jsx("div", { className: "flex items-center gap-2", children: Array.from({ length: config.actions }).map((_, index) => (_jsx(SkeletonBlock, { width: "2rem", height: "2rem" }, index))) }) }));
+    }
+    if ((_a = config.lines) === null || _a === void 0 ? void 0 : _a.length) {
+        return (_jsx(TableCell, { children: _jsx("div", { className: "space-y-2", children: config.lines.map((line, index) => (_jsx(SkeletonBlock, { width: line.width, height: line.height, badge: line.badge }, index))) }) }));
+    }
+    return (_jsx(TableCell, { children: _jsx(SkeletonBlock, { width: config.width, height: config.height, badge: config.badge }) }));
+}
+function TableRowSkeleton({ columns, rows = 1 }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx(TableRow, { children: columns.map((config, columnIndex) => (_jsx(SkeletonCell, { config: config }, columnIndex))) }, rowIndex))) }));
+}
+export const TABLE_SKELETON_PRESETS = {
+    text: (width = "8rem", height = "1rem") => ({
+        width,
+        height,
+    }),
+    badge: (width = "5rem", height = "1.25rem") => ({
+        width,
+        height,
+        badge: true,
+    }),
+    actions: (count = 2) => ({
+        actions: count,
+    }),
+    textWithSubtitle: (textWidth = "8rem", subtitleWidth = "6rem") => ({
+        lines: [
+            { width: textWidth, height: "1rem" },
+            { width: subtitleWidth, height: "0.75rem" },
+        ],
+    }),
+    badgeGroup: (count = 2, width = "4rem") => ({
+        lines: Array.from({ length: count }).map(() => ({
+            width,
+            height: "1.25rem",
+            badge: true,
+        })),
+    }),
+};
+function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, }) {
+    const isSorted = currentSortField === field;
+    return (_jsx(TableHead, { className: cn(alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, children: _jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("flex cursor-pointer items-center gap-1 rounded px-2 py-1 font-medium transition-colors hover:text-foreground -ml-2", allowWrap
+                ? "max-w-full items-start whitespace-normal text-left"
+                : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${sortLabel !== null && sortLabel !== void 0 ? sortLabel : field}`, children: [children, _jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }) }));
+}
+function getDefaultSkeleton(column) {
+    var _a, _b;
+    return {
+        width: (_b = (_a = column.width) !== null && _a !== void 0 ? _a : column.minWidth) !== null && _b !== void 0 ? _b : "7rem",
+        height: "1rem",
+    };
+}
+function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading = false, loadingRows = 5, ...props }) {
+    const shouldUseFixedLayout = columns.some((column) => column.width !== undefined ||
+        column.minWidth !== undefined ||
+        column.maxWidth !== undefined);
+    const container = (_jsx(TableContainer, { className: cn("w-full", className, containerClassName), ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
+                            var _a;
+                            const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
+                            const isSortable = column.sortable && sorting;
+                            return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: column.headerClassName, allowWrap: column.wrap, width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, align: column.align, sortLabel: column.sortLabel, children: column.header }, column.key)) : (_jsx(TableHead, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), column.headerClassName), children: column.header }, column.key)));
+                        }) }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: columns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => (_jsx(TableRow, { className: typeof rowClassName === "function"
+                            ? rowClassName(row, rowIndex)
+                            : rowClassName, children: columns.map((column) => {
+                            var _a, _b;
+                            const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
+                                ? row[column.accessorKey]
+                                : null);
+                            return (_jsx(TableCell, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), column.cellClassName), children: value }, column.key));
+                        }) }, getRowKey(row, rowIndex))))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "p-6", children: emptyState }) })) })] }) }));
+    if (!pagination) {
+        return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [toolbar, container, _jsx(Pagination, { ...pagination })] }));
+}
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/tabs.d.ts

@@ -1,22 +1,39 @@
 import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 type TabsContextValue = {
     value: string;
     setValue: (value: string) => void;
 };
 export declare function useTabsContext(): TabsContextValue | null;
-interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
-    defaultValue: string;
+interface TabsRootProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "value" | "defaultValue" | "onValueChange"> {
+    defaultValue?: string;
     value?: string;
     onValueChange?: (value: string) => void;
 }
-declare function Tabs({ defaultValue, value: valueProp, onValueChange, className, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
-declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+declare const TabsRoot: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
     value: string;
 }
 declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
     value: string;
 }
 declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export interface TabsItem {
+    value: string;
+    label: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "children" | "value" | "defaultValue" | "onValueChange"> {
+    items: TabsItem[];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    listClassName?: string;
+    triggerClassName?: string;
+    panelClassName?: string;
+}
+declare function Tabs({ items, defaultValue, value, onValueChange, className, listClassName, triggerClassName, panelClassName, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
+export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent };

package/dist/tabs.js

@@ -1,42 +1,38 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "./lib/utils";
 const TabsContext = React.createContext(null);
 export function useTabsContext() {
     return React.useContext(TabsContext);
 }
-function Tabs({ defaultValue, value: valueProp, onValueChange, className, children, ...props }) {
+const TabsRoot = React.forwardRef(({ defaultValue = "", value: valueProp, onValueChange, className, children, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const isControlled = valueProp !== undefined;
     const value = isControlled ? valueProp : uncontrolledValue;
     const setValue = React.useCallback((next) => {
-        if (!isControlled)
+        if (!isControlled) {
             setUncontrolledValue(next);
+        }
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
     }, [isControlled, onValueChange]);
-    const ctx = React.useMemo(() => ({ value, setValue }), [value, setValue]);
-    return (_jsx(TabsContext.Provider, { value: ctx, children: _jsx("div", { className: cn(className), ...props, children: children }) }));
-}
-const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("inline-flex h-fit items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className), ...props })));
-TabsList.displayName = "TabsList";
-const TabsTrigger = React.forwardRef(({ className, value, disabled, ...props }, ref) => {
-    const ctx = React.useContext(TabsContext);
-    if (!ctx) {
-        throw new Error("TabsTrigger must be used within Tabs");
-    }
-    const isActive = ctx.value === value;
-    return (_jsx("button", { ref: ref, type: "button", onClick: () => !disabled && ctx.setValue(value), "data-state": isActive ? "active" : "inactive", disabled: disabled, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props }));
+    const contextValue = React.useMemo(() => ({ value, setValue }), [setValue, value]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(TabsPrimitive.Root, { ref: ref, value: value, onValueChange: setValue, className: cn(className), ...props, children: children }) }));
 });
-TabsTrigger.displayName = "TabsTrigger";
-const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => {
-    const ctx = React.useContext(TabsContext);
-    if (!ctx) {
-        throw new Error("TabsContent must be used within Tabs");
-    }
-    if (ctx.value !== value)
+TabsRoot.displayName = TabsPrimitive.Root.displayName;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-fit items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, value: value, className: cn("inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, value: value, className: cn("focus-visible:outline-none", className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+function Tabs({ items, defaultValue, value, onValueChange, className, listClassName, triggerClassName, panelClassName, ...props }) {
+    var _a, _b;
+    const fallbackValue = (_b = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+    if (!items.length) {
         return null;
-    return (_jsx("div", { ref: ref, className: cn("focus-visible:outline-none", className), ...props }));
-});
-TabsContent.displayName = "TabsContent";
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+    }
+    return (_jsxs(TabsRoot, { defaultValue: fallbackValue, value: value, onValueChange: onValueChange, className: cn("space-y-4", className), ...props, children: [_jsx(TabsList, { className: listClassName, children: items.map((item) => (_jsx(TabsTrigger, { value: item.value, disabled: item.disabled, className: triggerClassName, children: item.label }, item.value))) }), items.map((item) => (_jsx(TabsContent, { value: item.value, className: cn("rounded-md border p-4", panelClassName), children: item.content }, item.value)))] }));
+}
+export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent };

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from "tailwindcss";
+export declare const neaDesignSystemContent: readonly ["./node_modules/@neasg/design-system/dist/**/*.js"];
+export declare const neaTailwindPreset: Partial<Config>;
+export default neaTailwindPreset;

package/dist/tailwind-preset.js

@@ -0,0 +1,97 @@
+import animate from "tailwindcss-animate";
+export const neaDesignSystemContent = [
+    "./node_modules/@neasg/design-system/dist/**/*.js",
+];
+export const neaTailwindPreset = {
+    darkMode: ["class"],
+    theme: {
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
+        },
+        extend: {
+            colors: {
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius-lg)",
+                md: "var(--radius-md)",
+                sm: "var(--radius-sm)",
+                xl: "var(--radius-xl)",
+            },
+            fontFamily: {
+                sans: ["var(--font-sans)"],
+                mono: ["var(--font-mono)"],
+            },
+            fontWeight: {
+                normal: "var(--font-weight-regular)",
+                medium: "var(--font-weight-medium)",
+                semibold: "var(--font-weight-semibold)",
+                bold: "var(--font-weight-bold)",
+            },
+            spacing: {
+                0: "var(--space-0)",
+                1: "var(--space-1)",
+                2: "var(--space-2)",
+                3: "var(--space-3)",
+                4: "var(--space-4)",
+                5: "var(--space-5)",
+                6: "var(--space-6)",
+                8: "var(--space-8)",
+                10: "var(--space-10)",
+                12: "var(--space-12)",
+            },
+            keyframes: {
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+            },
+            animation: {
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+            },
+        },
+    },
+    plugins: [animate],
+};
+export default neaTailwindPreset;

package/dist/textarea.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+declare const TextareaControl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export interface TextareaProps extends Omit<React.ComponentProps<typeof TextareaControl>, "className"> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    hideLabel?: boolean;
+    className?: string;
+    textareaClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/textarea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { cn } from "./lib/utils";
+const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 md:text-sm", className), ...props })));
+TextareaControl.displayName = "TextareaControl";
+const Textarea = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, textareaClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+    const generatedId = React.useId();
+    const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
+    const errorId = error ? `${textareaId}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${textareaId}-description` : undefined;
+    const isInvalid = invalid ||
+        ariaInvalid === true ||
+        ariaInvalid === "true" ||
+        Boolean(error);
+    const describedBy = [ariaDescribedBy, descriptionId, errorId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: textareaId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(TextareaControl, { ref: ref, id: textareaId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: textareaClassName, ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+});
+Textarea.displayName = "Textarea";
+export { Textarea };