@sqlrooms/ui 0.4.0 → 0.4.1

package/dist/components/theme-switch.d.ts

@@ -1,5 +1,39 @@
 import { FC } from 'react';
+/**
+ * A theme toggle switch component that allows users to switch between light and dark themes.
+ *
+ * This component provides a visually appealing switch with sun/moon icons that animate smoothly
+ * during theme transitions. It integrates with the theme context to manage theme state.
+ *
+ * Features:
+ * - Smooth icon animations
+ * - Accessible keyboard navigation
+ * - Focus and hover states
+ * - Customizable via className prop
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ThemeSwitch />
+ *
+ * // With custom styling
+ * <ThemeSwitch className="my-custom-class" />
+ *
+ * // Within a theme provider
+ * import { ThemeProvider } from '../theme/theme-provider';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <ThemeSwitch />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const ThemeSwitch: FC<{
+    /** Optional CSS class name for styling the switch container */
     className?: string;
 }>;
 //# sourceMappingURL=theme-switch.d.ts.map

package/dist/components/theme-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-switch.d.ts","sourceRoot":"","sources":["../../src/components/theme-switch.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAEzB,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAwBhD,CAAC"}
+{"version":3,"file":"theme-switch.d.ts","sourceRoot":"","sources":["../../src/components/theme-switch.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAwBA,CAAC"}

package/dist/components/theme-switch.js

@@ -3,6 +3,39 @@ import { useTheme } from '../theme/theme-provider';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { SunIcon, MoonIcon } from 'lucide-react';
 import { cn } from '../lib/utils';
+/**
+ * A theme toggle switch component that allows users to switch between light and dark themes.
+ *
+ * This component provides a visually appealing switch with sun/moon icons that animate smoothly
+ * during theme transitions. It integrates with the theme context to manage theme state.
+ *
+ * Features:
+ * - Smooth icon animations
+ * - Accessible keyboard navigation
+ * - Focus and hover states
+ * - Customizable via className prop
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ThemeSwitch />
+ *
+ * // With custom styling
+ * <ThemeSwitch className="my-custom-class" />
+ *
+ * // Within a theme provider
+ * import { ThemeProvider } from '../theme/theme-provider';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <ThemeSwitch />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
 export const ThemeSwitch = ({ className }) => {
     const { theme, setTheme } = useTheme();
     return (_jsx(SwitchPrimitives.Root, { className: cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary/20 data-[state=unchecked]:bg-input', className), checked: theme === 'dark', onCheckedChange: (checked) => {

package/dist/components/theme-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-switch.js","sourceRoot":"","sources":["../../src/components/theme-switch.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AACjD,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC,MAAM,CAAC,MAAM,WAAW,GAA6B,CAAC,EAAC,SAAS,EAAC,EAAE,EAAE;IACnE,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAC,GAAG,QAAQ,EAAE,CAAC;IAErC,OAAO,CACL,KAAC,gBAAgB,CAAC,IAAI,IACpB,SAAS,EAAE,EAAE,CACX,gYAAgY,EAChY,SAAS,CACV,EACD,OAAO,EAAE,KAAK,KAAK,MAAM,EACzB,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE;YAC3B,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC,YAED,MAAC,gBAAgB,CAAC,KAAK,IACrB,SAAS,EAAE,EAAE,CACX,wNAAwN,CACzN,aAED,KAAC,OAAO,IAAC,SAAS,EAAC,8FAA8F,GAAG,EACpH,KAAC,QAAQ,IAAC,SAAS,EAAC,sGAAsG,GAAG,IACtG,GACH,CACzB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"theme-switch.js","sourceRoot":"","sources":["../../src/components/theme-switch.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AACjD,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,WAAW,GAGnB,CAAC,EAAC,SAAS,EAAC,EAAE,EAAE;IACnB,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAC,GAAG,QAAQ,EAAE,CAAC;IAErC,OAAO,CACL,KAAC,gBAAgB,CAAC,IAAI,IACpB,SAAS,EAAE,EAAE,CACX,gYAAgY,EAChY,SAAS,CACV,EACD,OAAO,EAAE,KAAK,KAAK,MAAM,EACzB,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE;YAC3B,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC,YAED,MAAC,gBAAgB,CAAC,KAAK,IACrB,SAAS,EAAE,EAAE,CACX,wNAAwN,CACzN,aAED,KAAC,OAAO,IAAC,SAAS,EAAC,8FAA8F,GAAG,EACpH,KAAC,QAAQ,IAAC,SAAS,EAAC,sGAAsG,GAAG,IACtG,GACH,CACzB,CAAC;AACJ,CAAC,CAAC"}

package/dist/hooks/useAspectRatioDimensions.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Represents the dimensions of an element
+ * @interface Dimensions
+ * @property {number} width - The width in pixels
+ * @property {number} height - The height in pixels
+ */
+export interface Dimensions {
+    width: number;
+    height: number;
+}
+/**
+ * Props for the useAspectRatioDimensions hook
+ * @interface UseAspectRatioDimensionsProps
+ * @property {number | 'auto'} width - The explicitly provided width, or 'auto' for container-based width
+ * @property {number | 'auto'} height - The explicitly provided height, or 'auto' for aspect ratio-based height
+ * @property {number} aspectRatio - The desired width-to-height ratio when dimensions are auto-calculated
+ * @property {React.RefObject<HTMLElement>} containerRef - Reference to the container element
+ */
+export interface UseAspectRatioDimensionsProps {
+    width: number | 'auto';
+    height: number | 'auto';
+    aspectRatio: number;
+    containerRef: React.RefObject<HTMLElement>;
+}
+/**
+ * A hook that calculates element dimensions based on provided values and container size
+ *
+ * This hook handles various combinations of width/height specifications:
+ * - If both width and height are provided, uses those exact dimensions
+ * - If only width is provided, calculates height using the aspect ratio
+ * - If only height is provided, calculates width using the aspect ratio
+ * - If both are 'auto', uses container width and calculates height using the aspect ratio
+ *
+ * @param {UseAspectRatioDimensionsProps} props - The input parameters for dimension calculation
+ * @returns {Dimensions} The calculated width and height
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const {width, height} = useAspectRatioDimensions({
+ *   width: 'auto',
+ *   height: 'auto',
+ *   aspectRatio: 16/9,
+ *   containerRef
+ * });
+ * // Returns dimensions based on container size
+ * ```
+ */
+export declare function useAspectRatioDimensions({ width, height, aspectRatio, containerRef, }: UseAspectRatioDimensionsProps): Dimensions;
+//# sourceMappingURL=useAspectRatioDimensions.d.ts.map

package/dist/hooks/useAspectRatioDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAspectRatioDimensions.d.ts","sourceRoot":"","sources":["../../src/hooks/useAspectRatioDimensions.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACb,EAAE,6BAA6B,GAAG,UAAU,CAoB5C"}

package/dist/hooks/useAspectRatioDimensions.js

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { useResizeObserver } from 'usehooks-ts';
+/**
+ * A hook that calculates element dimensions based on provided values and container size
+ *
+ * This hook handles various combinations of width/height specifications:
+ * - If both width and height are provided, uses those exact dimensions
+ * - If only width is provided, calculates height using the aspect ratio
+ * - If only height is provided, calculates width using the aspect ratio
+ * - If both are 'auto', uses container width and calculates height using the aspect ratio
+ *
+ * @param {UseAspectRatioDimensionsProps} props - The input parameters for dimension calculation
+ * @returns {Dimensions} The calculated width and height
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const {width, height} = useAspectRatioDimensions({
+ *   width: 'auto',
+ *   height: 'auto',
+ *   aspectRatio: 16/9,
+ *   containerRef
+ * });
+ * // Returns dimensions based on container size
+ * ```
+ */
+export function useAspectRatioDimensions({ width, height, aspectRatio, containerRef, }) {
+    const { width: containerWidth = 0 } = useResizeObserver({
+        ref: containerRef,
+        box: 'border-box',
+    });
+    return useMemo(() => {
+        if (width !== 'auto' && height !== 'auto') {
+            return { width, height };
+        }
+        if (width !== 'auto') {
+            return { width, height: width / aspectRatio };
+        }
+        if (height !== 'auto') {
+            return { width: height * aspectRatio, height };
+        }
+        const finalWidth = containerWidth;
+        const finalHeight = finalWidth / aspectRatio;
+        return { width: finalWidth, height: finalHeight };
+    }, [containerWidth, aspectRatio, width, height]);
+}
+//# sourceMappingURL=useAspectRatioDimensions.js.map

package/dist/hooks/useAspectRatioDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAspectRatioDimensions.js","sourceRoot":"","sources":["../../src/hooks/useAspectRatioDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AA4B9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACkB;IAC9B,MAAM,EAAC,KAAK,EAAE,cAAc,GAAG,CAAC,EAAC,GAAG,iBAAiB,CAAC;QACpD,GAAG,EAAE,YAAY;QACjB,GAAG,EAAE,YAAY;KAClB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YAC1C,OAAO,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;QACzB,CAAC;QACD,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YACrB,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,WAAW,EAAC,CAAC;QAC9C,CAAC;QACD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,EAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,MAAM,EAAC,CAAC;QAC/C,CAAC;QACD,MAAM,UAAU,GAAG,cAAc,CAAC;QAClC,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;QAC7C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAC,CAAC;IAClD,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AACnD,CAAC"}

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export * from './components/toaster';
 export * from './components/tooltip';
 export * from './hooks/use-toast';
 export * from './hooks/useDisclosure';
+export * from './hooks/useAspectRatioDimensions';
 export * from './lib/utils';
 export * from './tailwind-preset';
 export * from './theme/theme-provider';

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,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC"}
+{"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,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC"}

package/dist/index.js

@@ -32,6 +32,7 @@ export * from './components/toaster';
 export * from './components/tooltip';
 export * from './hooks/use-toast';
 export * from './hooks/useDisclosure';
+export * from './hooks/useAspectRatioDimensions';
 export * from './lib/utils';
 export * from './tailwind-preset';
 export * from './theme/theme-provider';

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,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC"}
+{"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,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC"}

package/dist/theme/theme-provider.d.ts

@@ -1,14 +1,100 @@
+/**
+ * Available theme options
+ * @typedef {'dark' | 'light' | 'system'} Theme
+ */
 type Theme = 'dark' | 'light' | 'system';
+/**
+ * Props for the ThemeProvider component
+ * @interface ThemeProviderProps
+ * @property {React.ReactNode} children - Child components that will have access to the theme context
+ * @property {Theme} [defaultTheme='system'] - Initial theme to use if none is stored
+ * @property {string} [storageKey='sqlrooms-ui-theme'] - Local storage key to persist theme preference
+ */
 type ThemeProviderProps = {
     children: React.ReactNode;
     defaultTheme?: Theme;
     storageKey?: string;
 };
+/**
+ * Theme context state
+ * @interface ThemeProviderState
+ * @property {Theme} theme - Current active theme
+ * @property {(theme: Theme) => void} setTheme - Function to update the current theme
+ */
 type ThemeProviderState = {
     theme: Theme;
     setTheme: (theme: Theme) => void;
 };
+/**
+ * ThemeProvider component that manages and provides theme context to its children.
+ * Handles system theme detection and persistence of theme preference.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default settings
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // Custom default theme and storage key
+ * function App() {
+ *   return (
+ *     <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the current theme and theme setter function.
+ * Must be used within a ThemeProvider component.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from '@sqlrooms/ui';
+ *
+ * function ThemeToggle() {
+ *   const { theme, setTheme } = useTheme();
+ *   const isDark = theme === 'dark';
+ *
+ *   return (
+ *     <Button
+ *       variant="outline"
+ *       size="sm"
+ *       onClick={() => setTheme(isDark ? 'light' : 'dark')}
+ *     >
+ *       {isDark ? '☀️ Light' : '🌙 Dark'}
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { ThemeSwitch } from '@sqlrooms/ui';
+ *
+ * function AppHeader() {
+ *   return (
+ *     <nav className="border-b">
+ *       <div className="flex h-16 items-center px-4">
+ *         <div className="ml-auto">
+ *           <ThemeSwitch />
+ *         </div>
+ *       </div>
+ *     </nav>
+ *   );
+ * }
+ * ```
+ *
+ * @returns {ThemeProviderState} Object containing current theme and setTheme function
+ * @throws {Error} If used outside of a ThemeProvider
+ */
 export declare const useTheme: () => ThemeProviderState;
 export {};
 //# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.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"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzC;;;;;;GAMG;AACH,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;;;;;GAKG;AACH,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AASF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAAgC,EAChC,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAoCpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,QAAQ,0BAOpB,CAAC"}

package/dist/theme/theme-provider.js

@@ -5,6 +5,31 @@ const initialState = {
     setTheme: () => null,
 };
 const ThemeProviderContext = createContext(initialState);
+/**
+ * ThemeProvider component that manages and provides theme context to its children.
+ * Handles system theme detection and persistence of theme preference.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default settings
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // Custom default theme and storage key
+ * function App() {
+ *   return (
+ *     <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
 export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'sqlrooms-ui-theme', ...props }) {
     const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
     useEffect(() => {
@@ -29,6 +54,50 @@ export function ThemeProvider({ children, defaultTheme = 'system', storageKey =
     };
     return (_jsx(ThemeProviderContext.Provider, { ...props, value: value, children: children }));
 }
+/**
+ * Hook to access the current theme and theme setter function.
+ * Must be used within a ThemeProvider component.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from '@sqlrooms/ui';
+ *
+ * function ThemeToggle() {
+ *   const { theme, setTheme } = useTheme();
+ *   const isDark = theme === 'dark';
+ *
+ *   return (
+ *     <Button
+ *       variant="outline"
+ *       size="sm"
+ *       onClick={() => setTheme(isDark ? 'light' : 'dark')}
+ *     >
+ *       {isDark ? '☀️ Light' : '🌙 Dark'}
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { ThemeSwitch } from '@sqlrooms/ui';
+ *
+ * function AppHeader() {
+ *   return (
+ *     <nav className="border-b">
+ *       <div className="flex h-16 items-center px-4">
+ *         <div className="ml-auto">
+ *           <ThemeSwitch />
+ *         </div>
+ *       </div>
+ *     </nav>
+ *   );
+ * }
+ * ```
+ *
+ * @returns {ThemeProviderState} Object containing current theme and setTheme function
+ * @throws {Error} If used outside of a ThemeProvider
+ */
 export const useTheme = () => {
     const context = useContext(ThemeProviderContext);
     if (context === undefined)

package/dist/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.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"}
+{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAgCrE,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "private": false,
   "author": "Ilya Boyandin <ilya@boyandin.me>",
@@ -54,11 +54,12 @@
     "react-resizable-panels": "^2.1.7",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.1",
     "zod": "^3.24.1"
   },
   "peerDependencies": {
     "autoprefixer": "^10.4.20",
     "tailwindcss": "^3.4.17"
   },
-  "gitHead": "fbc92d77cf3a70bdbef67bb0d7cf9342ed3e81a1"
+  "gitHead": "4260241d97423fd1839746ebb7980d01eaffde97"
 }