@seekora-ai/ui-sdk-react 0.2.14 → 0.2.16

package/dist/utils/responsive.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Responsive utilities for adaptive layouts across all screen sizes
+ *
+ * Provides hooks and utilities for:
+ * - Responsive breakpoints
+ * - Responsive grid columns
+ * - Responsive spacing
+ * - Responsive font sizes
+ * - Touch target sizing
+ */
+/**
+ * Standard breakpoints (in pixels)
+ */
+export declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+    readonly xxl: 1400;
+};
+export type Breakpoint = keyof typeof BREAKPOINTS;
+export type BreakpointValue = typeof BREAKPOINTS[Breakpoint];
+/**
+ * Get current breakpoint based on window width
+ */
+export declare function getCurrentBreakpoint(width: number): Breakpoint;
+/**
+ * Hook to get current breakpoint
+ */
+export declare function useBreakpoint(): Breakpoint;
+/**
+ * Hook to check if current viewport matches breakpoint
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * Check if mobile viewport (< 768px)
+ */
+export declare function useIsMobile(): boolean;
+/**
+ * Check if tablet viewport (768px - 991px)
+ */
+export declare function useIsTablet(): boolean;
+/**
+ * Check if desktop viewport (>= 992px)
+ */
+export declare function useIsDesktop(): boolean;
+/**
+ * Get responsive grid columns based on breakpoint
+ */
+export declare function getResponsiveColumns(breakpoint: Breakpoint, defaultColumns?: number): number;
+/**
+ * Hook to get responsive grid columns
+ */
+export declare function useResponsiveColumns(defaultColumns?: number): number;
+/**
+ * Get responsive spacing value
+ */
+export declare function getResponsiveSpacing(breakpoint: Breakpoint, spacing: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+}): number;
+/**
+ * Get responsive font size
+ */
+export declare function getResponsiveFontSize(breakpoint: Breakpoint, sizes: {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+}): string;
+/**
+ * Minimum touch target size (WCAG AAA)
+ */
+export declare const MIN_TOUCH_TARGET = 44;
+/**
+ * Get touch target size based on device type
+ */
+export declare function getTouchTargetSize(isMobile: boolean, baseSize?: number): number;
+/**
+ * Hook to get responsive touch target size
+ */
+export declare function useTouchTargetSize(baseSize?: number): number;
+/**
+ * Responsive value helper - returns different values based on breakpoint
+ */
+export declare function useResponsiveValue<T>(values: Partial<Record<Breakpoint, T>> & {
+    default: T;
+}): T;
+/**
+ * Get responsive gap/padding for grids
+ */
+export declare function getResponsiveGap(breakpoint: Breakpoint, baseGap?: number): number;
+/**
+ * Hook to get responsive gap
+ */
+export declare function useResponsiveGap(baseGap?: number): number;
+/**
+ * Get responsive padding for containers
+ */
+export declare function getResponsivePadding(breakpoint: Breakpoint, basePadding?: number): number;
+/**
+ * Hook to get responsive padding
+ */
+export declare function useResponsivePadding(basePadding?: number): number;
+/**
+ * CSS media query strings for use in style objects
+ */
+export declare const MEDIA_QUERIES: {
+    readonly xs: `(max-width: ${number}px)`;
+    readonly sm: "(min-width: 576px)";
+    readonly md: "(min-width: 768px)";
+    readonly lg: "(min-width: 992px)";
+    readonly xl: "(min-width: 1200px)";
+    readonly xxl: "(min-width: 1400px)";
+    readonly mobile: `(max-width: ${number}px)`;
+    readonly tablet: `(min-width: 768px) and (max-width: ${number}px)`;
+    readonly desktop: "(min-width: 992px)";
+};
+/**
+ * Helper to generate responsive CSS with media queries
+ */
+export declare function responsiveStyle<T extends React.CSSProperties>(base: T, mobile?: Partial<T>, tablet?: Partial<T>, desktop?: Partial<T>): T;
+//# sourceMappingURL=responsive.d.ts.map

