@seekora-ai/ui-sdk-react 1.0.0

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

@@ -0,0 +1,37 @@
+/**
+ * Query Suggestions Components
+ *
+ * Premium, configurable, data-agnostic dropdown components
+ * for search suggestions UI
+ */
+export { SuggestionSearchBar, default as SuggestionSearch } from './SuggestionSearchBar';
+export type { SuggestionSearchBarProps, SuggestionSearchBarRef } from './SuggestionSearchBar';
+export * from './types';
+export * from './utils';
+export { useResponsive, breakpoints, mediaQueries, touchTargets, responsiveSpacing, responsiveTypography, injectResponsiveStyles, type ResponsiveState, } from './styles/responsive';
+export { globalResponsiveCSS, injectGlobalResponsiveStyles, useInjectResponsiveStyles, } from './styles';
+export { AmazonDropdown } from './AmazonDropdown';
+export type { AmazonDropdownProps } from './AmazonDropdown';
+export { GoogleDropdown } from './GoogleDropdown';
+export type { GoogleDropdownProps } from './GoogleDropdown';
+export { PinterestDropdown } from './PinterestDropdown';
+export type { PinterestDropdownProps } from './PinterestDropdown';
+export { SpotlightDropdown } from './SpotlightDropdown';
+export type { SpotlightDropdownProps } from './SpotlightDropdown';
+export { ShopifyDropdown } from './ShopifyDropdown';
+export type { ShopifyDropdownProps } from './ShopifyDropdown';
+export { MobileSheetDropdown } from './MobileSheetDropdown';
+export type { MobileSheetDropdownProps } from './MobileSheetDropdown';
+export { MinimalDropdown } from './MinimalDropdown';
+export type { MinimalDropdownProps } from './MinimalDropdown';
+export declare const SuggestionDropdownVariants: {
+    readonly amazon: import("react").ForwardRefExoticComponent<import("./AmazonDropdown").AmazonDropdownProps & import("react").RefAttributes<import("./types").DropdownRef>>;
+    readonly google: import("react").ForwardRefExoticComponent<import("./GoogleDropdown").GoogleDropdownProps & import("react").RefAttributes<import("./types").DropdownRef>>;
+    readonly pinterest: import("react").ForwardRefExoticComponent<import("./PinterestDropdown").PinterestDropdownProps & import("react").RefAttributes<import("./types").DropdownRef>>;
+    readonly spotlight: import("react").ForwardRefExoticComponent<import("./SpotlightDropdown").SpotlightDropdownProps & import("react").RefAttributes<import("./types").DropdownRef>>;
+    readonly shopify: import("react").ForwardRefExoticComponent<import("./ShopifyDropdown").ShopifyDropdownProps & import("react").RefAttributes<import("./types").DropdownRef>>;
+    readonly 'mobile-sheet': import("react").ForwardRefExoticComponent<import("./MobileSheetDropdown").MobileSheetDropdownProps & import("react").RefAttributes<import("./types").DropdownRef>>;
+    readonly minimal: import("react").ForwardRefExoticComponent<import("./MinimalDropdown").MinimalDropdownProps & import("react").RefAttributes<import("./types").DropdownRef>>;
+};
+export type SuggestionDropdownVariant = keyof typeof SuggestionDropdownVariants;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/suggestions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,mBAAmB,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzF,YAAY,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAK9F,cAAc,SAAS,CAAC;AAKxB,cAAc,SAAS,CAAC;AAKxB,OAAO,EACL,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,oBAAoB,EACpB,sBAAsB,EACtB,KAAK,eAAe,GACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,mBAAmB,EACnB,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,UAAU,CAAC;AAOlB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAGtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAa9D,eAAO,MAAM,0BAA0B;;;;;;;;CAQ7B,CAAC;AAEX,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,0BAA0B,CAAC"}

package/dist/components/suggestions/index.js

