@taiv/ui 1.15.0 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,4CAAkE,SAAS,4CAiB/F,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAOnF,MAAM,WAAW,SACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,gBAAgB,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,4CAAkE,SAAS,sBAiB/F,CAAC"}

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import { CenterProps as MantineCenterProps } from '@mantine/core';
 interface CenterProps extends MantineCenterProps {
     width?: string | number;
     height?: string | number;
 }
-declare const Center: ({ width, height, ...props }: CenterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Center: ({ width, height, ...props }: CenterProps) => React.JSX.Element;
 export { Center };
 //# sourceMappingURL=Center.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Center/Center.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,MAAM,GAAI,6BAA6B,WAAW,4CAEvD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Center/Center.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,MAAM,GAAI,6BAA6B,WAAW,sBAEvD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

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

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

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

package/dist/components/Layout/Container/Container.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Container/Container.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAwBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container } from './Container';
+import { Text } from '../../Typography/Text/Text';
+import { Stack } from '../Stack/Stack';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Layout/Container',
+    component: Container,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Page or section content constrained to the container max-width',
+            table: { type: { summary: 'ReactNode' } },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Max-width preset from the theme',
+            table: { type: { summary: 'MantineNumberSize' } },
+        },
+        fluid: {
+            control: { type: 'boolean' },
+            description: 'When true, the container grows to full width',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 'md',
+        fluid: false,
+        children: (_jsxs(Stack, { spacing: spacing.md, py: spacing.xl, children: [_jsx(Text, { weight: "semibold", children: "Centered content with a max width" }), _jsx(Text, { size: "sm", color: neutral[200], children: "Resize the preview to see horizontal padding and the container cap. Use the size control to change the breakpoint preset." })] })),
+        sx: {
+            borderLeft: `1px dashed ${neutral[100]}`,
+            borderRight: `1px dashed ${neutral[100]}`,
+        },
+    },
+};
+export const Fluid = {
+    args: {
+        fluid: true,
+        children: (_jsxs(Stack, { spacing: spacing.sm, py: spacing.lg, children: [_jsx(Text, { weight: "semibold", children: "Fluid container" }), _jsx(Text, { size: "sm", color: neutral[200], children: "With fluid set, content can use the full width of the viewport (aside from default horizontal padding)." })] })),
+        sx: {
+            backgroundColor: neutral[25],
+        },
+    },
+};

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

@@ -0,0 +1,34 @@
+import type React from 'react';
+export type DataStateVariant = 'loading' | 'empty';
+export interface DataStateProps {
+    variant: DataStateVariant;
+    /** Primary message. Defaults to `'Loading...'` / `'No results'`. */
+    message?: React.ReactNode;
+    /**
+     * Optional action (e.g. a "Add item" button) rendered below the message
+     * for the `empty` variant. Ignored for `loading`.
+     */
+    action?: React.ReactNode;
+    /** Loader size when `variant='loading'`. Default `'xl'`. */
+    loaderSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Vertical padding applied to the outer `Center`. Default `spacing.xxl`. */
+    py?: string | number;
+    /** Horizontal padding applied to the outer `Center`. */
+    px?: string | number;
+    /** Minimum height of the outer `Center`. Useful inside table placeholders. */
+    minHeight?: string | number;
+}
+/**
+ * Canonical placeholder used in the slot where data *would* render. Pattern:
+ *
+ * ```tsx
+ * if (isLoading) return <DataState variant='loading' />;
+ * if (items.length === 0) return <DataState variant='empty' />;
+ * return <ActualContent />;
+ * ```
+ *
+ * Wraps the existing `Center` + `Stack` + `Loader` + `Text` composition used
+ * across Taiv screens so feature code doesn't have to re-assemble it.
+ */
+export declare const DataState: ({ variant, message, action, loaderSize, py, px, minHeight, }: DataStateProps) => React.JSX.Element;
+//# sourceMappingURL=DataState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataState.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/DataState/DataState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9C,6EAA6E;IAC7E,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,8DAQvB,cAAc,sBAahB,CAAC"}

