eglador-ui-react 0.1.0-alpha.7 → 0.1.0-alpha.8

package/README.md

@@ -26,7 +26,7 @@ Add the following to your global stylesheet (e.g. `app/globals.css`) so Tailwind
 ## Usage
 
 ```tsx
-import { Button, ButtonGroup, Checkbox, CheckboxGroup, Input, InputGroup, Dropdown, Select, MultiSelect, Tabs, Accordion, Modal, MediaImage, MediaVideo, Tooltip, Breadcrumb, Typewriter, Carousel } from "eglador-ui-react";
+import { Button, ButtonGroup, Checkbox, CheckboxGroup, Input, InputGroup, Dropdown, Select, MultiSelect, Tabs, Accordion, Modal, MediaImage, MediaVideo, Tooltip, Breadcrumb, Typewriter, Carousel, Table } from "eglador-ui-react";
 ```
 
 ## Components
@@ -62,6 +62,12 @@ import { Button, ButtonGroup, Checkbox, CheckboxGroup, Input, InputGroup, Dropdo
 | **Breadcrumb.Item** | `href`, `isActive`, `className`, `children` |
 | **Typewriter** | `texts`, `typingSpeed`, `deletingSpeed`, `pauseDuration`, `deleteMode`, `loop`, `startDelay`, `cursor`, `cursorStyle`, `onComplete`, `className` |
 | **Carousel** | `slides`, `slidesPerView`, `align`, `containScroll`, `dragFree`, `loop`, `axis`, `direction`, `plugins`, `showNavigation`, `showPagination`, `scrollToIndex`, `breakpoints`, `className` |
+| **Table** | `size`, `variant`, `shape`, `fullWidth`, `scrollX`, `scrollY`, `maxHeight`, `className` |
+| **Table.Head** | `className`, `children` |
+| **Table.Body** | `className`, `children` |
+| **Table.Row** | `onClick`, `isActive`, `className`, `children` |
+| **Table.Header** | `align`, `width`, `className`, `children` |
+| **Table.Cell** | `align`, `truncate`, `className`, `children` |
 
 ## Development
 
@@ -79,7 +85,7 @@ Publishing is automated via GitHub Actions. When a GitHub Release is created, th
 
 1. Update `version` in `package.json`
 2. Commit and push
-3. Create a GitHub Release with a matching tag (e.g. `v0.1.0-alpha.6`)
+3. Create a GitHub Release with a matching tag (e.g. `v0.1.0-alpha.8`)
 
 ## Compatibility
 

package/dist/index.d.mts

@@ -347,6 +347,60 @@ interface SelectProps {
 }
 declare function Select({ value, onChange, options, placeholder, className, disabled, autoFlip, maxHeight, }: SelectProps): react_jsx_runtime.JSX.Element;
 
+type TableSize = "xs" | "sm" | "md";
+type TableVariant = "default" | "bordered" | "striped";
+type TableShape = "square" | "rounded";
+interface TableProps {
+    size?: TableSize;
+    variant?: TableVariant;
+    shape?: TableShape;
+    fullWidth?: boolean;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    maxHeight?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableHeadProps {
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableBodyProps {
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableRowProps {
+    onClick?: () => void;
+    isActive?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableHeaderProps {
+    align?: "left" | "center" | "right";
+    width?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+interface TableCellProps {
+    align?: "left" | "center" | "right";
+    truncate?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function TableRoot({ size, variant, shape, fullWidth, scrollX, scrollY, maxHeight, className, children, }: TableProps): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, children }: TableHeadProps): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, children }: TableBodyProps): react_jsx_runtime.JSX.Element;
+declare function TableRow({ onClick, isActive, className, children }: TableRowProps): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ align, width, className, children }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TableCell({ align, truncate, className, children }: TableCellProps): react_jsx_runtime.JSX.Element;
+declare const Table: typeof TableRoot & {
+    Head: typeof TableHead;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    Header: typeof TableHeader;
+    Cell: typeof TableCell;
+};
+
 type TabsVariant = "default" | "bordered" | "segmented";
 type TabsSize = "xs" | "sm" | "md";
 interface TabsProps {
@@ -412,4 +466,4 @@ declare function Typewriter({ texts, typingSpeed, deletingSpeed, pauseDuration,
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, type AccordionProps, type AccordionSize, type AccordionVariant, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Carousel, type CarouselBreakpointOptions, type CarouselProps, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, Dropdown, type DropdownAlign, type DropdownContentProps, type DropdownProps, type DropdownSide, type DropdownTriggerProps, type DropdownWidth, Input, type InputColor, InputGroup, type InputGroupProps, type InputGroupVariant, type InputProps, type InputShape, type InputSize, type InputState, type InputVariant, MediaImage, type MediaImageProps, type MediaImageRatio, type MediaImageShape, type MediaImageSize, MediaVideo, type MediaVideoProps, type MediaVideoRatio, type MediaVideoShape, type MediaVideoSize, Modal, type ModalBodyProps, type ModalContentProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalSize, type ModalTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Select, type SelectOption, type SelectProps, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, Tooltip, type TooltipPosition, type TooltipProps, Typewriter, type TypewriterProps, cn };
+export { Accordion, type AccordionProps, type AccordionSize, type AccordionVariant, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Carousel, type CarouselBreakpointOptions, type CarouselProps, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, Dropdown, type DropdownAlign, type DropdownContentProps, type DropdownProps, type DropdownSide, type DropdownTriggerProps, type DropdownWidth, Input, type InputColor, InputGroup, type InputGroupProps, type InputGroupVariant, type InputProps, type InputShape, type InputSize, type InputState, type InputVariant, MediaImage, type MediaImageProps, type MediaImageRatio, type MediaImageShape, type MediaImageSize, MediaVideo, type MediaVideoProps, type MediaVideoRatio, type MediaVideoShape, type MediaVideoSize, Modal, type ModalBodyProps, type ModalContentProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalSize, type ModalTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Select, type SelectOption, type SelectProps, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableShape, type TableSize, type TableVariant, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, Tooltip, type TooltipPosition, type TooltipProps, Typewriter, type TypewriterProps, cn };

package/dist/index.d.ts

@@ -347,6 +347,60 @@ interface SelectProps {
 }
 declare function Select({ value, onChange, options, placeholder, className, disabled, autoFlip, maxHeight, }: SelectProps): react_jsx_runtime.JSX.Element;
 
+type TableSize = "xs" | "sm" | "md";
+type TableVariant = "default" | "bordered" | "striped";
+type TableShape = "square" | "rounded";
+interface TableProps {
+    size?: TableSize;
+    variant?: TableVariant;
+    shape?: TableShape;
+    fullWidth?: boolean;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    maxHeight?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableHeadProps {
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableBodyProps {
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableRowProps {
+    onClick?: () => void;
+    isActive?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+interface TableHeaderProps {
+    align?: "left" | "center" | "right";
+    width?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+interface TableCellProps {
+    align?: "left" | "center" | "right";
+    truncate?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function TableRoot({ size, variant, shape, fullWidth, scrollX, scrollY, maxHeight, className, children, }: TableProps): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, children }: TableHeadProps): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, children }: TableBodyProps): react_jsx_runtime.JSX.Element;
+declare function TableRow({ onClick, isActive, className, children }: TableRowProps): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ align, width, className, children }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TableCell({ align, truncate, className, children }: TableCellProps): react_jsx_runtime.JSX.Element;
+declare const Table: typeof TableRoot & {
+    Head: typeof TableHead;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    Header: typeof TableHeader;
+    Cell: typeof TableCell;
+};
+
 type TabsVariant = "default" | "bordered" | "segmented";
 type TabsSize = "xs" | "sm" | "md";
 interface TabsProps {
@@ -412,4 +466,4 @@ declare function Typewriter({ texts, typingSpeed, deletingSpeed, pauseDuration,
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, type AccordionProps, type AccordionSize, type AccordionVariant, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Carousel, type CarouselBreakpointOptions, type CarouselProps, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, Dropdown, type DropdownAlign, type DropdownContentProps, type DropdownProps, type DropdownSide, type DropdownTriggerProps, type DropdownWidth, Input, type InputColor, InputGroup, type InputGroupProps, type InputGroupVariant, type InputProps, type InputShape, type InputSize, type InputState, type InputVariant, MediaImage, type MediaImageProps, type MediaImageRatio, type MediaImageShape, type MediaImageSize, MediaVideo, type MediaVideoProps, type MediaVideoRatio, type MediaVideoShape, type MediaVideoSize, Modal, type ModalBodyProps, type ModalContentProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalSize, type ModalTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Select, type SelectOption, type SelectProps, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, Tooltip, type TooltipPosition, type TooltipProps, Typewriter, type TypewriterProps, cn };
+export { Accordion, type AccordionProps, type AccordionSize, type AccordionVariant, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Carousel, type CarouselBreakpointOptions, type CarouselProps, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, Dropdown, type DropdownAlign, type DropdownContentProps, type DropdownProps, type DropdownSide, type DropdownTriggerProps, type DropdownWidth, Input, type InputColor, InputGroup, type InputGroupProps, type InputGroupVariant, type InputProps, type InputShape, type InputSize, type InputState, type InputVariant, MediaImage, type MediaImageProps, type MediaImageRatio, type MediaImageShape, type MediaImageSize, MediaVideo, type MediaVideoProps, type MediaVideoRatio, type MediaVideoShape, type MediaVideoSize, Modal, type ModalBodyProps, type ModalContentProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalSize, type ModalTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Select, type SelectOption, type SelectProps, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableShape, type TableSize, type TableVariant, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, Tooltip, type TooltipPosition, type TooltipProps, Typewriter, type TypewriterProps, cn };

package/dist/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   Modal: () => Modal,
   MultiSelect: () => MultiSelect,
   Select: () => Select,
+  Table: () => Table,
   Tabs: () => Tabs,
   Tooltip: () => Tooltip,
   Typewriter: () => Typewriter,
@@ -5414,16 +5415,149 @@ function Select({
   ] });
 }
 
-// src/components/tabs/tabs.tsx
+// src/components/table/table.tsx
 var React16 = __toESM(require("react"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var TabsContext = React16.createContext(null);
+var SIZES8 = {
+  xs: { cell: "px-3 py-1.5", header: "px-3 py-1.5", text: "text-xs" },
+  sm: { cell: "px-4 py-2.5", header: "px-4 py-2.5", text: "text-sm" },
+  md: { cell: "px-5 py-3.5", header: "px-5 py-3.5", text: "text-base" }
+};
+var SHAPES5 = {
+  square: "",
+  rounded: "rounded-lg overflow-hidden"
+};
+var TABLE_VARIANTS = {
+  default: "",
+  bordered: "border border-zinc-200",
+  striped: ""
+};
+var ROW_VARIANTS = {
+  default: {
+    base: "border-b border-zinc-100 last:border-0",
+    active: "bg-zinc-50"
+  },
+  bordered: {
+    base: "border-b border-zinc-100 last:border-0",
+    active: "bg-zinc-50"
+  },
+  striped: {
+    base: "border-b border-zinc-100 last:border-0 even:bg-zinc-50/50",
+    active: "bg-zinc-100"
+  }
+};
+var TableContext = React16.createContext({ size: "sm", variant: "default" });
+function useTable() {
+  return React16.useContext(TableContext);
+}
+var ALIGN_MAP = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function TableRoot({
+  size = "sm",
+  variant = "default",
+  shape = "rounded",
+  fullWidth = true,
+  scrollX = false,
+  scrollY = false,
+  maxHeight,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TableContext.Provider, { value: { size, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: cn(
+        TABLE_VARIANTS[variant],
+        SHAPES5[shape],
+        scrollX && "overflow-x-auto",
+        scrollY && "overflow-y-auto",
+        className
+      ),
+      style: scrollY && maxHeight ? { maxHeight } : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("table", { className: cn("border-collapse", fullWidth && "w-full"), children })
+    }
+  ) });
+}
+function TableHead({ className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: cn("bg-zinc-50 border-b border-zinc-200 sticky top-0 z-10", className), children });
+}
+function TableBody({ className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: cn("bg-white", className), children });
+}
+function TableRow({ onClick, isActive, className, children }) {
+  const { variant } = useTable();
+  const v = ROW_VARIANTS[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "tr",
+    {
+      onClick,
+      className: cn(
+        v.base,
+        isActive && v.active,
+        onClick && "cursor-pointer hover:bg-zinc-50 transition-colors",
+        className
+      ),
+      children
+    }
+  );
+}
+function TableHeader({ align = "left", width, className, children }) {
+  const { size } = useTable();
+  const s = SIZES8[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "th",
+    {
+      style: width ? { width } : void 0,
+      className: cn(
+        "font-semibold text-zinc-500 uppercase tracking-wider whitespace-nowrap",
+        s.header,
+        s.text,
+        ALIGN_MAP[align],
+        className
+      ),
+      children
+    }
+  );
+}
+function TableCell({ align = "left", truncate, className, children }) {
+  const { size } = useTable();
+  const s = SIZES8[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "td",
+    {
+      className: cn(
+        "text-zinc-700",
+        s.cell,
+        s.text,
+        ALIGN_MAP[align],
+        truncate && "max-w-0 truncate",
+        className
+      ),
+      children
+    }
+  );
+}
+var Table = Object.assign(TableRoot, {
+  Head: TableHead,
+  Body: TableBody,
+  Row: TableRow,
+  Header: TableHeader,
+  Cell: TableCell
+});
+
+// src/components/tabs/tabs.tsx
+var React17 = __toESM(require("react"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var TabsContext = React17.createContext(null);
 function useTabs() {
-  const ctx = React16.useContext(TabsContext);
+  const ctx = React17.useContext(TabsContext);
   if (!ctx) throw new Error("Tabs sub-components must be used within <Tabs>");
   return ctx;
 }
-var SIZES8 = {
+var SIZES9 = {
   xs: { list: "h-9", trigger: "px-3 gap-1", font: "text-xs", iconSize: "size-3" },
   sm: { list: "h-10", trigger: "px-4 gap-1.5", font: "text-sm", iconSize: "size-3.5" },
   md: { list: "h-12", trigger: "px-5 gap-2", font: "text-base", iconSize: "size-4" }
@@ -5456,20 +5590,20 @@ function TabsRoot({
   className,
   children
 }) {
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
-  const baseId = React16.useId();
+  const [internalValue, setInternalValue] = React17.useState(defaultValue);
+  const baseId = React17.useId();
   const isControlled = value !== void 0;
   const activeValue = isControlled ? value : internalValue;
   const onSelect = (val) => {
     if (!isControlled) setInternalValue(val);
     onValueChange?.(val);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TabsContext.Provider, { value: { activeValue, onSelect, variant, size, baseId }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn("flex flex-col", className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsContext.Provider, { value: { activeValue, onSelect, variant, size, baseId }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("flex flex-col", className), children }) });
 }
 function TabsList({ className, children }) {
   const { variant, size } = useTabs();
-  const s = SIZES8[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const s = SIZES9[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       role: "tablist",
@@ -5486,9 +5620,9 @@ function TabsList({ className, children }) {
 function TabsTrigger({ value, icon, activeClassName, disabled = false, className, children }) {
   const { activeValue, onSelect, variant, size, baseId } = useTabs();
   const isActive = activeValue === value;
-  const s = SIZES8[size];
+  const s = SIZES9[size];
   const v = TRIGGER_VARIANTS[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "button",
     {
       type: "button",
@@ -5510,7 +5644,7 @@ function TabsTrigger({ value, icon, activeClassName, disabled = false, className
         className
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: cn("shrink-0", s.iconSize), children: icon }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("shrink-0", s.iconSize), children: icon }),
         children
       ]
     }
@@ -5519,7 +5653,7 @@ function TabsTrigger({ value, icon, activeClassName, disabled = false, className
 function TabsContent({ value, className, children }) {
   const { activeValue, baseId } = useTabs();
   if (activeValue !== value) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       role: "tabpanel",
@@ -5537,8 +5671,8 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/tooltip/tooltip.tsx
-var React17 = __toESM(require("react"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var React18 = __toESM(require("react"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var POSITIONS = {
   top: {
     tooltip: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -5564,19 +5698,19 @@ function Tooltip({
   children,
   className
 }) {
-  const [visible, setVisible] = React17.useState(false);
-  const timerRef = React17.useRef(null);
+  const [visible, setVisible] = React18.useState(false);
+  const timerRef = React18.useRef(null);
   const pos = POSITIONS[position];
-  const show = React17.useCallback(() => {
+  const show = React18.useCallback(() => {
     timerRef.current = setTimeout(() => setVisible(true), delay);
   }, [delay]);
-  const hide = React17.useCallback(() => {
+  const hide = React18.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setVisible(false);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative inline-flex", onMouseEnter: show, onMouseLeave: hide, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative inline-flex", onMouseEnter: show, onMouseLeave: hide, children: [
     children,
-    visible && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    visible && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         className: cn(
@@ -5587,7 +5721,7 @@ function Tooltip({
         ),
         children: [
           content,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("absolute w-0 h-0", pos.arrow) })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cn("absolute w-0 h-0", pos.arrow) })
         ]
       }
     )
@@ -5595,8 +5729,8 @@ function Tooltip({
 }
 
 // src/components/typewriter/typewriter.tsx
-var React18 = __toESM(require("react"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var React19 = __toESM(require("react"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Typewriter({
   texts,
   typingSpeed = 40,
@@ -5610,17 +5744,17 @@ function Typewriter({
   onComplete,
   className
 }) {
-  const [displayText, setDisplayText] = React18.useState("");
-  const [textIndex, setTextIndex] = React18.useState(0);
-  const [phase, setPhase] = React18.useState(
+  const [displayText, setDisplayText] = React19.useState("");
+  const [textIndex, setTextIndex] = React19.useState(0);
+  const [phase, setPhase] = React19.useState(
     startDelay > 0 ? "waiting" : "typing"
   );
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (phase !== "waiting") return;
     const timeout = setTimeout(() => setPhase("typing"), startDelay);
     return () => clearTimeout(timeout);
   }, [phase, startDelay]);
-  const getDelay = React18.useCallback(() => {
+  const getDelay = React19.useCallback(() => {
     switch (phase) {
       case "typing":
         return typingSpeed;
@@ -5632,7 +5766,7 @@ function Typewriter({
         return 0;
     }
   }, [phase, typingSpeed, pauseDuration, deletingSpeed, deleteMode]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (phase === "waiting" || phase === "done" || !texts.length) return;
     const currentFullText = texts[textIndex];
     const timeout = setTimeout(() => {
@@ -5670,7 +5804,7 @@ function Typewriter({
     }, getDelay());
     return () => clearTimeout(timeout);
   }, [displayText, textIndex, phase, texts, deleteMode, getDelay, loop, onComplete]);
-  const cursorElement = cursor && phase !== "done" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const cursorElement = cursor && phase !== "done" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "span",
     {
       className: cn(
@@ -5681,7 +5815,7 @@ function Typewriter({
       )
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: cn(className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: cn(className), children: [
     displayText,
     cursorElement
   ] });
@@ -5703,6 +5837,7 @@ function Typewriter({
   Modal,
   MultiSelect,
   Select,
+  Table,
   Tabs,
   Tooltip,
   Typewriter,