@inspirare/design-system 0.0.10 → 0.0.12

package/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(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
+}

package/src/index.css

@@ -125,180 +125,6 @@
   --shadow-2xl: 0px 4px 8px 0px hsl(0 0% 0% / 0.3);
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --font-sans: var(--font-sans);
-  --font-serif: var(--font-serif);
-  --font-mono: var(--font-mono);
-
-  /* Inspirare Brand Colors */
-  --color-Inspirare-purple-50: oklch(0.95 0.05 270);
-  --color-Inspirare-purple-100: oklch(0.9 0.1 270);
-  --color-Inspirare-purple-200: oklch(0.85 0.15 270);
-  --color-Inspirare-purple-300: oklch(0.8 0.18 270);
-  --color-Inspirare-purple-400: oklch(0.7 0.2 270);
-  --color-Inspirare-purple-500: oklch(0.6 0.2 270);
-  --color-Inspirare-purple-600: oklch(0.55 0.22 270);
-  --color-Inspirare-purple-700: oklch(0.5 0.24 270);
-  --color-Inspirare-purple-800: oklch(0.4 0.26 270);
-  --color-Inspirare-purple-900: oklch(0.3 0.28 270);
-
-  --color-Inspirare-blue-50: oklch(0.95 0.05 200);
-  --color-Inspirare-blue-100: oklch(0.9 0.08 200);
-  --color-Inspirare-blue-200: oklch(0.85 0.12 200);
-  --color-Inspirare-blue-300: oklch(0.8 0.15 200);
-  --color-Inspirare-blue-400: oklch(0.75 0.15 200);
-  --color-Inspirare-blue-500: oklch(0.7 0.18 200);
-  --color-Inspirare-blue-600: oklch(0.65 0.2 200);
-  --color-Inspirare-blue-700: oklch(0.6 0.22 200);
-  --color-Inspirare-blue-800: oklch(0.5 0.24 200);
-  --color-Inspirare-blue-900: oklch(0.4 0.26 200);
-
-  /* Animations & Keyframes */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-  --animate-fade-in: fade-in 0.3s ease-out;
-  --animate-fade-in-up: fade-in-up 0.6s ease-out;
-  --animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
-  --animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
-  --animate-float: float 3s ease-in-out infinite;
-  --animate-gradient: gradient 3s ease infinite;
-  --animate-glow: glow 2s ease-in-out infinite alternate;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-
-    to {
-      height: 0;
-    }
-  }
-
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-in-up {
-    0% {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slide-in-from-top {
-    0% {
-      transform: translateY(-100%);
-    }
-
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slide-in-from-bottom {
-    0% {
-      transform: translateY(100%);
-    }
-
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes float {
-
-    0%,
-    100% {
-      transform: translateY(0px);
-    }
-
-    50% {
-      transform: translateY(-20px);
-    }
-  }
-
-  @keyframes gradient {
-
-    0%,
-    100% {
-      background-position: 0% 50%;
-    }
-
-    50% {
-      background-position: 100% 50%;
-    }
-  }
-
-  @keyframes glow {
-
-    0%,
-    100% {
-      box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
-    }
-
-    50% {
-      box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
-    }
-  }
-}
-
 @layer utilities {
   .glass {
     @apply bg-white/70 backdrop-blur-xl border-white/20;
@@ -812,6 +638,77 @@ body {
   --font-sans: var(--font-sans);
   --font-serif: var(--font-serif);
   --font-mono: var(--font-mono);
+
+  /* Inspirare Brand Colors */
+  --color-Inspirare-purple-50: oklch(0.95 0.05 270);
+  --color-Inspirare-purple-100: oklch(0.9 0.1 270);
+  --color-Inspirare-purple-200: oklch(0.85 0.15 270);
+  --color-Inspirare-purple-300: oklch(0.8 0.18 270);
+  --color-Inspirare-purple-400: oklch(0.7 0.2 270);
+  --color-Inspirare-purple-500: oklch(0.6 0.2 270);
+  --color-Inspirare-purple-600: oklch(0.55 0.22 270);
+  --color-Inspirare-purple-700: oklch(0.5 0.24 270);
+  --color-Inspirare-purple-800: oklch(0.4 0.26 270);
+  --color-Inspirare-purple-900: oklch(0.3 0.28 270);
+
+  --color-Inspirare-blue-50: oklch(0.95 0.05 200);
+  --color-Inspirare-blue-100: oklch(0.9 0.08 200);
+  --color-Inspirare-blue-200: oklch(0.85 0.12 200);
+  --color-Inspirare-blue-300: oklch(0.8 0.15 200);
+  --color-Inspirare-blue-400: oklch(0.75 0.15 200);
+  --color-Inspirare-blue-500: oklch(0.7 0.18 200);
+  --color-Inspirare-blue-600: oklch(0.65 0.2 200);
+  --color-Inspirare-blue-700: oklch(0.6 0.22 200);
+  --color-Inspirare-blue-800: oklch(0.5 0.24 200);
+  --color-Inspirare-blue-900: oklch(0.4 0.26 200);
+
+  /* Animations & Keyframes */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-fade-in-up: fade-in-up 0.6s ease-out;
+  --animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
+  --animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-gradient: gradient 3s ease infinite;
+  --animate-glow: glow 2s ease-in-out infinite alternate;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to { height: 0; }
+  }
+  @keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @keyframes fade-in-up {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes slide-in-from-top {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(0); }
+  }
+  @keyframes slide-in-from-bottom {
+    0% { transform: translateY(100%); }
+    100% { transform: translateY(0); }
+  }
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+  }
+  @keyframes gradient {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+  }
+  @keyframes glow {
+    0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
+    50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.6); }
+  }
 }
 
 /* Added glassmorphism utilities and custom styles */

package/src/index.ts

@@ -1,41 +1,62 @@
 import './index.css';
 
 export * from './components/ui/accordion';
+export * from './components/ui/alert';
 export * from './components/ui/alert-dialog';
+export * from './components/ui/aspect-ratio';
 export * from './components/ui/avatar';
 export * from './components/ui/badge';
+export * from './components/ui/breadcrumb';
 export * from './components/ui/button';
+export * from './components/ui/button-group';
 export * from './components/ui/calendar';
 export * from './components/ui/card';
+export * from './components/ui/carousel';
+export * from './components/ui/chart';
 export * from './components/ui/checkbox';
 export * from './components/ui/collapsible';
 export * from './components/ui/color-picker';
+export * from './components/ui/combobox';
 export * from './components/ui/command';
+export * from './components/ui/context-menu';
 export * from './components/ui/dialog';
 export * from './components/ui/drawer';
 export * from './components/ui/dropdown-menu';
+export * from './components/ui/empty';
+export * from './components/ui/field';
 export * from './components/ui/form';
 export * from './components/ui/hover-card';
 export * from './components/ui/input';
+export * from './components/ui/input-group';
+export * from './components/ui/input-otp';
+export * from './components/ui/item';
+export * from './components/ui/kbd';
 export * from './components/ui/label';
+export * from './components/ui/menubar';
+export * from './components/ui/navigation-menu';
+export * from './components/ui/pagination';
 export * from './components/ui/popover';
 export * from './components/ui/progress';
 export * from './components/ui/radio-group';
+export * from './components/ui/resizable';
 export * from './components/ui/scroll-area';
 export * from './components/ui/select';
 export * from './components/ui/separator';
 export * from './components/ui/sheet';
+export * from './components/ui/sidebar';
 export * from './components/ui/skeleton';
 export * from './components/ui/slider';
 export * from './components/ui/sonner';
+export * from './components/ui/spinner';
 export * from './components/ui/switch';
 export * from './components/ui/table';
 export * from './components/ui/tabs';
 export * from './components/ui/textarea';
 export * from './components/ui/theme-toggle';
-export * from './components/ui/toggle-group';
 export * from './components/ui/toggle';
+export * from './components/ui/toggle-group';
 export * from './components/ui/tooltip';
 export * from './components/ui/accessibility-improvements';
 
 export * from './lib/utils';
+export * from './hooks/use-mobile';