@sqlrooms/ui 0.5.1 → 0.7.0

package/README.md

@@ -0,0 +1,111 @@
+A comprehensive UI component library for SQLRooms applications, built on top of React and Tailwind CSS. This package provides a collection of reusable, accessible, and customizable components designed to create consistent and beautiful user interfaces.
+
+This library is based on [shadcn/ui](https://ui.shadcn.com/), a collection of beautifully designed, accessible components that can be copied and pasted into your apps.
+
+## Features
+
+- 🎨 **Modern Design**: Clean, modern components following design best practices
+- ♿ **Accessibility**: Components built with accessibility in mind
+- 🌗 **Theming**: Support for light and dark modes
+- 📱 **Responsive**: Mobile-friendly components that adapt to different screen sizes
+- 🧩 **Composable**: Components designed to work together seamlessly
+- 🔄 **React Hooks**: Useful hooks for common UI patterns
+
+## Installation
+
+```bash
+npm install @sqlrooms/ui
+# or
+yarn add @sqlrooms/ui
+```
+
+## Basic Usage
+
+### Using Components
+
+```tsx
+import {Button, Card, Input} from '@sqlrooms/ui';
+
+function LoginForm() {
+  return (
+    <Card className="p-6 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Login</h2>
+      <form>
+        <div className="space-y-4">
+          <div>
+            <Input type="email" placeholder="Email" required />
+          </div>
+          <div>
+            <Input type="password" placeholder="Password" required />
+          </div>
+          <Button type="submit" className="w-full">
+            Sign In
+          </Button>
+        </div>
+      </form>
+    </Card>
+  );
+}
+```
+
+### Using Hooks
+
+```tsx
+import {useToast, useDisclosure} from '@sqlrooms/ui';
+
+function MyComponent() {
+  const {toast} = useToast();
+  const {isOpen, onOpen, onClose} = useDisclosure();
+
+  const handleAction = () => {
+    // Perform some action
+    toast({
+      title: 'Success!',
+      description: 'Your action was completed successfully.',
+      variant: 'success',
+    });
+    onClose();
+  };
+
+  return (
+    <div>
+      <Button onClick={onOpen}>Open Dialog</Button>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm Action</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to perform this action?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleAction}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+```
+
+## Available Components
+
+- **Layout**: Card, Resizable, Tabs
+- **Forms**: Button, Checkbox, Input, Select, Slider, Switch, Textarea
+- **Feedback**: Alert, Progress, Spinner, Toast
+- **Navigation**: Accordion, Breadcrumb, Dropdown Menu
+- **Overlay**: Dialog, Popover, Tooltip
+- **Data Display**: Badge, Table
+- **Utility**: Error Boundary, Theme Switch
+
+## Advanced Features
+
+- **Component Composition**: Build complex UIs by composing simple components
+- **Form Handling**: Integrated with React Hook Form for easy form management
+- **Custom Styling**: Extend components with custom styles using Tailwind CSS
+- **Animation**: Smooth transitions and animations for interactive elements
+
+For more information, visit the SQLRooms documentation.

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * {@include ../README.md}
+ * @packageDocumentation
+ */
 export * from './components/accordion';
 export * from './components/alert';
 export * from './components/badge';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -1,3 +1,7 @@
+/**
+ * {@include ../README.md}
+ * @packageDocumentation
+ */
 export * from './components/accordion';
 export * from './components/alert';
 export * from './components/badge';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './components/accordion';\nexport * from './components/alert';\nexport * from './components/badge';\nexport * from './components/breadcrumb';\nexport * from './components/button';\nexport * from './components/card';\nexport * from './components/checkbox';\nexport * from './components/dialog';\nexport * from './components/dropdown-menu';\nexport * from './components/editable-text';\nexport * from './components/error-boundary';\nexport * from './components/error-pane';\nexport * from './components/form';\nexport * from './components/input';\nexport * from './components/label';\nexport * from './components/popover';\nexport * from './components/progress';\nexport * from './components/progress-modal';\nexport * from './components/resizable';\nexport * from './components/select';\nexport * from './components/skeleton';\nexport * from './components/skeleton-pane';\nexport * from './components/spinner';\nexport * from './components/spinner-pane';\nexport * from './components/switch';\nexport * from './components/theme-switch';\nexport * from './components/table';\nexport * from './components/tabs';\nexport * from './components/textarea';\nexport * from './components/toast';\nexport * from './components/toaster';\nexport * from './components/tooltip';\nexport * from './hooks/use-toast';\nexport * from './hooks/useDisclosure';\nexport * from './hooks/useAspectRatioDimensions';\nexport * from './hooks/useRelativeCoordinates';\nexport * from './lib/utils';\nexport * from './tailwind-preset';\nexport * from './theme/theme-provider';\nexport * from './components/slider';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport * from './components/accordion';\nexport * from './components/alert';\nexport * from './components/badge';\nexport * from './components/breadcrumb';\nexport * from './components/button';\nexport * from './components/card';\nexport * from './components/checkbox';\nexport * from './components/dialog';\nexport * from './components/dropdown-menu';\nexport * from './components/editable-text';\nexport * from './components/error-boundary';\nexport * from './components/error-pane';\nexport * from './components/form';\nexport * from './components/input';\nexport * from './components/label';\nexport * from './components/popover';\nexport * from './components/progress';\nexport * from './components/progress-modal';\nexport * from './components/resizable';\nexport * from './components/select';\nexport * from './components/skeleton';\nexport * from './components/skeleton-pane';\nexport * from './components/spinner';\nexport * from './components/spinner-pane';\nexport * from './components/switch';\nexport * from './components/theme-switch';\nexport * from './components/table';\nexport * from './components/tabs';\nexport * from './components/textarea';\nexport * from './components/toast';\nexport * from './components/toaster';\nexport * from './components/tooltip';\nexport * from './hooks/use-toast';\nexport * from './hooks/useDisclosure';\nexport * from './hooks/useAspectRatioDimensions';\nexport * from './hooks/useRelativeCoordinates';\nexport * from './lib/utils';\nexport * from './tailwind-preset';\nexport * from './theme/theme-provider';\nexport * from './components/slider';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/ui",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "type": "module",
   "private": false,
   "author": "Ilya Boyandin <ilya@boyandin.me>",
@@ -62,5 +62,5 @@
     "autoprefixer": "^10.4.20",
     "tailwindcss": "^3.4.17"
   },
