@work-rjkashyap/unified-ui 0.1.0

package/dist/z-index-B_nTQ3qo.d.ts

@@ -0,0 +1,422 @@
+declare const slate: {
+    readonly 50: "248 250 252";
+    readonly 100: "241 245 249";
+    readonly 200: "226 232 240";
+    readonly 300: "203 213 225";
+    readonly 400: "148 163 184";
+    readonly 500: "100 116 139";
+    readonly 600: "71 85 105";
+    readonly 700: "51 65 85";
+    readonly 800: "30 41 59";
+    readonly 900: "15 23 42";
+    readonly 950: "2 6 23";
+};
+declare const gray: {
+    readonly 50: "249 250 251";
+    readonly 100: "243 244 246";
+    readonly 200: "229 231 235";
+    readonly 300: "209 213 219";
+    readonly 400: "156 163 175";
+    readonly 500: "107 114 128";
+    readonly 600: "75 85 99";
+    readonly 700: "55 65 81";
+    readonly 800: "31 41 55";
+    readonly 900: "17 24 39";
+    readonly 950: "3 7 18";
+};
+declare const zinc: {
+    readonly 50: "250 250 250";
+    readonly 100: "244 244 245";
+    readonly 200: "228 228 231";
+    readonly 300: "212 212 216";
+    readonly 400: "161 161 170";
+    readonly 500: "113 113 122";
+    readonly 600: "82 82 91";
+    readonly 700: "63 63 70";
+    readonly 800: "39 39 42";
+    readonly 900: "24 24 27";
+    readonly 950: "9 9 11";
+};
+declare const brand: {
+    readonly 50: "238 242 255";
+    readonly 100: "224 231 255";
+    readonly 200: "199 210 254";
+    readonly 300: "165 180 252";
+    readonly 400: "129 140 248";
+    readonly 500: "99 102 241";
+    readonly 600: "79 70 229";
+    readonly 700: "67 56 202";
+    readonly 800: "55 48 163";
+    readonly 900: "49 46 129";
+    readonly 950: "30 27 75";
+};
+declare const blue: {
+    readonly 50: "239 246 255";
+    readonly 100: "219 234 254";
+    readonly 200: "191 219 254";
+    readonly 300: "147 197 253";
+    readonly 400: "96 165 250";
+    readonly 500: "59 130 246";
+    readonly 600: "37 99 235";
+    readonly 700: "29 78 216";
+    readonly 800: "30 64 175";
+    readonly 900: "30 58 138";
+    readonly 950: "23 37 84";
+};
+declare const green: {
+    readonly 50: "240 253 244";
+    readonly 100: "220 252 231";
+    readonly 200: "187 247 208";
+    readonly 300: "134 239 172";
+    readonly 400: "74 222 128";
+    readonly 500: "34 197 94";
+    readonly 600: "22 163 74";
+    readonly 700: "21 128 61";
+    readonly 800: "22 101 52";
+    readonly 900: "20 83 45";
+    readonly 950: "5 46 22";
+};
+declare const amber: {
+    readonly 50: "255 251 235";
+    readonly 100: "254 243 199";
+    readonly 200: "253 230 138";
+    readonly 300: "252 211 77";
+    readonly 400: "251 191 36";
+    readonly 500: "245 158 11";
+    readonly 600: "217 119 6";
+    readonly 700: "180 83 9";
+    readonly 800: "146 64 14";
+    readonly 900: "120 53 15";
+    readonly 950: "69 26 3";
+};
+declare const red: {
+    readonly 50: "254 242 242";
+    readonly 100: "254 226 226";
+    readonly 200: "254 202 202";
+    readonly 300: "252 165 165";
+    readonly 400: "248 113 113";
+    readonly 500: "239 68 68";
+    readonly 600: "220 38 38";
+    readonly 700: "185 28 28";
+    readonly 800: "153 27 27";
+    readonly 900: "127 29 29";
+    readonly 950: "69 10 10";
+};
+declare const teal: {
+    readonly 50: "240 253 250";
+    readonly 100: "204 251 241";
+    readonly 200: "153 246 228";
+    readonly 300: "94 234 212";
+    readonly 400: "45 212 191";
+    readonly 500: "20 184 166";
+    readonly 600: "13 148 136";
+    readonly 700: "15 118 110";
+    readonly 800: "17 94 89";
+    readonly 900: "19 78 74";
+    readonly 950: "4 47 46";
+};
+declare const pure: {
+    readonly white: "255 255 255";
+    readonly black: "0 0 0";
+    readonly transparent: "transparent";
+};
+declare const neutral: {
+    readonly 50: "250 250 250";
+    readonly 100: "244 244 245";
+    readonly 200: "228 228 231";
+    readonly 300: "212 212 216";
+    readonly 400: "161 161 170";
+    readonly 500: "113 113 122";
+    readonly 600: "82 82 91";
+    readonly 700: "63 63 70";
+    readonly 800: "39 39 42";
+    readonly 900: "24 24 27";
+    readonly 950: "9 9 11";
+};
+declare const semanticLight: {
+    readonly background: "255 255 255";
+    readonly foreground: "9 9 11";
+    readonly surface: "250 250 250";
+    readonly surfaceRaised: "255 255 255";
+    readonly surfaceOverlay: "244 244 245";
+    readonly muted: "244 244 245";
+    readonly mutedForeground: "82 82 91";
+    readonly primary: "79 70 229";
+    readonly primaryForeground: "255 255 255";
+    readonly primaryHover: "67 56 202";
+    readonly primaryActive: "55 48 163";
+    readonly primaryMuted: "238 242 255";
+    readonly primaryMutedForeground: "67 56 202";
+    readonly secondary: "244 244 245";
+    readonly secondaryForeground: "24 24 27";
+    readonly secondaryHover: "228 228 231";
+    readonly secondaryActive: "212 212 216";
+    readonly success: "22 163 74";
+    readonly successForeground: "9 9 11";
+    readonly successMuted: "240 253 244";
+    readonly successMutedForeground: "21 128 61";
+    readonly warning: "245 158 11";
+    readonly warningForeground: "9 9 11";
+    readonly warningMuted: "255 251 235";
+    readonly warningMutedForeground: "180 83 9";
+    readonly danger: "220 38 38";
+    readonly dangerForeground: "255 255 255";
+    readonly dangerHover: "185 28 28";
+    readonly dangerActive: "153 27 27";
+    readonly dangerMuted: "254 242 242";
+    readonly dangerMutedForeground: "185 28 28";
+    readonly info: "37 99 235";
+    readonly infoForeground: "255 255 255";
+    readonly infoMuted: "239 246 255";
+    readonly infoMutedForeground: "29 78 216";
+    readonly border: "188 188 194";
+    readonly borderMuted: "244 244 245";
+    readonly borderStrong: "148 148 157";
+    readonly focusRing: "99 102 241";
+    readonly input: "148 148 157";
+    readonly inputForeground: "24 24 27";
+    readonly inputPlaceholder: "113 113 122";
+    readonly disabled: "244 244 245";
+    readonly disabledForeground: "120 120 129";
+};
+declare const semanticDark: {
+    readonly background: "9 9 11";
+    readonly foreground: "250 250 250";
+    readonly surface: "24 24 27";
+    readonly surfaceRaised: "39 39 42";
+    readonly surfaceOverlay: "39 39 42";
+    readonly muted: "39 39 42";
+    readonly mutedForeground: "161 161 170";
+    readonly primary: "129 140 248";
+    readonly primaryForeground: "24 24 27";
+    readonly primaryHover: "165 180 252";
+    readonly primaryActive: "199 210 254";
+    readonly primaryMuted: "30 27 75";
+    readonly primaryMutedForeground: "165 180 252";
+    readonly secondary: "39 39 42";
+    readonly secondaryForeground: "244 244 245";
+    readonly secondaryHover: "63 63 70";
+    readonly secondaryActive: "82 82 91";
+    readonly success: "34 197 94";
+    readonly successForeground: "9 9 11";
+    readonly successMuted: "5 46 22";
+    readonly successMutedForeground: "134 239 172";
+    readonly warning: "251 191 36";
+    readonly warningForeground: "9 9 11";
+    readonly warningMuted: "69 26 3";
+    readonly warningMutedForeground: "252 211 77";
+    readonly danger: "239 68 68";
+    readonly dangerForeground: "9 9 11";
+    readonly dangerHover: "248 113 113";
+    readonly dangerActive: "252 165 165";
+    readonly dangerMuted: "69 10 10";
+    readonly dangerMutedForeground: "252 165 165";
+    readonly info: "96 165 250";
+    readonly infoForeground: "9 9 11";
+    readonly infoMuted: "23 37 84";
+    readonly infoMutedForeground: "147 197 253";
+    readonly border: "82 82 91";
+    readonly borderMuted: "39 39 42";
+    readonly borderStrong: "113 113 122";
+    readonly focusRing: "129 140 248";
+    readonly input: "96 96 105";
+    readonly inputForeground: "250 250 250";
+    readonly inputPlaceholder: "137 137 145";
+    readonly disabled: "39 39 42";
+    readonly disabledForeground: "113 113 122";
+};
+type ColorScale = Record<string, string>;
+type SemanticColors = typeof semanticLight;
+type SemanticColorKey = keyof SemanticColors;
+declare const palettes: {
+    readonly slate: {
+        readonly 50: "248 250 252";
+        readonly 100: "241 245 249";
+        readonly 200: "226 232 240";
+        readonly 300: "203 213 225";
+        readonly 400: "148 163 184";
+        readonly 500: "100 116 139";
+        readonly 600: "71 85 105";
+        readonly 700: "51 65 85";
+        readonly 800: "30 41 59";
+        readonly 900: "15 23 42";
+        readonly 950: "2 6 23";
+    };
+    readonly gray: {
+        readonly 50: "249 250 251";
+        readonly 100: "243 244 246";
+        readonly 200: "229 231 235";
+        readonly 300: "209 213 219";
+        readonly 400: "156 163 175";
+        readonly 500: "107 114 128";
+        readonly 600: "75 85 99";
+        readonly 700: "55 65 81";
+        readonly 800: "31 41 55";
+        readonly 900: "17 24 39";
+        readonly 950: "3 7 18";
+    };
+    readonly zinc: {
+        readonly 50: "250 250 250";
+        readonly 100: "244 244 245";
+        readonly 200: "228 228 231";
+        readonly 300: "212 212 216";
+        readonly 400: "161 161 170";
+        readonly 500: "113 113 122";
+        readonly 600: "82 82 91";
+        readonly 700: "63 63 70";
+        readonly 800: "39 39 42";
+        readonly 900: "24 24 27";
+        readonly 950: "9 9 11";
+    };
+    readonly brand: {
+        readonly 50: "238 242 255";
+        readonly 100: "224 231 255";
+        readonly 200: "199 210 254";
+        readonly 300: "165 180 252";
+        readonly 400: "129 140 248";
+        readonly 500: "99 102 241";
+        readonly 600: "79 70 229";
+        readonly 700: "67 56 202";
+        readonly 800: "55 48 163";
+        readonly 900: "49 46 129";
+        readonly 950: "30 27 75";
+    };
+    readonly blue: {
+        readonly 50: "239 246 255";
+        readonly 100: "219 234 254";
+        readonly 200: "191 219 254";
+        readonly 300: "147 197 253";
+        readonly 400: "96 165 250";
+        readonly 500: "59 130 246";
+        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
+        readonly 800: "30 64 175";
+        readonly 900: "30 58 138";
+        readonly 950: "23 37 84";
+    };
+    readonly green: {
+        readonly 50: "240 253 244";
+        readonly 100: "220 252 231";
+        readonly 200: "187 247 208";
+        readonly 300: "134 239 172";
+        readonly 400: "74 222 128";
+        readonly 500: "34 197 94";
+        readonly 600: "22 163 74";
+        readonly 700: "21 128 61";
+        readonly 800: "22 101 52";
+        readonly 900: "20 83 45";
+        readonly 950: "5 46 22";
+    };
+    readonly amber: {
+        readonly 50: "255 251 235";
+        readonly 100: "254 243 199";
+        readonly 200: "253 230 138";
+        readonly 300: "252 211 77";
+        readonly 400: "251 191 36";
+        readonly 500: "245 158 11";
+        readonly 600: "217 119 6";
+        readonly 700: "180 83 9";
+        readonly 800: "146 64 14";
+        readonly 900: "120 53 15";
+        readonly 950: "69 26 3";
+    };
+    readonly red: {
+        readonly 50: "254 242 242";
+        readonly 100: "254 226 226";
+        readonly 200: "254 202 202";
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+        readonly 500: "239 68 68";
+        readonly 600: "220 38 38";
+        readonly 700: "185 28 28";
+        readonly 800: "153 27 27";
+        readonly 900: "127 29 29";
+        readonly 950: "69 10 10";
+    };
+    readonly teal: {
+        readonly 50: "240 253 250";
+        readonly 100: "204 251 241";
+        readonly 200: "153 246 228";
+        readonly 300: "94 234 212";
+        readonly 400: "45 212 191";
+        readonly 500: "20 184 166";
+        readonly 600: "13 148 136";
+        readonly 700: "15 118 110";
+        readonly 800: "17 94 89";
+        readonly 900: "19 78 74";
+        readonly 950: "4 47 46";
+    };
+};
+
+declare const radius: {
+    /** No rounding */
+    readonly none: "0px";
+    /** Barely perceptible — tags, micro elements */
+    readonly sm: "4px";
+    /** Default for buttons, inputs, cards */
+    readonly md: "6px";
+    /** Dialogs, sheets, popovers, dropdowns */
+    readonly lg: "8px";
+    /** Larger containers, modals */
+    readonly xl: "12px";
+    /** Full pill / circle — avatars, toggle pills */
+    readonly full: "9999px";
+};
+type Radius = keyof typeof radius;
+type RadiusValue = (typeof radius)[Radius];
+
+declare const shadow: {
+    /** No shadow — flush with the surface */
+    readonly none: "none";
+    /** Subtle lift — cards on hover, slightly raised surfaces */
+    readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    /** Default card elevation — raised cards, wells */
+    readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    /** Dropdowns, autocomplete menus, select panels */
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    /** Popovers, floating toolbars, sticky headers */
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    /** Dialogs, modals, command palettes */
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    /** Toast notifications, top-level overlays */
+    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    /** Focus ring shadow — used alongside outline for focus indication */
+    readonly focusRing: "0 0 0 2px rgb(var(--ds-color-focus-ring) / 0.4)";
+};
+declare const shadowDark: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.2)";
+    readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.3)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.35)";
+    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.5)";
+    readonly focusRing: "0 0 0 2px rgb(var(--ds-color-focus-ring) / 0.5)";
+};
+type Shadow = keyof typeof shadow;
+type ShadowValue = (typeof shadow)[Shadow];
+
+declare const zIndex: {
+    /** Default document flow — no explicit stacking */
+    readonly base: "0";
+    /** Dropdowns, select menus, autocomplete lists */
+    readonly dropdown: "10";
+    /** Sticky headers, floating action bars, pinned columns */
+    readonly sticky: "20";
+    /** Backdrop overlays behind modals and drawers */
+    readonly overlay: "30";
+    /** Modals, dialogs, sheets, drawers */
+    readonly modal: "40";
+    /** Popovers that must render above modals */
+    readonly popover: "50";
+    /** Toast notifications — always visible above all content */
+    readonly toast: "60";
+    /** Tooltips — highest interactive z-layer */
+    readonly tooltip: "70";
+    /** Emergency escape hatch — use sparingly and document why */
+    readonly max: "9999";
+};
+type ZIndex = keyof typeof zIndex;
+type ZIndexValue = (typeof zIndex)[ZIndex];
+
+export { type ColorScale as C, type Radius as R, type SemanticColorKey as S, type ZIndex as Z, type RadiusValue as a, type SemanticColors as b, type Shadow as c, type ShadowValue as d, type ZIndexValue as e, amber as f, blue as g, brand as h, gray as i, green as j, pure as k, red as l, semanticLight as m, neutral as n, shadow as o, palettes as p, shadowDark as q, radius as r, semanticDark as s, slate as t, teal as u, zinc as v, zIndex as z };