@@ -0,0 +1,59 @@
+/**
+ * Query Suggestions Components
+ *
+ * Premium, configurable, data-agnostic dropdown components
+ * for search suggestions UI
+ */
+// ============================================================================
+// Main Component (Easy Integration - Handles Everything)
+// ============================================================================
+export { SuggestionSearchBar, default as SuggestionSearch } from './SuggestionSearchBar';
+// ============================================================================
+// Types
+// ============================================================================
+export * from './types';
+// ============================================================================
+// Utilities
+// ============================================================================
+export * from './utils';
+// ============================================================================
+// Responsive Utilities & Styles
+// ============================================================================
+export { useResponsive, breakpoints, mediaQueries, touchTargets, responsiveSpacing, responsiveTypography, injectResponsiveStyles, } from './styles/responsive';
+export { globalResponsiveCSS, injectGlobalResponsiveStyles, useInjectResponsiveStyles, } from './styles';
+// ============================================================================
+// Components
+// ============================================================================
+// Amazon-style dropdown with department scoping
+export { AmazonDropdown } from './AmazonDropdown';
+// Google-style clean search suggestions
+export { GoogleDropdown } from './GoogleDropdown';
+// Pinterest-style visual discovery
+export { PinterestDropdown } from './PinterestDropdown';
+// macOS Spotlight / Command palette style
+export { SpotlightDropdown } from './SpotlightDropdown';
+// Shopify-style modern e-commerce
+export { ShopifyDropdown } from './ShopifyDropdown';
+// Mobile-first bottom sheet
+export { MobileSheetDropdown } from './MobileSheetDropdown';
+// Minimal/editorial style
+export { MinimalDropdown } from './MinimalDropdown';
+// ============================================================================
+// Variant Map for easy access
+// ============================================================================
+import { AmazonDropdown } from './AmazonDropdown';
+import { GoogleDropdown } from './GoogleDropdown';
+import { PinterestDropdown } from './PinterestDropdown';
+import { SpotlightDropdown } from './SpotlightDropdown';
+import { ShopifyDropdown } from './ShopifyDropdown';
+import { MobileSheetDropdown } from './MobileSheetDropdown';
+import { MinimalDropdown } from './MinimalDropdown';
+export const SuggestionDropdownVariants = {
+    amazon: AmazonDropdown,
+    google: GoogleDropdown,
+    pinterest: PinterestDropdown,
+    spotlight: SpotlightDropdown,
+    shopify: ShopifyDropdown,
+    'mobile-sheet': MobileSheetDropdown,
+    minimal: MinimalDropdown,
+};

