asheeui 1.1.1 → 2.2.1

package/dist/components/switch/switch-styles.js

@@ -1,17 +0,0 @@
-"use client";
-//#region src/components/switch/switch-styles.ts
-var e = {
-	sm: "w-8 h-4.5 p-0.5",
-	md: "w-11 h-6 p-0.5",
-	lg: "w-14 h-7.5 p-1"
-}, t = {
-	sm: "size-3.5",
-	md: "size-5",
-	lg: "size-5.5"
-}, n = {
-	sm: "translate-x-3.5",
-	md: "translate-x-5",
-	lg: "translate-x-6"
-};
-//#endregion
-export { t as SWITCH_THUMB_SIZE_CLASS, n as SWITCH_THUMB_TRANSLATE_CLASS, e as SWITCH_TRACK_SIZE_CLASS };

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

@@ -1,116 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { ColumnDef, TableConfig } from './table-config';
-type BaseTableProps = TableConfig & Omit<HTMLAttributes<HTMLDivElement>, "color" | "onClick">;
-/**
- * Configuration options for the Table component.
- */
-export interface TableProps<TData> extends BaseTableProps {
-    /**
-     * Array of row data objects.
-     * Each object represents a row in the table.
-     */
-    data: TData[];
-    /**
-     * Column definition array.
-     * Defines the headers and cell renderers for each column.
-     */
-    columns: ColumnDef<TData>[];
-    /**
-     * Optional Tailwind grid or layout utility classes.
-     * Used for custom grid layouts in the table.
-     */
-    gridClasses?: string;
-    /**
-     * Accessor callback to return a unique key per row.
-     * Used as the React key for each row element.
-     */
-    rowKeyAccessor?: (row: TData) => string | number;
-    /**
-     * Primary row click handler.
-     * Called when a row is clicked.
-     */
-    handleClick?: (data: TData, rowId?: string | number) => void;
-    /**
-     * Primary row double-click handler.
-     * Called when a row is double-clicked.
-     */
-    handleDoubleClick?: (data: TData, rowId?: string | number) => void;
-    /**
-     * Key of currently selected row.
-     * Highlights the row with the matching key.
-     */
-    selectedRowKey?: string | number;
-    /**
-     * Display text or React element when data array is empty.
-     * Shown in the table body when there are no rows.
-     */
-    emptyMessage?: ReactNode;
-    /**
-     * Enables interactive hover, active press animations, and click styling on rows.
-     * When true, rows become clickable with visual feedback.
-     */
-    isClickable?: boolean;
-}
-/**
- * A data table with configurable columns, row selection, and interactive states.
- *
- * Table renders a structured data grid with support for multiple variants
- * (grid, striped, bordered, ghost), configurable size and color tokens,
- * row selection highlighting, and interactive click handlers. It automatically
- * handles accessibility attributes including aria-selected for selected rows,
- * and keyboard interaction for clickable rows.
- *
- * Visual tokens resolve through the standard AsheeUI cascade: prop,
- * component config, global theme defaults, and the built-in fallback.
- *
- * @param props - Table configuration options.
- * @param props.data - Array of row data objects.
- * @param props.columns - Column definition array.
- * @param props.rowKeyAccessor - Function to generate unique row keys.
- * @param props.handleClick - Row click handler.
- * @param props.handleDoubleClick - Row double-click handler.
- * @param props.selectedRowKey - Key of the currently selected row.
- * @param props.emptyMessage - Message shown when data is empty.
- * @param props.isClickable - Whether rows are interactive. Defaults to false.
- * @param props.size - Density scale. Defaults to "md".
- * @param props.variant - Visual style variant. Defaults to "grid".
- * @param props.color - Theme accent color. Defaults to "primary".
- * @param props.radius - Corner rounding. Defaults to "md".
- *
- * @example
- * ```tsx
- * import { Table } from "asheeui";
- *
- * const columns = [
- *   { header: "Name", cell: (row) => row.name },
- *   { header: "Email", cell: (row) => row.email },
- * ];
- *
- * const data = [
- *   { name: "John Doe", email: "john@example.com" },
- *   { name: "Jane Smith", email: "jane@example.com" },
- * ];
- *
- * export function Example() {
- *   return (
- *     <Table
- *       data={data}
- *       columns={columns}
- *       variant="striped"
- *       isClickable
- *       handleClick={(row) => console.log(row)}
- *     />
- *   );
- * }
- * ```
- *
- * @see TableConfig - The configuration type for component defaults.
- * @see ColumnDef - The column definition type.
- * @see useAsheeConfig - Hook for accessing the global configuration.
- */
-export declare function Table<TData>({ data, columns, gridClasses, rowKeyAccessor, handleClick, handleDoubleClick, selectedRowKey, emptyMessage, isClickable, variant, color, size, radius, headerClassName, rowClassName, cellClassName, className, style, ...props }: TableProps<TData>): import("react").JSX.Element;
-export declare namespace Table {
-    var displayName: string;
-}
-export {};
-//# sourceMappingURL=Table.d.ts.map