-  "gitHead": "5e41362f1552ee1f8a661c487fe7cdb606cc6d23"
+  "gitHead": "8be65f051c588d3a963f721322429657913b6c63"
 }

package/dist/theme/ThemeProvider.d.ts

@@ -1,14 +0,0 @@
-type Theme = 'dark' | 'light' | 'system';
-type ThemeProviderProps = {
-    children: React.ReactNode;
-    defaultTheme?: Theme;
-    storageKey?: string;
-};
-type ThemeProviderState = {
-    theme: Theme;
-    setTheme: (theme: Theme) => void;
-};
-export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare const useTheme: () => ThemeProviderState;
-export {};
-//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AASF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAAgC,EAChC,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAoCpB;AAED,eAAO,MAAM,QAAQ,0BAOpB,CAAC"}

package/dist/theme/ThemeProvider.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from 'react';
-const initialState = {
-    theme: 'system',
-    setTheme: () => null,
-};
-const ThemeProviderContext = createContext(initialState);
-export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'sqlrooms-ui-theme', ...props }) {
-    const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
-    useEffect(() => {
-        const root = window.document.documentElement;
-        root.classList.remove('light', 'dark');
-        if (theme === 'system') {
-            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
-                .matches
-                ? 'dark'
-                : 'light';
-            root.classList.add(systemTheme);
-            return;
-        }
-        root.classList.add(theme);
-    }, [theme]);
-    const value = {
-        theme,
-        setTheme: (theme) => {
-            localStorage.setItem(storageKey, theme);
-            setTheme(theme);
-        },
-    };
-    return (_jsx(ThemeProviderContext.Provider, { ...props, value: value, children: children }));
-}
-export const useTheme = () => {
-    const context = useContext(ThemeProviderContext);
-    if (context === undefined)
-        throw new Error('useTheme must be used within a ThemeProvider');
-    return context;
-};
-//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAerE,MAAM,YAAY,GAAuB;IACvC,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;CACrB,CAAC;AAEF,MAAM,oBAAoB,GAAG,aAAa,CAAqB,YAAY,CAAC,CAAC;AAE7E,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GAAG,QAAQ,EACvB,UAAU,GAAG,mBAAmB,EAChC,GAAG,KAAK,EACW;IACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,GAAG,EAAE,CAAE,YAAY,CAAC,OAAO,CAAC,UAAU,CAAW,IAAI,YAAY,CAClE,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;QAE7C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAEvC,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;iBAClE,OAAO;gBACR,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,OAAO,CAAC;YAEZ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,KAAK,GAAG;QACZ,KAAK;QACL,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;YACzB,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;YACxC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;KACF,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,YACnD,QAAQ,GACqB,CACjC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,SAAS;QACvB,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAElE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}