doom-design-system 0.1.10 → 0.1.12

package/dist/DesignSystemProvider.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import './styles/globals.css';
-import { ThemeProvider } from './styles/themes';
+import { ThemeProvider } from './styles/themes/index.js';
 export function DesignSystemProvider({ children, initialTheme = 'default', withBody = false, className = '', fontClassName = '' }) {
     const content = (_jsx(ThemeProvider, { initialTheme: initialTheme, children: children }));
     const combinedClassName = `${fontClassName} ${className}`.trim();

package/dist/components/Accordion/index.js

@@ -1 +1 @@
-export { Accordion, AccordionItem } from './Accordion';
+export { Accordion, AccordionItem } from './Accordion.js';

package/dist/components/ActionRow/ActionRow.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from '../Text/Text';
-import { Flex } from '../Layout/Layout';
+import { Text } from '../Text/Text.js';
+import { Flex } from '../Layout/Layout.js';
 import { ChevronRight } from 'lucide-react';
 import clsx from 'clsx';
 import styles from './ActionRow.module.css';

package/dist/components/ActionRow/index.js

@@ -1 +1 @@
-export * from './ActionRow';
+export * from './ActionRow.js';

package/dist/components/Alert/index.js

@@ -1 +1 @@
-export { Alert } from './Alert';
+export { Alert } from './Alert.js';

package/dist/components/Avatar/index.js

@@ -1 +1 @@
-export { Avatar } from './Avatar';
+export { Avatar } from './Avatar.js';

package/dist/components/Badge/index.js

@@ -1 +1 @@
-export * from './Badge';
+export * from './Badge.js';

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Link } from '../Link/Link';
+import { Link } from '../Link/Link.js';
 import styles from './Breadcrumbs.module.css';
 export function Breadcrumbs({ children, className }) {
     return (_jsx("nav", { "aria-label": "breadcrumb", className: clsx(styles.nav, className), children: _jsx("ol", { className: styles.list, children: children }) }));

package/dist/components/Breadcrumbs/index.js

@@ -1 +1 @@
-export { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';
+export { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs.js';

package/dist/components/Button/Button.d.ts

@@ -4,6 +4,7 @@ type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    loading?: boolean;
 }
-export declare function Button({ children, variant, size, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ children, variant, size, loading, className, disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button/Button.js

@@ -10,11 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
+import { Spinner } from '../Spinner/index.js';
 import styles from './Button.module.css';
 export function Button(_a) {
-    var { children, variant = 'primary', size = 'md', className } = _a, props = __rest(_a, ["children", "variant", "size", "className"]);
-    const buttonClass = clsx(styles.button, styles[variant], styles[size], className);
-    return (_jsx("button", Object.assign({ className: buttonClass }, props, { children: children })));
+    var { children, variant = 'primary', size = 'md', loading = false, className, disabled } = _a, props = __rest(_a, ["children", "variant", "size", "loading", "className", "disabled"]);
+    const buttonClass = clsx(styles.button, styles[variant], styles[size], loading && styles.loading, className);
+    return (_jsxs("button", Object.assign({ className: buttonClass, disabled: disabled || loading }, props, { children: [loading && (_jsx(Spinner, { size: "sm", className: styles.spinnerIcon })), children] })));
 }

package/dist/components/Button/Button.module.css

@@ -41,7 +41,6 @@
 
 /* Variants */
 .primary {
-  /* Contrast Override */
   --btn-focus-border: var(--card-border);
   --btn-focus-shadow: #000000;
   background-color: var(--primary);
@@ -52,7 +51,6 @@
 }
 
 .secondary {
-  /* Contrast Override */
   --btn-focus-border: var(--card-border);
   --btn-focus-shadow: #000000;
   background-color: var(--secondary);
@@ -63,7 +61,6 @@
 }
 
 .success {
-  /* Contrast Override */
   --btn-focus-border: var(--card-border);
   --btn-focus-shadow: #000000;
   background-color: var(--success);
@@ -110,3 +107,14 @@
   padding: 1rem 2rem;
   font-size: var(--text-lg);
 }
+
+/* Loading State */
+.loading {
+  cursor: wait;
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.spinnerIcon {
+  margin-right: 0.5rem;
+}

package/dist/components/Button/index.js

@@ -1 +1 @@
-export * from './Button';
+export * from './Button.js';

package/dist/components/Card/index.js

@@ -1 +1 @@
-export * from './Card';
+export * from './Card.js';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import clsx from 'clsx';
+import { Check } from 'lucide-react';
+import { Label } from '../Label/index.js';
+import styles from './Checkbox.module.css';
+export const Checkbox = forwardRef((_a, ref) => {
+    var { className, label, error, disabled, checked, defaultChecked, onChange, id: propsId } = _a, props = __rest(_a, ["className", "label", "error", "disabled", "checked", "defaultChecked", "onChange", "id"]);
+    const generatedId = useId();
+    const id = propsId || generatedId;
+    return (_jsxs("div", { className: clsx(styles.checkboxWrapper, disabled && styles.disabled, className), children: [_jsx("input", Object.assign({ id: id, type: "checkbox", className: styles.checkboxInput, ref: ref, disabled: disabled, checked: checked, defaultChecked: defaultChecked, onChange: onChange }, props)), _jsx("label", { htmlFor: id, className: clsx(styles.checkboxDisplay), "aria-hidden": "true", children: _jsx(Check, { className: styles.icon }) }), label && (_jsx(Label, { htmlFor: id, className: styles.labelOverride, children: label }))] }));
+});

package/dist/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,57 @@
+.checkboxWrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  user-select: none;
+}
+.checkboxWrapper.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.checkboxInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+.checkboxInput:focus-visible + .checkboxDisplay:focus, .checkboxInput:focus-visible + .checkboxDisplay:focus-visible, .checkboxInput:focus-visible + .checkboxDisplay[aria-expanded=true] {
+  outline: none;
+  transform: translate(-2px, -2px);
+  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  border-color: var(--primary);
+}
+.checkboxInput:focus-visible + .checkboxDisplay {
+  outline: 2px solid var(--primary);
+}
+
+.checkboxDisplay {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: var(--card-bg);
+  color: transparent;
+  border: 3px solid var(--muted-foreground);
+  border-radius: 4px;
+  transition: all 0.1s ease;
+}
+.checkboxInput:checked + .checkboxDisplay {
+  background-color: var(--primary);
+  border-color: var(--card-border);
+  color: var(--primary-foreground);
+}
+
+.icon {
+  width: 80%;
+  height: 80%;
+  stroke-width: 3.5px;
+}
+
+.labelOverride {
+  cursor: pointer;
+  margin-left: var(--spacing-xs);
+}

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/components/Checkbox/index.js

@@ -0,0 +1 @@
+export * from './Checkbox.js';

package/dist/components/Drawer/Drawer.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import React from "react";
 interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
-    side?: 'left' | 'right';
+    side?: "left" | "right";
     children: React.ReactNode;
     footer?: React.ReactNode;
     className?: string;
 }
-export declare function Drawer({ isOpen, onClose, title, side, children, footer, className }: DrawerProps): React.ReactPortal | null;
+export declare function Drawer({ isOpen, onClose, title, side, children, footer, className, }: DrawerProps): React.ReactPortal | null;
 export {};

package/dist/components/Drawer/Drawer.js

@@ -1,35 +1,35 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
-import { Button } from '../Button/Button';
-import styles from './Drawer.module.css';
-import { useEffect, useState } from 'react';
-export function Drawer({ isOpen, onClose, title, side = 'right', children, footer, className }) {
+import clsx from "clsx";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { Button } from "../Button/Button.js";
+import styles from "./Drawer.module.css";
+import { useEffect, useState } from "react";
+export function Drawer({ isOpen, onClose, title, side = "right", children, footer, className, }) {
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
         if (isOpen) {
-            document.body.style.overflow = 'hidden';
+            document.body.style.overflow = "hidden";
         }
         else {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         }
         return () => {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         };
     }, [isOpen]);
     useEffect(() => {
         const handleEsc = (e) => {
-            if (e.key === 'Escape')
+            if (e.key === "Escape")
                 onClose();
         };
         if (isOpen)
-            window.addEventListener('keydown', handleEsc);
-        return () => window.removeEventListener('keydown', handleEsc);
+            window.addEventListener("keydown", handleEsc);
+        return () => window.removeEventListener("keydown", handleEsc);
     }, [isOpen, onClose]);
-    if (!mounted)
+    if (!mounted || !isOpen)
         return null;
     return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.open), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], isOpen && styles.open, className), role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: styles.header, children: [_jsx("h2", { className: styles.title, children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
 }

package/dist/components/Drawer/index.js

@@ -1 +1 @@
-export { Drawer } from './Drawer';
+export { Drawer } from './Drawer.js';

package/dist/components/Dropdown/Dropdown.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Button } from '../Button/Button';
-import { Popover } from '../Popover/Popover';
+import { Button } from '../Button/Button.js';
+import { Popover } from '../Popover/Popover.js';
 import styles from './Dropdown.module.css';
 import { useState } from 'react';
 export function Dropdown({ triggerLabel, items, variant = 'primary', className }) {

package/dist/components/Dropdown/index.js

@@ -1 +1 @@
-export * from './Dropdown';
+export * from './Dropdown.js';

package/dist/components/Form/Form.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Label } from '../Label/Label';
+import { Label } from '../Label/Label.js';
 import styles from './Form.module.css';
 export function Form(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);

package/dist/components/Form/Form.module.css

@@ -10,6 +10,7 @@
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
+  align-items: flex-start;
 }
 
 .message {

package/dist/components/Form/index.js

@@ -1 +1 @@
-export * from './Form';
+export * from './Form.js';

package/dist/components/Input/Input.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import clsx from 'clsx';
-import { Label } from '../Label/Label';
+import { Label } from '../Label/Label.js';
 import styles from './Input.module.css';
 export function Input(_a) {
     var { label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value, id, required } = _a, props = __rest(_a, ["label", "error", "helperText", "startAdornment", "endAdornment", "style", "className", "format", "validate", "onBlur", "onFocus", "value", "id", "required"]);

package/dist/components/Input/index.js

@@ -1 +1 @@
-export * from './Input';
+export * from './Input.js';

package/dist/components/Label/index.js

@@ -1 +1 @@
-export * from './Label';
+export * from './Label.js';

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

@@ -1,17 +1,27 @@
-import React from 'react';
-interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    columns?: string;
-    gap?: string;
+import React, { ElementType } from 'react';
+interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    as?: ElementType;
 }
-export declare function Grid({ children, columns, gap, className, style, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
-interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    direction?: 'row' | 'column';
-    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+export interface GridProps extends LayoutProps {
+    columns?: string | number;
+    gap?: string | number;
+}
+export declare function Grid({ children, columns, gap, className, style, as: Component, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export interface FlexProps extends LayoutProps {
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
     align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-    gap?: string;
-    wrap?: boolean;
+    gap?: string | number;
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+}
+export declare function Flex({ children, direction, justify, align, gap, wrap, className, style, as: Component, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+export interface StackProps extends Omit<FlexProps, 'direction'> {
+    direction?: 'column' | 'column-reverse' | 'row' | 'row-reverse';
+}
+export declare function Stack({ children, direction, gap, align, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export interface ContainerProps extends LayoutProps {
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
 }
-export declare function Flex({ children, direction, justify, align, gap, wrap, className, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+export declare function Container({ children, maxWidth, className, as: Component, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layout/Layout.js

@@ -11,12 +11,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
 import styles from './Layout.module.css';
 export function Grid(_a) {
-    var { children, columns = '1fr', gap = '1rem', className, style } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style"]);
-    return (_jsx("div", Object.assign({ className: `${styles.grid} ${className || ''}`, style: Object.assign({ gridTemplateColumns: columns, gap }, style) }, props, { children: children })));
+    var { children, columns = '1fr', gap = '1rem', className, style, as: Component = 'div' } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style", "as"]);
+    const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
+    return (_jsx(Component, Object.assign({ className: clsx(styles.grid, className), style: Object.assign({ gridTemplateColumns,
+            gap }, style) }, props, { children: children })));
 }
 export function Flex(_a) {
-    var { children, direction = 'row', justify = 'flex-start', align = 'stretch', gap = '0', wrap = false, className, style } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style"]);
-    return (_jsx("div", Object.assign({ className: `${styles.flex} ${className || ''}`, style: Object.assign({ flexDirection: direction, justifyContent: justify, alignItems: align, gap, flexWrap: wrap ? 'wrap' : 'nowrap' }, style) }, props, { children: children })));
+    var { children, direction = 'row', justify = 'flex-start', align = 'stretch', gap = '0', wrap = false, className, style, as: Component = 'div' } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style", "as"]);
+    const flexWrap = typeof wrap === 'boolean'
+        ? (wrap ? 'wrap' : 'nowrap')
+        : wrap;
+    return (_jsx(Component, Object.assign({ className: clsx(styles.flex, className), style: Object.assign({ flexDirection: direction, justifyContent: justify, alignItems: align, gap,
+            flexWrap }, style) }, props, { children: children })));
+}
+export function Stack(_a) {
+    var { children, direction = 'column', gap = '1rem', align = 'stretch' } = _a, props = __rest(_a, ["children", "direction", "gap", "align"]);
+    return (_jsx(Flex, Object.assign({ direction: direction, gap: gap, align: align }, props, { children: children })));
+}
+export function Container(_a) {
+    var { children, maxWidth = 'xl', className, as: Component = 'div' } = _a, props = __rest(_a, ["children", "maxWidth", "className", "as"]);
+    return (_jsx(Component, Object.assign({ className: clsx(styles.container, styles[maxWidth], className) }, props, { children: children })));
 }

package/dist/components/Layout/Layout.module.css

@@ -5,3 +5,26 @@
 .flex {
   display: flex;
 }
+
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+.container.sm {
+  max-width: 640px;
+}
+.container.md {
+  max-width: 768px;
+}
+.container.lg {
+  max-width: 1024px;
+}
+.container.xl {
+  max-width: 1280px;
+}
+.container.fluid {
+  max-width: 100%;
+}

package/dist/components/Layout/index.js

@@ -1 +1 @@
-export * from './Layout';
+export * from './Layout.js';

package/dist/components/Link/index.js

@@ -1 +1 @@
-export * from './Link';
+export * from './Link.js';

package/dist/components/Modal/Modal.js

@@ -4,9 +4,9 @@ import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import clsx from 'clsx';
-import { Card } from '../Card/Card';
-import { Button } from '../Button/Button';
-import { Flex } from '../Layout/Layout';
+import { Card } from '../Card/Card.js';
+import { Button } from '../Button/Button.js';
+import { Flex } from '../Layout/Layout.js';
 import styles from './Modal.module.css';
 const ModalContext = React.createContext({ onClose: () => { } });
 export function ModalHeader({ children, className }) {

package/dist/components/Modal/index.js

@@ -1 +1 @@
-export * from './Modal';
+export * from './Modal.js';

package/dist/components/Page/index.js

@@ -1 +1 @@
-export * from './Page';
+export * from './Page.js';

package/dist/components/Pagination/index.js

@@ -1 +1 @@
-export { Pagination } from './Pagination';
+export { Pagination } from './Pagination.js';

package/dist/components/Popover/index.js

@@ -1 +1 @@
-export * from './Popover';
+export * from './Popover.js';

package/dist/components/ProgressBar/index.js

@@ -1 +1 @@
-export * from './ProgressBar';
+export * from './ProgressBar.js';

package/dist/components/RadioGroup/index.js

@@ -1 +1 @@
-export { RadioGroup, RadioGroupItem } from './RadioGroup';
+export { RadioGroup, RadioGroupItem } from './RadioGroup.js';

package/dist/components/Select/Select.js

@@ -13,8 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useId } from 'react';
 import clsx from 'clsx';
-import { Text } from '../Text/Text';
-import { Popover } from '../Popover/Popover';
+import { Text } from '../Text/Text.js';
+import { Popover } from '../Popover/Popover.js';
 import { Check, ChevronDown } from 'lucide-react';
 import styles from './Select.module.css';
 export function Select(_a) {

package/dist/components/Select/index.js

@@ -1 +1 @@
-export * from './Select';
+export * from './Select.js';

package/dist/components/Sheet/Sheet.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
-import { Button } from '../Button/Button';
-import { Flex } from '../Layout/Layout';
+import { Button } from '../Button/Button.js';
+import { Flex } from '../Layout/Layout.js';
 import styles from './Sheet.module.css';
 import { X } from 'lucide-react';
 export function Sheet({ isOpen, onClose, title, children, className }) {

package/dist/components/Sheet/Sheet.module.css

@@ -18,8 +18,8 @@
   bottom: 0;
   left: 0;
   right: 0;
-  max-height: 96vh;
-  min-height: 50vh;
+  max-height: 65vh;
+  min-height: 45vh;
   background-color: var(--card-bg);
   border-top: var(--border-width) solid var(--card-border);
   border-left: var(--border-width) solid var(--card-border);

package/dist/components/Sheet/index.js

@@ -1 +1 @@
-export { Sheet } from './Sheet';
+export { Sheet } from './Sheet.js';

package/dist/components/Skeleton/index.js

@@ -1 +1 @@
-export * from './Skeleton';
+export * from './Skeleton.js';

package/dist/components/Slider/index.js

@@ -1 +1 @@
-export { Slider } from './Slider';
+export { Slider } from './Slider.js';

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LoaderCircle } from 'lucide-react';
+export interface SpinnerProps extends React.ComponentProps<typeof LoaderCircle> {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+export declare function Spinner({ size, className, strokeWidth, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,20 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { LoaderCircle } from 'lucide-react';
+import styles from './Spinner.module.css';
+export function Spinner(_a) {
+    var { size = 'md', className, strokeWidth = 2 } = _a, props = __rest(_a, ["size", "className", "strokeWidth"]);
+    return (_jsx(LoaderCircle, Object.assign({ className: clsx(styles.spinner, styles[size], className), role: "status", "aria-label": "Loading", strokeWidth: strokeWidth }, props)));
+}