package/dist/components/table/Table.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAUzE,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,WAAW,EAEjB,MAAM,gBAAgB,CAAC;AASxB,KAAK,cAAc,GAAG,WAAW,GAC/B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,KAAK,CAAE,SAAQ,cAAc;IACvD;;;OAGG;IACH,IAAI,EAAE,KAAK,EAAE,CAAC;IAEd;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,GAAG,MAAM,CAAC;IAEjD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAEnE;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEjC;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,EAC3B,IAAS,EACT,OAAY,EACZ,WAAW,EACX,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,YAAmC,EACnC,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,EACJ,MAAM,EACN,eAAe,EACf,YAAY,EACZ,aAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,CAAC,KAAK,CAAC,+BAsOnB;yBA1Pe,KAAK"}

package/dist/components/table/Table.js

@@ -1,66 +0,0 @@
-"use client";
-"use client";
-import { cn as e } from "../../utils/cn.js";
-import { RADIUS_CLASS as t } from "../../shared/radius.js";
-import { useAsheeConfig as n } from "../../libs/context.js";
-import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
-import { FALLBACK_TABLE_CONFIG as o } from "./table-config.js";
-import { TABLE_CELL_PADDING_X_CLASS as s, TABLE_CELL_PADDING_Y_CLASS as c, TABLE_COLOR_STYLES as l, TABLE_FONT_CLASS as u, TABLE_HEADER_FONT_CLASS as d } from "./table-styles.js";
-import { useCallback as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/table/Table.tsx
-function h({ data: h = [], columns: g = [], gridClasses: _, rowKeyAccessor: v, handleClick: y, handleDoubleClick: b, selectedRowKey: x, emptyMessage: S = "No items available", isClickable: C, variant: w, color: T, size: E, radius: D, headerClassName: O, rowClassName: k, cellClassName: A, className: j, style: M, ...N }) {
-	let P = n(), F = P.components?.table, I = r(E, F?.size, void 0, o.size), L = r(w, F?.variant, void 0, o.variant), R = r(T, F?.color, P.defaultColor, o.color), z = (e) => e === "full" ? "xl" : e, B = a(z(D), z(F?.radius), P.defaultRadius, o.radius), V = i(I, c, o.size), H = i(I, s, o.size), U = i(I, u, o.size), W = i(I, d, o.size), G = i(B, t, o.radius), K = l[R] ?? l.primary, q = f((e, t) => {
-		if (v) try {
-			return v(e);
-		} catch {
-			return t;
-		}
-		return t;
-	}, [v]), J = Array.isArray(h) && h.length > 0, Y = C ?? !!(y || b);
-	return /* @__PURE__ */ p("div", {
-		className: e("w-full h-full scrollable", L === "ghost" ? "border-0 shadow-none rounded-none" : e("border border-border", G), F?.className, j),
-		style: M,
-		...N,
-		children: /* @__PURE__ */ m("table", {
-			className: "w-full border-collapse text-left caption-bottom",
-			children: [/* @__PURE__ */ p("thead", {
-				className: e("sticky top-0 z-10 border-b border-border bg-secondary/90 backdrop-blur-xs font-semibold text-foreground/70 select-none", F?.headerClassName, O),
-				children: /* @__PURE__ */ p("tr", { children: g.map((t, n) => {
-					let r = t.id ?? (typeof t.header == "string" ? t.header : String(n));
-					return /* @__PURE__ */ p("th", {
-						scope: "col",
-						className: e("font-medium uppercase tracking-wider text-left align-middle truncate min-w-0", V, H, W, L === "grid" && n < g.length - 1 && "border-r border-border", F?.cellClassName, A),
-						children: t.header
-					}, r);
-				}) })
-			}), /* @__PURE__ */ p("tbody", { children: J ? h.map((t, n) => {
-				let r = q(t, n), i = r === x, a = L === "striped" && n % 2 == 1;
-				return /* @__PURE__ */ p("tr", {
-					tabIndex: Y ? 0 : -1,
-					"aria-selected": i,
-					onClick: Y && y ? () => y(t, r) : void 0,
-					onDoubleClick: Y && b ? () => b(t, r) : void 0,
-					onKeyDown: (e) => {
-						Y && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), y?.(t, r));
-					},
-					className: e("border-b border-border/60 transition-all duration-150 outline-none align-middle", U, L === "ghost" && "last:border-b-0", a && "bg-secondary", Y && e("cursor-pointer select-none active:scale-[0.99] active:opacity-90", K.hover, K.focus), i && K.selected, F?.rowClassName, k),
-					children: g.map((n, r) => {
-						let i = n.id ?? (typeof n.header == "string" ? n.header : String(r));
-						return /* @__PURE__ */ p("td", {
-							className: e("truncate min-w-0 align-middle", V, H, L === "grid" && r < g.length - 1 && "border-r border-border", F?.cellClassName, A),
-							children: n.cell(t)
-						}, i);
-					})
-				}, String(r));
-			}) : /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
-				colSpan: g.length || 1,
-				className: "h-48 text-center align-middle p-6 text-sm text-foreground/70",
-				children: S
-			}) }) })]
-		})
-	});
-}
-h.displayName = "Table";
-//#endregion
-export { h as Table };

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

