@taiv/ui 1.15.0 → 2.1.0

package/dist/components/Layout/Pagination/Pagination.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Pagination/Pagination.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA8CjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC"}

package/dist/components/Layout/Pagination/Pagination.stories.js

@@ -0,0 +1,76 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pagination } from './Pagination';
+import { Stack } from '../Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Layout/Pagination',
+    component: Pagination,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/pagination/)\n\nPaginates a list of items across multiple pages. Wraps Mantine v6's Pagination with Taiv styling.",
+            },
+        },
+    },
+    argTypes: {
+        total: {
+            control: { type: 'number' },
+            description: 'Total number of pages',
+        },
+        value: {
+            control: { type: 'number' },
+            description: 'Active page (controlled)',
+        },
+        defaultValue: {
+            control: { type: 'number' },
+            description: 'Default active page (uncontrolled)',
+        },
+        siblings: {
+            control: { type: 'number' },
+            description: 'Sibling pages shown on each side of the active page',
+        },
+        boundaries: {
+            control: { type: 'number' },
+            description: 'Pages shown at each boundary',
+        },
+        withEdges: {
+            control: { type: 'boolean' },
+            description: 'Render first/last edge controls',
+        },
+        withControls: {
+            control: { type: 'boolean' },
+            description: 'Render previous/next controls',
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        total: 10,
+        defaultValue: 1,
+        size: 'md',
+    },
+};
+export const WithEdges = {
+    args: {
+        total: 25,
+        defaultValue: 5,
+        withEdges: true,
+    },
+};
+export const Controlled = {
+    render: () => {
+        const [page, setPage] = useState(1);
+        return (_jsxs(Stack, { spacing: spacing.sm, align: "center", children: [_jsxs(Text, { variant: "body", children: ["Active page: ", page] }), _jsx(Pagination, { total: 12, value: page, onChange: setPage })] }));
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Stack, { spacing: spacing.lg, children: [_jsx(Pagination, { total: 8, defaultValue: 3, size: "sm" }), _jsx(Pagination, { total: 8, defaultValue: 3, size: "md" }), _jsx(Pagination, { total: 8, defaultValue: 3, size: "lg" })] })),
+};

package/dist/components/Layout/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,3 @@
+export { ScrollArea } from '@mantine/core';
+export type { ScrollAreaAutosizeProps, ScrollAreaProps } from '@mantine/core';
+//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/components/Layout/ScrollArea/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Layout/ScrollArea/ScrollArea.js

@@ -0,0 +1 @@
+export { ScrollArea } from '@mantine/core';

package/dist/components/Layout/ScrollArea/ScrollArea.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ScrollArea } from './ScrollArea';
+declare const meta: Meta<typeof ScrollArea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Autosize: Story;
+//# sourceMappingURL=ScrollArea.stories.d.ts.map

package/dist/components/Layout/ScrollArea/ScrollArea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/ScrollArea/ScrollArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgCjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAWnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC"}

package/dist/components/Layout/ScrollArea/ScrollArea.stories.js

@@ -0,0 +1,62 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ScrollArea } from './ScrollArea';
+import { Stack } from '../Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Layout/ScrollArea',
+    component: ScrollArea,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Content inside the scroll viewport',
+            table: { type: { summary: 'ReactNode' } },
+        },
+        h: {
+            control: { type: 'text' },
+            description: 'Viewport height',
+            table: { type: { summary: 'string | number' } },
+        },
+        type: {
+            control: { type: 'select' },
+            options: ['auto', 'always', 'scroll', 'hover', 'never'],
+            description: 'When scrollbars are shown',
+            table: {
+                type: { summary: "'auto' | 'always' | 'scroll' | 'hover' | 'never'" },
+                defaultValue: { summary: "'hover'" },
+            },
+        },
+        scrollbarSize: {
+            control: { type: 'number' },
+            description: 'Scrollbar thickness',
+            table: { type: { summary: 'number | string' } },
+        },
+    },
+};
+export default meta;
+const longContent = Array.from({ length: 24 }, (_, i) => {
+    const lineNumber = i + 1;
+    return (_jsxs(Text, { size: "sm", color: "dimmed", children: ["Line ", lineNumber, " \u2014 scroll the viewport to see more content."] }, `scroll-area-demo-line-${lineNumber}`));
+});
+export const Default = {
+    args: {
+        h: 200,
+        w: 320,
+        type: 'auto',
+        children: (_jsx(Stack, { spacing: spacing.sm, p: spacing.md, children: longContent })),
+        sx: {
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: 8,
+        },
+    },
+};
+export const Autosize = {
+    render: () => (_jsx(ScrollArea.Autosize, { mah: 200, maw: 360, type: "hover", sx: { border: `1px solid ${neutral[100]}`, borderRadius: 8 }, children: _jsx(Stack, { spacing: spacing.sm, p: spacing.md, children: longContent }) })),
+    parameters: {
+        docs: { source: { code: false } },
+    },
+};

