@wheelhouse/ui 0.2.8 → 0.2.10

package/dist/components/button/button.d.ts

@@ -10,11 +10,11 @@ declare const buttonVariantStyles: {
     readonly link: "text-primary underline-offset-4 hover:underline [&_[data-slot=button-loading-indicator]]:text-primary";
 };
 declare const buttonSizeStyles: {
-    readonly default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-base sm:text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
+    readonly default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
     readonly xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-    readonly sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-base sm:text-sm in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5";
+    readonly sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-sm in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5";
     readonly lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] text-base has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5";
-    readonly icon: "size-8";
+    readonly icon: "size-8 text-sm";
     readonly 'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
     readonly 'icon-sm': "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
     readonly 'icon-lg': "size-9";

package/dist/components/button/button.js

@@ -13,11 +13,11 @@ const buttonVariantStyles = {
     link: 'text-primary underline-offset-4 hover:underline [&_[data-slot=button-loading-indicator]]:text-primary',
 };
 const buttonSizeStyles = {
-    default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-base sm:text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+    default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
     xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-    sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-base sm:text-sm in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
+    sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-sm in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
     lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] text-base has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-    icon: 'size-8',
+    icon: 'size-8 text-sm',
     'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
     'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
     'icon-lg': 'size-9',

package/dist/components/input/input.js

@@ -7,8 +7,8 @@ import { cn } from '../../lib/utils';
 const inputVariants = cva('flex w-full min-w-0 rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] outline-none group-has-disabled/field:opacity-50 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40', {
     variants: {
         size: {
-            sm: 'h-7 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-base sm:text-sm',
-            default: 'h-8 px-[calc(--spacing(3)-1px)] text-base sm:text-sm',
+            sm: 'h-7 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-sm',
+            default: 'h-8 px-[calc(--spacing(3)-1px)] text-sm',
             lg: 'h-9 px-[calc(--spacing(3.5)-1px)] text-base',
         },
     },

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useIsMobile } from './use-mobile';
+export { useMediaQuery, type MediaQueryInput } from './use-media-query';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export { useIsMobile } from './use-mobile';
+export { useMediaQuery } from './use-media-query';

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,19 @@
+/** Matches Tailwind v4 default breakpoints (see tailwindcss theme). */
+declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+type BreakpointQuery = Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}`;
+export type MediaQueryInput = {
+    min?: Breakpoint | number;
+    max?: Breakpoint | number;
+    /** Touch-like input (finger). Use `fine` for mouse/trackpad. */
+    pointer?: 'coarse' | 'fine';
+};
+export declare function useMediaQuery(query: BreakpointQuery | MediaQueryInput | (string & {})): boolean;
+export {};
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist/hooks/use-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../src/hooks/use-media-query.ts"],"names":[],"mappings":"AAIA,uEAAuE;AACvE,QAAA,MAAM,WAAW;;;;;;CAMP,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAE3C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,UAAU,EAAE,GAAG,GAAG,UAAU,QAAQ,UAAU,EAAE,CAAC;AAE5F,MAAM,MAAM,eAAe,GAAG;IAC1B,GAAG,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1B,gEAAgE;IAChE,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC/B,CAAC;AAyCF,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,GAAG,eAAe,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,OAAO,CAmB/F"}

package/dist/hooks/use-media-query.js

@@ -0,0 +1,67 @@
+'use client';
+import { useCallback, useSyncExternalStore } from 'react';
+/** Matches Tailwind v4 default breakpoints (see tailwindcss theme). */
+const BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+function resolveMin(value) {
+    const px = typeof value === 'number' ? value : BREAKPOINTS[value];
+    return `(min-width: ${px}px)`;
+}
+function resolveMax(value) {
+    const px = typeof value === 'number' ? value : BREAKPOINTS[value];
+    return `(max-width: ${px - 1}px)`;
+}
+function parseQuery(query) {
+    if (typeof query !== 'string') {
+        const parts = [];
+        if (query.min != null)
+            parts.push(resolveMin(query.min));
+        if (query.max != null)
+            parts.push(resolveMax(query.max));
+        if (query.pointer === 'coarse')
+            parts.push('(pointer: coarse)');
+        if (query.pointer === 'fine')
+            parts.push('(pointer: fine)');
+        if (parts.length === 0)
+            return '(min-width: 0px)';
+        return parts.join(' and ');
+    }
+    if (query.startsWith('('))
+        return query;
+    const parts = [];
+    for (const segment of query.split(':')) {
+        if (segment.startsWith('max-')) {
+            const bp = segment.slice(4);
+            if (bp in BREAKPOINTS)
+                parts.push(resolveMax(bp));
+        }
+        else if (segment in BREAKPOINTS) {
+            parts.push(resolveMin(segment));
+        }
+    }
+    return parts.length > 0 ? parts.join(' and ') : query;
+}
+function getServerSnapshot() {
+    return false;
+}
+export function useMediaQuery(query) {
+    const mediaQuery = parseQuery(query);
+    const subscribe = useCallback((callback) => {
+        if (typeof window === 'undefined')
+            return () => { };
+        const mql = window.matchMedia(mediaQuery);
+        mql.addEventListener('change', callback);
+        return () => mql.removeEventListener('change', callback);
+    }, [mediaQuery]);
+    const getSnapshot = useCallback(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(mediaQuery).matches;
+    }, [mediaQuery]);
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/dist/hooks/use-mobile.d.ts

@@ -1,2 +1,3 @@
+/** True below the Tailwind `md` breakpoint (max-width 767px). */
 export declare function useIsMobile(): boolean;
 //# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAc1B"}
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA,iEAAiE;AACjE,wBAAgB,WAAW,IAAI,OAAO,CAErC"}

package/dist/hooks/use-mobile.js

@@ -1,15 +1,6 @@
-import * as React from 'react';
-const MOBILE_BREAKPOINT = 768;
+'use client';
+import { useMediaQuery } from './use-media-query';
+/** True below the Tailwind `md` breakpoint (max-width 767px). */
 export function useIsMobile() {
-    const [isMobile, setIsMobile] = React.useState(undefined);
-    React.useEffect(() => {
-        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = () => {
-            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        };
-        mql.addEventListener('change', onChange);
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        return () => mql.removeEventListener('change', onChange);
-    }, []);
-    return !!isMobile;
+    return useMediaQuery('max-md');
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './blocks';
+export * from './hooks';
 export { cn } from './lib/utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './blocks';
+export * from './hooks';
 export { cn } from './lib/utils';