@@ -1,3 +0,0 @@
-export * from './Table';
-export * from './table-config';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

package/dist/components/table/index.js

@@ -1,3 +0,0 @@
-export * from "./Table.js";
-export * from "./table-config.js";
-export * from "./table-styles.js";

package/dist/components/table/table-config.d.ts

@@ -1,99 +0,0 @@
-import { ReactNode } from 'react';
-import { Color, Radius, Size } from '../../shared';
-/**
- * Visual style variant of the table.
- * - `grid`: Table with grid lines between cells.
- * - `striped`: Alternating row backgrounds.
- * - `bordered`: Table with outer border only.
- * - `ghost`: Minimal table without borders or backgrounds.
- */
-export type TableVariant = "grid" | "striped" | "bordered" | "ghost";
-/**
- * Column definition for the table.
- * Defines the header content and cell renderer for a column.
- */
-export interface ColumnDef<TData> {
-    /**
-     * Optional explicit key for React list rendering.
-     * Used as the key prop for the column element.
-     */
-    id?: string;
-    /**
-     * Header content or title.
-     * Rendered in the table header cell.
-     */
-    header: ReactNode;
-    /**
-     * Cell renderer function.
-     * Receives the row data and returns the cell content.
-     */
-    cell: (row: TData) => ReactNode;
-}
-/**
- * Theme configuration options for the Table component.
- *
- * Set under `components.table` in the AsheeUI config. Values feed the
- * component-level fallback tier of the theme cascade.
- */
-export interface TableConfig {
-    /**
-     * Density scale of the table.
-     * Controls the padding and font size of cells.
-     *
-     * @default "md"
-     */
-    size?: Size;
-    /**
-     * Visual style variant.
-     * Controls the table's border and background treatment.
-     *
-     * @default "grid"
-     */
-    variant?: TableVariant;
-    /**
-     * Theme accent color.
-     * Controls the color of selected rows and interactive states.
-     *
-     * @default "primary"
-     */
-    color?: Color;
-    /**
-     * Corner rounding.
-     * Controls the border-radius of the table container.
-     *
-     * @default "md"
-     */
-    radius?: Radius;
-    /**
-     * Extra classes applied to the table container.
-     */
-    className?: string;
-    /**
-     * Extra classes applied to the table header.
-     */
-    headerClassName?: string;
-    /**
-     * Extra classes applied to table rows.
-     */
-    rowClassName?: string;
-    /**
-     * Extra classes applied to table cells.
-     */
-    cellClassName?: string;
-}
-/**
- * Default config values registered for the Table component.
- */
-export declare const defaultTableConfig: TableConfig;
-/**
- * Hard fallback values used when no config tier provides a value.
- * These values are used when instance props, component config,
- * and global defaults are all undefined.
- */
-export declare const FALLBACK_TABLE_CONFIG: Required<TableConfig>;
-declare module "../../libs/registry" {
-    interface ComponentTypeConfigRegistry {
-        table: TableConfig;
-    }
-}
-//# sourceMappingURL=table-config.d.ts.map

