npm - @intlayer/design-system - Versions diffs - 6.1.3 → 6.1.5 - Mend

@intlayer/design-system 6.1.3 → 6.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/dist/components/Tab/Tab.mjs ADDED Viewed

@@ -0,0 +1,171 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext, Children, isValidElement, useState } from "react";
+import "@intlayer/config/built";
+import "../../better-auth.CiuwFiHM-7umXOENE.js";
+import "@intlayer/editor-react";
+import "@tanstack/react-query";
+import "@intlayer/api";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
+import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
+import { cn } from "../../utils/cn.mjs";
+import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
+import { useTabContext } from "./TabContext.mjs";
+const TabContext = createContext(void 0);
+const tabContainerVariant = cva(
+  "relative w-full bg-background/2 border border-neutral/20 rounded-lg shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur",
+  {
+    variants: {
+      variant: {
+        default: "",
+        bordered: "border-2",
+        ghost: "border-0 shadow-none bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const TabItem = ({ children, ...props }) => (
+  // This component is primarily used for its props by the parent Tab component
+  // The actual rendering is handled by the Tab component
+  /* @__PURE__ */ jsx("div", { ...props, children })
+);
+TabItem.displayName = "TabItem";
+const TabComponent = ({
+  defaultTab,
+  group,
+  variant,
+  children,
+  className,
+  ...props
+}) => {
+  const tabItems = Children.toArray(children).filter((child) => {
+    return isValidElement(child) && child.type === TabItem;
+  });
+  const firstTabValue = tabItems[0]?.props?.value;
+  const { tabsValues, setTabsValues } = useTabContext();
+  const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? "");
+  const hasGroup = group && typeof tabsValues === "object";
+  const currentTabValue = (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;
+  const activeTabIndex = tabItems.findIndex(
+    (tab) => tab.props.value === currentTabValue
+  );
+  const tabsCount = tabItems.length;
+  const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({
+    itemIndex: activeTabIndex,
+    itemCount: tabsCount,
+    onSwipeLeft: () => {
+      const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);
+      const nextValue = tabItems[targetIndex]?.props?.value;
+      if (nextValue) handleSetActiveTab(nextValue);
+    },
+    onSwipeRight: () => {
+      const targetIndex = Math.max(0, activeTabIndex - 1);
+      const nextValue = tabItems[targetIndex]?.props?.value;
+      if (nextValue) handleSetActiveTab(nextValue);
+    }
+  });
+  const handleSetActiveTab = (tab) => {
+    setActiveTab(tab);
+    if (typeof setTabsValues === "function") {
+      setTabsValues((prev) => ({ ...prev, [group]: tab }));
+    }
+  };
+  const contextValue = {
+    activeTab: activeTab ?? firstTabValue ?? "",
+    setActiveTab: handleSetActiveTab
+  };
+  return /* @__PURE__ */ jsx(TabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(tabContainerVariant({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sticky top-36 z-10 flex gap-3 p-3 bg-background/70 backdrop-blur", children: /* @__PURE__ */ jsx(
+          TabSelector,
+          {
+            selectedChoice: currentTabValue,
+            tabs: tabItems.map((child) => {
+              const { label, value, disabled } = child.props;
+              const isActive = currentTabValue === value;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: cn(
+                    "px-4 text-sm font-medium rounded-md transition-colors cursor-pointer focus:outline-none py-1",
+                    !isActive && "text-neutral/70"
+                  ),
+                  "data-active": isActive,
+                  disabled,
+                  onClick: () => !disabled && handleSetActiveTab(value),
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-controls": `tabpanel-${value}`,
+                  id: `tab-${value}`,
+                  children: label
+                },
+                value
+              );
+            }),
+            hoverable: true,
+            color: TabSelectorColor.TEXT
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative w-full min-w-0 overflow-x-clip [clip-path:inset(0)] [-webkit-clip-path:inset(0)]",
+            ...containerProps,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "tablist",
+                "aria-orientation": "horizontal",
+                className: cn(
+                  "grid w-full min-w-0",
+                  isDragging ? "transition-none" : "transition-transform duration-300 ease-in-out"
+                ),
+                style: {
+                  gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,
+                  transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`
+                },
+                children: tabItems.map(({ props: props2 }, index) => {
+                  const { value, children: children2 } = props2;
+                  const isActive = index === activeTabIndex;
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "tabpanel",
+                      "aria-labelledby": `tab-${value}`,
+                      id: `tabpanel-${value}`,
+                      "aria-hidden": !isActive,
+                      tabIndex: isActive ? 0 : -1,
+                      "data-active": isActive,
+                      className: cn(
+                        "w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out",
+                        !isActive && "pointer-events-none opacity-0"
+                        // prevent offscreen interaction
+                      ),
+                      children: /* @__PURE__ */ jsx("div", { className: "w-full min-w-0 flex flex-col gap-6 items-stretch", children: children2 })
+                    },
+                    value
+                  );
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+const Tab = Object.assign(TabComponent, {
+  Item: TabItem
+});
+export {
+  Tab
+};
+//# sourceMappingURL=Tab.mjs.map

package/dist/components/Tab/Tab.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Tab.mjs","sources":["../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Children,\n createContext,\n isValidElement,\n useState,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { useHorizontalSwipe } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n activeTab: string;\n setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType | undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva(\n 'relative w-full bg-background/2 border border-neutral/20 rounded-lg shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border-2',\n ghost: 'border-0 shadow-none bg-transparent',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof tabContainerVariant> & {\n defaultTab?: string;\n group?: string;\n children: ReactNode;\n };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n label: string;\n value: string;\n disabled?: boolean;\n children: ReactNode;\n};\n\n/**\n * TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n */\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n // This component is primarily used for its props by the parent Tab component\n // The actual rendering is handled by the Tab component\n <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/**\n * Tab container component that manages tab state and renders tab headers and content\n *\n * Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n * <Tab.Item label=\"First Tab\" value=\"tab1\">\n * Content for first tab\n * </Tab.Item>\n * <Tab.Item label=\"Second Tab\" value=\"tab2\">\n * Content for second tab\n * </Tab.Item>\n * </Tab>\n * ```\n */\nconst TabComponent = ({\n defaultTab,\n group,\n variant,\n children,\n className,\n ...props\n}: TabProps) => {\n // Extract TabItem children to get their props\n const tabItems = Children.toArray(children).filter((child) => {\n return isValidElement(child) && child.type === TabItem;\n }) as ReactElement<TabItemProps>[];\n\n const firstTabValue = tabItems[0]?.props?.value;\n const { tabsValues, setTabsValues } = useTabContext();\n const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n const hasGroup = group && typeof tabsValues === 'object';\n const currentTabValue =\n (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n const activeTabIndex = tabItems.findIndex(\n (tab) => tab.props.value === currentTabValue\n );\n\n const tabsCount = tabItems.length;\n\n const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n itemIndex: activeTabIndex,\n itemCount: tabsCount,\n onSwipeLeft: () => {\n const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n const nextValue = tabItems[targetIndex]?.props?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n onSwipeRight: () => {\n const targetIndex = Math.max(0, activeTabIndex - 1);\n const nextValue = tabItems[targetIndex]?.props?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n });\n\n const handleSetActiveTab = (tab: string) => {\n setActiveTab(tab);\n\n if (typeof setTabsValues === 'function') {\n setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n }\n };\n\n const contextValue: TabContextType = {\n activeTab: activeTab ?? firstTabValue ?? '',\n setActiveTab: handleSetActiveTab,\n };\n\n return (\n <TabContext.Provider value={contextValue}>\n <div\n className={cn(tabContainerVariant({ variant }), className)}\n {...props}\n >\n {/* Tab Headers */}\n <div className=\"sticky top-36 z-10 flex gap-3 p-3 bg-background/70 backdrop-blur\">\n <TabSelector\n selectedChoice={currentTabValue}\n tabs={tabItems.map((child) => {\n const { label, value, disabled } = child.props;\n const isActive = currentTabValue === value;\n\n return (\n <button\n key={value}\n className={cn(\n 'px-4 text-sm font-medium rounded-md transition-colors cursor-pointer focus:outline-none py-1',\n !isActive && 'text-neutral/70'\n )}\n data-active={isActive}\n disabled={disabled}\n onClick={() => !disabled && handleSetActiveTab(value)}\n role=\"tab\"\n aria-selected={isActive}\n aria-controls={`tabpanel-${value}`}\n id={`tab-${value}`}\n >\n {label}\n </button>\n );\n })}\n hoverable\n color={TabSelectorColor.TEXT}\n />\n </div>\n {/* Tab Content */}\n {/* Clipper: no overflow; uses clip-path */}\n <div\n className=\"relative w-full min-w-0 overflow-x-clip [clip-path:inset(0)] [-webkit-clip-path:inset(0)]\"\n {...containerProps}\n >\n {/* Track */}\n <div\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n className={cn(\n 'grid w-full min-w-0',\n isDragging\n ? 'transition-none'\n : 'transition-transform duration-300 ease-in-out'\n )}\n style={{\n gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n }}\n >\n {tabItems.map(({ props }, index) => {\n const { value, children } = props;\n const isActive = index === activeTabIndex;\n\n return (\n <div\n key={value}\n role=\"tabpanel\"\n aria-labelledby={`tab-${value}`}\n id={`tabpanel-${value}`}\n aria-hidden={!isActive}\n tabIndex={isActive ? 0 : -1}\n data-active={isActive}\n className={cn(\n 'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n !isActive && 'pointer-events-none opacity-0' // prevent offscreen interaction\n )}\n >\n <div className=\"w-full min-w-0 flex flex-col gap-6 items-stretch\">\n {children}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n </TabContext.Provider>\n );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n Item: TabItem,\n});\n\n// Add display name for better debugging\n"],"names":["props","children"],"mappings":"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"}

package/dist/components/Tab/TabContext.cjs ADDED Viewed

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ReactExports = require("react");
+const TabContext = ReactExports.createContext({
+  tabsValues: {},
+  setTabsValues: (() => {
+  })
+});
+const useTabContext = () => ReactExports.useContext(TabContext);
+const TabProvider = ({ children }) => {
+  const [tabsValues, setTabsValues] = ReactExports.useState({});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabContext,
+    {
+      value: {
+        tabsValues,
+        setTabsValues
+      },
+      children
+    }
+  );
+};
+exports.TabContext = TabContext;
+exports.TabProvider = TabProvider;
+exports.useTabContext = useTabContext;
+//# sourceMappingURL=TabContext.cjs.map

package/dist/components/Tab/TabContext.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TabContext.cjs","sources":["../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n createContext,\n useContext,\n useState,\n} from 'react';\n\ntype TabContextValue = {\n tabsValues: Record<string, any>;\n setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const TabContext = createContext<TabContextValue>({\n tabsValues: {},\n setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useTabContext = () => useContext(TabContext);\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n return (\n <TabContext\n value={{\n tabsValues,\n setTabsValues,\n }}\n >\n {children}\n </TabContext>\n );\n};\n"],"names":["createContext","useContext","useState","jsx"],"mappings":";;;;;AAoBO,MAAM,aAAaA,aAAAA,cAA+B;AAAA,EACvD,YAAY,CAAA;AAAA,EACZ,gBAAgB,MAAM;AAAA,EAAC;AACzB,CAAC;AAKM,MAAM,gBAAgB,MAAMC,aAAAA,WAAW,UAAU;AAKjD,MAAM,cAAqC,CAAC,EAAE,eAAe;AAClE,QAAM,CAAC,YAAY,aAAa,IAAIC,aAAAA,SAA8B,CAAA,CAAE;AAEpE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,MAAA;AAAA,MAGD;AAAA,IAAA;AAAA,EAAA;AAGP;;;;"}

package/dist/components/Tab/TabContext.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
+type TabContextValue = {
+    tabsValues: Record<string, any>;
+    setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;
+};
+/**
+ * Context that store the current locale on the client side
+ */
+export declare const TabContext: import('react').Context<TabContextValue>;
+/**
+ * Hook that provides the current locale
+ */
+export declare const useTabContext: () => TabContextValue;
+/**
+ * Provider that store the current locale on the client side
+ */
+export declare const TabProvider: FC<PropsWithChildren>;
+export {};
+//# sourceMappingURL=TabContext.d.ts.map

package/dist/components/Tab/TabContext.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TabContext.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/TabContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,EAAE,EACP,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAEf,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CAC9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,0CAGrB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,aAAa,uBAA+B,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAa7C,CAAC"}

package/dist/components/Tab/TabContext.mjs ADDED Viewed

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const TabContext = createContext({
+  tabsValues: {},
+  setTabsValues: (() => {
+  })
+});
+const useTabContext = () => useContext(TabContext);
+const TabProvider = ({ children }) => {
+  const [tabsValues, setTabsValues] = useState({});
+  return /* @__PURE__ */ jsx(
+    TabContext,
+    {
+      value: {
+        tabsValues,
+        setTabsValues
+      },
+      children
+    }
+  );
+};
+export {
+  TabContext,
+  TabProvider,
+  useTabContext
+};
+//# sourceMappingURL=TabContext.mjs.map

package/dist/components/Tab/TabContext.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TabContext.mjs","sources":["../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n createContext,\n useContext,\n useState,\n} from 'react';\n\ntype TabContextValue = {\n tabsValues: Record<string, any>;\n setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const TabContext = createContext<TabContextValue>({\n tabsValues: {},\n setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useTabContext = () => useContext(TabContext);\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n return (\n <TabContext\n value={{\n tabsValues,\n setTabsValues,\n }}\n >\n {children}\n </TabContext>\n );\n};\n"],"names":[],"mappings":";;;AAoBO,MAAM,aAAa,cAA+B;AAAA,EACvD,YAAY,CAAA;AAAA,EACZ,gBAAgB,MAAM;AAAA,EAAC;AACzB,CAAC;AAKM,MAAM,gBAAgB,MAAM,WAAW,UAAU;AAKjD,MAAM,cAAqC,CAAC,EAAE,eAAe;AAClE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA8B,CAAA,CAAE;AAEpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,MAAA;AAAA,MAGD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Tab/index.cjs ADDED Viewed

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_Tab_Tab = require("./Tab.cjs");
+exports.Tab = components_Tab_Tab.Tab;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Tab/index.cjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Tab/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './Tab';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/components/Tab/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/index.tsx"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}

package/dist/components/Tab/index.mjs ADDED Viewed

@@ -0,0 +1,5 @@
+import { Tab } from "./Tab.mjs";
+export {
+  Tab
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/Tab/index.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/TabSelector/TabSelector.cjs CHANGED Viewed

@@ -91,8 +91,13 @@ const TabSelector = ({
           return ReactExports.cloneElement(Tab, {
             key: key ?? index,
             role: "tab",
-            onClick: () => onTabClick?.(key),
+            onClick: (e) => {
+              Tab.props?.onClick?.(e);
+              onTabClick?.(key);
+            },
             "aria-selected": isSelected,
+            "data-active": isSelected,
+            tabIndex: isSelected ? 0 : -1,
             ref: (el) => {
               optionsRefs.current[index] = el;
             }

package/dist/components/TabSelector/TabSelector.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.cjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n useRef,\n type HTMLAttributes,\n type ReactElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n destructive: 'border-destructive bg-destructive text-destructive',\n neutral: 'border-neutral text-neutral ',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n destructive: 'bg-destructive/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n },\n }\n);\n\~~nexport~~ ~~type~~ TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = TabSelectorColor.PRIMARY,\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["TabSelectorColor","cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;AAYO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,WAAA,IAAY;AACZA,oBAAA,aAAA,IAAc;AACdA,oBAAA,SAAA,IAAU;AACVA,oBAAA,OAAA,IAAQ;AACRA,oBAAA,MAAA,IAAO;AACPA,oBAAA,MAAA,IAAO;AAPG,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAUZ,MAAM,qBAAqBC,uBAAAA;AAAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmBA,uBAAAA;AAAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AAiCO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACzB,QAAM,cAAcC,aAAAA,OAAsB,EAAE;AAC5C,QAAM,eAAeA,aAAAA,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4BC,sBAAAA;AAAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,aAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,~~MAAM~~,~~aAAa~~,GAAG;AAAA,~~YAC/B~~,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,SAAAA;AAAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAAA;AAIR;;;"}
1	+ {"version":3,"file":"TabSelector.cjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n useRef,\n type HTMLAttributes,\n type ReactElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n destructive: 'border-destructive bg-destructive text-destructive',\n neutral: 'border-neutral text-neutral ',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n destructive: 'bg-destructive/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n },\n }\n);\n\ntype TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = TabSelectorColor.PRIMARY,\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: (e: unknown) => {\n Tab.props?.onClick?.(e);\n onTabClick?.(key);\n },\n 'aria-selected': isSelected,\n 'data-active': isSelected as unknown as string,\n tabIndex: isSelected ? 0 : -1,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["TabSelectorColor","cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;AAYO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,WAAA,IAAY;AACZA,oBAAA,aAAA,IAAc;AACdA,oBAAA,SAAA,IAAU;AACVA,oBAAA,OAAA,IAAQ;AACRA,oBAAA,MAAA,IAAO;AACPA,oBAAA,MAAA,IAAO;AAPG,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAUZ,MAAM,qBAAqBC,uBAAAA;AAAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmBA,uBAAAA;AAAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AAiCO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACzB,QAAM,cAAcC,aAAAA,OAAsB,EAAE;AAC5C,QAAM,eAAeA,aAAAA,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4BC,sBAAAA;AAAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,aAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,CAAC,MAAe;AACvB,kBAAI,OAAO,UAAU,CAAC;AACtB,2BAAa,GAAG;AAAA,YAClB;AAAA,YACA,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,UAAU,aAAa,IAAI;AAAA,YAC3B,KAAK,CAAC,OAAoB;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,SAAAA;AAAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAAA;AAIR;;;"}

package/dist/components/TabSelector/TabSelector.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export declare enum TabSelectorColor {
 declare const tabSelectorVariant: (props?: ({
     color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type TabProps = HTMLAttributes<HTMLElement> & {
+type TabProps = HTMLAttributes<HTMLElement> & {
     key: string | number;
 };
 type TabSelectorProps<T extends TabProps> = {

package/dist/components/TabSelector/TabSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAIf,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,kBAAkB;;8EAkBvB,CAAC;AAmBF,~~MAAM~~,~~MAAM,~~QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;~~IACnD~~,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,WAAW,CAAC,GAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,gBAAgB,GAAG,GAAG,gBAAgB,EAAE,CAAC;CAClD,CAAC;AAEJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,EAAE,oEAO7C,gBAAgB,CAAC,CAAC,CAAC,~~4CAkDrB~~,CAAC"}
1	+ {"version":3,"file":"TabSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAIf,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,kBAAkB;;8EAkBvB,CAAC;AAmBF,KAAK,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC5C,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,WAAW,CAAC,GAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,gBAAgB,GAAG,GAAG,gBAAgB,EAAE,CAAC;CAClD,CAAC;AAEJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,EAAE,oEAO7C,gBAAgB,CAAC,CAAC,CAAC,4CAuDrB,CAAC"}

package/dist/components/TabSelector/TabSelector.mjs CHANGED Viewed

@@ -89,8 +89,13 @@ const TabSelector = ({
           return cloneElement(Tab, {
             key: key ?? index,
             role: "tab",
-            onClick: () => onTabClick?.(key),
+            onClick: (e) => {
+              Tab.props?.onClick?.(e);
+              onTabClick?.(key);
+            },
             "aria-selected": isSelected,
+            "data-active": isSelected,
+            tabIndex: isSelected ? 0 : -1,
             ref: (el) => {
               optionsRefs.current[index] = el;
             }

package/dist/components/TabSelector/TabSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n useRef,\n type HTMLAttributes,\n type ReactElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n destructive: 'border-destructive bg-destructive text-destructive',\n neutral: 'border-neutral text-neutral ',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n destructive: 'bg-destructive/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n },\n }\n);\n\~~nexport~~ ~~type~~ TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = TabSelectorColor.PRIMARY,\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["TabSelectorColor"],"mappings":";;;;;;;;;;;;AAYO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,WAAA,IAAY;AACZA,oBAAA,aAAA,IAAc;AACdA,oBAAA,SAAA,IAAU;AACVA,oBAAA,OAAA,IAAQ;AACRA,oBAAA,MAAA,IAAO;AACPA,oBAAA,MAAA,IAAO;AAPG,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAUZ,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AAiCO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACzB,QAAM,cAAc,OAAsB,EAAE;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,~~MAAM~~,~~aAAa~~,GAAG;AAAA,~~YAC/B~~,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1	+ {"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n useRef,\n type HTMLAttributes,\n type ReactElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n destructive: 'border-destructive bg-destructive text-destructive',\n neutral: 'border-neutral text-neutral ',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n destructive: 'bg-destructive/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n },\n }\n);\n\ntype TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = TabSelectorColor.PRIMARY,\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: (e: unknown) => {\n Tab.props?.onClick?.(e);\n onTabClick?.(key);\n },\n 'aria-selected': isSelected,\n 'data-active': isSelected as unknown as string,\n tabIndex: isSelected ? 0 : -1,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["TabSelectorColor"],"mappings":";;;;;;;;;;;;AAYO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,WAAA,IAAY;AACZA,oBAAA,aAAA,IAAc;AACdA,oBAAA,SAAA,IAAU;AACVA,oBAAA,OAAA,IAAQ;AACRA,oBAAA,MAAA,IAAO;AACPA,oBAAA,MAAA,IAAO;AAPG,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAUZ,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AAiCO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACzB,QAAM,cAAc,OAAsB,EAAE;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,CAAC,MAAe;AACvB,kBAAI,OAAO,UAAU,CAAC;AACtB,2BAAa,GAAG;AAAA,YAClB;AAAA,YACA,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,UAAU,aAAa,IAAI;AAAA,YAC3B,KAAK,CAAC,OAAoB;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Table/Table.cjs CHANGED Viewed

@@ -23,16 +23,23 @@ const Table = ({ className, isRollable, ...props }) => {
         Icon: lucideReact.MoveDiagonal
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(components_ExpandCollapse_ExpandCollapse.ExpandCollapse, { isRollable, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "table",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_ExpandCollapse_ExpandCollapse.ExpandCollapse,
       {
-        className: utils_cn.cn(
-          "max-w-full table-auto text-left min-w-full",
-          className
-        ),
-        ...props
+        isRollable,
+        className: "max-w-full overflow-x-auto",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            className: utils_cn.cn(
+              "max-w-full overflow-x-auto table-auto text-left min-w-full bg-background",
+              className
+            ),
+            ...props
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       components_Modal_Modal.Modal,
       {

package/dist/components/Table/Table.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.cjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse isRollable={isRollable}>\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":["useState","jsxs","jsx","Button","MoveDiagonal","ExpandCollapse","cn","Modal","ModalSize","Fragment"],"mappings":";;;;;;;;;;AAaO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,KAAK;AAEpD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAU,sBACb,UAAAA,+BAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAACC,yBAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAMC,YAAAA;AAAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACAF,2BAAAA,~~IAACG~~,yCAAAA,~~kBAAe~~,~~YACd~~,UAAAH,2BAAAA;AAAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QACC~~,WAAWI,SAAAA;AAAAA,~~UACT~~;AAAA,~~UACA~~;AAAA,~~QAAA~~;AAAA,~~QAED~~,GAAG;AAAA,~~MAAA~~;AAAA,~~IAAA~~,~~GAER~~;AAAA,~~IAEAJ~~,2BAAAA;AAAAA,MAACK,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAMC,uBAAAA,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACCN,+BAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEAJ,+BAAAO,WAAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}
1	+ {"version":3,"file":"Table.cjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":["useState","jsxs","jsx","Button","MoveDiagonal","ExpandCollapse","cn","Modal","ModalSize","Fragment"],"mappings":";;;;;;;;;;AAaO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,KAAK;AAEpD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAU,sBACb,UAAAA,+BAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAACC,yBAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAMC,YAAAA;AAAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACAF,2BAAAA;AAAAA,MAACG,yCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGFJ,2BAAAA;AAAAA,MAACK,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAMC,uBAAAA,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACCN,+BAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEAJ,+BAAAO,WAAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}

package/dist/components/Table/Table.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1D,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,~~CAkDhC~~,CAAC"}
1	+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1D,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDhC,CAAC"}

package/dist/components/Table/Table.mjs CHANGED Viewed

@@ -21,16 +21,23 @@ const Table = ({ className, isRollable, ...props }) => {
         Icon: MoveDiagonal
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ExpandCollapse, { isRollable, children: /* @__PURE__ */ jsx(
-      "table",
+    /* @__PURE__ */ jsx(
+      ExpandCollapse,
       {
-        className: cn(
-          "max-w-full table-auto text-left min-w-full",
-          className
-        ),
-        ...props
+        isRollable,
+        className: "max-w-full overflow-x-auto",
+        children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            className: cn(
+              "max-w-full overflow-x-auto table-auto text-left min-w-full bg-background",
+              className
+            ),
+            ...props
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(
       Modal,
       {

package/dist/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse isRollable={isRollable}>\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAU,sBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACA,~~oBAAC~~,~~kBAAe~~,~~YACd~~,UAAA;AAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QACC~~,WAAW;AAAA,~~UACT~~;AAAA,~~UACA~~;AAAA,~~QAAA~~;AAAA,~~QAED~~,GAAG;AAAA,~~MAAA~~;AAAA,~~IAAA~~,~~GAER~~;AAAA,~~IAEA~~;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAM,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACC,oBAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEA,oBAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;"}
1	+ {"version":3,"file":"Table.mjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAU,sBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAM,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACC,oBAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEA,oBAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;"}

package/dist/components/Table/table.content.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const intlayer = require("intlayer");
 const tableContent = {
   key: "table",
@@ -22,5 +23,5 @@ const tableContent = {
     })
   }
 };
-module.exports = tableContent;
+exports.default = tableContent;
 //# sourceMappingURL=table.content.cjs.map

package/dist/components/Table/table.content.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.content.cjs","sources":["../../../src/components/Table/table.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst tableContent = {\n key: 'table',\n autoFill: './{{key}}.content.json',\n content: {\n show: t({\n en: 'Show all table content',\n fr: 'Afficher tout le contenu du tableau',\n es: 'Mostrar todo el contenido de la tabla',\n 'en-GB': 'Show all table content',\n de: 'Alle Tabellendaten anzeigen',\n ja: 'テーブルのすべての内容を表示',\n ko: '테이블의 모든 내용 표시',\n zh: '显示表格的所有内容',\n it: 'Mostra tutto il contenuto della tabella',\n pt: 'Mostrar todo o conteúdo da tabela',\n hi: 'सभी तालिका सामग्री दिखाएं',\n ar: 'اظهار جميع محتويات الجدول',\n ru: 'Показать все данные таблицы',\n tr: 'Tüm tablo içeriğini göster',\n }),\n },\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"names":["t"],"mappings":";;AAEA,MAAM,eAAe;AAAA,EACnB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACP,MAAMA,SAAAA,EAAE;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EAAA;AAEL;;"}
1	+ {"version":3,"file":"table.content.cjs","sources":["../../../src/components/Table/table.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst tableContent = {\n key: 'table',\n autoFill: './{{key}}.content.json',\n content: {\n show: t({\n en: 'Show all table content',\n fr: 'Afficher tout le contenu du tableau',\n es: 'Mostrar todo el contenido de la tabla',\n 'en-GB': 'Show all table content',\n de: 'Alle Tabellendaten anzeigen',\n ja: 'テーブルのすべての内容を表示',\n ko: '테이블의 모든 내용 표시',\n zh: '显示表格的所有内容',\n it: 'Mostra tutto il contenuto della tabella',\n pt: 'Mostrar todo o conteúdo da tabela',\n hi: 'सभी तालिका सामग्री दिखाएं',\n ar: 'اظهار جميع محتويات الجدول',\n ru: 'Показать все данные таблицы',\n tr: 'Tüm tablo içeriğini göster',\n }),\n },\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"names":["t"],"mappings":";;;AAEA,MAAM,eAAe;AAAA,EACnB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACP,MAAMA,SAAAA,EAAE;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EAAA;AAEL;;"}

package/dist/components/index.cjs CHANGED Viewed

@@ -45,7 +45,7 @@ const components_Logo_Logo = require("./Logo/Logo.cjs");
 const components_Logo_LogoTextOnly = require("./Logo/LogoTextOnly.cjs");
 const components_Logo_LogoWithText = require("./Logo/LogoWithText.cjs");
 const components_Logo_LogoWithTextBelow = require("./Logo/LogoWithTextBelow.cjs");
-const components_MarkDownRender_index = require("./MarkDownRender/index.cjs");
+const components_MarkDownRender_MarkDownRender = require("./MarkDownRender/MarkDownRender.cjs");
 const components_MaxHeightSmoother_index = require("./MaxHeightSmoother/index.cjs");
 const components_MaxWidthSmoother_index = require("./MaxWidthSmoother/index.cjs");
 const components_Modal_Modal = require("./Modal/Modal.cjs");
@@ -61,6 +61,7 @@ const components_Select_Multiselect = require("./Select/Multiselect.cjs");
 const components_Select_Select = require("./Select/Select.cjs");
 const components_SocialNetworks_index = require("./SocialNetworks/index.cjs");
 const components_SwitchSelector_index = require("./SwitchSelector/index.cjs");
+const components_Tab_Tab = require("./Tab/Tab.cjs");
 const components_TabSelector_TabSelector = require("./TabSelector/TabSelector.cjs");
 const components_Tag_index = require("./Tag/index.cjs");
 const components_TextArea_AutoSizeTextArea = require("./TextArea/AutoSizeTextArea.cjs");
@@ -130,6 +131,7 @@ exports.H2 = components_Headers_index.H2;
 exports.H3 = components_Headers_index.H3;
 exports.H4 = components_Headers_index.H4;
 exports.H5 = components_Headers_index.H5;
+exports.H6 = components_Headers_index.H6;
 exports.HeightResizer = components_HeightResizer_index.HeightResizer;
 exports.Code = components_IDE_Code.Code;
 exports.IDE = components_IDE_IDE.IDE;
@@ -161,7 +163,7 @@ exports.Logo = components_Logo_Logo.Logo;
 exports.LogoTextOnly = components_Logo_LogoTextOnly.LogoTextOnly;
 exports.LogoWithText = components_Logo_LogoWithText.LogoWithText;
 exports.LogoWithTextBelow = components_Logo_LogoWithTextBelow.LogoWithTextBelow;
-exports.MarkdownRenderer = components_MarkDownRender_index.MarkdownRenderer;
+exports.MarkdownRenderer = components_MarkDownRender_MarkDownRender.MarkdownRenderer;
 exports.MaxHeightSmoother = components_MaxHeightSmoother_index.MaxHeightSmoother;
 exports.MaxWidthSmoother = components_MaxWidthSmoother_index.MaxWidthSmoother;
 exports.Modal = components_Modal_Modal.Modal;
@@ -186,6 +188,7 @@ exports.SocialNetworks = components_SocialNetworks_index.SocialNetworks;
 exports.SwitchSelector = components_SwitchSelector_index.SwitchSelector;
 exports.SwitchSelectorColor = components_SwitchSelector_index.SwitchSelectorColor;
 exports.SwitchSelectorSize = components_SwitchSelector_index.SwitchSelectorSize;
+exports.Tab = components_Tab_Tab.Tab;
 exports.TabSelector = components_TabSelector_TabSelector.TabSelector;
 exports.TabSelectorColor = components_TabSelector_TabSelector.TabSelectorColor;
 exports.Tag = components_Tag_index.Tag;

package/dist/components/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}