package/dist/components/Layout/DataState/DataState.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { spacing } from '../../../constants/spacing';
+import { Text } from '../../Typography/Text/Text';
+import { Center } from '../Center/Center';
+import { Loader } from '../Loader/Loader';
+import { Stack } from '../Stack/Stack';
+/**
+ * Canonical placeholder used in the slot where data *would* render. Pattern:
+ *
+ * ```tsx
+ * if (isLoading) return <DataState variant='loading' />;
+ * if (items.length === 0) return <DataState variant='empty' />;
+ * return <ActualContent />;
+ * ```
+ *
+ * Wraps the existing `Center` + `Stack` + `Loader` + `Text` composition used
+ * across Taiv screens so feature code doesn't have to re-assemble it.
+ */
+export const DataState = ({ variant, message, action, loaderSize = 'xl', py = spacing.xxl, px, minHeight, }) => {
+    const resolvedMessage = message !== null && message !== void 0 ? message : (variant === 'loading' ? 'Loading...' : 'No results');
+    return (_jsx(Center, { mih: minHeight, px: px, py: py, children: _jsxs(Stack, { align: 'center', gap: spacing.sm, children: [variant === 'loading' ? _jsx(Loader, { size: loaderSize }) : null, _jsx(Text, { variant: 'subtle', children: resolvedMessage }), variant === 'empty' && action ? _jsx(Center, { children: action }) : null] }) }));
+};

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DataState } from './DataState';
+declare const meta: Meta<typeof DataState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Loading: Story;
+export declare const LoadingWithMessage: Story;
+export declare const Empty: Story;
+export declare const EmptyWithAction: Story;
+export declare const InTablePlaceholder: Story;
+//# sourceMappingURL=DataState.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataState.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/DataState/DataState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAYhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC"}

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconPlus } from '@tabler/icons-react';
+import { neutral } from '../../../constants/colors';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { DataState } from './DataState';
+const meta = {
+    component: DataState,
+    parameters: {
+        docs: {
+            description: {
+                component: "Placeholder for the slot where data would render. Use as an early return:\n\n```tsx\nif (isLoading) return <DataState variant='loading' />;\nif (items.length === 0) return <DataState variant='empty' />;\nreturn <ActualContent />;\n```",
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Layout/DataState',
+};
+export default meta;
+const FRAME = {
+    border: `1px solid ${neutral[50]}`,
+    borderRadius: 8,
+    width: 480,
+};
+export const Loading = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { variant: 'loading' }) })),
+};
+export const LoadingWithMessage = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { message: 'Loading devices...', variant: 'loading' }) })),
+};
+export const Empty = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { variant: 'empty' }) })),
+};
+export const EmptyWithAction = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { action: _jsx(Button, { leftIcon: _jsx(IconPlus, { size: 16 }), size: 'sm', children: "Add device" }), message: 'No devices found. Register a new device.', variant: 'empty' }) })),
+};
+export const InTablePlaceholder = {
+    render: () => (_jsx("div", { style: { ...FRAME, width: 640 }, children: _jsx(DataState, { minHeight: 320, variant: 'loading' }) })),
+};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,YAAY,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,UAAU,YAAa,SAAQ,mBAAmB;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,GAAI,oCAA2D,YAAY,4CAEvF,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA6B,YAAY,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,UAAU,YAAa,SAAQ,mBAAmB;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,GAAI,oCAAkD,YAAY,sBAI9E,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Layout/Divider/Divider.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Divider as MantineDivider } from '@mantine/core';
 import { neutral } from '../../../constants/colors';
-const Divider = ({ width = '100%', styles, color = neutral[50], ...props }) => {
-    return _jsx(MantineDivider, { color: color, w: width, styles: styles, ...props });
+const Divider = ({ width, styles, color = neutral[50], ...props }) => {
+    const isVertical = props.orientation === 'vertical';
+    const resolvedWidth = width !== null && width !== void 0 ? width : (isVertical ? undefined : '100%');
+    return _jsx(MantineDivider, { color: color, w: resolvedWidth, styles: styles, ...props });
 };
 export { Divider };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CSSObject } from '@mantine/core';
 import { ReactNode } from 'react';
 interface FrameProps {
@@ -7,6 +8,6 @@ interface FrameProps {
     width?: string | number;
     styles?: Record<string, CSSObject>;
 }
-declare const Frame: ({ title, subtitle, children, width, styles }: FrameProps) => import("react/jsx-runtime").JSX.Element;
+declare const Frame: ({ title, subtitle, children, width, styles }: FrameProps) => React.JSX.Element;
 export { Frame };
 //# sourceMappingURL=Frame.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Frame/Frame.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,KAAK,GAAI,8CAA8C,UAAU,4CAUtE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Frame/Frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,KAAK,GAAI,8CAA8C,UAAU,sBAUtE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -3,7 +3,7 @@ import { GridProps as MantineGridProps } from '@mantine/core';
 interface GridProps extends MantineGridProps {
     children: React.ReactNode;
 }
-declare const Grid: (({ children, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Grid: (({ children, ...props }: GridProps) => React.JSX.Element) & {
     Col: React.ForwardRefExoticComponent<import("@mantine/core").ColProps & React.RefAttributes<HTMLDivElement>>;
 };
 export { Grid };

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

@@ -1,10 +1,11 @@
+import React from 'react';
 import { GroupProps as MantineGroupProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 interface GroupProps extends MantineGroupProps {
     width?: string | number;
     styles?: Record<string, CSSObject>;
-    gap?: string;
+    gap?: string | number;
 }
-declare const Group: ({ width, gap, styles, ...props }: GroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const Group: ({ width, gap, styles, ...props }: GroupProps) => React.JSX.Element;
 export { Group };
 //# sourceMappingURL=Group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Group/Group.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,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,KAAK,GAAI,kCAAkC,UAAU,4CAE1D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Group/Group.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,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAGnC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,KAAK,GAAI,kCAAkC,UAAU,sBAE1D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import { LoaderProps as MantineLoaderProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 interface LoaderProps extends MantineLoaderProps {
     styles?: Record<string, CSSObject>;
 }
-declare const Loader: ({ styles, ...props }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Loader: ({ styles, color, ...props }: LoaderProps) => React.JSX.Element;
 export { Loader };
 //# sourceMappingURL=Loader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Loader/Loader.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,sBAAsB,WAAW,4CAEhD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,6BAAiD,WAAW,sBAE3E,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Layout/Loader/Loader.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Loader as MantineLoader } from '@mantine/core';
-const Loader = ({ styles, ...props }) => {
-    return _jsx(MantineLoader, { styles: styles, ...props });
+import { primary } from '../../../constants';
+const Loader = ({ styles, color = `${primary[200]}`, ...props }) => {
+    return _jsx(MantineLoader, { color: color, styles: styles, ...props });
 };
 export { Loader };

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) => React.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.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,gCAYX,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,24 @@
+import { type PaginationProps as MantinePaginationProps } from '@mantine/core';
+import React from 'react';
+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) => React.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;AACvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,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,sBA6CjB,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