package/dist/components/table/table-config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"table-config.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAErE;;;GAGG;AACH,MAAM,WAAW,SAAS,CAAC,KAAK;IAC9B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,MAAM,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,SAAS,CAAC;CACjC;AAED;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAGhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,WAAW,CAS9C,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,KAAK,EAAE,WAAW,CAAC;KACpB;CACF"}

package/dist/components/table/table-config.js

@@ -1,19 +0,0 @@
-"use client";
-import { registerComponentDefaults as e } from "../../libs/registry.js";
-//#region src/components/table/table-config.ts
-var t = {
-	size: "md",
-	variant: "grid"
-}, n = {
-	size: "md",
-	variant: "grid",
-	color: "primary",
-	radius: "md",
-	className: "",
-	headerClassName: "",
-	rowClassName: "",
-	cellClassName: ""
-};
-e("table", t);
-//#endregion
-export { n as FALLBACK_TABLE_CONFIG, t as defaultTableConfig };

package/dist/components/table/table-styles.d.ts

@@ -1,31 +0,0 @@
-import { Color, Size } from '../../shared';
-/**
- * CSS classes for table cell vertical padding.
- * Maps size keys to Tailwind padding-y classes.
- */
-export declare const TABLE_CELL_PADDING_Y_CLASS: Record<Size, string>;
-/**
- * CSS classes for table cell horizontal padding.
- * Maps size keys to Tailwind padding-x classes.
- */
-export declare const TABLE_CELL_PADDING_X_CLASS: Record<Size, string>;
-/**
- * CSS classes for table body font size.
- * Maps size keys to Tailwind text size classes.
- */
-export declare const TABLE_FONT_CLASS: Record<Size, string>;
-/**
- * CSS classes for table header font size.
- * Maps size keys to Tailwind text size classes.
- */
-export declare const TABLE_HEADER_FONT_CLASS: Record<Size, string>;
-/**
- * CSS classes for table color styles.
- * Each color defines styles for selected, hover, and focus states.
- */
-export declare const TABLE_COLOR_STYLES: Record<Color, {
-    selected: string;
-    hover: string;
-    focus: string;
-}>;
-//# sourceMappingURL=table-styles.d.ts.map

package/dist/components/table/table-styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"table-styles.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAI3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAI3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAIjD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAIxD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,KAAK,EACL;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CA2CnD,CAAC"}

package/dist/components/table/table-styles.js