package/dist/utils/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/utils/responsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,OAAO,WAAW,CAAC,UAAU,CAAC,CAAC;AAE7D;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAO9D;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAiB1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAgBpD;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAEtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,EAAE,cAAc,GAAE,MAAU,GAAG,MAAM,CAiB/F;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,cAAc,GAAE,MAAU,GAAG,MAAM,CAGvE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACzF,MAAM,CAER;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACvF,MAAM,CAER;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAE,MAAW,GAAG,MAAM,CAEnF;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,GAAE,MAAW,GAAG,MAAM,CAGhE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,GACtD,CAAC,CAGH;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,GAAE,MAAW,GAAG,MAAM,CAerF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,MAAW,GAAG,MAAM,CAG7D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,MAAW,GAAG,MAAM,CAe7F;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,GAAE,MAAW,GAAG,MAAM,CAGrE;AAED;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAUhB,CAAC;AAEX;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,EAC3D,IAAI,EAAE,CAAC,EACP,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GACnB,CAAC,CAIH"}

package/dist/utils/responsive.js

@@ -0,0 +1,231 @@
+/**
+ * Responsive utilities for adaptive layouts across all screen sizes
+ *
+ * Provides hooks and utilities for:
+ * - Responsive breakpoints
+ * - Responsive grid columns
+ * - Responsive spacing
+ * - Responsive font sizes
+ * - Touch target sizing
+ */
+import { useState, useEffect } from 'react';
+/**
+ * Standard breakpoints (in pixels)
+ */
+export const BREAKPOINTS = {
+    xs: 0, // Extra small devices (portrait phones, < 576px)
+    sm: 576, // Small devices (landscape phones, ≥ 576px)
+    md: 768, // Medium devices (tablets, ≥ 768px)
+    lg: 992, // Large devices (desktops, ≥ 992px)
+    xl: 1200, // Extra large devices (large desktops, ≥ 1200px)
+    xxl: 1400, // Extra extra large devices (larger desktops, ≥ 1400px)
+};
+/**
+ * Get current breakpoint based on window width
+ */
+export function getCurrentBreakpoint(width) {
+    if (width >= BREAKPOINTS.xxl)
+        return 'xxl';
+    if (width >= BREAKPOINTS.xl)
+        return 'xl';
+    if (width >= BREAKPOINTS.lg)
+        return 'lg';
+    if (width >= BREAKPOINTS.md)
+        return 'md';
+    if (width >= BREAKPOINTS.sm)
+        return 'sm';
+    return 'xs';
+}
+/**
+ * Hook to get current breakpoint
+ */
+export function useBreakpoint() {
+    const [breakpoint, setBreakpoint] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'lg';
+        return getCurrentBreakpoint(window.innerWidth);
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            setBreakpoint(getCurrentBreakpoint(window.innerWidth));
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return breakpoint;
+}
+/**
+ * Hook to check if current viewport matches breakpoint
+ */
+export function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(query);
+        const handleChange = () => setMatches(mediaQuery.matches);
+        handleChange();
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [query]);
+    return matches;
+}
+/**
+ * Check if mobile viewport (< 768px)
+ */
+export function useIsMobile() {
+    return useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`);
+}
+/**
+ * Check if tablet viewport (768px - 991px)
+ */
+export function useIsTablet() {
+    return useMediaQuery(`(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`);
+}
+/**
+ * Check if desktop viewport (>= 992px)
+ */
+export function useIsDesktop() {
+    return useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`);
+}
+/**
+ * Get responsive grid columns based on breakpoint
+ */
+export function getResponsiveColumns(breakpoint, defaultColumns = 4) {
+    switch (breakpoint) {
+        case 'xs':
+            return Math.min(defaultColumns, 1); // 1 column on extra small
+        case 'sm':
+            return Math.min(defaultColumns, 2); // 2 columns on small
+        case 'md':
+            return Math.min(defaultColumns, 3); // 3 columns on medium
+        case 'lg':
+            return Math.min(defaultColumns, 4); // 4 columns on large
+        case 'xl':
+            return Math.min(defaultColumns, 5); // 5 columns on extra large
+        case 'xxl':
+            return defaultColumns; // Full columns on extra extra large
+        default:
+            return defaultColumns;
+    }
+}
+/**
+ * Hook to get responsive grid columns
+ */
+export function useResponsiveColumns(defaultColumns = 4) {
+    const breakpoint = useBreakpoint();
+    return getResponsiveColumns(breakpoint, defaultColumns);
+}
+/**
+ * Get responsive spacing value
+ */
+export function getResponsiveSpacing(breakpoint, spacing) {
+    return spacing[breakpoint] ?? spacing.md ?? spacing.sm ?? spacing.xs ?? 12;
+}
+/**
+ * Get responsive font size
+ */
+export function getResponsiveFontSize(breakpoint, sizes) {
+    return sizes[breakpoint] ?? sizes.md ?? sizes.sm ?? sizes.xs ?? '1rem';
+}
+/**
+ * Minimum touch target size (WCAG AAA)
+ */
+export const MIN_TOUCH_TARGET = 44; // 44x44px minimum for touch
+/**
+ * Get touch target size based on device type
+ */
+export function getTouchTargetSize(isMobile, baseSize = 32) {
+    return isMobile ? Math.max(MIN_TOUCH_TARGET, baseSize) : baseSize;
+}
+/**
+ * Hook to get responsive touch target size
+ */
+export function useTouchTargetSize(baseSize = 32) {
+    const isMobile = useIsMobile();
+    return getTouchTargetSize(isMobile, baseSize);
+}
+/**
+ * Responsive value helper - returns different values based on breakpoint
+ */
+export function useResponsiveValue(values) {
+    const breakpoint = useBreakpoint();
+    return values[breakpoint] ?? values.default;
+}
+/**
+ * Get responsive gap/padding for grids
+ */
+export function getResponsiveGap(breakpoint, baseGap = 12) {
+    switch (breakpoint) {
+        case 'xs':
+            return Math.max(4, baseGap * 0.5); // 50% on extra small
+        case 'sm':
+            return Math.max(6, baseGap * 0.75); // 75% on small
+        case 'md':
+        case 'lg':
+            return baseGap; // 100% on medium/large
+        case 'xl':
+        case 'xxl':
+            return baseGap * 1.25; // 125% on extra large
+        default:
+            return baseGap;
+    }
+}
+/**
+ * Hook to get responsive gap
+ */
+export function useResponsiveGap(baseGap = 12) {
+    const breakpoint = useBreakpoint();
+    return getResponsiveGap(breakpoint, baseGap);
+}
+/**
+ * Get responsive padding for containers
+ */
+export function getResponsivePadding(breakpoint, basePadding = 12) {
+    switch (breakpoint) {
+        case 'xs':
+            return Math.max(8, basePadding * 0.67); // ~67% on extra small
+        case 'sm':
+            return Math.max(10, basePadding * 0.83); // ~83% on small
+        case 'md':
+        case 'lg':
+            return basePadding; // 100% on medium/large
+        case 'xl':
+        case 'xxl':
+            return basePadding * 1.33; // ~133% on extra large
+        default:
+            return basePadding;
+    }
+}
+/**
+ * Hook to get responsive padding
+ */
+export function useResponsivePadding(basePadding = 12) {
+    const breakpoint = useBreakpoint();
+    return getResponsivePadding(breakpoint, basePadding);
+}
+/**
+ * CSS media query strings for use in style objects
+ */
+export const MEDIA_QUERIES = {
+    xs: `(max-width: ${BREAKPOINTS.sm - 1}px)`,
+    sm: `(min-width: ${BREAKPOINTS.sm}px)`,
+    md: `(min-width: ${BREAKPOINTS.md}px)`,
+    lg: `(min-width: ${BREAKPOINTS.lg}px)`,
+    xl: `(min-width: ${BREAKPOINTS.xl}px)`,
+    xxl: `(min-width: ${BREAKPOINTS.xxl}px)`,
+    mobile: `(max-width: ${BREAKPOINTS.md - 1}px)`,
+    tablet: `(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`,
+    desktop: `(min-width: ${BREAKPOINTS.lg}px)`,
+};
+/**
+ * Helper to generate responsive CSS with media queries
+ */
+export function responsiveStyle(base, mobile, tablet, desktop) {
+    // This returns base styles only - media queries should be handled via CSS-in-JS or CSS files
+    // For inline styles, use the hooks instead
+    return base;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seekora-ai/ui-sdk-react",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "Seekora UI Components SDK for React - Interactive UI components for search and query suggestions",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,13 +41,13 @@
   "author": "Seekora",
   "license": "MIT",
   "peerDependencies": {
-    "@seekora-ai/search-sdk": "^0.2.8",
+    "@seekora-ai/search-sdk": "^0.2.14",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@seekora-ai/ui-sdk-core": "^0.2.14",
-    "@seekora-ai/ui-sdk-types": "^0.2.14",
+    "@seekora-ai/ui-sdk-core": "^0.2.16",
+    "@seekora-ai/ui-sdk-types": "^0.2.16",
     "clsx": "^2.1.0"
   },
   "devDependencies": {
@@ -56,10 +56,10 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@seekora-ai/search-sdk": "^0.2.8",
+    "@seekora-ai/search-sdk": "^0.2.14",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
     "rollup": "^4.9.0",
     "rollup-plugin-dts": "^6.1.0",
     "tslib": "^2.8.1",

package/src/docsearch/docsearch.css

@@ -193,8 +193,6 @@
 .seekora-docsearch-input::placeholder { color: var(--seekora-docsearch-text-secondary); }
 .seekora-docsearch-clear { display: flex; align-items: center; justify-content: center; padding: var(--seekora-docsearch-spacing-xs); background: transparent; border: none; border-radius: var(--seekora-docsearch-radius-sm); color: var(--seekora-docsearch-text-muted); cursor: pointer; transition: all var(--seekora-docsearch-transition-fast) ease; flex-shrink: 0; }
 .seekora-docsearch-clear:hover { background: var(--seekora-docsearch-hit-bg-hover); color: var(--seekora-docsearch-text); }
-.seekora-docsearch-spinner { display: flex; align-items: center; justify-content: center; color: var(--seekora-docsearch-primary); animation: seekora-docsearch-spin 0.8s linear infinite; }
-@keyframes seekora-docsearch-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 
 .seekora-docsearch-results { padding: var(--seekora-docsearch-spacing-sm) 0; }
 .seekora-docsearch-results-list { list-style: none; margin: 0; padding: 0; }
@@ -215,9 +213,8 @@
 .seekora-docsearch-hit-action { display: flex; align-items: center; justify-content: center; color: var(--seekora-docsearch-text-secondary); flex-shrink: 0; opacity: 0; transition: opacity var(--seekora-docsearch-transition-fast) ease; }
 .seekora-docsearch-hit:hover .seekora-docsearch-hit-action, .seekora-docsearch-hit--selected .seekora-docsearch-hit-action { opacity: 1; }
 .seekora-docsearch-highlight mark { background: var(--seekora-docsearch-highlight-bg); color: var(--seekora-docsearch-highlight-text); font-weight: var(--seekora-docsearch-font-weight-semibold); padding: 0 2px; border-radius: 2px; }
-.seekora-docsearch-empty, .seekora-docsearch-loading, .seekora-docsearch-no-results, .seekora-docsearch-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--seekora-docsearch-spacing-xl); text-align: center; }
-.seekora-docsearch-empty-text, .seekora-docsearch-loading-text, .seekora-docsearch-no-results-text, .seekora-docsearch-error-text { color: var(--seekora-docsearch-text-muted); font-size: var(--seekora-docsearch-font-size-md); margin: 0; }
-.seekora-docsearch-loading-spinner { color: var(--seekora-docsearch-primary); margin-bottom: var(--seekora-docsearch-spacing-md); animation: seekora-docsearch-spin 0.8s linear infinite; }
+.seekora-docsearch-empty, .seekora-docsearch-no-results, .seekora-docsearch-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--seekora-docsearch-spacing-xl); text-align: center; }
+.seekora-docsearch-empty-text, .seekora-docsearch-no-results-text, .seekora-docsearch-error-text { color: var(--seekora-docsearch-text-muted); font-size: var(--seekora-docsearch-font-size-md); margin: 0; }
 .seekora-docsearch-error-text { color: #ef4444; }
 .seekora-docsearch-hit--child { padding-left: var(--seekora-docsearch-spacing-md); }
 .seekora-docsearch-hit--child .seekora-docsearch-hit-icon { width: 32px; height: 32px; }