@taiv/ui 1.14.1 → 2.0.0

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NavbarProps as MantineNavbarProps, CSSObject } from '@mantine/core';
+export interface NavbarProps extends Omit<MantineNavbarProps, 'styles'> {
+    styles?: Record<string, CSSObject>;
+}
+export declare const Navbar: (({ styles, children, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element) & {
+    Section: (<C = "div">(props: import("@mantine/utils").PolymorphicComponentProps<C, import("@mantine/core/lib/AppShell/HorizontalSection/Section/Section").SectionProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(import("@mantine/core/lib/AppShell/HorizontalSection/Section/Section").SectionProps & {
+        component?: any;
+    } & Omit<Pick<any, string | number | symbol>, "component" | keyof import("@mantine/core/lib/AppShell/HorizontalSection/Section/Section").SectionProps> & {
+        ref?: any;
+    }) | (import("@mantine/core/lib/AppShell/HorizontalSection/Section/Section").SectionProps & {
+        component: React.ElementType<any>;
+    })>, never> & Record<string, never>;
+};
+//# sourceMappingURL=Navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,IAAI,kBAAkB,EACjC,SAAS,EACV,MAAM,eAAe,CAAC;AAKvB,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAoBD,eAAO,MAAM,MAAM,oCAlBsC,WAAW;;;;;;;;CAoBlE,CAAC"}

package/dist/components/Layout/Navbar/Navbar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Navbar as MantineNavbar, } from '@mantine/core';
+import { colors } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const NavbarComponent = ({ styles, children, ...props }) => {
+    const style = {
+        root: {
+            ...fontBase,
+            backgroundColor: 'white',
+            borderRight: `1px solid ${colors.neutral[100]}`,
+            padding: spacing.lg,
+        },
+        ...styles,
+    };
+    return (_jsx(MantineNavbar, { styles: style, ...props, children: children }));
+};
+export const Navbar = Object.assign(NavbarComponent, {
+    Section: MantineNavbar.Section,
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Navbar/Navbar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAqD7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAuC1B,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAC"}

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Navbar } from './Navbar';
+import { Divider } from '../Divider/Divider';
+import { Stack } from '../Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Title } from '../../Typography/Title/Title';
+import { UnstyledButton } from '../../Inputs/Buttons/UnstyledButton/UnstyledButton';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Layout/Navbar',
+    component: Navbar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: '[View Mantine Docs](https://v6.mantine.dev/core/navbar/)\n\nNavbar is a left-aligned vertical navigation sidebar. It extends Mantine v6\'s `Navbar` (from AppShell) with Taiv styling: Poppins font, `neutral[100]` right-border, and `spacing.lg` padding.\n\nUse `Navbar.Section` to group content. Add `grow` to a section to have it fill remaining vertical space, pushing subsequent sections to the bottom.',
+            },
+        },
+    },
+    argTypes: {
+        width: {
+            control: false,
+            description: 'Navbar width with optional responsive breakpoints',
+            table: { type: { summary: '{ base: number; sm?: number; md?: number; ... }' } },
+        },
+        height: {
+            control: { type: 'text' },
+            description: 'Navbar height',
+            table: { type: { summary: 'string | number' } },
+        },
+        fixed: {
+            control: { type: 'boolean' },
+            description: 'Use fixed positioning',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        withBorder: {
+            control: { type: 'boolean' },
+            description: 'Show the right-hand border',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        hidden: {
+            control: { type: 'boolean' },
+            description: 'Hide the navbar below `hiddenBreakpoint`',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Style overrides via Mantine styles API',
+            table: { type: { summary: 'Record<string, CSSObject>' } },
+        },
+    },
+};
+export default meta;
+const NavItem = ({ label, active }) => (_jsx(UnstyledButton, { style: {
+        padding: `${spacing.sm} ${spacing.md}`,
+        borderRadius: '6px',
+        backgroundColor: active ? neutral[25] : 'transparent',
+        width: '100%',
+        textAlign: 'left',
+    }, children: _jsx(Text, { variant: active ? 'body' : 'subtle', children: label }) }));
+// ─── Default ─────────────────────────────────────────────────────────────────
+export const Default = {
+    args: {
+        width: { base: 240 },
+        height: 600,
+    },
+    render: (args) => (_jsx(Navbar, { ...args, children: _jsxs(Stack, { spacing: spacing.xs, children: [_jsx(NavItem, { label: 'Dashboard', active: true }), _jsx(NavItem, { label: 'Campaigns' }), _jsx(NavItem, { label: 'Devices' }), _jsx(NavItem, { label: 'Ad Preferences' }), _jsx(NavItem, { label: 'Reports' })] }) })),
+};
+// ─── Sections with grow (pushes footer to bottom) ────────────────────────────
+export const WithSections = {
+    render: () => (_jsxs(Navbar, { width: { base: 240 }, height: 600, children: [_jsx(Navbar.Section, { children: _jsx(Title, { variant: 'cardHeader', mb: spacing.md, children: "Taiv" }) }), _jsx(Divider, { my: spacing.md }), _jsx(Navbar.Section, { grow: true, children: _jsxs(Stack, { spacing: spacing.xs, children: [_jsx(NavItem, { label: 'Dashboard', active: true }), _jsx(NavItem, { label: 'Campaigns' }), _jsx(NavItem, { label: 'Devices' }), _jsx(NavItem, { label: 'Ad Preferences' }), _jsx(NavItem, { label: 'Reports' })] }) }), _jsx(Divider, { my: spacing.md }), _jsx(Navbar.Section, { children: _jsxs(Stack, { spacing: spacing.xs, children: [_jsx(NavItem, { label: 'Settings' }), _jsx(NavItem, { label: 'Log out' })] }) })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Apply `grow` to the middle `Navbar.Section` so sibling sections pin to the top and bottom of the sidebar.',
+            },
+        },
+    },
+};
+// ─── Without border ──────────────────────────────────────────────────────────
+export const WithoutBorder = {
+    args: {
+        width: { base: 240 },
+        height: 600,
+        withBorder: false,
+    },
+    render: (args) => (_jsx(Navbar, { ...args, children: _jsxs(Stack, { spacing: spacing.xs, children: [_jsx(NavItem, { label: 'Dashboard', active: true }), _jsx(NavItem, { label: 'Campaigns' }), _jsx(NavItem, { label: 'Devices' })] }) })),
+};

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

@@ -0,0 +1,13 @@
+import { type ContainerProps } from '@mantine/core';
+export interface PageProps extends Omit<ContainerProps, 'size'> {
+    /** Max content width on desktop. Default '1300px'. */
+    maxWidth?: string | number;
+}
+/**
+ * Standard page wrapper. Caps content width on desktop and tightens
+ * horizontal padding on mobile so narrow viewports don't waste real estate.
+ * Pages should render `<Page><Stack>...</Stack></Page>` as their outermost
+ * structural element.
+ */
+export declare const Page: ({ children, maxWidth, ...props }: PageProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAC7D,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,IAAI,GAAI,kCAIlB,SAAS,4CAYX,CAAC"}

package/dist/components/Layout/Page/Page.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from '@mantine/core';
+import { useMobile } from '../../../hooks';
+/**
+ * Standard page wrapper. Caps content width on desktop and tightens
+ * horizontal padding on mobile so narrow viewports don't waste real estate.
+ * Pages should render `<Page><Stack>...</Stack></Page>` as their outermost
+ * structural element.
+ */
+export const Page = ({ children, maxWidth = '1300px', ...props }) => {
+    const isMobile = useMobile();
+    return (_jsx(Container, { my: '24px', px: isMobile ? '12px' : '32px', size: maxWidth, ...props, children: children }));
+};

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

@@ -0,0 +1,23 @@
+import { type PaginationProps as MantinePaginationProps } from '@mantine/core';
+export interface PaginationProps extends Omit<MantinePaginationProps, 'size' | 'radius'> {
+    /** Total number of pages */
+    total: number;
+    /** Active page (controlled) */
+    value?: number;
+    /** Default active page (uncontrolled) */
+    defaultValue?: number;
+    /** Called when page changes */
+    onChange?: (page: number) => void;
+    /** Render first/last edge controls */
+    withEdges?: boolean;
+    /** Render previous/next controls */
+    withControls?: boolean;
+    /** Sibling pages shown around the active page */
+    siblings?: number;
+    /** Pages shown at each boundary */
+    boundaries?: number;
+    /** Visual size of pagination items */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Pagination: ({ size, styles, withControls, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,eAAe,IAAI,sBAAsB,EAC/C,MAAM,eAAe,CAAC;AAMvB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,MAAM,GAAG,QAAQ,CAAC;IACvD,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAQD,eAAO,MAAM,UAAU,GAAI,0CAKxB,eAAe,4CA6CjB,CAAC"}

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination as MantinePagination, } from '@mantine/core';
+import { colors } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const SIZE_PX = {
+    lg: 36,
+    md: 32,
+    sm: 28,
+};
+export const Pagination = ({ size = 'md', styles, withControls = true, ...props }) => {
+    const itemSize = SIZE_PX[size];
+    const style = {
+        control: {
+            ...fontBase,
+            '&:hover:not([data-disabled])': {
+                backgroundColor: colors.neutral[25],
+                color: colors.primary[200],
+            },
+            '&[data-active]': {
+                backgroundColor: colors.primary[200],
+                borderColor: colors.primary[200],
+                color: 'white',
+            },
+            '&[data-active]:hover': {
+                backgroundColor: colors.primary[200],
+                borderColor: colors.primary[200],
+                color: 'white',
+            },
+            '&[data-disabled]': {
+                cursor: 'not-allowed',
+                opacity: 0.5,
+            },
+            backgroundColor: 'transparent',
+            border: `1px solid ${colors.neutral[50]}`,
+            borderRadius: '8px',
+            color: colors.neutral[300],
+            fontSize: '14px',
+            height: itemSize,
+            lineHeight: '20px',
+            minWidth: itemSize,
+        },
+        dots: {
+            ...fontBase,
+            color: colors.neutral[200],
+        },
+        root: {
+            gap: spacing.xs,
+        },
+        ...styles,
+    };
+    return (_jsx(MantinePagination, { styles: style, withControls: withControls, ...props }));
+};

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

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

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/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) => import("react/jsx-runtime").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"}