@@ -1,52 +0,0 @@
-"use client";
-//#region src/components/table/table-styles.ts
-var e = {
-	sm: "py-1.5",
-	md: "py-2.5",
-	lg: "py-3.5"
-}, t = {
-	sm: "px-2",
-	md: "px-3",
-	lg: "px-4"
-}, n = {
-	sm: "text-[0.8125rem]",
-	md: "text-sm",
-	lg: "text-base"
-}, r = {
-	sm: "text-xs",
-	md: "text-[0.8125rem]",
-	lg: "text-sm"
-}, i = {
-	primary: {
-		selected: "bg-primary text-secondary font-medium hover:bg-primary/90 hover:text-secondary",
-		hover: "hover:bg-primary/10 hover:text-foreground",
-		focus: "focus-visible:bg-primary/15 focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-inset"
-	},
-	secondary: {
-		selected: "bg-secondary text-foreground font-medium hover:bg-secondary/90 hover:text-foreground",
-		hover: "hover:bg-secondary/10 hover:text-foreground",
-		focus: "focus-visible:bg-secondary/15 focus-visible:ring-1 focus-visible:ring-secondary focus-visible:ring-inset"
-	},
-	danger: {
-		selected: "bg-danger text-secondary font-medium hover:bg-danger/90 hover:text-secondary",
-		hover: "hover:bg-danger/10 hover:text-foreground",
-		focus: "focus-visible:bg-danger/15 focus-visible:ring-1 focus-visible:ring-danger focus-visible:ring-inset"
-	},
-	warning: {
-		selected: "bg-warning text-secondary font-medium hover:bg-warning/90 hover:text-secondary",
-		hover: "hover:bg-warning/10 hover:text-foreground",
-		focus: "focus-visible:bg-warning/15 focus-visible:ring-1 focus-visible:ring-warning focus-visible:ring-inset"
-	},
-	success: {
-		selected: "bg-success text-secondary font-medium hover:bg-success/90 hover:text-secondary",
-		hover: "hover:bg-success/10 hover:text-foreground",
-		focus: "focus-visible:bg-success/15 focus-visible:ring-1 focus-visible:ring-success focus-visible:ring-inset"
-	},
-	none: {
-		selected: "bg-secondary text-foreground font-medium hover:bg-secondary/80",
-		hover: "hover:bg-secondary/40 hover:text-foreground",
-		focus: "focus-visible:bg-secondary/50 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
-	}
-};
-//#endregion
-export { t as TABLE_CELL_PADDING_X_CLASS, e as TABLE_CELL_PADDING_Y_CLASS, i as TABLE_COLOR_STYLES, n as TABLE_FONT_CLASS, r as TABLE_HEADER_FONT_CLASS };

package/dist/components/tabs/Tabs.d.ts