package/dist/components/Layout/SectionCard/SectionCard.d.ts

@@ -5,5 +5,5 @@ export interface SectionCardProps extends Omit<CardProps, 'children'> {
     subtitle?: string;
     children: React.ReactNode;
 }
-export declare const SectionCard: ({ title, subtitle, children, ...props }: SectionCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionCard: ({ title, subtitle, children, ...props }: SectionCardProps) => React.JSX.Element;
 //# sourceMappingURL=SectionCard.d.ts.map

package/dist/components/Layout/SectionCard/SectionCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/SectionCard/SectionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAE3B;AAED,eAAO,MAAM,WAAW,GAAI,yCAAyC,gBAAgB,4CAcpF,CAAC"}
+{"version":3,"file":"SectionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/SectionCard/SectionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAE3B;AAED,eAAO,MAAM,WAAW,GAAI,yCAAyC,gBAAgB,sBAcpF,CAAC"}

package/dist/components/Layout/Stack/Stack.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StackProps as MantineStackProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 interface StackProps extends MantineStackProps {
@@ -5,6 +6,6 @@ interface StackProps extends MantineStackProps {
     gap?: string;
     styles?: Record<string, CSSObject>;
 }
-declare const Stack: ({ width, gap, styles, ...props }: StackProps) => import("react/jsx-runtime").JSX.Element;
+declare const Stack: ({ width, gap, styles, ...props }: StackProps) => React.JSX.Element;
 export { Stack };
 //# sourceMappingURL=Stack.d.ts.map

package/dist/components/Layout/Stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,KAAK,GAAI,kCAAkC,UAAU,4CAE1D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,KAAK,GAAI,kCAAkC,UAAU,sBAE1D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -16,7 +16,7 @@ interface TableProps<T extends TableItem> {
     shadow?: boolean;
     divider?: boolean;
 }
-declare const TableComponent: <T extends TableItem>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableComponent: <T extends TableItem>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => React.JSX.Element;
 export declare const Table: typeof TableComponent;
 export { type ColumnConfig, type TableProps };
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA2B,MAAM,OAAO,CAAC;AAItE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,SAAS;IACjB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,SAAS;IACtC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,iEAAgF,UAAU,CAAC,CAAC,CAAC,4CA6EzI,CAAC;AAEF,eAAO,MAAM,KAAK,EAA2B,OAAO,cAAc,CAAC;AAEnE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA2B,MAAM,OAAO,CAAC;AAItE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,SAAS;IACjB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,SAAS;IACtC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,iEAAgF,UAAU,CAAC,CAAC,CAAC,sBA6EzI,CAAC;AAEF,eAAO,MAAM,KAAK,EAA2B,OAAO,cAAc,CAAC;AAEnE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}

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

@@ -1,15 +1,26 @@
-import React from 'react';
-import { TabsProps as MantineTabsProps } from '@mantine/core';
+import { type TabProps as MantineTabProps, type TabsProps as MantineTabsProps } from '@mantine/core';
+import type React from 'react';
 export interface TabsProps extends Omit<MantineTabsProps, 'children' | 'onChange'> {
+    /**
+     * Color the edge-fade indicators on `Tabs.List` fade into. Match the
+     * surrounding surface so the strip dissolves cleanly into the page.
+     * Default: 'white'.
+     */
+    background?: string;
     children: React.ReactNode;
     defaultValue?: string;
     value?: string;
     onChange?: (value: string | null) => void;
     variant?: 'default' | 'outline' | 'pills';
 }
-export declare const Tabs: (({ children, defaultValue, value, onChange, variant, styles, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
-    List: React.ForwardRefExoticComponent<import("@mantine/core").TabsListProps & React.RefAttributes<HTMLDivElement>>;
-    Tab: React.ForwardRefExoticComponent<import("@mantine/core").TabProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TabProps extends Omit<MantineTabProps, 'rightSection' | 'icon'> {
+    count?: number;
+    rightSection?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export declare const Tabs: (({ background, children, defaultValue, value, onChange, variant, styles, ...props }: TabsProps) => React.JSX.Element) & {
+    List: React.ForwardRefExoticComponent<Omit<import("@mantine/core").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Panel: React.ForwardRefExoticComponent<import("@mantine/core").TabsPanelProps & React.RefAttributes<HTMLDivElement>>;
+    Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
 };
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKnF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,CAAC;IAChF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AA+CD,eAAO,MAAM,IAAI,4EA7C0F,SAAS;;;;CAiDlH,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,QAAQ,IAAI,eAAe,EAEhC,KAAK,SAAS,IAAI,gBAAgB,EACnC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,CAAC;IACvD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AA6ED,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,GAAG,MAAM,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AA0DD,eAAO,MAAM,IAAI,wFA7Hd,SAAS;;;;CAiIV,CAAC"}

package/dist/components/Layout/Tabs/Tabs.js

@@ -1,49 +1,84 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Tabs as MantineTabs } from '@mantine/core';
-import { fontBase } from '../../../constants/font';
+import { Tabs as MantineTabs, } from '@mantine/core';
+import { createContext, forwardRef, useContext, } from 'react';
 import { colors } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
 import { spacing } from '../../../constants/spacing';
-const TabsComponent = ({ children, defaultValue, value, onChange, variant = 'default', styles, ...props }) => {
+import { Badge } from '../../Info/Badge/Badge';
+import { OverflowFade } from '../../Misc/OverflowFade/OverflowFade';
+// Internal context so `Tabs.List` can pull the parent `<Tabs background>`
+// without consumers having to thread the prop through manually.
+const TabsBackgroundContext = createContext('white');
+const TabsComponent = ({ background = 'white', children, defaultValue, value, onChange, variant = 'default', styles, ...props }) => {
     const style = {
+        panel: {
+            padding: `${spacing.lg} ${spacing.sm}`,
+        },
         root: {
             width: '100%',
         },
-        list: {
-            borderBottom: variant === 'default' ? `1px solid ${colors.neutral[100]}` : 'none',
-            gap: '0',
-        },
         tab: {
-            padding: `${spacing.sm} 28px`,
-            backgroundColor: 'transparent',
-            color: colors.neutral[300],
             '&:hover': {
                 backgroundColor: variant === 'pills' ? colors.neutral[25] : 'transparent',
-                color: colors.primary[300],
+                color: colors.primary[200],
             },
             '&[data-active]': {
                 backgroundColor: variant === 'pills' ? colors.primary[200] : 'transparent',
-                color: variant === 'pills' ? 'white' : colors.primary[300],
                 borderBottom: variant === 'default' ? `2px solid ${colors.primary[200]}` : 'none',
+                color: variant === 'pills' ? 'white' : colors.primary[200],
             },
             '&[data-active]:hover': {
                 backgroundColor: variant === 'pills' ? colors.primary[200] : 'transparent',
-                color: variant === 'pills' ? 'white' : colors.primary[300],
+                color: variant === 'pills' ? 'white' : colors.primary[200],
             },
+            backgroundColor: 'transparent',
+            color: colors.neutral[300],
+            flexShrink: 0,
+            padding: `${spacing.sm} 28px`,
         },
         tabLabel: {
             ...fontBase,
             fontSize: '16px',
             lineHeight: '24px',
         },
-        panel: {
-            padding: `${spacing.lg} ${spacing.sm}`,
+        tabsList: {
+            borderBottom: variant === 'default' ? `1px solid ${colors.neutral[100]}` : 'none',
+            flexWrap: 'nowrap',
+            gap: '0',
         },
         ...styles,
     };
-    return (_jsx(MantineTabs, { styles: style, radius: "lg", defaultValue: defaultValue, value: value, variant: variant, ...props, children: children }));
+    return (_jsx(TabsBackgroundContext.Provider, { value: background, children: _jsx(MantineTabs, { defaultValue: defaultValue, onTabChange: onChange, radius: 'lg', styles: style, value: value, variant: variant, ...props, children: children }) }));
 };
+// `forwardRef` so consumers (and Mantine internals) can attach a ref to the
+// underlying `<button role="tab">` — focus management, scroll-into-view, and
+// intersection observers all expect this. Mirrors `TabsList` below; without
+// it, `<Tabs.Tab ref={...}>` would silently no-op.
+const Tab = forwardRef(({ count, rightSection, icon, children, ...props }, ref) => {
+    const resolvedRightSection = count !== undefined ? (_jsx(Badge, { color: 'neutral', size: 'sm', variant: 'filled', children: count })) : (rightSection);
+    return (_jsx(MantineTabs.Tab, { ref: ref, icon: icon, rightSection: resolvedRightSection, ...props, children: children }));
+});
+Tab.displayName = 'Tabs.Tab';
+// Tabs.List wrapper: injects the OverflowFade so any horizontally-overflowing
+// tab strip (long labels, many tabs, narrow viewport) gets a bidirectional
+// gradient cue automatically — no consumer changes required.
+//
+// DOM contract: there is now an extra wrapper element above `.mantine-Tabs-tabsList`
+// (the OverflowFade div). Implications:
+//   • CSS `>` direct-child selectors against the list will skip a level.
+//   • `position: sticky` applied to `Tabs.List` resolves against the OverflowFade
+//     ancestor, not the page — sticky should be applied to the parent `<Tabs>`
+//     root instead.
+//   • The OverflowFade clips horizontal overflow; positioned descendants of
+//     `Tabs.List` (popovers/dropdowns escaping the strip) will be clipped.
+//     Anchor those off the parent `<Tabs>` root or use `Portal`.
+const TabsList = forwardRef(({ children, ...props }, ref) => {
+    const background = useContext(TabsBackgroundContext);
+    return (_jsx(OverflowFade, { background: background, children: _jsx(MantineTabs.List, { ref: ref, ...props, children: children }) }));
+});
+TabsList.displayName = 'Tabs.List';
 export const Tabs = Object.assign(TabsComponent, {
-    List: MantineTabs.List,
-    Tab: MantineTabs.Tab,
+    List: TabsList,
     Panel: MantineTabs.Panel,
+    Tab,
 });

package/dist/components/Layout/Tabs/Tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAM9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA2D3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyE3B,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA4D3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6E3B,CAAC"}

package/dist/components/Layout/Tabs/Tabs.stories.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tabs } from './Tabs';
-import { Stack } from '../Stack/Stack';
 import { primary } from '../../../constants/colors';
 import { spacing } from '../../../constants/spacing';
 import { Text } from '../../Typography/Text/Text';
+import { Stack } from '../Stack/Stack';
+import { Tabs } from './Tabs';
 const meta = {
-    title: 'Components/Layout/Tabs',
-    component: Tabs,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            description: {
-                component: "[View Mantine Docs](https://v6.mantine.dev/core/tabs/)\n\nThe Tabs component organizes content into sections that users can switch between. It extends Mantine v6's Tabs component with custom styling and variant options.",
-            },
-        },
-    },
     argTypes: {
         children: {
             control: false,
@@ -23,26 +13,10 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
-        variant: {
-            control: { type: 'select' },
-            options: ['default', 'outline', 'pills'],
-            description: 'The preset variant to use for styling',
-            table: {
-                type: { summary: "'default' | 'outline' | 'pills'" },
-                defaultValue: { summary: "'default'" },
-            },
-        },
         defaultValue: {
             control: { type: 'select' },
-            options: ['overview', 'details', 'settings'],
             description: 'The default tab when the component is mounted',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        value: {
-            control: { type: 'text' },
-            description: 'The currently active tab value',
+            options: ['overview', 'details', 'settings'],
             table: {
                 type: { summary: 'string' },
             },
@@ -61,44 +35,70 @@ const meta = {
                 type: { summary: 'Record<string, CSSObject>' },
             },
         },
+        value: {
+            control: { type: 'text' },
+            description: 'The currently active tab value',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        variant: {
+            control: { type: 'select' },
+            description: 'The preset variant to use for styling',
+            options: ['default', 'outline', 'pills'],
+            table: {
+                defaultValue: { summary: "'default'" },
+                type: { summary: "'default' | 'outline' | 'pills'" },
+            },
+        },
     },
+    component: Tabs,
+    parameters: {
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/tabs/)\n\nThe Tabs component organizes content into sections that users can switch between. It extends Mantine v6's Tabs component with custom styling and variant options.",
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Layout/Tabs',
 };
 export default meta;
 export const Default = {
     args: {
         children: undefined,
-        variant: 'default',
         defaultValue: 'overview',
+        variant: 'default',
     },
     decorators: [
         (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
     ],
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Overview" }), _jsx(Tabs.Tab, { value: "details", children: "Details" }), _jsx(Tabs.Tab, { value: "settings", children: "Settings" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "overview", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Overview" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "details", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Details" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "settings", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Settings" }) })] })),
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Overview" }), _jsx(Tabs.Tab, { value: 'details', children: "Details" }), _jsx(Tabs.Tab, { value: 'settings', children: "Settings" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'overview', children: _jsx(Text, { variant: 'subtle', children: "This is the tab panel for Overview" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'details', children: _jsx(Text, { variant: 'subtle', children: "This is the tab panel for Details" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'settings', children: _jsx(Text, { variant: 'subtle', children: "This is the tab panel for Settings" }) })] })),
 };
 export const Variants = {
-    render: () => (_jsxs(Stack, { spacing: "48px", py: spacing.xl, sx: { width: '600px' }, children: [_jsx(Tabs, { defaultValue: "overview", variant: "default", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Default" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: "overview", variant: "outline", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Outline" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: "overview", variant: "pills", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Pills" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) })] })),
+    render: () => (_jsxs(Stack, { py: spacing.xl, spacing: '48px', sx: { width: '600px' }, children: [_jsx(Tabs, { defaultValue: 'overview', variant: 'default', children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Default" }), _jsx(Tabs.Tab, { value: 'details', children: "Tab 2" }), _jsx(Tabs.Tab, { value: 'settings', children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: 'overview', variant: 'outline', children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Outline" }), _jsx(Tabs.Tab, { value: 'details', children: "Tab 2" }), _jsx(Tabs.Tab, { value: 'settings', children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: 'overview', variant: 'pills', children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Pills" }), _jsx(Tabs.Tab, { value: 'details', children: "Tab 2" }), _jsx(Tabs.Tab, { value: 'settings', children: "Tab 3" })] }) })] })),
 };
 export const CustomStyling = {
     args: {
         defaultValue: 'overview',
         styles: {
+            panel: {
+                color: 'white',
+            },
             root: {
                 background: primary[200],
-                padding: '20px',
                 borderRadius: '12px',
+                padding: '20px',
             },
             tab: {
-                color: 'white',
                 '&:hover': {
+                    backgroundColor: primary[200],
                     color: 'white',
-                    backgroundColor: primary[300],
                 },
                 '&[data-active]': {
-                    color: 'white',
                     backgroundColor: primary[100],
+                    color: 'white',
                 },
-            },
-            panel: {
                 color: 'white',
             },
         },
@@ -106,7 +106,6 @@ export const CustomStyling = {
     decorators: [
         (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
     ],
-    render: (args) => (_jsxs(Tabs, { variant: "pills", ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Overview" }), _jsx(Tabs.Tab, { value: "details", children: "Details" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "overview", children: "Overview" }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "details", children: "Details" })] })),
     parameters: {
         docs: {
             source: {
@@ -138,4 +137,5 @@ export const CustomStyling = {
             },
         },
     },
+    render: (args) => (_jsxs(Tabs, { variant: 'pills', ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Overview" }), _jsx(Tabs.Tab, { value: 'details', children: "Details" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'overview', children: "Overview" }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'details', children: "Details" })] })),
 };

package/dist/components/Layout/VirtualGrid/VirtualGrid.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { spacing as spacingTokens } from '../../../constants/spacing';
+import type { ResponsiveCols } from '../AutoGrid/AutoGrid';
+type SpacingToken = keyof typeof spacingTokens;
+export interface VirtualGridProps<T> {
+    /** Items to render. */
+    items: T[];
+    /**
+     * Stable key for each item. Applied to virtuoso's `computeItemKey` so
+     * cells keep their identity (and measured height) when items shift around
+     * — sort changes, filter updates, etc.
+     */
+    getKey: (item: T, index: number) => string;
+    /** Render function for each item. */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /**
+     * Number of columns. Accepts a number or a responsive map matching
+     * `AutoGrid`'s `ResponsiveCols` shape. `1` switches to the list-style
+     * virtuoso (`<Virtuoso>`); larger values use `<VirtuosoGrid>` with a
+     * CSS-grid container. Defaults to `1`.
+     */
+    cols?: number | ResponsiveCols;
+    /**
+     * Spacing between cells in px or a `@taiv/ui/constants` spacing token name
+     * (e.g. `'lg'`). Applied as a CSS-grid gap for multi-col layouts, or as
+     * bottom padding inside each list cell for cols=1.
+     */
+    gap?: SpacingToken | number;
+    /** Container style. */
+    style?: React.CSSProperties;
+    /** Container className. */
+    className?: string;
+    /**
+     * Optional callback when the visible item range changes. Useful for
+     * downstream "infinite load" hooks. Receives flat-item indices.
+     */
+    onItemsRendered?: (range: {
+        startIndex: number;
+        stopIndex: number;
+    }) => void;
+}
+/**
+ * Windowed grid primitive — renders only the items currently in (or near)
+ * the viewport. Auto-measures each cell's natural height via
+ * `react-virtuoso`, so consumers don't pick magic-number `rowHeight`s per
+ * breakpoint per card type. Same responsive `cols` and gap-token API as
+ * `AutoGrid`.
+ *
+ * Behavior:
+ *  - `cols=1` → `<Virtuoso>` (single-column list). Each item takes whatever
+ *    height it renders at.
+ *  - `cols>1` → `<VirtuosoGrid>` with a CSS-grid container. Cells reserve
+ *    equal column width; the row height is whatever the tallest cell in
+ *    that row needs.
+ *
+ * Use this for any list where the rendered count can reach the hundreds —
+ * library grids, rotation pools, picker results, etc. For short lists
+ * (under ~50 cells) prefer `AutoGrid`: native CSS-grid is simpler and has
+ * no measurement overhead.
+ */
+export declare function VirtualGrid<T>({ items, getKey, renderItem, cols, gap, style, className, onItemsRendered, }: VirtualGridProps<T>): React.JSX.Element;
+export {};
+//# sourceMappingURL=VirtualGrid.d.ts.map

package/dist/components/Layout/VirtualGrid/VirtualGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/VirtualGrid/VirtualGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,KAAK,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAE/C,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,uBAAuB;IACvB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;;;OAIG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,qCAAqC;IACrC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC/B;;;;OAIG;IACH,GAAG,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9E;AAmFD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,KAAK,EACL,MAAM,EACN,UAAU,EACV,IAAQ,EACR,GAAO,EACP,KAAK,EACL,SAAS,EACT,eAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBAkHrB"}