@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/data-display/data-table/use-table.js

@@ -0,0 +1,120 @@
+import { useState, useEffect, useMemo } from "react";
+function useTable({
+  data,
+  initialSort,
+  pageSize = 10,
+  searchQuery = "",
+  searchKeys
+}) {
+  const [sortConfig, setSortConfig] = useState(
+    initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
+  );
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery]);
+  const filteredData = useMemo(() => {
+    if (!searchQuery || searchQuery.trim() === "") return data;
+    const query = searchQuery.toLowerCase();
+    return data.filter((row) => {
+      if (searchKeys && searchKeys.length > 0) {
+        return searchKeys.some((key) => {
+          const value = row[key];
+          if (value == null) return false;
+          return String(value).toLowerCase().includes(query);
+        });
+      }
+      return Object.values(row).some((value) => {
+        if (value == null) return false;
+        return String(value).toLowerCase().includes(query);
+      });
+    });
+  }, [data, searchQuery, searchKeys]);
+  const sortedData = useMemo(() => {
+    if (!sortConfig) return filteredData;
+    const sorted = [...filteredData].sort((a, b) => {
+      const aValue = a[sortConfig.key];
+      const bValue = b[sortConfig.key];
+      if (aValue === bValue) return 0;
+      if (aValue == null) return 1;
+      if (bValue == null) return -1;
+      if (aValue < bValue) {
+        return sortConfig.direction === "asc" ? -1 : 1;
+      }
+      return sortConfig.direction === "asc" ? 1 : -1;
+    });
+    return sorted;
+  }, [filteredData, sortConfig]);
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const currentData = sortedData.slice(startIndex, endIndex);
+  const handleSort = (key) => {
+    let direction = "asc";
+    if (sortConfig?.key === key) {
+      if (sortConfig.direction === "asc") {
+        direction = "desc";
+      } else if (sortConfig.direction === "desc") {
+        direction = null;
+      }
+    }
+    setSortConfig(direction ? { key, direction } : null);
+    setCurrentPage(1);
+  };
+  const nextPage = () => {
+    setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+  };
+  const prevPage = () => {
+    setCurrentPage((prev) => Math.max(prev - 1, 1));
+  };
+  const canNextPage = currentPage < totalPages;
+  const canPrevPage = currentPage > 1;
+  const toggleRow = (index) => {
+    setSelectedRows((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+  const toggleAll = () => {
+    if (selectedRows.size === currentData.length) {
+      setSelectedRows(/* @__PURE__ */ new Set());
+    } else {
+      const allIndices = currentData.map((_, idx) => startIndex + idx);
+      setSelectedRows(new Set(allIndices));
+    }
+  };
+  const isRowSelected = (index) => selectedRows.has(index);
+  const isAllSelected = currentData.length > 0 && currentData.every((_, idx) => selectedRows.has(startIndex + idx));
+  const clearSelection = () => setSelectedRows(/* @__PURE__ */ new Set());
+  return {
+    currentData,
+    sortedData,
+    filteredData,
+    sortConfig,
+    handleSort,
+    currentPage,
+    totalPages,
+    setCurrentPage,
+    nextPage,
+    prevPage,
+    canNextPage,
+    canPrevPage,
+    selectedRows,
+    toggleRow,
+    toggleAll,
+    isRowSelected,
+    isAllSelected,
+    clearSelection
+  };
+}
+export {
+  useTable as default,
+  useTable
+};
+//# sourceMappingURL=use-table.js.map

package/dist/components/data-display/data-table/use-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table.js","sources":["../../../../src/components/data-display/data-table/use-table.ts"],"sourcesContent":["import { useMemo, useState, useEffect } from 'react';\n\nexport type SortDirection = 'asc' | 'desc' | null;\n\nexport type SortConfig<T> = {\n  key: keyof T;\n  direction: SortDirection;\n} | null;\n\nexport type UseTableOptions<T> = {\n  data: T[];\n  initialSort?: { key: keyof T; direction: 'asc' | 'desc' };\n  pageSize?: number;\n  searchQuery?: string;\n  searchKeys?: (keyof T)[];\n};\n\nexport type UseTableReturn<T> = {\n  // Data\n  currentData: T[];\n  sortedData: T[];\n  filteredData: T[];\n\n  // Sorting\n  sortConfig: SortConfig<T>;\n  handleSort: (key: keyof T) => void;\n\n  // Pagination\n  currentPage: number;\n  totalPages: number;\n  setCurrentPage: (page: number) => void;\n  nextPage: () => void;\n  prevPage: () => void;\n  canNextPage: boolean;\n  canPrevPage: boolean;\n\n  // Selection\n  selectedRows: Set<number>;\n  toggleRow: (index: number) => void;\n  toggleAll: () => void;\n  isRowSelected: (index: number) => boolean;\n  isAllSelected: boolean;\n  clearSelection: () => void;\n};\n\n/**\n * useTable Hook - Client-side table state management\n * Handles filtering, sorting, pagination, and selection\n */\nexport function useTable<T>({\n  data,\n  initialSort,\n  pageSize = 10,\n  searchQuery = '',\n  searchKeys\n}: UseTableOptions<T>): UseTableReturn<T> {\n  const [sortConfig, setSortConfig] = useState<SortConfig<T>>(\n    initialSort ? { key: initialSort.key, direction: initialSort.direction } : null\n  );\n  const [currentPage, setCurrentPage] = useState(1);\n  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());\n\n  // Reset to page 1 when search query changes\n  useEffect(() => {\n    setCurrentPage(1);\n  }, [searchQuery]);\n\n  // Filtering logic\n  const filteredData = useMemo(() => {\n    if (!searchQuery || searchQuery.trim() === '') return data;\n\n    const query = searchQuery.toLowerCase();\n\n    return data.filter((row) => {\n      // If searchKeys are specified, only search those fields\n      if (searchKeys && searchKeys.length > 0) {\n        return searchKeys.some((key) => {\n          const value = row[key];\n          if (value == null) return false;\n          return String(value).toLowerCase().includes(query);\n        });\n      }\n\n      // Otherwise, search all fields\n      return Object.values(row as Record<string, unknown>).some((value) => {\n        if (value == null) return false;\n        return String(value).toLowerCase().includes(query);\n      });\n    });\n  }, [data, searchQuery, searchKeys]);\n\n  // Sorting logic\n  const sortedData = useMemo(() => {\n    if (!sortConfig) return filteredData;\n\n    const sorted = [...filteredData].sort((a, b) => {\n      const aValue = a[sortConfig.key];\n      const bValue = b[sortConfig.key];\n\n      if (aValue === bValue) return 0;\n\n      // Handle null/undefined\n      if (aValue == null) return 1;\n      if (bValue == null) return -1;\n\n      // Compare values\n      if (aValue < bValue) {\n        return sortConfig.direction === 'asc' ? -1 : 1;\n      }\n      return sortConfig.direction === 'asc' ? 1 : -1;\n    });\n\n    return sorted;\n  }, [filteredData, sortConfig]);\n\n  // Pagination logic\n  const totalPages = Math.ceil(sortedData.length / pageSize);\n  const startIndex = (currentPage - 1) * pageSize;\n  const endIndex = startIndex + pageSize;\n  const currentData = sortedData.slice(startIndex, endIndex);\n\n  // Sorting handler\n  const handleSort = (key: keyof T) => {\n    let direction: SortDirection = 'asc';\n\n    if (sortConfig?.key === key) {\n      if (sortConfig.direction === 'asc') {\n        direction = 'desc';\n      } else if (sortConfig.direction === 'desc') {\n        direction = null;\n      }\n    }\n\n    setSortConfig(direction ? { key, direction } : null);\n    setCurrentPage(1); // Reset to first page on sort\n  };\n\n  // Pagination handlers\n  const nextPage = () => {\n    setCurrentPage((prev) => Math.min(prev + 1, totalPages));\n  };\n\n  const prevPage = () => {\n    setCurrentPage((prev) => Math.max(prev - 1, 1));\n  };\n\n  const canNextPage = currentPage < totalPages;\n  const canPrevPage = currentPage > 1;\n\n  // Selection handlers\n  const toggleRow = (index: number) => {\n    setSelectedRows((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(index)) {\n        newSet.delete(index);\n      } else {\n        newSet.add(index);\n      }\n      return newSet;\n    });\n  };\n\n  const toggleAll = () => {\n    if (selectedRows.size === currentData.length) {\n      setSelectedRows(new Set());\n    } else {\n      const allIndices = currentData.map((_, idx) => startIndex + idx);\n      setSelectedRows(new Set(allIndices));\n    }\n  };\n\n  const isRowSelected = (index: number) => selectedRows.has(index);\n\n  const isAllSelected = currentData.length > 0 && currentData.every((_, idx) => selectedRows.has(startIndex + idx));\n\n  const clearSelection = () => setSelectedRows(new Set());\n\n  return {\n    currentData,\n    sortedData,\n    filteredData,\n    sortConfig,\n    handleSort,\n    currentPage,\n    totalPages,\n    setCurrentPage,\n    nextPage,\n    prevPage,\n    canNextPage,\n    canPrevPage,\n    selectedRows,\n    toggleRow,\n    toggleAll,\n    isRowSelected,\n    isAllSelected,\n    clearSelection\n  };\n}\n\nexport default useTable;\n"],"names":[],"mappings":";AAiDO,SAAS,SAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AACF,GAA0C;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,cAAc,EAAE,KAAK,YAAY,KAAK,WAAW,YAAY,cAAc;AAAA,EAAA;AAE7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAsB,oBAAI,KAAK;AAGvE,YAAU,MAAM;AACd,mBAAe,CAAC;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAGhB,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC,eAAe,YAAY,KAAA,MAAW,GAAI,QAAO;AAEtD,UAAM,QAAQ,YAAY,YAAA;AAE1B,WAAO,KAAK,OAAO,CAAC,QAAQ;AAE1B,UAAI,cAAc,WAAW,SAAS,GAAG;AACvC,eAAO,WAAW,KAAK,CAAC,QAAQ;AAC9B,gBAAM,QAAQ,IAAI,GAAG;AACrB,cAAI,SAAS,KAAM,QAAO;AAC1B,iBAAO,OAAO,KAAK,EAAE,YAAA,EAAc,SAAS,KAAK;AAAA,QACnD,CAAC;AAAA,MACH;AAGA,aAAO,OAAO,OAAO,GAA8B,EAAE,KAAK,CAAC,UAAU;AACnE,YAAI,SAAS,KAAM,QAAO;AAC1B,eAAO,OAAO,KAAK,EAAE,YAAA,EAAc,SAAS,KAAK;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,aAAa,UAAU,CAAC;AAGlC,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,CAAC,WAAY,QAAO;AAExB,UAAM,SAAS,CAAC,GAAG,YAAY,EAAE,KAAK,CAAC,GAAG,MAAM;AAC9C,YAAM,SAAS,EAAE,WAAW,GAAG;AAC/B,YAAM,SAAS,EAAE,WAAW,GAAG;AAE/B,UAAI,WAAW,OAAQ,QAAO;AAG9B,UAAI,UAAU,KAAM,QAAO;AAC3B,UAAI,UAAU,KAAM,QAAO;AAG3B,UAAI,SAAS,QAAQ;AACnB,eAAO,WAAW,cAAc,QAAQ,KAAK;AAAA,MAC/C;AACA,aAAO,WAAW,cAAc,QAAQ,IAAI;AAAA,IAC9C,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,UAAU,CAAC;AAG7B,QAAM,aAAa,KAAK,KAAK,WAAW,SAAS,QAAQ;AACzD,QAAM,cAAc,cAAc,KAAK;AACvC,QAAM,WAAW,aAAa;AAC9B,QAAM,cAAc,WAAW,MAAM,YAAY,QAAQ;AAGzD,QAAM,aAAa,CAAC,QAAiB;AACnC,QAAI,YAA2B;AAE/B,QAAI,YAAY,QAAQ,KAAK;AAC3B,UAAI,WAAW,cAAc,OAAO;AAClC,oBAAY;AAAA,MACd,WAAW,WAAW,cAAc,QAAQ;AAC1C,oBAAY;AAAA,MACd;AAAA,IACF;AAEA,kBAAc,YAAY,EAAE,KAAK,UAAA,IAAc,IAAI;AACnD,mBAAe,CAAC;AAAA,EAClB;AAGA,QAAM,WAAW,MAAM;AACrB,mBAAe,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,UAAU,CAAC;AAAA,EACzD;AAEA,QAAM,WAAW,MAAM;AACrB,mBAAe,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,CAAC,CAAC;AAAA,EAChD;AAEA,QAAM,cAAc,cAAc;AAClC,QAAM,cAAc,cAAc;AAGlC,QAAM,YAAY,CAAC,UAAkB;AACnC,oBAAgB,CAAC,SAAS;AACxB,YAAM,SAAS,IAAI,IAAI,IAAI;AAC3B,UAAI,OAAO,IAAI,KAAK,GAAG;AACrB,eAAO,OAAO,KAAK;AAAA,MACrB,OAAO;AACL,eAAO,IAAI,KAAK;AAAA,MAClB;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,QAAM,YAAY,MAAM;AACtB,QAAI,aAAa,SAAS,YAAY,QAAQ;AAC5C,sBAAgB,oBAAI,KAAK;AAAA,IAC3B,OAAO;AACL,YAAM,aAAa,YAAY,IAAI,CAAC,GAAG,QAAQ,aAAa,GAAG;AAC/D,sBAAgB,IAAI,IAAI,UAAU,CAAC;AAAA,IACrC;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAAkB,aAAa,IAAI,KAAK;AAE/D,QAAM,gBAAgB,YAAY,SAAS,KAAK,YAAY,MAAM,CAAC,GAAG,QAAQ,aAAa,IAAI,aAAa,GAAG,CAAC;AAEhH,QAAM,iBAAiB,MAAM,gBAAgB,oBAAI,KAAK;AAEtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/components/data-display/empty-state/empty-state.d.ts

@@ -0,0 +1,8 @@
+export type EmptyStateProps = {
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+};
+export default function EmptyState({ title, description, buttonText, onButtonClick }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/data-display/empty-state/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/empty-state/empty-state.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,eAAe,2CAoBpG"}

package/dist/components/data-display/empty-state/empty-state.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Stack from "../../layout/stack/stack.js";
+import Text from "../../typography/text/text.js";
+import Button from "../../forms/button/button.js";
+function EmptyState({ title, description, buttonText, onButtonClick }) {
+  return /* @__PURE__ */ jsxs(Stack, { direction: "vertical", spacing: "md", align: "center", className: "p-8", children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "vertical", spacing: "sm", align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: title }),
+      description && /* @__PURE__ */ jsx(Text, { variant: "body", size: "base", className: "text-center max-w-md", children: description })
+    ] }),
+    buttonText && onButtonClick && /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onButtonClick, children: buttonText })
+  ] });
+}
+export {
+  EmptyState as default
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/components/data-display/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","sources":["../../../../src/components/data-display/empty-state/empty-state.tsx"],"sourcesContent":["import { Button, Stack, Text } from '@components';\n\nexport type EmptyStateProps = {\n  title?: string;\n  description?: string;\n  buttonText?: string;\n  onButtonClick?: () => void;\n};\n\nexport default function EmptyState({ title, description, buttonText, onButtonClick }: EmptyStateProps) {\n  return (\n    <Stack direction=\"vertical\" spacing=\"md\" align=\"center\" className=\"p-8\">\n      <Stack direction=\"vertical\" spacing=\"sm\" align=\"center\">\n        <Text size=\"lg\" weight=\"bold\">\n          {title}\n        </Text>\n        {description && (\n          <Text variant=\"body\" size=\"base\" className=\"text-center max-w-md\">\n            {description}\n          </Text>\n        )}\n      </Stack>\n      {buttonText && onButtonClick && (\n        <Button variant=\"primary\" onClick={onButtonClick}>\n          {buttonText}\n        </Button>\n      )}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;;AASA,SAAwB,WAAW,EAAE,OAAO,aAAa,YAAY,iBAAkC;AACrG,SACE,qBAAC,SAAM,WAAU,YAAW,SAAQ,MAAK,OAAM,UAAS,WAAU,OAChE,UAAA;AAAA,IAAA,qBAAC,SAAM,WAAU,YAAW,SAAQ,MAAK,OAAM,UAC7C,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,QAAO,QACpB,UAAA,OACH;AAAA,MACC,mCACE,MAAA,EAAK,SAAQ,QAAO,MAAK,QAAO,WAAU,wBACxC,UAAA,YAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,cAAc,iBACb,oBAAC,QAAA,EAAO,SAAQ,WAAU,SAAS,eAChC,UAAA,WAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/data-display/empty-state/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './empty-state';
+export type { EmptyStateProps } from './empty-state';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/empty-state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/empty-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/data-display/list/index.d.ts

@@ -0,0 +1,3 @@
+export { default, List, ListItem } from './list';
+export type { ListProps, ListItemProps } from './list';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/data-display/list/list.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export type ListProps = {
+    /** List items (ListItem components) */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Whether to render as ordered list (ol) instead of unordered (ul) */
+    ordered?: boolean;
+};
+export type ListItemProps = {
+    /** Content of the list item */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+};
+/**
+ * List - Vertical grouping of items
+ */
+export declare function List({ children, className, ordered }: Readonly<ListProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace List {
+    var displayName: string;
+}
+/**
+ * ListItem - Individual list item
+ */
+export declare function ListItem({ children, className }: Readonly<ListItemProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListItem {
+    var displayName: string;
+}
+export default List;
+//# sourceMappingURL=list.d.ts.map

package/dist/components/data-display/list/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,SAAS,GAAG;IACtB,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,OAAe,EAAE,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAItF;yBAJe,IAAI;;;AAQpB;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAE7E;yBAFe,QAAQ;;;AAMxB,eAAe,IAAI,CAAC"}

package/dist/components/data-display/list/list.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+function List({ children, className = "", ordered = false }) {
+  const Component = ordered ? "ol" : "ul";
+  return /* @__PURE__ */ jsx(Component, { className: `divide-y divide-border ${className}`, children });
+}
+List.displayName = "List";
+function ListItem({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("li", { className: `py-3 ${className}`, children });
+}
+ListItem.displayName = "ListItem";
+export {
+  List,
+  ListItem,
+  List as default
+};
+//# sourceMappingURL=list.js.map

package/dist/components/data-display/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sources":["../../../../src/components/data-display/list/list.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type ListProps = {\n  /** List items (ListItem components) */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Whether to render as ordered list (ol) instead of unordered (ul) */\n  ordered?: boolean;\n};\n\nexport type ListItemProps = {\n  /** Content of the list item */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * List - Vertical grouping of items\n */\nexport function List({ children, className = '', ordered = false }: Readonly<ListProps>) {\n  const Component = ordered ? 'ol' : 'ul';\n\n  return <Component className={`divide-y divide-border ${className}`}>{children}</Component>;\n}\n\nList.displayName = 'List';\n\n/**\n * ListItem - Individual list item\n */\nexport function ListItem({ children, className = '' }: Readonly<ListItemProps>) {\n  return <li className={`py-3 ${className}`}>{children}</li>;\n}\n\nListItem.displayName = 'ListItem';\n\nexport default List;\n"],"names":[],"mappings":";AAqBO,SAAS,KAAK,EAAE,UAAU,YAAY,IAAI,UAAU,SAA8B;AACvF,QAAM,YAAY,UAAU,OAAO;AAEnC,6BAAQ,WAAA,EAAU,WAAW,0BAA0B,SAAS,IAAK,UAAS;AAChF;AAEA,KAAK,cAAc;AAKZ,SAAS,SAAS,EAAE,UAAU,YAAY,MAA+B;AAC9E,6BAAQ,MAAA,EAAG,WAAW,QAAQ,SAAS,IAAK,UAAS;AACvD;AAEA,SAAS,cAAc;"}

package/dist/components/data-display/table/index.d.ts

@@ -0,0 +1,3 @@
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHeadCell, TableCell } from './table';
+export type { TableProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeadCellProps, TableCellProps } from './table';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzG,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,cAAc,EACf,MAAM,SAAS,CAAC"}

package/dist/components/data-display/table/table.d.ts

@@ -0,0 +1,101 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type TableProps = {
+    /** Table rows and sections (TableHeader, TableBody, TableFooter) */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Whether to apply striped row styling (alternating background) */
+    striped?: boolean;
+    /** Whether to show borders around the table */
+    bordered?: boolean;
+    /** Whether rows have hover effects */
+    hoverable?: boolean;
+    /** Whether to use compact spacing for dense data */
+    compact?: boolean;
+    /** Screen-reader accessible caption for the table */
+    caption?: string;
+} & HTMLAttributes<HTMLTableElement>;
+export type TableHeaderProps = {
+    /** Table header rows (TableRow with TableHeadCell) */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & HTMLAttributes<HTMLTableSectionElement>;
+export type TableBodyProps = {
+    /** Table body rows (TableRow with TableCell) */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & HTMLAttributes<HTMLTableSectionElement>;
+export type TableFooterProps = {
+    /** Table footer rows (TableRow with TableCell) */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & HTMLAttributes<HTMLTableSectionElement>;
+export type TableRowProps = {
+    /** Table cells (TableCell or TableHeadCell) */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Whether the row is in a selected state */
+    selected?: boolean;
+} & HTMLAttributes<HTMLTableRowElement>;
+export type TableHeadCellProps = {
+    /** Content of the header cell */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Text alignment within the cell */
+    align?: 'left' | 'center' | 'right';
+    /** Scope attribute for accessibility (col for column headers, row for row headers) */
+    scope?: 'col' | 'row';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
+} & HTMLAttributes<HTMLTableCellElement>;
+export type TableCellProps = {
+    /** Content of the cell */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Text alignment within the cell */
+    align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
+} & HTMLAttributes<HTMLTableCellElement>;
+/**
+ * Table - Semantic HTML table with consistent styling
+ * - Responsive with horizontal scroll
+ * - Optional striped rows, borders, and hover effects
+ * - Compact mode for dense data
+ * - Proper semantic structure with thead, tbody, tfoot
+ */
+export declare function Table({ children, className, striped, bordered, hoverable, compact, caption, ...props }: Readonly<TableProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableHeader - Table header section (thead)
+ */
+export declare function TableHeader({ children, className, ...props }: Readonly<TableHeaderProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableBody - Table body section (tbody)
+ */
+export declare function TableBody({ children, className, ...props }: Readonly<TableBodyProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableFooter - Table footer section (tfoot)
+ */
+export declare function TableFooter({ children, className, ...props }: Readonly<TableFooterProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableRow - Table row (tr)
+ */
+export declare function TableRow({ children, className, selected, ...props }: Readonly<TableRowProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableHeadCell - Table header cell (th)
+ * - Includes proper scope attribute for accessibility
+ * - Default scope is 'col' for column headers
+ */
+export declare function TableHeadCell({ children, className, align, scope, wrapText, ...props }: Readonly<TableHeadCellProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableCell - Table data cell (td)
+ */
+export declare function TableCell({ children, className, align, wrapText, ...props }: Readonly<TableCellProps>): import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=table.d.ts.map

package/dist/components/data-display/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-display/table/table.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function Table({
+  children,
+  className = "",
+  striped = false,
+  bordered = false,
+  hoverable = false,
+  compact = false,
+  caption,
+  ...props
+}) {
+  const baseClasses = "w-full text-sm text-left";
+  const stripedClasses = striped ? "striped" : "";
+  const borderedClasses = bordered ? "border border-border" : "";
+  const compactClasses = compact ? "table-compact" : "";
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-x-auto rounded-lg", children: [
+    /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: `${baseClasses} ${stripedClasses} ${borderedClasses} ${compactClasses} ${className}`,
+        ...props,
+        children: [
+          caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        .striped tbody tr:nth-child(even) {
+          background-color: var(--muted) / 0.3;
+        }
+        ${hoverable ? `
+        table tbody tr:hover {
+          background-color: var(--muted) / 0.6 !important;
+        }
+        ` : ""}
+        .table-compact td,
+        .table-compact th {
+          padding: 0.5rem;
+        }
+      ` })
+  ] });
+}
+function TableHeader({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx("thead", { className: `text-xs text-muted-foreground uppercase bg-muted/50 ${className}`, ...props, children });
+}
+function TableBody({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx("tbody", { className: `divide-y divide-border ${className}`, ...props, children });
+}
+function TableFooter({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx("tfoot", { className: `text-xs font-semibold text-foreground bg-muted/30 ${className}`, ...props, children });
+}
+function TableRow({ children, className = "", selected = false, ...props }) {
+  const selectedClasses = selected ? "bg-primary/10" : "";
+  return /* @__PURE__ */ jsx("tr", { className: `${selectedClasses} ${className}`, ...props, children });
+}
+function TableHeadCell({
+  children,
+  className = "",
+  align = "left",
+  scope = "col",
+  wrapText = false,
+  ...props
+}) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  const wrapClasses = wrapText ? "whitespace-normal break-words" : "whitespace-nowrap";
+  return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses[align]} ${wrapClasses} ${className}`, ...props, children });
+}
+function TableCell({
+  children,
+  className = "",
+  align = "left",
+  wrapText = false,
+  ...props
+}) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  const wrapClasses = wrapText ? "whitespace-normal break-words" : "whitespace-nowrap";
+  return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 ${wrapClasses} ${alignClasses[align]} ${className}`, ...props, children });
+}
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHeadCell,
+  TableHeader,
+  TableRow,
+  Table as default
+};
+//# sourceMappingURL=table.js.map

package/dist/components/data-display/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../../src/components/data-display/table/table.tsx"],"sourcesContent":["import { ReactNode, HTMLAttributes } from 'react';\n\nexport type TableProps = {\n  /** Table rows and sections (TableHeader, TableBody, TableFooter) */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Whether to apply striped row styling (alternating background) */\n  striped?: boolean;\n  /** Whether to show borders around the table */\n  bordered?: boolean;\n  /** Whether rows have hover effects */\n  hoverable?: boolean;\n  /** Whether to use compact spacing for dense data */\n  compact?: boolean;\n  /** Screen-reader accessible caption for the table */\n  caption?: string;\n} & HTMLAttributes<HTMLTableElement>;\n\nexport type TableHeaderProps = {\n  /** Table header rows (TableRow with TableHeadCell) */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n} & HTMLAttributes<HTMLTableSectionElement>;\n\nexport type TableBodyProps = {\n  /** Table body rows (TableRow with TableCell) */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n} & HTMLAttributes<HTMLTableSectionElement>;\n\nexport type TableFooterProps = {\n  /** Table footer rows (TableRow with TableCell) */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n} & HTMLAttributes<HTMLTableSectionElement>;\n\nexport type TableRowProps = {\n  /** Table cells (TableCell or TableHeadCell) */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Whether the row is in a selected state */\n  selected?: boolean;\n} & HTMLAttributes<HTMLTableRowElement>;\n\nexport type TableHeadCellProps = {\n  /** Content of the header cell */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Text alignment within the cell */\n  align?: 'left' | 'center' | 'right';\n  /** Scope attribute for accessibility (col for column headers, row for row headers) */\n  scope?: 'col' | 'row';\n  /** Whether text should wrap instead of truncating */\n  wrapText?: boolean;\n} & HTMLAttributes<HTMLTableCellElement>;\n\nexport type TableCellProps = {\n  /** Content of the cell */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Text alignment within the cell */\n  align?: 'left' | 'center' | 'right';\n  /** Whether text should wrap instead of truncating */\n  wrapText?: boolean;\n} & HTMLAttributes<HTMLTableCellElement>;\n\n/**\n * Table - Semantic HTML table with consistent styling\n * - Responsive with horizontal scroll\n * - Optional striped rows, borders, and hover effects\n * - Compact mode for dense data\n * - Proper semantic structure with thead, tbody, tfoot\n */\nexport function Table({\n  children,\n  className = '',\n  striped = false,\n  bordered = false,\n  hoverable = false,\n  compact = false,\n  caption,\n  ...props\n}: Readonly<TableProps>) {\n  const baseClasses = 'w-full text-sm text-left';\n  const stripedClasses = striped ? 'striped' : '';\n  const borderedClasses = bordered ? 'border border-border' : '';\n  const compactClasses = compact ? 'table-compact' : '';\n\n  return (\n    <div className=\"overflow-x-auto rounded-lg\">\n      <table\n        className={`${baseClasses} ${stripedClasses} ${borderedClasses} ${compactClasses} ${className}`}\n        {...props}\n      >\n        {caption && <caption className=\"sr-only\">{caption}</caption>}\n        {children}\n      </table>\n      <style>{`\n        .striped tbody tr:nth-child(even) {\n          background-color: var(--muted) / 0.3;\n        }\n        ${\n          hoverable\n            ? `\n        table tbody tr:hover {\n          background-color: var(--muted) / 0.6 !important;\n        }\n        `\n            : ''\n        }\n        .table-compact td,\n        .table-compact th {\n          padding: 0.5rem;\n        }\n      `}</style>\n    </div>\n  );\n}\n\n/**\n * TableHeader - Table header section (thead)\n */\nexport function TableHeader({ children, className = '', ...props }: Readonly<TableHeaderProps>) {\n  return (\n    <thead className={`text-xs text-muted-foreground uppercase bg-muted/50 ${className}`} {...props}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * TableBody - Table body section (tbody)\n */\nexport function TableBody({ children, className = '', ...props }: Readonly<TableBodyProps>) {\n  return (\n    <tbody className={`divide-y divide-border ${className}`} {...props}>\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * TableFooter - Table footer section (tfoot)\n */\nexport function TableFooter({ children, className = '', ...props }: Readonly<TableFooterProps>) {\n  return (\n    <tfoot className={`text-xs font-semibold text-foreground bg-muted/30 ${className}`} {...props}>\n      {children}\n    </tfoot>\n  );\n}\n\n/**\n * TableRow - Table row (tr)\n */\nexport function TableRow({ children, className = '', selected = false, ...props }: Readonly<TableRowProps>) {\n  const selectedClasses = selected ? 'bg-primary/10' : '';\n\n  return (\n    <tr className={`${selectedClasses} ${className}`} {...props}>\n      {children}\n    </tr>\n  );\n}\n\n/**\n * TableHeadCell - Table header cell (th)\n * - Includes proper scope attribute for accessibility\n * - Default scope is 'col' for column headers\n */\nexport function TableHeadCell({\n  children,\n  className = '',\n  align = 'left',\n  scope = 'col',\n  wrapText = false,\n  ...props\n}: Readonly<TableHeadCellProps>) {\n  const alignClasses = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right'\n  };\n\n  const wrapClasses = wrapText ? 'whitespace-normal break-words' : 'whitespace-nowrap';\n\n  return (\n    <th scope={scope} className={`px-6 py-3 font-medium ${alignClasses[align]} ${wrapClasses} ${className}`} {...props}>\n      {children}\n    </th>\n  );\n}\n\n/**\n * TableCell - Table data cell (td)\n */\nexport function TableCell({\n  children,\n  className = '',\n  align = 'left',\n  wrapText = false,\n  ...props\n}: Readonly<TableCellProps>) {\n  const alignClasses = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right'\n  };\n\n  const wrapClasses = wrapText ? 'whitespace-normal break-words' : 'whitespace-nowrap';\n\n  return (\n    <td className={`px-6 py-4 ${wrapClasses} ${alignClasses[align]} ${className}`} {...props}>\n      {children}\n    </td>\n  );\n}\n\nexport default Table;\n"],"names":[],"mappings":";AAgFO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,cAAc;AACpB,QAAM,iBAAiB,UAAU,YAAY;AAC7C,QAAM,kBAAkB,WAAW,yBAAyB;AAC5D,QAAM,iBAAiB,UAAU,kBAAkB;AAEnD,SACE,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,WAAW,IAAI,cAAc,IAAI,eAAe,IAAI,cAAc,IAAI,SAAS;AAAA,QAC5F,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,WAAW,oBAAC,WAAA,EAAQ,WAAU,WAAW,UAAA,SAAQ;AAAA,UACjD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEF,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA,UAKJ,YACI;AAAA;AAAA;AAAA;AAAA,YAKA,EACN;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAKA;AAAA,EAAA,GACJ;AAEJ;AAKO,SAAS,YAAY,EAAE,UAAU,YAAY,IAAI,GAAG,SAAqC;AAC9F,SACE,oBAAC,WAAM,WAAW,uDAAuD,SAAS,IAAK,GAAG,OACvF,UACH;AAEJ;AAKO,SAAS,UAAU,EAAE,UAAU,YAAY,IAAI,GAAG,SAAmC;AAC1F,SACE,oBAAC,WAAM,WAAW,0BAA0B,SAAS,IAAK,GAAG,OAC1D,UACH;AAEJ;AAKO,SAAS,YAAY,EAAE,UAAU,YAAY,IAAI,GAAG,SAAqC;AAC9F,SACE,oBAAC,WAAM,WAAW,qDAAqD,SAAS,IAAK,GAAG,OACrF,UACH;AAEJ;AAKO,SAAS,SAAS,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,GAAG,SAAkC;AAC1G,QAAM,kBAAkB,WAAW,kBAAkB;AAErD,SACE,oBAAC,MAAA,EAAG,WAAW,GAAG,eAAe,IAAI,SAAS,IAAK,GAAG,OACnD,SAAA,CACH;AAEJ;AAOO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,GAAG;AACL,GAAiC;AAC/B,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAGT,QAAM,cAAc,WAAW,kCAAkC;AAEjE,SACE,oBAAC,MAAA,EAAG,OAAc,WAAW,yBAAyB,aAAa,KAAK,CAAC,IAAI,WAAW,IAAI,SAAS,IAAK,GAAG,OAC1G,UACH;AAEJ;AAKO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,GAAG;AACL,GAA6B;AAC3B,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAGT,QAAM,cAAc,WAAW,kCAAkC;AAEjE,SACE,oBAAC,MAAA,EAAG,WAAW,aAAa,WAAW,IAAI,aAAa,KAAK,CAAC,IAAI,SAAS,IAAK,GAAG,OAChF,UACH;AAEJ;"}

package/dist/components/data-display/timeline/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Timeline, TimelineItem } from './timeline';
+export type { TimelineProps, TimelineItemProps } from './timeline';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/D,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/data-display/timeline/timeline.d.ts

@@ -0,0 +1,57 @@
+import { Size } from '../../../theme/size-tokens';
+import { ColorVariant } from '../../../theme/tokens';
+import { ReactNode } from 'react';
+export type TimelineItemProps = {
+    /** Main content of the timeline item */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Icon name to display in the timeline marker (if not provided, shows a dot) */
+    icon?: string;
+    /** Size of the icon */
+    iconSize?: Size;
+    /** Color variant for the icon */
+    iconColor?: ColorVariant;
+    /** Main title/heading for the timeline event */
+    title?: string;
+    /** Secondary subtitle text */
+    subtitle?: string;
+    /** Timestamp or date string to display */
+    timestamp?: string;
+    /** Whether this is the last item (hides connector line) */
+    isLast?: boolean;
+};
+export type TimelineProps = {
+    /** Timeline items (TimelineItem components) */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Horizontal alignment of the timeline */
+    position?: 'left' | 'center' | 'right';
+};
+/**
+ * TimelineItem - Individual event in timeline
+ */
+export declare function TimelineItem({ children, className, icon, iconSize, iconColor, title, subtitle, timestamp, isLast }: Readonly<TimelineItemProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Timeline - Vertical timeline for events, activities, history
+ *
+ * Features:
+ * - Vertical layout with connector lines
+ * - Custom icons or default dots
+ * - Color-coded events
+ * - Titles, subtitles, timestamps
+ * - Flexible content
+ *
+ * Common uses:
+ * - Activity feeds
+ * - Order tracking
+ * - Version history
+ * - Process steps
+ */
+declare function Timeline({ children, className, position }: Readonly<TimelineProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Timeline {
+    var displayName: string;
+}
+export default Timeline;
+//# sourceMappingURL=timeline.d.ts.map

package/dist/components/data-display/timeline/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/timeline/timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,iCAAiC;IACjC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAc,EACd,IAAI,EACJ,QAAe,EACf,SAAqB,EACrB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAc,EACf,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA0C7B;AAED;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,QAAiB,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAQzF;kBARQ,QAAQ;;;AAYjB,eAAe,QAAQ,CAAC"}

package/dist/components/data-display/timeline/timeline.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../../system/icon/icon.js";
+function TimelineItem({
+  children,
+  className = "",
+  icon,
+  iconSize = "sm",
+  iconColor = "neutral",
+  title,
+  subtitle,
+  timestamp,
+  isLast = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `
+            flex items-center justify-center
+            w-8 h-8 rounded-full
+            shrink-0
+          `,
+          children: icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: iconColor }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-current" })
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx("div", { className: "w-0.5 flex-1 bg-border mt-2" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `flex-1 ${!isLast ? "pb-8" : ""}`, children: [
+      (title || timestamp) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-1", children: [
+        title && /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title }),
+        timestamp && /* @__PURE__ */ jsx("time", { className: "text-sm text-muted-foreground whitespace-nowrap", children: timestamp })
+      ] }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-2", children: subtitle }),
+      children && /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children })
+    ] })
+  ] });
+}
+function Timeline({ children, className = "", position = "left" }) {
+  const positionClasses = {
+    left: "",
+    center: "mx-auto max-w-2xl",
+    right: "ml-auto max-w-2xl"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${positionClasses[position]} ${className}`, children });
+}
+Timeline.displayName = "Timeline";
+export {
+  TimelineItem,
+  Timeline as default
+};
+//# sourceMappingURL=timeline.js.map

package/dist/components/data-display/timeline/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../../../src/components/data-display/timeline/timeline.tsx"],"sourcesContent":["import { Size } from '@/theme/size-tokens';\nimport { ColorVariant } from '../../../theme/tokens';\nimport { ReactNode } from 'react';\nimport Icon from '../../system/icon/icon';\n\nexport type TimelineItemProps = {\n  /** Main content of the timeline item */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Icon name to display in the timeline marker (if not provided, shows a dot) */\n  icon?: string;\n  /** Size of the icon */\n  iconSize?: Size;\n  /** Color variant for the icon */\n  iconColor?: ColorVariant;\n  /** Main title/heading for the timeline event */\n  title?: string;\n  /** Secondary subtitle text */\n  subtitle?: string;\n  /** Timestamp or date string to display */\n  timestamp?: string;\n  /** Whether this is the last item (hides connector line) */\n  isLast?: boolean;\n};\n\nexport type TimelineProps = {\n  /** Timeline items (TimelineItem components) */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Horizontal alignment of the timeline */\n  position?: 'left' | 'center' | 'right';\n};\n\n/**\n * TimelineItem - Individual event in timeline\n */\nexport function TimelineItem({\n  children,\n  className = '',\n  icon,\n  iconSize = 'sm',\n  iconColor = 'neutral',\n  title,\n  subtitle,\n  timestamp,\n  isLast = false\n}: Readonly<TimelineItemProps>) {\n  return (\n    <div className={`flex gap-4 ${className}`}>\n      {/* Icon/Dot Column */}\n      <div className=\"flex flex-col items-center\">\n        {/* Icon or Dot */}\n        <div\n          className={`\n            flex items-center justify-center\n            w-8 h-8 rounded-full\n            shrink-0\n          `}\n        >\n          {icon ? (\n            <Icon name={icon} size={iconSize} color={iconColor} />\n          ) : (\n            <div className=\"w-2 h-2 rounded-full bg-current\" />\n          )}\n        </div>\n\n        {/* Connector Line */}\n        {!isLast && <div className=\"w-0.5 flex-1 bg-border mt-2\" />}\n      </div>\n\n      {/* Content Column */}\n      <div className={`flex-1 ${!isLast ? 'pb-8' : ''}`}>\n        {/* Header */}\n        {(title || timestamp) && (\n          <div className=\"flex items-start justify-between gap-4 mb-1\">\n            {title && <h4 className=\"font-semibold text-foreground\">{title}</h4>}\n            {timestamp && <time className=\"text-sm text-muted-foreground whitespace-nowrap\">{timestamp}</time>}\n          </div>\n        )}\n\n        {/* Subtitle */}\n        {subtitle && <p className=\"text-sm text-muted-foreground mb-2\">{subtitle}</p>}\n\n        {/* Content */}\n        {children && <div className=\"text-sm text-foreground\">{children}</div>}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Timeline - Vertical timeline for events, activities, history\n *\n * Features:\n * - Vertical layout with connector lines\n * - Custom icons or default dots\n * - Color-coded events\n * - Titles, subtitles, timestamps\n * - Flexible content\n *\n * Common uses:\n * - Activity feeds\n * - Order tracking\n * - Version history\n * - Process steps\n */\nfunction Timeline({ children, className = '', position = 'left' }: Readonly<TimelineProps>) {\n  const positionClasses = {\n    left: '',\n    center: 'mx-auto max-w-2xl',\n    right: 'ml-auto max-w-2xl'\n  };\n\n  return <div className={`${positionClasses[position]} ${className}`}>{children}</div>;\n}\n\nTimeline.displayName = 'Timeline';\n\nexport default Timeline;\n"],"names":[],"mappings":";;AAsCO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,GAAgC;AAC9B,SACE,qBAAC,OAAA,EAAI,WAAW,cAAc,SAAS,IAErC,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,8BAEb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,UAMV,UAAA,OACC,oBAAC,MAAA,EAAK,MAAM,MAAM,MAAM,UAAU,OAAO,UAAA,CAAW,IAEpD,oBAAC,OAAA,EAAI,WAAU,kCAAA,CAAkC;AAAA,QAAA;AAAA,MAAA;AAAA,MAKpD,CAAC,UAAU,oBAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,IAAA,GAC3D;AAAA,IAGA,qBAAC,SAAI,WAAW,UAAU,CAAC,SAAS,SAAS,EAAE,IAE3C,UAAA;AAAA,OAAA,SAAS,cACT,qBAAC,OAAA,EAAI,WAAU,+CACZ,UAAA;AAAA,QAAA,SAAS,oBAAC,MAAA,EAAG,WAAU,iCAAiC,UAAA,OAAM;AAAA,QAC9D,aAAa,oBAAC,QAAA,EAAK,WAAU,mDAAmD,UAAA,UAAA,CAAU;AAAA,MAAA,GAC7F;AAAA,MAID,YAAY,oBAAC,KAAA,EAAE,WAAU,sCAAsC,UAAA,UAAS;AAAA,MAGxE,YAAY,oBAAC,OAAA,EAAI,WAAU,2BAA2B,SAAA,CAAS;AAAA,IAAA,EAAA,CAClE;AAAA,EAAA,GACF;AAEJ;AAkBA,SAAS,SAAS,EAAE,UAAU,YAAY,IAAI,WAAW,UAAmC;AAC1F,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAGT,SAAO,oBAAC,OAAA,EAAI,WAAW,GAAG,gBAAgB,QAAQ,CAAC,IAAI,SAAS,IAAK,SAAA,CAAS;AAChF;AAEA,SAAS,cAAc;"}