package/dist/components/suggestions/styles/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared Styles Index
+ */
+export * from './responsive';
+export declare const globalResponsiveCSS = "\n/* ============================================\n   SEEKORA DROPDOWN - RESPONSIVE STYLES\n   ============================================ */\n\n/* CSS Variables for responsiveness */\n:root {\n  --seekora-touch-target-min: 44px;\n  --seekora-touch-target-comfortable: 48px;\n  --seekora-mobile-padding: 16px;\n  --seekora-desktop-padding: 20px;\n}\n\n/* Base responsive rules for all dropdowns */\n[class*=\"seekora-\"][class*=\"-dropdown\"] {\n  box-sizing: border-box;\n}\n\n[class*=\"seekora-\"][class*=\"-dropdown\"] * {\n  box-sizing: border-box;\n}\n\n/* ============================================\n   MOBILE STYLES (< 768px)\n   ============================================ */\n@media (max-width: 767px) {\n  /* Full-width dropdowns on mobile */\n  [class*=\"seekora-\"][class*=\"-dropdown\"]:not(.seekora-mobile-sheet):not(.seekora-spotlight-dropdown) {\n    width: 100% !important;\n    max-width: 100vw !important;\n    left: 0 !important;\n    right: 0 !important;\n    border-radius: 0 !important;\n    margin: 0 !important;\n  }\n\n  /* Touch-friendly item sizes */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [data-item],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .suggestion-item,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .product-card {\n    min-height: var(--seekora-touch-target-min);\n  }\n\n  /* Larger padding on mobile */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [data-item] {\n    padding: 14px var(--seekora-mobile-padding) !important;\n  }\n\n  /* Larger fonts on mobile for readability */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] {\n    font-size: 16px !important;\n  }\n\n  /* Stack columns on mobile */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .dropdown-content,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"display: flex\"][style*=\"flex-direction\"] {\n    flex-direction: column !important;\n  }\n\n  /* Full-width columns on mobile */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"width: 40%\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"width: 45%\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"width: 50%\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"width: 55%\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"width: 60%\"] {\n    width: 100% !important;\n    flex: none !important;\n  }\n\n  /* Product grid adjustments */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .products-grid,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"grid-template-columns\"] {\n    grid-template-columns: repeat(2, 1fr) !important;\n    gap: 12px !important;\n  }\n\n  /* Horizontal scroll for products on mobile */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .products-scroll {\n    display: flex !important;\n    overflow-x: auto !important;\n    scroll-snap-type: x mandatory !important;\n    -webkit-overflow-scrolling: touch !important;\n    padding-bottom: 8px !important;\n  }\n\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .products-scroll > * {\n    scroll-snap-align: start !important;\n    flex-shrink: 0 !important;\n  }\n\n  /* Hide keyboard hints on mobile */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .keyboard-hint,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [class*=\"keyboard\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] kbd,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .kbd {\n    display: none !important;\n  }\n\n  /* Safe area padding for notched devices */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [style*=\"padding-bottom\"] {\n    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;\n  }\n}\n\n/* ============================================\n   TOUCH DEVICE STYLES\n   ============================================ */\n@media (hover: none) and (pointer: coarse) {\n  /* Active state instead of hover for touch */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"]:active,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [data-item]:active,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] button:active {\n    background-color: var(--seekora-bg-hover, rgba(0,0,0,0.05)) !important;\n    transform: scale(0.98);\n  }\n\n  /* Disable hover effects on touch */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"]:hover,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [data-item]:hover {\n    background-color: transparent;\n  }\n\n  /* Larger touch targets */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] button,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"button\"] {\n    min-height: var(--seekora-touch-target-min);\n    min-width: var(--seekora-touch-target-min);\n  }\n\n  /* No text selection on touch */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n}\n\n/* ============================================\n   TABLET STYLES (768px - 1023px)\n   ============================================ */\n@media (min-width: 768px) and (max-width: 1023px) {\n  [class*=\"seekora-\"][class*=\"-dropdown\"]:not(.seekora-mobile-sheet) {\n    max-width: 90vw !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n\n  /* 3-column product grid on tablet */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] .products-grid {\n    grid-template-columns: repeat(3, 1fr) !important;\n  }\n}\n\n/* ============================================\n   DESKTOP STYLES (>= 1024px)\n   ============================================ */\n@media (min-width: 1024px) {\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [data-item] {\n    min-height: 40px;\n  }\n\n  /* Hover effects only on desktop */\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"]:hover,\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [data-item]:hover {\n    background-color: var(--seekora-bg-hover, rgba(0,0,0,0.04));\n  }\n}\n\n/* ============================================\n   ANIMATION & TRANSITIONS\n   ============================================ */\n@keyframes seekora-dropdown-enter {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes seekora-dropdown-enter-mobile {\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes seekora-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n[class*=\"seekora-\"][class*=\"-dropdown\"].entering {\n  animation: seekora-dropdown-enter 200ms ease-out;\n}\n\n@media (max-width: 767px) {\n  [class*=\"seekora-\"][class*=\"-dropdown\"].entering {\n    animation: seekora-dropdown-enter-mobile 300ms ease-out;\n  }\n}\n\n/* ============================================\n   ACCESSIBILITY\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  [class*=\"seekora-\"][class*=\"-dropdown\"],\n  [class*=\"seekora-\"][class*=\"-dropdown\"] * {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Focus visible styles */\n[class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"]:focus-visible,\n[class*=\"seekora-\"][class*=\"-dropdown\"] button:focus-visible {\n  outline: 2px solid var(--seekora-primary, #007aff);\n  outline-offset: -2px;\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n  [class*=\"seekora-\"][class*=\"-dropdown\"] {\n    border: 2px solid currentColor !important;\n  }\n\n  [class*=\"seekora-\"][class*=\"-dropdown\"] [role=\"option\"][aria-selected=\"true\"] {\n    outline: 2px solid currentColor;\n  }\n}\n\n/* Dark mode adjustments */\n@media (prefers-color-scheme: dark) {\n  [class*=\"seekora-\"][class*=\"-dropdown\"] {\n    --seekora-bg-surface: #1c1c1e;\n    --seekora-bg-secondary: #2c2c2e;\n    --seekora-bg-hover: #3a3a3c;\n    --seekora-text-primary: #ffffff;\n    --seekora-text-secondary: #8e8e93;\n    --seekora-border-color: #38383a;\n  }\n}\n";
+export declare const injectGlobalResponsiveStyles: () => void;
+/**
+ * Hook to auto-inject styles on mount
+ */
+export declare const useInjectResponsiveStyles: () => void;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/suggestions/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/suggestions/styles/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,cAAc,cAAc,CAAC;AAM7B,eAAO,MAAM,mBAAmB,m/PA4P/B,CAAC;AAOF,eAAO,MAAM,4BAA4B,QAAO,IAe/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB,QAAO,IAI5C,CAAC"}

package/dist/components/suggestions/styles/index.js

@@ -0,0 +1,289 @@
+/**
+ * Shared Styles Index
+ */
+import { useEffect } from 'react';
+export * from './responsive';
+// ============================================================================
+// Global Responsive CSS for all Dropdown Variants
+// ============================================================================
+export const globalResponsiveCSS = `
+/* ============================================
+   SEEKORA DROPDOWN - RESPONSIVE STYLES
+   ============================================ */
+
+/* CSS Variables for responsiveness */
+:root {
+  --seekora-touch-target-min: 44px;
+  --seekora-touch-target-comfortable: 48px;
+  --seekora-mobile-padding: 16px;
+  --seekora-desktop-padding: 20px;
+}
+
+/* Base responsive rules for all dropdowns */
+[class*="seekora-"][class*="-dropdown"] {
+  box-sizing: border-box;
+}
+
+[class*="seekora-"][class*="-dropdown"] * {
+  box-sizing: border-box;
+}
+
+/* ============================================
+   MOBILE STYLES (< 768px)
+   ============================================ */
+@media (max-width: 767px) {
+  /* Full-width dropdowns on mobile */
+  [class*="seekora-"][class*="-dropdown"]:not(.seekora-mobile-sheet):not(.seekora-spotlight-dropdown) {
+    width: 100% !important;
+    max-width: 100vw !important;
+    left: 0 !important;
+    right: 0 !important;
+    border-radius: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Touch-friendly item sizes */
+  [class*="seekora-"][class*="-dropdown"] [role="option"],
+  [class*="seekora-"][class*="-dropdown"] [data-item],
+  [class*="seekora-"][class*="-dropdown"] .suggestion-item,
+  [class*="seekora-"][class*="-dropdown"] .product-card {
+    min-height: var(--seekora-touch-target-min);
+  }
+
+  /* Larger padding on mobile */
+  [class*="seekora-"][class*="-dropdown"] [role="option"],
+  [class*="seekora-"][class*="-dropdown"] [data-item] {
+    padding: 14px var(--seekora-mobile-padding) !important;
+  }
+
+  /* Larger fonts on mobile for readability */
+  [class*="seekora-"][class*="-dropdown"] {
+    font-size: 16px !important;
+  }
+
+  /* Stack columns on mobile */
+  [class*="seekora-"][class*="-dropdown"] .dropdown-content,
+  [class*="seekora-"][class*="-dropdown"] [style*="display: flex"][style*="flex-direction"] {
+    flex-direction: column !important;
+  }
+
+  /* Full-width columns on mobile */
+  [class*="seekora-"][class*="-dropdown"] [style*="width: 40%"],
+  [class*="seekora-"][class*="-dropdown"] [style*="width: 45%"],
+  [class*="seekora-"][class*="-dropdown"] [style*="width: 50%"],
+  [class*="seekora-"][class*="-dropdown"] [style*="width: 55%"],
+  [class*="seekora-"][class*="-dropdown"] [style*="width: 60%"] {
+    width: 100% !important;
+    flex: none !important;
+  }
+
+  /* Product grid adjustments */
+  [class*="seekora-"][class*="-dropdown"] .products-grid,
+  [class*="seekora-"][class*="-dropdown"] [style*="grid-template-columns"] {
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 12px !important;
+  }
+
+  /* Horizontal scroll for products on mobile */
+  [class*="seekora-"][class*="-dropdown"] .products-scroll {
+    display: flex !important;
+    overflow-x: auto !important;
+    scroll-snap-type: x mandatory !important;
+    -webkit-overflow-scrolling: touch !important;
+    padding-bottom: 8px !important;
+  }
+
+  [class*="seekora-"][class*="-dropdown"] .products-scroll > * {
+    scroll-snap-align: start !important;
+    flex-shrink: 0 !important;
+  }
+
+  /* Hide keyboard hints on mobile */
+  [class*="seekora-"][class*="-dropdown"] .keyboard-hint,
+  [class*="seekora-"][class*="-dropdown"] [class*="keyboard"],
+  [class*="seekora-"][class*="-dropdown"] kbd,
+  [class*="seekora-"][class*="-dropdown"] .kbd {
+    display: none !important;
+  }
+
+  /* Safe area padding for notched devices */
+  [class*="seekora-"][class*="-dropdown"] [style*="padding-bottom"] {
+    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
+  }
+}
+
+/* ============================================
+   TOUCH DEVICE STYLES
+   ============================================ */
+@media (hover: none) and (pointer: coarse) {
+  /* Active state instead of hover for touch */
+  [class*="seekora-"][class*="-dropdown"] [role="option"]:active,
+  [class*="seekora-"][class*="-dropdown"] [data-item]:active,
+  [class*="seekora-"][class*="-dropdown"] button:active {
+    background-color: var(--seekora-bg-hover, rgba(0,0,0,0.05)) !important;
+    transform: scale(0.98);
+  }
+
+  /* Disable hover effects on touch */
+  [class*="seekora-"][class*="-dropdown"] [role="option"]:hover,
+  [class*="seekora-"][class*="-dropdown"] [data-item]:hover {
+    background-color: transparent;
+  }
+
+  /* Larger touch targets */
+  [class*="seekora-"][class*="-dropdown"] button,
+  [class*="seekora-"][class*="-dropdown"] [role="button"] {
+    min-height: var(--seekora-touch-target-min);
+    min-width: var(--seekora-touch-target-min);
+  }
+
+  /* No text selection on touch */
+  [class*="seekora-"][class*="-dropdown"] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+
+/* ============================================
+   TABLET STYLES (768px - 1023px)
+   ============================================ */
+@media (min-width: 768px) and (max-width: 1023px) {
+  [class*="seekora-"][class*="-dropdown"]:not(.seekora-mobile-sheet) {
+    max-width: 90vw !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
+  /* 3-column product grid on tablet */
+  [class*="seekora-"][class*="-dropdown"] .products-grid {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+}
+
+/* ============================================
+   DESKTOP STYLES (>= 1024px)
+   ============================================ */
+@media (min-width: 1024px) {
+  [class*="seekora-"][class*="-dropdown"] [role="option"],
+  [class*="seekora-"][class*="-dropdown"] [data-item] {
+    min-height: 40px;
+  }
+
+  /* Hover effects only on desktop */
+  [class*="seekora-"][class*="-dropdown"] [role="option"]:hover,
+  [class*="seekora-"][class*="-dropdown"] [data-item]:hover {
+    background-color: var(--seekora-bg-hover, rgba(0,0,0,0.04));
+  }
+}
+
+/* ============================================
+   ANIMATION & TRANSITIONS
+   ============================================ */
+@keyframes seekora-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes seekora-dropdown-enter-mobile {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes seekora-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+[class*="seekora-"][class*="-dropdown"].entering {
+  animation: seekora-dropdown-enter 200ms ease-out;
+}
+
+@media (max-width: 767px) {
+  [class*="seekora-"][class*="-dropdown"].entering {
+    animation: seekora-dropdown-enter-mobile 300ms ease-out;
+  }
+}
+
+/* ============================================
+   ACCESSIBILITY
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  [class*="seekora-"][class*="-dropdown"],
+  [class*="seekora-"][class*="-dropdown"] * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Focus visible styles */
+[class*="seekora-"][class*="-dropdown"] [role="option"]:focus-visible,
+[class*="seekora-"][class*="-dropdown"] button:focus-visible {
+  outline: 2px solid var(--seekora-primary, #007aff);
+  outline-offset: -2px;
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  [class*="seekora-"][class*="-dropdown"] {
+    border: 2px solid currentColor !important;
+  }
+
+  [class*="seekora-"][class*="-dropdown"] [role="option"][aria-selected="true"] {
+    outline: 2px solid currentColor;
+  }
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  [class*="seekora-"][class*="-dropdown"] {
+    --seekora-bg-surface: #1c1c1e;
+    --seekora-bg-secondary: #2c2c2e;
+    --seekora-bg-hover: #3a3a3c;
+    --seekora-text-primary: #ffffff;
+    --seekora-text-secondary: #8e8e93;
+    --seekora-border-color: #38383a;
+  }
+}
+`;
+/**
+ * Inject global responsive styles
+ */
+let stylesInjected = false;
+export const injectGlobalResponsiveStyles = () => {
+    if (stylesInjected)
+        return;
+    if (typeof document === 'undefined')
+        return;
+    const styleId = 'seekora-dropdown-responsive-global';
+    if (document.getElementById(styleId)) {
+        stylesInjected = true;
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = globalResponsiveCSS;
+    document.head.appendChild(style);
+    stylesInjected = true;
+};
+/**
+ * Hook to auto-inject styles on mount
+ */
+export const useInjectResponsiveStyles = () => {
+    useEffect(() => {
+        injectGlobalResponsiveStyles();
+    }, []);
+};

package/dist/components/suggestions/styles/responsive.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Responsive Utilities and Breakpoints
+ *
+ * Shared responsive design utilities for all dropdown components
+ */
+import type { CSSProperties } from 'react';
+export declare const breakpoints: {
+    readonly xs: 0;
+    readonly sm: 480;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export declare const mediaQueries: {
+    readonly xs: `@media (max-width: ${number}px)`;
+    readonly sm: `@media (min-width: 480px) and (max-width: ${number}px)`;
+    readonly md: `@media (min-width: 768px) and (max-width: ${number}px)`;
+    readonly lg: `@media (min-width: 1024px) and (max-width: ${number}px)`;
+    readonly xl: "@media (min-width: 1280px)";
+    readonly mobile: `@media (max-width: ${number}px)`;
+    readonly tablet: `@media (min-width: 768px) and (max-width: ${number}px)`;
+    readonly desktop: "@media (min-width: 1024px)";
+    readonly touch: "@media (hover: none) and (pointer: coarse)";
+    readonly mouse: "@media (hover: hover) and (pointer: fine)";
+};
+export declare const touchTargets: {
+    /** Minimum touch target size per WCAG guidelines */
+    readonly minimum: 44;
+    /** Comfortable touch target size */
+    readonly comfortable: 48;
+    /** Large touch target for primary actions */
+    readonly large: 56;
+};
+export declare const responsiveSpacing: {
+    readonly mobile: {
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "12px";
+        readonly lg: "16px";
+        readonly xl: "20px";
+    };
+    readonly desktop: {
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "16px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+    };
+};
+export declare const responsiveTypography: {
+    readonly mobile: {
+        readonly xs: "11px";
+        readonly sm: "13px";
+        readonly md: "15px";
+        readonly lg: "17px";
+        readonly xl: "20px";
+        readonly xxl: "24px";
+    };
+    readonly desktop: {
+        readonly xs: "11px";
+        readonly sm: "12px";
+        readonly md: "14px";
+        readonly lg: "16px";
+        readonly xl: "18px";
+        readonly xxl: "24px";
+    };
+};
+/**
+ * Generate responsive CSS class string
+ */
+export declare const generateResponsiveCSS: (componentName: string) => string;
+/**
+ * Inject responsive styles into document
+ */
+export declare const injectResponsiveStyles: (componentName: string) => void;
+export interface ResponsiveState {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isTouch: boolean;
+    width: number;
+    height: number;
+    breakpoint: Breakpoint;
+}
+export declare const useResponsive: () => ResponsiveState;
+export interface ResponsiveStyles {
+    base: CSSProperties;
+    mobile?: CSSProperties;
+    tablet?: CSSProperties;
+    desktop?: CSSProperties;
+}
+/**
+ * Get styles for current breakpoint
+ */
+export declare const getResponsiveStyle: (styles: ResponsiveStyles, responsive: ResponsiveState) => CSSProperties;
+export declare const safeAreaInsets: {
+    readonly top: "env(safe-area-inset-top, 0px)";
+    readonly bottom: "env(safe-area-inset-bottom, 0px)";
+    readonly left: "env(safe-area-inset-left, 0px)";
+    readonly right: "env(safe-area-inset-right, 0px)";
+};
+/**
+ * Get padding with safe area insets
+ */
+export declare const getSafeAreaPadding: (position: "top" | "bottom" | "left" | "right", additionalPadding?: string) => string;
+//# sourceMappingURL=responsive.d.ts.map

package/dist/components/suggestions/styles/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../../src/components/suggestions/styles/responsive.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAMlD,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAMX,eAAO,MAAM,YAAY;IACvB,oDAAoD;;IAEpD,oCAAoC;;IAEpC,6CAA6C;;CAErC,CAAC;AAMX,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;CAepB,CAAC;AAMX,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;CAiBvB,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,eAAe,MAAM,KAAG,MA4D7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,eAAe,MAAM,KAAG,IAc9D,CAAC;AAMF,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,QAAO,eA6ChC,CAAC;AAMF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,gBAAgB,EACxB,YAAY,eAAe,KAC1B,aASF,CAAC;AAMF,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,UAAU,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC7C,oBAAmB,MAAc,KAChC,MAEF,CAAC"}