@nkanish/liquidglass-ui 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,425 @@
+/* ============================================
+   LiquidGlass UI - CSS Custom Properties & Base Styles
+   Copyright 2026 Nitin Kanish, Debugged Pro
+   MIT License
+   ============================================ */
+
+/* ===== CSS Custom Properties (Theming) ===== */
+
+:where(:root, [data-theme="light"]) {
+  /* Colors */
+  --lg-foreground: rgb(0 0 0 / 0.88);
+  --lg-foreground-secondary: rgb(60 60 67 / 0.8);
+  --lg-muted: rgb(60 60 67 / 0.6);
+  --lg-background: rgb(255 255 255);
+  
+  /* Glass surfaces */
+  --lg-glass: rgb(255 255 255 / 0.65);
+  --lg-glass-hover: rgb(255 255 255 / 0.75);
+  --lg-glass-active: rgb(236 236 240 / 0.85);
+  --lg-glass-elevated: rgb(255 255 255 / 0.8);
+  
+  /* Borders & edges */
+  --lg-edge: rgb(0 0 0 / 0.08);
+  --lg-edge-strong: rgb(0 0 0 / 0.12);
+  --lg-ring: rgb(0 0 0 / 0.4);
+  
+  /* Shadows */
+  --lg-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
+  --lg-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
+  --lg-shadow-md: 0 4px 6px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.06);
+  --lg-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05);
+  --lg-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.1), 0 8px 10px rgb(0 0 0 / 0.04);
+  --lg-drop: rgb(0 0 0 / 0.06);
+  
+  /* Lens effects */
+  --lg-lens: rgb(0 0 0 / 0.03);
+  --lg-lens-drop: rgb(0 0 0 / 0.11);
+  --lg-lens-shine: -1.5;
+  --lg-rim-shine: 0.3;
+  
+  /* Selection & highlights */
+  --lg-selection: rgb(0 0 0 / 0.1);
+  --lg-highlight: rgb(60 60 67 / 0.09);
+  
+  /* Surfaces */
+  --lg-surface: rgb(250 250 252 / 0.86);
+  --lg-surface-edge: rgb(0 0 0 / 0.08);
+  --lg-separator: rgb(60 60 67 / 0.15);
+  
+  /* Controls */
+  --lg-track: rgb(59 59 66 / 0.3);
+  --lg-rail: rgb(0 0 0 / 0.1);
+  
+  /* Segments */
+  --lg-segment-track: rgb(118 118 128 / 0.12);
+  --lg-segment-thumb: rgb(255 255 255);
+  --lg-segment-label: rgb(0 0 0);
+  --lg-segment-lens: rgb(0 0 0 / 0.03);
+  
+  /* Accent colors */
+  --lg-accent: #007aff;
+  --lg-accent-hover: #0066d6;
+  --lg-accent-light: rgb(0 122 255 / 0.1);
+  --lg-success: #34c759;
+  --lg-warning: #ff9f0a;
+  --lg-destructive: #ff383c;
+  --lg-info: #5ac8fa;
+  
+  /* Control states */
+  --lg-on: #34c759;
+  --lg-fill: #007aff;
+  
+  /* Blur & filter values */
+  --lg-blur: 20px;
+  --lg-blur-sm: 8px;
+  --lg-blur-lg: 40px;
+  --lg-saturate: 1.8;
+  
+  /* Animation */
+  --lg-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --lg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --lg-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --lg-duration-fast: 150ms;
+  --lg-duration: 200ms;
+  --lg-duration-slow: 300ms;
+  
+  /* Spacing */
+  --lg-radius-sm: 8px;
+  --lg-radius: 12px;
+  --lg-radius-md: 16px;
+  --lg-radius-lg: 20px;
+  --lg-radius-xl: 28px;
+  --lg-radius-full: 9999px;
+}
+
+/* ===== Dark Mode ===== */
+
+:where([data-theme="dark"]) {
+  --lg-foreground: rgb(255 255 255);
+  --lg-foreground-secondary: rgb(235 235 245 / 0.8);
+  --lg-muted: rgb(235 235 245 / 0.6);
+  --lg-background: rgb(0 0 0);
+  
+  --lg-glass: rgb(40 40 40 / 0.62);
+  --lg-glass-hover: rgb(50 50 50 / 0.7);
+  --lg-glass-active: rgb(70 70 70 / 0.62);
+  --lg-glass-elevated: rgb(50 50 50 / 0.75);
+  
+  --lg-edge: rgb(255 255 255 / 0.08);
+  --lg-edge-strong: rgb(255 255 255 / 0.12);
+  --lg-ring: rgb(255 255 255 / 0.5);
+  
+  --lg-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
+  --lg-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
+  --lg-shadow-md: 0 4px 6px rgb(0 0 0 / 0.4);
+  --lg-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.4);
+  --lg-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.5);
+  --lg-drop: transparent;
+  
+  --lg-lens: rgb(255 255 255 / 0.055);
+  --lg-lens-drop: transparent;
+  --lg-lens-shine: 1;
+  --lg-rim-shine: 0.13;
+  
+  --lg-selection: rgb(255 255 255 / 0.145);
+  --lg-highlight: rgb(235 235 245 / 0.13);
+  
+  --lg-surface: rgb(28 28 31 / 0.86);
+  --lg-surface-edge: rgb(255 255 255 / 0.13);
+  --lg-separator: rgb(235 235 245 / 0.16);
+  
+  --lg-track: rgb(235 235 245 / 0.3);
+  --lg-rail: rgb(255 255 255 / 0.1);
+  
+  --lg-segment-track: transparent;
+  --lg-segment-thumb: rgb(235 235 245 / 0.3);
+  --lg-segment-label: rgb(255 255 255);
+  --lg-segment-lens: transparent;
+  
+  --lg-accent: #0a84ff;
+  --lg-accent-hover: #409cff;
+  --lg-accent-light: rgb(10 132 255 / 0.15);
+  --lg-success: #30d158;
+  --lg-warning: #ffd60a;
+  --lg-destructive: #ff453a;
+  --lg-info: #64d2ff;
+  
+  --lg-on: #30d158;
+  --lg-fill: #0a84ff;
+}
+
+/* ===== System preference fallback ===== */
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"])) {
+    --lg-foreground: rgb(255 255 255);
+    --lg-foreground-secondary: rgb(235 235 245 / 0.8);
+    --lg-muted: rgb(235 235 245 / 0.6);
+    --lg-background: rgb(0 0 0);
+    
+    --lg-glass: rgb(40 40 40 / 0.62);
+    --lg-glass-hover: rgb(50 50 50 / 0.7);
+    --lg-glass-active: rgb(70 70 70 / 0.62);
+    --lg-glass-elevated: rgb(50 50 50 / 0.75);
+    
+    --lg-edge: rgb(255 255 255 / 0.08);
+    --lg-edge-strong: rgb(255 255 255 / 0.12);
+    --lg-ring: rgb(255 255 255 / 0.5);
+    
+    --lg-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
+    --lg-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
+    --lg-shadow-md: 0 4px 6px rgb(0 0 0 / 0.4);
+    --lg-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.4);
+    --lg-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.5);
+    --lg-drop: transparent;
+    
+    --lg-lens: rgb(255 255 255 / 0.055);
+    --lg-lens-drop: transparent;
+    --lg-lens-shine: 1;
+    --lg-rim-shine: 0.13;
+    
+    --lg-selection: rgb(255 255 255 / 0.145);
+    --lg-highlight: rgb(235 235 245 / 0.13);
+    
+    --lg-surface: rgb(28 28 31 / 0.86);
+    --lg-surface-edge: rgb(255 255 255 / 0.13);
+    --lg-separator: rgb(235 235 245 / 0.16);
+    
+    --lg-track: rgb(235 235 245 / 0.3);
+    --lg-rail: rgb(255 255 255 / 0.1);
+    
+    --lg-segment-track: transparent;
+    --lg-segment-thumb: rgb(235 235 245 / 0.3);
+    --lg-segment-label: rgb(255 255 255);
+    --lg-segment-lens: transparent;
+    
+    --lg-accent: #0a84ff;
+    --lg-accent-hover: #409cff;
+    --lg-accent-light: rgb(10 132 255 / 0.15);
+    --lg-success: #30d158;
+    --lg-warning: #ffd60a;
+    --lg-destructive: #ff453a;
+    --lg-info: #64d2ff;
+    
+    --lg-on: #30d158;
+    --lg-fill: #0a84ff;
+  }
+}
+
+/* ===== Reduced Motion ===== */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --lg-duration-fast: 0ms;
+    --lg-duration: 0ms;
+    --lg-duration-slow: 0ms;
+  }
+}
+
+/* ===== Reduced Transparency ===== */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --lg-glass: rgb(245 245 247);
+    --lg-glass-hover: rgb(240 240 242);
+    --lg-glass-active: rgb(230 230 235);
+    --lg-blur: 0px;
+    --lg-blur-sm: 0px;
+    --lg-blur-lg: 0px;
+  }
+  
+  [data-theme="dark"] {
+    --lg-glass: rgb(44 44 46);
+    --lg-glass-hover: rgb(54 54 56);
+    --lg-glass-active: rgb(64 64 66);
+  }
+}
+
+/* ===== Base Glass Styles ===== */
+
+.lg-glass {
+  position: relative;
+  background-color: var(--lg-glass);
+  background-image: var(--lg-rim, none);
+  background-size: 100% 100%;
+  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
+  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
+  box-shadow:
+    inset 0 0 0 0.5px var(--lg-edge),
+    0 1px 3px var(--lg-drop);
+  transition: background-color var(--lg-duration) var(--lg-ease);
+}
+
+.lg-glass[data-rim] {
+  box-shadow: 0 1px 3px var(--lg-drop);
+}
+
+/* Pointer-reactive highlight */
+.lg-glass::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: radial-gradient(
+    circle 240px at var(--lg-pointer-x, 50%) var(--lg-pointer-y, 50%),
+    rgb(255 255 255 / 0.06),
+    rgb(255 255 255 / 0.03) 50%,
+    transparent
+  );
+  opacity: 0;
+  transition: opacity var(--lg-duration) var(--lg-ease);
+}
+
+.lg-glass:hover::after,
+.lg-glass[data-hover]::after {
+  opacity: 1;
+}
+
+.lg-glass[data-pressed]::after {
+  opacity: 1;
+  transition-duration: 0ms;
+}
+
+/* Glass variants */
+.lg-glass-elevated {
+  background-color: var(--lg-glass-elevated);
+  box-shadow:
+    inset 0 0 0 0.5px var(--lg-edge),
+    var(--lg-shadow-lg);
+}
+
+.lg-glass-subtle {
+  --lg-blur: var(--lg-blur-sm);
+  background-color: rgb(255 255 255 / 0.4);
+}
+
+[data-theme="dark"] .lg-glass-subtle {
+  background-color: rgb(40 40 40 / 0.4);
+}
+
+/* ===== Backdrop Container ===== */
+
+[data-lg-backdrop] {
+  position: relative;
+  isolation: isolate;
+}
+
+/* ===== Focus Styles ===== */
+
+.lg-focus-ring:focus-visible {
+  outline: 2px solid var(--lg-ring);
+  outline-offset: 2px;
+}
+
+.lg-focus-ring-inset:focus-visible {
+  outline: 2px solid var(--lg-ring);
+  outline-offset: -2px;
+}
+
+/* ===== Interactive Base ===== */
+
+.lg-interactive {
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* ===== Typography ===== */
+
+.lg-text {
+  color: var(--lg-foreground);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
+}
+
+.lg-text-secondary {
+  color: var(--lg-foreground-secondary);
+}
+
+.lg-text-muted {
+  color: var(--lg-muted);
+}
+
+/* ===== Animations ===== */
+
+@keyframes lg-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes lg-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes lg-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes lg-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes lg-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes lg-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes lg-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes lg-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* ===== Utility Classes ===== */
+
+.lg-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/package.json

@@ -1,6 +1,106 @@
 {
   "name": "@nkanish/liquidglass-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Advanced Apple Liquid Glass (iOS 26 / macOS Tahoe) UI component library for React with SVG refraction effects, backdrop blur, and beautiful animations",
+  "keywords": [
+    "react",
+    "liquid glass",
+    "glass",
+    "glassmorphism",
+    "glisse",
+    "ui",
+    "components",
+    "ios",
+    "macos",
+    "tahoe",
+    "backdrop-filter",
+    "svg-filter",
+    "refraction",
+    "apple",
+    "design-system",
+    "accessibility",
+    "typescript",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "author": "Nitin Kanish, Debugged Pro",
+  "homepage": "https://liquidglass-ui-docs.vercel.app/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nitinkanish/liquidglass-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nitinkanish/liquidglass-ui/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/styles.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": {
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm build && pnpm test"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.10",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}