@@ -1,125 +0,0 @@
-import { TabItem, TabsConfig, TabsOptionsConfig } from './tabs-config';
-/**
- * Options props for the tab items.
- * Extends the options config with instance-only props.
- */
-export interface TabsOptionProps extends TabsOptionsConfig {
-    /**
-     * Class name for individual tab trigger buttons.
-     */
-    tabClassName?: string;
-}
-type BaseTabsProps = Omit<TabsConfig, "options"> & Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "onChange">;
-/**
- * Configuration options for the Tabs component.
- */
-export interface TabsProps extends BaseTabsProps {
-    /**
-     * Array of tab items to render.
-     * Each tab must have an id and either label or name for display.
-     */
-    tabs: TabItem[];
-    /**
-     * Controlled active tab identifier.
-     * When provided, the component becomes controlled.
-     */
-    activeId?: string | number;
-    /**
-     * Default active tab identifier for uncontrolled state.
-     * Used as the initial active tab when not controlled.
-     */
-    defaultActiveId?: string | number;
-    /**
-     * Callback fired when active tab changes.
-     * Receives the new active tab ID.
-     */
-    onChange?: (id: string | number) => void;
-    /**
-     * Full width stretch tabs inside container.
-     * When true, tabs expand to fill the container width.
-     *
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Class name for the tablist container.
-     */
-    tabListClassName?: string;
-    /**
-     * Options configuration for the tab items (active/inactive styling),
-     * plus the instance-only tab class override.
-     */
-    options?: TabsOptionProps;
-    /**
-     * Class name for the tab content panel wrapper.
-     */
-    tabPanelClassName?: string;
-}
-/**
- * A tabbed navigation interface with support for variants, sizes,
- * icons, badges, and keyboard navigation.
- *
- * Tabs renders a horizontal list of tab triggers and a content panel
- * that displays the content of the active tab. It supports multiple
- * visual variants (underline, bordered, ghost), configurable sizes,
- * and active state styling. The component handles keyboard navigation
- * with arrow keys, Home, and End keys for accessibility.
- *
- * Visual tokens resolve through the standard AsheeUI cascade: prop,
- * component config, global theme defaults, and the built-in fallback.
- *
- * @param props - Tabs configuration options.
- * @param props.tabs - Array of tab items to render.
- * @param props.activeId - Controlled active tab identifier.
- * @param props.defaultActiveId - Default active tab for uncontrolled state.
- * @param props.onChange - Callback fired when active tab changes.
- * @param props.fullWidth - Whether tabs stretch to fill container. Defaults to false.
- * @param props.variant - Visual style variant. Defaults to "underline".
- * @param props.size - Density scale. Defaults to "md".
- * @param props.radius - Corner rounding of the container. Defaults to "md".
- * @param props.options - Tab item options (active/inactive radius, variant and color) plus tabClassName.
- * @param props.tabListClassName - Extra classes for the tablist.
- * @param props.tabPanelClassName - Extra classes for the content panel.
- *
- * @example
- * ```tsx
- * import { Tabs } from "asheeui";
- * import { useState } from "react";
- *
- * export function Example() {
- *   const [activeId, setActiveId] = useState("tab-1");
- *
- *   return (
- *     <Tabs
- *       tabs={[
- *         { id: "tab-1", label: "Tab 1", content: <div>Content 1</div> },
- *         { id: "tab-2", label: "Tab 2", content: <div>Content 2</div> },
- *         { id: "tab-3", label: "Tab 3", content: <div>Content 3</div> },
- *       ]}
- *       activeId={activeId}
- *       onChange={setActiveId}
- *       variant="bordered"
- *     />
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // With icons and badges
- * <Tabs
- *   tabs={[
- *     { id: "home", label: "Home", icon: <HomeIcon />, badge: 5 },
- *     { id: "settings", label: "Settings", icon: <SettingsIcon /> },
- *   ]}
- *   fullWidth
- * />
- * ```
- *
- * @see TabsConfig - The configuration type for component defaults.
- * @see TabItem - The tab item type.
- * @see useAsheeConfig - Hook for accessing the global configuration.
- */
-export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
-export {};
-//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAEL,KAAK,OAAO,EACZ,KAAK,UAAU,EACf,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AASvB;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,KAAK,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;;OAGG;IACH,IAAI,EAAE,OAAO,EAAE,CAAC;IAEhB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAEzC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,eAAO,MAAM,IAAI,sGAgShB,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -1,94 +0,0 @@
-"use client";
-"use client";
-import { cn as e } from "../../utils/cn.js";
-import { RADIUS_CLASS as t } from "../../shared/radius.js";
-import { useAsheeConfig as n } from "../../libs/context.js";
-import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
-import { Button as o } from "../button/Button.js";
-import { FALLBACK_TABS_CONFIG as s } from "./tabs-config.js";
-import { TABS_FONT_CLASS as c, TABS_HEIGHT_CLASS as l, TABS_PADDING_X_CLASS as u } from "./tabs-styles.js";
-import { forwardRef as d, useCallback as f, useId as p, useMemo as m, useRef as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-//#region src/components/tabs/Tabs.tsx
-var y = d(({ tabs: d = [], activeId: y, defaultActiveId: b, onChange: x, variant: S, size: C, radius: w, options: T, fullWidth: ee = !1, tabListClassName: te, tabPanelClassName: E, className: D, style: O, ...k }, A) => {
-	let j = n(), M = j.components?.tabs, N = p(), P = h(/* @__PURE__ */ new Map()), [F, I] = g(() => b ?? d[0]?.id), L = y !== void 0, R = L ? y : F, z = r(C, M?.size, void 0, s.size), B = r(S, M?.variant, void 0, s.variant), V = r(T?.active?.variant, M?.options?.active?.variant, j.defaultVariant, s.options.active.variant), H = r(T?.active?.color, M?.options?.active?.color, j.defaultColor, s.options.active.color), U = r(T?.inactive?.variant, M?.options?.inactive?.variant, void 0, s.options.inactive.variant), W = r(T?.inactive?.color, M?.options?.inactive?.color, void 0, s.options.inactive.color), G = a(w, M?.radius, j.defaultRadius, s.radius), K = a(T?.active?.radius, M?.options?.active?.radius, j.defaultRadius, s.options.active.radius), q = a(T?.inactive?.radius, M?.options?.inactive?.radius, G, s.options.inactive.radius), J = i(z, l, s.size), Y = i(z, u, s.size), X = i(z, c, s.size), Z = i(G, t, s.radius), Q = f((e) => {
-		L || I(e), x?.(e);
-	}, [L, x]), ne = (e, t) => {
-		if (d.filter((e) => !e.disabled).length === 0) return;
-		let n = -1;
-		if (e.key === "ArrowRight") for (e.preventDefault(), n = (t + 1) % d.length; d[n]?.disabled;) n = (n + 1) % d.length;
-		else if (e.key === "ArrowLeft") for (e.preventDefault(), n = (t - 1 + d.length) % d.length; d[n]?.disabled;) n = (n - 1 + d.length) % d.length;
-		else if (e.key === "Home") e.preventDefault(), n = d.findIndex((e) => !e.disabled);
-		else if (e.key === "End") {
-			e.preventDefault();
-			for (let e = d.length - 1; e >= 0; e--) if (!d[e]?.disabled) {
-				n = e;
-				break;
-			}
-		}
-		if (n !== -1 && d[n]) {
-			let e = d[n];
-			Q(e.id), P.current.get(e.id)?.focus();
-		}
-	}, $ = m(() => d.find((e) => e.id === R) ?? d[0], [d, R]), re = m(() => {
-		switch (B) {
-			case "bordered": return "border border-border p-1 bg-background";
-			case "ghost": return "bg-transparent gap-1";
-			default: return "border-b border-border gap-2";
-		}
-	}, [B]);
-	return /* @__PURE__ */ v("div", {
-		ref: A,
-		className: e("w-full h-full flex flex-col gap-4", D),
-		style: O,
-		...k,
-		children: [/* @__PURE__ */ _("div", {
-			role: "tablist",
-			"aria-orientation": "horizontal",
-			className: e("flex flex-row w-full items-center overflow-x-auto scrollable-hidden shrink-0", re, B !== "underline" && Z, te),
-			children: d.map((t, n) => {
-				let r = t.id === R, i = t.label ?? t.name, a = `${N}-tab-${t.id}`, s = `${N}-panel-${t.id}`, c = t.activeVariant ?? V, l = t.activeColor ?? H;
-				return /* @__PURE__ */ v(o, {
-					ref: (e) => {
-						e ? P.current.set(t.id, e) : P.current.delete(t.id);
-					},
-					id: a,
-					type: "button",
-					role: "tab",
-					"aria-selected": r,
-					"aria-controls": s,
-					"aria-disabled": t.disabled,
-					tabIndex: r ? 0 : -1,
-					radius: r ? K : q,
-					isDisabled: t.disabled,
-					size: z,
-					variant: r ? B === "underline" ? "underlined" : c : U,
-					color: r ? l : W,
-					onClick: () => Q(t.id),
-					onKeyDown: (e) => ne(e, n),
-					className: e("relative flex items-center justify-center gap-2 font-medium transition-all duration-200 select-none outline-none active:scale-[0.98]", J, Y, X, ee && "flex-1", T?.tabClassName),
-					children: [
-						t.icon && /* @__PURE__ */ _("span", {
-							className: "shrink-0",
-							children: t.icon
-						}),
-						/* @__PURE__ */ _("span", { children: i }),
-						t.badge !== void 0 && /* @__PURE__ */ _("span", {
-							className: "shrink-0 text-xs px-1.5 py-0.5 rounded-full bg-secondary text-foreground/70 font-normal",
-							children: t.badge
-						})
-					]
-				}, String(t.id));
-			})
-		}), $ && /* @__PURE__ */ _("div", {
-			id: `${N}-panel-${$.id}`,
-			role: "tabpanel",
-			"aria-labelledby": `${N}-tab-${$.id}`,
-			className: e("w-full h-full flex-1 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-md transition-all duration-200 animate-in fade-in-50", E),
-			children: $.content
-		}, String($.id))]
-	});
-});
-y.displayName = "Tabs";
-//#endregion
-export { y as Tabs };

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

@@ -1,3 +0,0 @@
-export * from './Tabs';
-export * from './tabs-config';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}