@taiv/ui 1.3.2 → 1.4.0

package/dist/components/Inputs/TextInputs/TextInput/TextInput.stories.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextInput } from './TextInput';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/TextInputs/TextInput',
+    component: TextInput,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the text input size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Text input label',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Error message',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        required: {
+            control: { type: 'boolean' },
+            description: 'Required field',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Full width of container',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search'],
+            description: 'Input type',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'text'" },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(event: React.ChangeEvent<HTMLInputElement>) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Full Name',
+        placeholder: 'Enter your full name',
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        type: 'text',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<TextInput
+  label="Full Name"
+  placeholder="Enter your full name"
+  value={name}
+  onChange={(event) => setName(event.currentTarget.value)}
+/>`,
+            },
+        },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Basic Text Input" }), _jsx(TextInput, { label: "With Placeholder", placeholder: "Enter your text here" }), _jsx(TextInput, { label: "With Description", description: "This is a description" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { size: "sm", label: "Small Input", placeholder: "Small text input" }), _jsx(TextInput, { size: "md", label: "Medium Input (Default)", placeholder: "Medium text input" }), _jsx(TextInput, { size: "lg", label: "Large Input", placeholder: "Large text input" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<TextInput size="sm" label="Small Input" placeholder="Small text input" />
+<TextInput size="lg" label="Large Input" placeholder="Large text input" />`,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Normal Text Input" }), _jsx(TextInput, { label: "Disabled Text Input", disabled: true }), _jsx(TextInput, { label: "Required Text Input", required: true }), _jsx(TextInput, { label: "Text Input with Description", description: "Please enter your information" }), _jsx(TextInput, { label: "Text Input with Error", error: "This field is required" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const AdditionalFunctionality = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Email Address", description: "We'll never share your email", placeholder: "your@email.com", type: "email" }), _jsx(TextInput, { label: "Password", type: "password", placeholder: "Enter password", error: "Password must be at least 8 characters" }), _jsx(TextInput, { label: "Custom Width", placeholder: "Custom width input", width: "300px" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<TextInput
+  label="Email Address"
+  description="We'll never share your email"
+  placeholder="your@email.com"
+  type="email"
+  value={email}
+  onChange={handleEmailChange}
+/>
+
+<TextInput
+  label="Password"
+  type="password"
+  placeholder="Enter password"
+  error="Password must be at least 8 characters"
+  value={password}
+  onChange={handlePasswordChange}
+/>`,
+            },
+        },
+    },
+};
+export const CustomStyling = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Custom Styled Text Input", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(TextInput, { label: "Another Custom Style", styles: {
+                    input: {
+                        backgroundColor: '#f8f9fa',
+                        borderColor: '#4CAF50',
+                        '&:focus': {
+                            borderColor: '#4CAF50',
+                            boxShadow: '0 0 0 2px rgba(76, 175, 80, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SimpleGridProps } from '@mantine/core';
+interface AutoGridProps extends SimpleGridProps {
+    children: React.ReactNode;
+}
+declare const AutoGrid: ({ children, ...props }: AutoGridProps) => import("react/jsx-runtime").JSX.Element;
+export { AutoGrid };
+//# sourceMappingURL=AutoGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/AutoGrid/AutoGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,UAAU,aAAc,SAAQ,eAAe;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAEtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Layout/AutoGrid/AutoGrid.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SimpleGrid } from '@mantine/core';
+const AutoGrid = ({ children, ...props }) => {
+    return _jsx(SimpleGrid, { ...props, children: children });
+};
+export { AutoGrid };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,QAAS,SAAQ,eAAe;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,GAAG,GAAI,sCAAsC,QAAQ,4CAE1D,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/Layout/Box/Box.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box as MantineBox } from '@mantine/core';
+const Box = ({ width, styles, onClick, ...props }) => {
+    return _jsx(MantineBox, { w: width, styles: styles, onClick: onClick, ...props });
+};
+export { Box };

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

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

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

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

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from './Box';
+import { Group } from '../Group/Group';
+const meta = {
+    title: 'Components/Layout/Box',
+    component: Box,
+    argTypes: {
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler function',
+            table: {
+                type: { summary: '() => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Box lets you add inline styles with sx prop',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<Box
+  sx={(theme) => ({
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    textAlign: 'center',
+    padding: theme.spacing.xl,
+    borderRadius: theme.radius.md,
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  })}
+>
+  Box lets you add inline styles with sx prop
+</Box>`,
+            },
+        },
+    },
+};
+export const Alignment = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Box, { sx: (theme) => ({
+                    backgroundColor: theme.colors.blue[0],
+                    padding: theme.spacing.md,
+                    borderRadius: theme.radius.md,
+                    textAlign: 'left',
+                    border: `1px solid ${theme.colors.blue[3]}`,
+                }), children: "Left Aligned" }), _jsx(Box, { sx: (theme) => ({
+                    backgroundColor: theme.colors.green[0],
+                    padding: theme.spacing.md,
+                    borderRadius: theme.radius.md,
+                    textAlign: 'center',
+                    border: `1px solid ${theme.colors.green[3]}`,
+                }), children: "Center Aligned" }), _jsx(Box, { sx: (theme) => ({
+                    backgroundColor: theme.colors.orange[0],
+                    padding: theme.spacing.md,
+                    borderRadius: theme.radius.md,
+                    textAlign: 'right',
+                    border: `1px solid ${theme.colors.orange[3]}`,
+                }), children: "Right Aligned" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Box
+  sx={(theme) => ({
+    textAlign: 'center',
+    padding: theme.spacing.md,
+    backgroundColor: theme.colors.blue[0],
+  })}
+>
+  Center Aligned Content
+</Box>`,
+            },
+        },
+    },
+};
+export const CustomStyling = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Box, { sx: (theme) => ({
+                    backgroundColor: theme.colors.red[0],
+                    color: theme.colors.red[9],
+                    padding: theme.spacing.lg,
+                    borderRadius: theme.radius.lg,
+                    border: `2px solid ${theme.colors.red[3]}`,
+                    boxShadow: theme.shadows.md,
+                    '&:hover': {
+                        transform: 'translateY(-2px)',
+                        boxShadow: theme.shadows.lg,
+                    },
+                }), children: "Custom Styled Box" }), _jsx(Box, { sx: (theme) => ({
+                    background: `linear-gradient(45deg, ${theme.colors.violet[3]}, ${theme.colors.pink[3]})`,
+                    color: 'white',
+                    padding: theme.spacing.xl,
+                    borderRadius: theme.radius.xl,
+                    textAlign: 'center',
+                    fontWeight: 600,
+                    boxShadow: theme.shadows.xl,
+                }), children: "Gradient Box" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CardProps as MantineCardProps } from '@mantine/core';
+export interface CardProps extends MantineCardProps {
+    children: React.ReactNode;
+    animate?: boolean;
+}
+export declare const Card: ({ children, animate, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +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,iCAAyC,SAAS,4CAiBtE,CAAC"}

package/dist/components/Layout/Card/Card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as MantineCard } from '@mantine/core';
+export const Card = ({ children, animate = false, ...props }) => {
+    const hoverAnimation = {
+        style: { transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out' },
+        onMouseEnter: (e) => {
+            e.currentTarget.style.transform = 'translateY(-5px)';
+            e.currentTarget.style.boxShadow = '0px 2px 8px 0px rgba(0, 0, 0, 0.05)';
+        },
+        onMouseLeave: (e) => {
+            e.currentTarget.style.transform = 'translateY(0)';
+            e.currentTarget.style.boxShadow = 'none';
+        },
+    };
+    return (_jsx(MantineCard, { p: "1.8rem", radius: "20px", withBorder: true, ...(animate ? hoverAnimation : {}), ...props, children: children }));
+};

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

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

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

@@ -0,0 +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;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,6BAA6B,WAAW,4CAEvD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Layout/Center/Center.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Center as MantineCenter } from '@mantine/core';
+const Center = ({ width, styles, ...props }) => {
+    return _jsx(MantineCenter, { w: width, styles: styles, ...props });
+};
+export { Center };

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+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 });
+};
+export { Divider };

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

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

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

@@ -0,0 +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"}

package/dist/components/Layout/Frame/Frame.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '../Stack/Stack';
+import { Title } from '../../Typography/Title';
+const Frame = ({ title, subtitle, children, width, styles }) => {
+    return (_jsxs(Stack, { mt: "1.25rem", width: width || '100%', gap: "0", ...styles, children: [_jsxs(Stack, { mb: "1.25rem", gap: "0", children: [_jsx(Title, { variant: "sectionHeader", children: title }), subtitle && _jsx(Title, { variant: "sectionSubheader", children: subtitle })] }), children] }));
+};
+export { Frame };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+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) & {
+    Col: React.ForwardRefExoticComponent<import("@mantine/core").ColProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { Grid };
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,UAAU,SAAU,SAAQ,gBAAgB;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,QAAA,MAAM,IAAI,4BAJqC,SAAS;;CAMtD,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Layout/Grid/Grid.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid as MantineGrid } from '@mantine/core';
+const GridComponent = ({ children, ...props }) => {
+    return _jsx(MantineGrid, { ...props, children: children });
+};
+const Grid = Object.assign(GridComponent, {
+    Col: MantineGrid.Col,
+});
+export { Grid };

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

@@ -0,0 +1,10 @@
+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;
+}
+declare const Group: ({ width, gap, styles, ...props }: GroupProps) => import("react/jsx-runtime").JSX.Element;
+export { Group };
+//# sourceMappingURL=Group.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Layout/Group/Group.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group as MantineGroup } from '@mantine/core';
+const Group = ({ width, gap, styles, ...props }) => {
+    return _jsx(MantineGroup, { w: width, spacing: gap, styles: styles, ...props });
+};
+export { Group };

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

@@ -0,0 +1,8 @@
+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;
+export { Loader };
+//# sourceMappingURL=Loader.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,6 @@
+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 });
+};
+export { Loader };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CardProps as MantineCardProps } from '@mantine/core';
+import { colors } from '../../../constants/colors';
+export interface SectionCardProps extends Omit<MantineCardProps, 'children'> {
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    color?: keyof typeof colors;
+}
+export declare const SectionCard: ({ title, subtitle, children, color, ...props }: SectionCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SectionCard.d.ts.map

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

@@ -0,0 +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,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAInD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,GAAI,gDAA4D,gBAAgB,4CAsBvG,CAAC"}

package/dist/components/Layout/SectionCard/SectionCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card as MantineCard } from '@mantine/core';
+import { Stack } from '../Stack/Stack';
+import { Title } from '../../Typography/Title';
+import { Box } from '../Box/Box';
+export const SectionCard = ({ title, subtitle, children, color = 'primary', ...props }) => {
+    return (_jsxs(MantineCard, { radius: "20px", shadow: "lg", withBorder: true, padding: 0, ...props, children: [_jsx(Box, { sx: {
+                    // background: `linear-gradient(to right, ${colors[color][300]}, ${colors[color][200]})`,
+                    backgroundColor: 'white',
+                    padding: '1.6rem 2rem 0 2rem',
+                    borderRadius: '20px 20px 0 0',
+                }, children: _jsxs(Stack, { gap: "0.25rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle })] }) }), _jsx(Box, { sx: { padding: '2rem 3.2rem 3.2rem 3.2rem' }, children: children })] }));
+};

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

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

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

@@ -0,0 +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"}

package/dist/components/Layout/Stack/Stack.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack as MantineStack } from '@mantine/core';
+const Stack = ({ width, gap, styles, ...props }) => {
+    return _jsx(MantineStack, { w: width, spacing: gap, styles: styles, ...props });
+};
+export { Stack };

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

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