package/package.json

@@ -0,0 +1,183 @@
+{
+  "name": "@work-rjkashyap/unified-ui",
+  "version": "0.1.0",
+  "description": "A scalable, token-driven React design system built with Tailwind CSS v4 and Framer Motion.",
+  "author": "Rajeshwar Kashyap",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/work-rjkashyap/unified-ui",
+    "directory": "packages/unified-ui"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "./styles.css",
+    "./dist/**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./tokens": {
+      "import": {
+        "types": "./dist/tokens.d.ts",
+        "default": "./dist/tokens.mjs"
+      },
+      "require": {
+        "types": "./dist/tokens.d.cts",
+        "default": "./dist/tokens.cjs"
+      }
+    },
+    "./theme": {
+      "import": {
+        "types": "./dist/theme.d.ts",
+        "default": "./dist/theme.mjs"
+      },
+      "require": {
+        "types": "./dist/theme.d.cts",
+        "default": "./dist/theme.cjs"
+      }
+    },
+    "./primitives": {
+      "import": {
+        "types": "./dist/primitives.d.ts",
+        "default": "./dist/primitives.mjs"
+      },
+      "require": {
+        "types": "./dist/primitives.d.cts",
+        "default": "./dist/primitives.cjs"
+      }
+    },
+    "./components": {
+      "import": {
+        "types": "./dist/components.d.ts",
+        "default": "./dist/components.mjs"
+      },
+      "require": {
+        "types": "./dist/components.d.cts",
+        "default": "./dist/components.cjs"
+      }
+    },
+    "./motion": {
+      "import": {
+        "types": "./dist/motion.d.ts",
+        "default": "./dist/motion.mjs"
+      },
+      "require": {
+        "types": "./dist/motion.d.cts",
+        "default": "./dist/motion.cjs"
+      }
+    },
+    "./utils": {
+      "import": {
+        "types": "./dist/utils.d.ts",
+        "default": "./dist/utils.mjs"
+      },
+      "require": {
+        "types": "./dist/utils.d.cts",
+        "default": "./dist/utils.cjs"
+      }
+    },
+    "./styles.css": "./styles.css"
+  },
+  "typesVersions": {
+    "*": {
+      "tokens": ["./dist/tokens.d.ts"],
+      "theme": ["./dist/theme.d.ts"],
+      "primitives": ["./dist/primitives.d.ts"],
+      "components": ["./dist/components.d.ts"],
+      "motion": ["./dist/motion.d.ts"],
+      "utils": ["./dist/utils.d.ts"]
+    }
+  },
+  "files": [
+    "dist",
+    "styles.css",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "react",
+    "design-system",
+    "tailwindcss",
+    "tailwind",
+    "components",
+    "ui",
+    "unified-ui",
+    "tokens",
+    "framer-motion",
+    "accessibility",
+    "radix-ui"
+  ],
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "optionalDependencies": {
+    "framer-motion": ">=12.0.0",
+    "@radix-ui/react-accordion": ">=1.2.0",
+    "@radix-ui/react-checkbox": ">=1.3.0",
+    "@radix-ui/react-dialog": ">=1.1.0",
+    "@radix-ui/react-dropdown-menu": ">=2.1.0",
+    "@radix-ui/react-popover": ">=1.1.0",
+    "@radix-ui/react-radio-group": ">=1.3.0",
+    "@radix-ui/react-select": ">=2.2.0",
+    "@radix-ui/react-switch": ">=1.2.0",
+    "@radix-ui/react-tabs": ">=1.1.0",
+    "@radix-ui/react-tooltip": ">=1.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "framer-motion": "^12.34.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}