@sdvf23rvfa43f/stealth-glass 1.3.0

package/dist/stealth-glass-theme.css

@@ -0,0 +1,494 @@
+/* ═══════════════════════════════════════════════════════════════
+   STEALTH GLASS DESIGN SYSTEM — Portable Theme
+   ═══════════════════════════════════════════════════════════════
+   
+   HOW TO USE:
+   1. Copy this file into your new project's /styles/ directory
+   2. Import it in your globals.css AFTER @import "tailwindcss":
+   
+      @import "tailwindcss";
+      @import "./stealth-glass-theme.css";
+   
+   3. Done! All tokens, utilities, and animations are now available.
+   
+   Compatible with: Tailwind CSS v4 + React + any framework
+   ═══════════════════════════════════════════════════════════════ */
+
+
+/* ─────────────────────────────────────────────────────────
+   LAYER 1: DESIGN TOKENS (CSS Custom Properties)
+   ───────────────────────────────────────────────────────── */
+
+:root {
+  /* === Core Palette === */
+  --sg-void:             #0B0E14;   /* Deepest background (the "void") */
+  --sg-subtle:           #0D0F13;   /* Subtle background variation */
+  --sg-surface:          #0E1119;   /* Card/tile surface */
+  --sg-elevated:         #12151B;   /* Elevated surfaces (hover, popover) */
+  --sg-highlight:        #1A1E26;   /* Highlighted/active surfaces */
+
+  /* === Text Hierarchy === */
+  --sg-text-primary:     #EDEDEF;   /* Headlines, values, primary content */
+  --sg-text-secondary:   #9A92B1;   /* Descriptions, secondary info */
+  --sg-text-muted:       #535C6B;   /* Labels, timestamps, tertiary */
+
+  /* === Borders === */
+  --sg-border-default:   #252C41;   /* Default border (visible) */
+  --sg-border-subtle:    rgba(255, 255, 255, 0.05);  /* Glass edge */
+  --sg-border-hover:     rgba(255, 255, 255, 0.10);  /* Hover state */
+  --sg-border-active:    rgba(255, 255, 255, 0.15);  /* Active/focus */
+
+  /* === Brand Colors === */
+  --sg-brand-blue:       #3B82F6;
+  --sg-brand-indigo:     #6366F1;
+  --sg-brand-purple:     #8B5CF6;
+
+  /* === Semantic Status Colors === */
+  --sg-success:          #10B981;   /* Emerald — Active/Online/Success */
+  --sg-warning:          #F59E0B;   /* Amber — Warning/Pending */
+  --sg-danger:           #EF4444;   /* Red — Error/Danger/Offline */
+  --sg-info:             #3B82F6;   /* Blue — Info/Processing */
+
+  /* === Form Control Surfaces === */
+  --sg-input-background: var(--sg-elevated);     /* Dark input bg */
+  --sg-switch-track:     var(--sg-highlight);     /* Unchecked switch track */
+
+  /* === Shadows & Glows === */
+  --sg-glow-blue:        rgba(59, 130, 246, 0.3);
+  --sg-glow-indigo:      rgba(99, 102, 241, 0.3);
+  --sg-glow-success:     rgba(16, 185, 129, 0.3);
+  --sg-glow-danger:      rgba(239, 68, 68, 0.3);
+  --sg-glow-warning:     rgba(245, 158, 11, 0.3);
+
+  /* === Shared Shadows === */
+  --sg-shadow-dropdown:        0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --sg-shadow-tile-inset:      inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+  --sg-shadow-tile-inset-hover:inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --sg-shadow-cta:             0 4px 20px rgba(37, 99, 235, 0.3);
+  --sg-shadow-cta-hover:       0 6px 25px rgba(37, 99, 235, 0.4);
+  --sg-glow-blue-md:           0 0 10px rgba(59, 130, 246, 0.5);
+  --sg-glow-success-md:        0 0 10px rgba(16, 185, 129, 0.5);
+
+  /* === Geometry === */
+  --sg-radius-tile:      2rem;      /* 32px — Bento tile corners */
+  --sg-radius-inner:     1rem;      /* 16px — Inner elements */
+  --sg-radius-button:    9999px;    /* Pill buttons */
+  --sg-radius-input:     0.75rem;   /* 12px — Inputs */
+
+  /* === Spacing === */
+  --sg-gap-mobile:       1rem;      /* gap-4 */
+  --sg-gap-desktop:      1.5rem;    /* gap-6 */
+  --sg-container-max:    1600px;
+
+  /* === Motion === */
+  --sg-duration-fast:    150ms;
+  --sg-duration-normal:  300ms;
+  --sg-duration-slow:    500ms;
+  --sg-duration-cinematic: 700ms;
+  --sg-ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* === Input === */
+  --sg-input-height:     3.5rem;   /* 56px — h-14 */
+  --sg-input-bg:         var(--sg-surface);
+  --sg-input-bg-focus:   var(--sg-elevated);
+
+  /* === Focus === */
+  --sg-focus-shadow:     0 0 0 4px rgba(59, 130, 246, 0.15);
+
+  /* === Font Weights === */
+  --font-weight-medium:  500;
+  --font-weight-normal:  400;
+
+  /* ──────────────────────────────────────────────────
+     ShadCN / Radix Mappings
+     Map our tokens to the ShadCN variable contract
+     so all shadcn/ui components inherit our theme.
+     ────────────────────────────────────────────────── */
+  --background:          var(--sg-void);
+  --foreground:          var(--sg-text-primary);
+  --card:                var(--sg-surface);
+  --card-foreground:     var(--sg-text-primary);
+  --popover:             var(--sg-elevated);
+  --popover-foreground:  var(--sg-text-primary);
+  --primary:             var(--sg-brand-blue);
+  --primary-foreground:  #FFFFFF;
+  --secondary:           var(--sg-elevated);
+  --secondary-foreground:var(--sg-text-primary);
+  --muted:               var(--sg-subtle);
+  --muted-foreground:    var(--sg-text-secondary);
+  --accent:              var(--sg-elevated);
+  --accent-foreground:   var(--sg-text-primary);
+  --destructive:         var(--sg-danger);
+  --destructive-foreground: #FFFFFF;
+  --border:              var(--sg-border-default);
+  --input:               var(--sg-elevated);
+  --ring:                var(--sg-brand-blue);
+  --radius:              var(--sg-radius-input);
+
+  /* Form control surfaces */
+  --input-background:    var(--sg-input-background);
+  --switch-background:   var(--sg-switch-track);
+
+  /* Chart colors (dark-optimised) */
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  /* Sidebar */
+  --sidebar:                  var(--sg-surface);
+  --sidebar-foreground:       var(--sg-text-primary);
+  --sidebar-primary:          var(--sg-brand-blue);
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent:           var(--sg-elevated);
+  --sidebar-accent-foreground:var(--sg-text-primary);
+  --sidebar-border:           var(--sg-border-default);
+  --sidebar-ring:             var(--sg-brand-blue);
+}
+
+
+/* ─────────────────────────────────────────────────────────
+   LAYER 2: TAILWIND v4 THEME INTEGRATION
+   Maps CSS tokens into Tailwind's theme system so you can
+   use classes like `bg-card`, `text-muted-foreground`, etc.
+   ───────────────────────────────────────────────────────── */
+
+@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);
+
+  /* Form control surfaces */
+  --color-input-background:    var(--input-background);
+  --color-switch-background:   var(--switch-background);
+
+  /* Chart colors */
+  --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);
+
+  /* Sidebar */
+  --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);
+
+  /* Extended palette for direct use */
+  --color-sg-void:             var(--sg-void);
+  --color-sg-subtle:           var(--sg-subtle);
+  --color-sg-surface:          var(--sg-surface);
+  --color-sg-elevated:         var(--sg-elevated);
+  --color-sg-highlight:        var(--sg-highlight);
+
+  /* Text hierarchy — full coverage */
+  --color-sg-text-primary:     var(--sg-text-primary);
+  --color-sg-text-secondary:   var(--sg-text-secondary);
+  --color-sg-text-muted:       var(--sg-text-muted);
+
+  /* Status colors — direct Tailwind access */
+  --color-sg-success:          var(--sg-success);
+  --color-sg-warning:          var(--sg-warning);
+  --color-sg-danger:           var(--sg-danger);
+  --color-sg-info:             var(--sg-info);
+
+  /* Brand colors — direct Tailwind access */
+  --color-sg-brand-blue:       var(--sg-brand-blue);
+  --color-sg-brand-indigo:     var(--sg-brand-indigo);
+  --color-sg-brand-purple:     var(--sg-brand-purple);
+
+  /* Shared shadows — Tailwind shadow-* classes */
+  --shadow-sg-dropdown:        var(--sg-shadow-dropdown);
+  --shadow-sg-tile-inset:      var(--sg-shadow-tile-inset);
+  --shadow-sg-tile-inset-hover:var(--sg-shadow-tile-inset-hover);
+  --shadow-sg-cta:             var(--sg-shadow-cta);
+  --shadow-sg-cta-hover:       var(--sg-shadow-cta-hover);
+  --shadow-sg-glow-blue:       var(--sg-glow-blue-md);
+  --shadow-sg-glow-success:    var(--sg-glow-success-md);
+
+  --radius-sm:  calc(var(--radius) - 4px);
+  --radius-md:  calc(var(--radius) - 2px);
+  --radius-lg:  var(--radius);
+  --radius-xl:  calc(var(--radius) + 4px);
+  --radius-2xl: 1rem;
+
+  /* Accordion animations */
+  --animate-accordion-down: accordion-down 200ms ease-out;
+  --animate-accordion-up: accordion-up 200ms ease-out;
+}
+
+
+/* ─────────────────────────────────────────────────────────
+   LAYER 3: BASE STYLES
+   ───────────────────────────────────────────────────────── */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: 'Inter', 'Geist', system-ui, -apple-system, sans-serif;
+  }
+
+  /* ── Focus Indicators (WCAG AA) ── */
+  *:focus-visible {
+    outline: 2px solid rgba(59, 130, 246, 0.6);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  /* ── Selection ── */
+  ::selection {
+    background-color: rgba(99, 102, 241, 0.25);
+    color: #EDEDEF;
+  }
+}
+
+
+/* ─────────────────────────────────────────────────────────
+   LAYER 4: UTILITY CLASSES & ANIMATIONS
+   ───────────────────────────────────────────────────────── */
+
+@layer utilities {
+
+  /* ── Pulse-subtle — used by StatusDot ── */
+
+  @keyframes pulse-subtle {
+    0%, 100% { opacity: 1; }
+    50%      { opacity: 0.5; }
+  }
+  .animate-pulse-subtle {
+    animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* ── Shimmer — used by Progress bar ── */
+
+  @keyframes shimmer {
+    0%   { transform: translateX(-200%); }
+    100% { transform: translateX(200%); }
+  }
+
+  /* ── Ambient Background float ── */
+
+  @keyframes float-slow {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    25%      { transform: translate(5%, 10%) scale(1.05); }
+    50%      { transform: translate(-3%, 5%) scale(0.95); }
+    75%      { transform: translate(-8%, -5%) scale(1.02); }
+  }
+  .animate-float-slow {
+    animation: float-slow 20s ease-in-out infinite;
+  }
+
+  @keyframes float-slower {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33%      { transform: translate(-5%, 8%) scale(1.03); }
+    66%      { transform: translate(8%, -3%) scale(0.97); }
+  }
+  .animate-float-slower {
+    animation: float-slower 30s ease-in-out infinite;
+  }
+
+  @keyframes float-slowest {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50%      { transform: translate(3%, -5%) scale(1.04); }
+  }
+  .animate-float-slowest {
+    animation: float-slowest 40s ease-in-out infinite;
+  }
+
+  /* ── CTA shimmer effect ── */
+
+  .cta-shimmer {
+    position: relative;
+    overflow: hidden;
+  }
+  .cta-shimmer::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      105deg,
+      transparent 40%,
+      rgba(255,255,255,0.15) 50%,
+      transparent 60%
+    );
+    transform: translateX(-200%);
+    transition: transform 700ms;
+  }
+  .cta-shimmer:hover::after {
+    transform: translateX(200%);
+  }
+
+  /* ── Scrollbar utilities ── */
+
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* ── Glass input — shared base for form inputs ── */
+  .glass-input {
+    background-color: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--sg-border-subtle);
+    color: var(--sg-text-primary);
+    transition: all var(--sg-duration-fast) ease;
+  }
+  .glass-input:focus {
+    border-color: rgba(59, 130, 246, 0.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    outline: none;
+  }
+  .glass-input::placeholder {
+    color: rgba(83, 92, 107, 0.6);
+  }
+
+  /* ── Stealth Glass Focus Ring ── */
+  .sg-focus-ring {
+    &:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--sg-void),
+        0 0 0 4px rgba(59, 130, 246, 0.5),
+        var(--sg-focus-shadow);
+    }
+  }
+}
+
+
+/* ─────────────────────────────────────────────────────────
+   ACCORDION ANIMATIONS
+   ───────────────────────────────────────────────────────── */
+
+@keyframes accordion-down {
+  from { height: 0; opacity: 0; }
+  to { height: var(--radix-accordion-content-height); opacity: 1; }
+}
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); opacity: 1; }
+  to { height: 0; opacity: 0; }
+}
+
+.animate-accordion-down {
+  animation: accordion-down 200ms ease-out;
+}
+.animate-accordion-up {
+  animation: accordion-up 200ms ease-out;
+}
+
+
+/* ─────────────────────────────────────────────────────────
+   LAYER 5: MOBILE PERFORMANCE
+   Disable backdrop-blur, cap animation/transition durations,
+   force GPU compositing, and simplify shadows on mobile for
+   60 FPS performance.
+   ───────────────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  /* Disable backdrop-blur for 60fps on mobile */
+  .backdrop-blur-xl,
+  .backdrop-blur-2xl,
+  .backdrop-blur-md,
+  .backdrop-blur-sm,
+  [class*="backdrop-blur"] {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+
+  /* Cap transition/animation durations */
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.15s !important;
+    animation-duration: 0.05s !important;
+  }
+
+  /* Force GPU compositing on animated elements */
+  .transition-all,
+  .transition-transform,
+  .transition-opacity,
+  .transition-colors,
+  [class*="animate-"] {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
+  /* Simplified shadows for mobile */
+  .shadow-2xl,
+  .shadow-xl,
+  .shadow-lg {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+  }
+}
+
+
+/* ─────────────────────────────────────────────────────────
+   LAYER 6: REDUCED MOTION
+   Full prefers-reduced-motion: reduce support — all
+   animations/transitions set to 0.01ms instant.
+   ───────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .animate-pulse-subtle,
+  .animate-float-slow,
+  .animate-float-slower,
+  .animate-float-slowest,
+  .animate-pulse,
+  .animate-spin,
+  [class*="animate-"] {
+    animation: none !important;
+  }
+}
+
+
+/* ─────────────────────────────────────────────────────────
+   LAYER 7: TOUCH DEVICE OVERRIDES
+   On touch devices (hover: none), reveal hidden actions
+   since there is no hover trigger available.
+   ───────────────────────────────────────────────────────── */
+
+@media (hover: none) {
+  /* Reveal hidden actions on touch devices */
+  .reveal-touch-visible {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "@sdvf23rvfa43f/stealth-glass",
+  "version": "1.3.0",
+  "description": "Stealth Glass Design System - Dark dashboard theme for Caasify PaaS platform",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./design-tokens": {
+      "import": "./dist/design-tokens.js",
+      "types": "./dist/design-tokens.d.ts"
+    },
+    "./stealth-glass-theme.css": "./dist/stealth-glass-theme.css"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "npx tsup",
+    "dev": "npx tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "npx tsc --noEmit",
+    "verify": "node -e \"const p=require('./package.json'); if(p.name!=='@sdvf23rvfa43f/stealth-glass'){console.error('WRONG PACKAGE: '+p.name);process.exit(1)} console.log('OK: '+p.name+'@'+p.version)\"",
+    "prepublishOnly": "npm run verify && npm run clean && npm run build"
+  },
+  "keywords": [
+    "caasify",
+    "design-system",
+    "stealth-glass",
+    "dark-theme",
+    "dashboard",
+    "react",
+    "tailwindcss",
+    "paas"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/caasify/stealth-glass-theme.git",
+    "directory": "theme"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MIT",
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": ">=0.300.0",
+    "tailwind-merge": ">=2.0.0",
+    "class-variance-authority": ">=0.7.0",
+    "tailwindcss": ">=4.0.0",
+    "@radix-ui/react-accordion": ">=1.0.0",
+    "@radix-ui/react-avatar": ">=1.0.0",
+    "@radix-ui/react-checkbox": ">=1.0.0",
+    "@radix-ui/react-context-menu": ">=2.0.0",
+    "@radix-ui/react-dialog": ">=1.0.0",
+    "@radix-ui/react-dropdown-menu": ">=2.0.0",
+    "@radix-ui/react-popover": ">=1.0.0",
+    "@radix-ui/react-progress": ">=1.0.0",
+    "@radix-ui/react-radio-group": ">=1.0.0",
+    "@radix-ui/react-scroll-area": ">=1.0.0",
+    "@radix-ui/react-select": ">=2.0.0",
+    "@radix-ui/react-slider": ">=1.0.0",
+    "@radix-ui/react-slot": ">=1.0.0",
+    "@radix-ui/react-switch": ">=1.0.0",
+    "@radix-ui/react-tabs": ">=1.0.0",
+    "@radix-ui/react-toggle": ">=1.0.0",
+    "@radix-ui/react-toggle-group": ">=1.0.0",
+    "@radix-ui/react-tooltip": ">=1.0.0",
+    "cmdk": ">=1.0.0",
+    "motion": ">=12.0.0",
+    "recharts": ">=2.0.0",
+    "sonner": ">=2.0.0",
+    "vaul": ">=1.0.0",
+    "date-fns": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "recharts": { "optional": true },
+    "cmdk": { "optional": true },
+    "motion": { "optional": true },
+    "vaul": { "optional": true },
+    "date-fns": { "optional": true }
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "motion": "^12.0.0",
+    "recharts": "^2.0.0",
+    "sonner": "^2.0.0",
+    "vaul": "^1.0.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.0.0",
+    "lucide-react": ">=0.300.0",
+    "tailwind-merge": ">=2.0.0",
+    "class-variance-authority": ">=0.7.0",
+    "@radix-ui/react-accordion": ">=1.0.0",
+    "@radix-ui/react-avatar": ">=1.0.0",
+    "@radix-ui/react-checkbox": ">=1.0.0",
+    "@radix-ui/react-context-menu": ">=2.0.0",
+    "@radix-ui/react-dialog": ">=1.0.0",
+    "@radix-ui/react-dropdown-menu": ">=2.0.0",
+    "@radix-ui/react-popover": ">=1.0.0",
+    "@radix-ui/react-progress": ">=1.0.0",
+    "@radix-ui/react-radio-group": ">=1.0.0",
+    "@radix-ui/react-scroll-area": ">=1.0.0",
+    "@radix-ui/react-select": ">=2.0.0",
+    "@radix-ui/react-slider": ">=1.0.0",
+    "@radix-ui/react-slot": ">=1.0.0",
+    "@radix-ui/react-switch": ">=1.0.0",
+    "@radix-ui/react-tabs": ">=1.0.0",
+    "@radix-ui/react-toggle": ">=1.0.0",
+    "@radix-ui/react-toggle-group": ">=1.0.0",
+    "@radix-ui/react-tooltip": ">=1.0.0"
+  }
+}