astralis-ui 0.1.0

package/dist/theme/provider.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as g } from "react/jsx-runtime";
+import { useState as v, useEffect as h, useContext as S, createContext as y } from "react";
+const T = y(void 0);
+function u(e) {
+  return e === "system" ? typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : e;
+}
+function M(e) {
+  const r = e.replace("#", ""), t = /^([a-f\d])([a-f\d])([a-f\d])$/i, n = r.replace(t, (o, c, a, l) => c + c + a + a + l + l), s = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);
+  return s ? { r: parseInt(s[1], 16), g: parseInt(s[2], 16), b: parseInt(s[3], 16) } : null;
+}
+const m = (e) => e <= 0.04045 ? e / 12.92 : Math.pow((e + 0.055) / 1.055, 2.4), b = (e) => e <= 31308e-7 ? 12.92 * e : 1.055 * Math.pow(e, 1 / 2.4) - 0.055;
+function k(e, r, t) {
+  const n = m(e / 255), s = m(r / 255), o = m(t / 255), c = Math.cbrt(0.4122214708 * n + 0.5363325363 * s + 0.0514459929 * o), a = Math.cbrt(0.2119034982 * n + 0.6806995451 * s + 0.1073969566 * o), l = Math.cbrt(0.0883024619 * n + 0.2817188376 * s + 0.6299787005 * o), f = 0.2104542553 * c + 0.793617785 * a - 0.0040720468 * l, i = 1.9779984951 * c - 2.428592205 * a + 0.4505937099 * l, d = 0.0259040371 * c + 0.7827717662 * a - 0.808675766 * l;
+  return { l: f, c: Math.hypot(i, d), h: Math.atan2(d, i) };
+}
+function p({ l: e, c: r, h: t }) {
+  const n = r * Math.cos(t), s = r * Math.sin(t), o = (e + 0.3963377774 * n + 0.2158037573 * s) ** 3, c = (e - 0.1055613458 * n - 0.0638541728 * s) ** 3, a = (e - 0.0894841775 * n - 1.291485548 * s) ** 3;
+  return [
+    b(4.0767416621 * o - 3.3077115913 * c + 0.2309699292 * a),
+    b(-1.2684380046 * o + 2.6097574011 * c - 0.3413193965 * a),
+    b(-0.0041960863 * o - 0.7034186147 * c + 1.707614701 * a)
+  ];
+}
+function x(e) {
+  const r = (n) => n.every((s) => s >= -1e-4 && s <= 1.0001);
+  let t = p(e);
+  if (!r(t)) {
+    let n = 0, s = e.c;
+    for (let o = 0; o < 8; o++) {
+      const c = (n + s) / 2;
+      r(p({ ...e, c })) ? n = c : s = c;
+    }
+    t = p({ ...e, c: n });
+  }
+  return "#" + t.map((n) => Math.round(Math.min(1, Math.max(0, n)) * 255).toString(16).padStart(2, "0")).join("");
+}
+function w(e) {
+  const r = M(e);
+  if (!r) return null;
+  const t = k(r.r, r.g, r.b), n = (o, c) => x({ l: t.l + (0.975 - t.l) * o, c: t.c * c, h: t.h }), s = (o, c) => x({ l: t.l * o, c: t.c * c, h: t.h });
+  return {
+    50: n(0.92, 0.22),
+    100: n(0.84, 0.38),
+    200: n(0.68, 0.6),
+    300: n(0.5, 0.82),
+    400: n(0.28, 0.95),
+    500: e,
+    600: s(0.86, 0.98),
+    700: s(0.72, 0.9),
+    800: s(0.58, 0.78),
+    900: s(0.46, 0.62)
+  };
+}
+function I(e) {
+  const r = M(e);
+  return r && k(r.r, r.g, r.b).l >= 0.66 ? "#000000" : "#ffffff";
+}
+function $(e) {
+  if (!e) return {};
+  const r = w(e);
+  if (!r) return { "--astralis-color-brand-500": e };
+  const t = {};
+  for (const [n, s] of Object.entries(r))
+    t[`--astralis-color-brand-${n}`] = s;
+  return t;
+}
+function E(e, r) {
+  if (!e) return {};
+  const t = w(e);
+  if (!t) return { "--astralis-color-brand-500": e };
+  const n = r === "dark" ? { label: t[300], subtle: t[900], muted: t[800], emphasized: t[700], stroke: t[400] } : { label: t[700], subtle: t[100], muted: t[200], emphasized: t[300], stroke: t[500] }, s = {
+    solid: t[500],
+    contrast: I(t[500]),
+    ...n,
+    ring: t[500]
+  }, o = { ...$(e) };
+  for (const [c, a] of Object.entries(s))
+    o[`--astralis-color-brand-${c}`] = a, o[`--astralis-color-accent-${c}`] = a;
+  return o;
+}
+function j({
+  children: e,
+  defaultTheme: r = "system",
+  storageKey: t = "astralis-ui-theme",
+  className: n = "",
+  tokens: s
+}) {
+  const [o, c] = v(r), [a, l] = v("light");
+  h(() => {
+    const d = localStorage.getItem(t) || r;
+    c(d), l(u(d));
+  }, [r, t]), h(() => {
+    const i = u(o);
+    l(i), o !== "system" ? localStorage.setItem(t, o) : localStorage.removeItem(t);
+  }, [o, t]), h(() => {
+    if (o !== "system") return;
+    const i = window.matchMedia("(prefers-color-scheme: dark)"), d = () => l(u("system"));
+    return i.addEventListener("change", d), () => i.removeEventListener("change", d);
+  }, [o]), h(() => {
+    const i = document.documentElement;
+    a === "dark" ? i.classList.add("astralis-dark") : i.classList.remove("astralis-dark");
+  }, [a]);
+  const f = E(s?.brandColor, a);
+  return /* @__PURE__ */ g(T.Provider, { value: { theme: o, setTheme: c, resolvedTheme: a, tokens: s }, children: /* @__PURE__ */ g(
+    "div",
+    {
+      className: `astralis ${n}`.trim(),
+      style: {
+        minHeight: "100vh",
+        width: "100%",
+        ...f
+      },
+      suppressHydrationWarning: !0,
+      children: e
+    }
+  ) });
+}
+const L = () => {
+  const e = S(T);
+  if (!e)
+    throw new Error("useTheme must be used inside an AstralisProvider container root.");
+  return e;
+};
+export {
+  j as AstralisProvider,
+  $ as generateBrandShades,
+  E as generateBrandTokens,
+  L as useTheme
+};

package/dist/utils/astralis-merge.js

@@ -0,0 +1,31 @@
+"use client";
+import { clsx as e } from "clsx";
+import { extendTailwindMerge as t } from "tailwind-merge";
+const o = t({
+  prefix: "astralis",
+  extend: {
+    classGroups: {
+      // Tell tailwind-merge that 'border-<val>' are valid border widths for these custom keys
+      "border-w": [{ border: ["normal", "moderate", "thick", "thicker", "thickest"] }],
+      // Tell tailwind-merge that 'border-<val>' are valid colors for these custom keys
+      "border-color": [{
+        border: [
+          "stroke-base",
+          "stroke-muted",
+          "stroke-subtle",
+          "stroke-inverted",
+          "stroke-warning",
+          "stroke-error",
+          "stroke-success",
+          "stroke-info"
+        ]
+      }]
+    }
+  }
+});
+function n(...r) {
+  return o(e(r));
+}
+export {
+  n as astralisMerge
+};

package/dist/utils/overlay-stack.js

@@ -0,0 +1,27 @@
+"use client";
+const l = [];
+let e = 0, t = "";
+function c() {
+  const o = /* @__PURE__ */ Symbol("astralis-overlay");
+  return l.push(o), o;
+}
+function i(o) {
+  const n = l.indexOf(o);
+  n !== -1 && l.splice(n, 1);
+}
+function r(o) {
+  return l[l.length - 1] === o;
+}
+function u() {
+  e === 0 && (t = document.body.style.overflow, document.body.style.overflow = "hidden"), e++;
+}
+function d() {
+  e = Math.max(0, e - 1), e === 0 && (document.body.style.overflow = t);
+}
+export {
+  r as isTopOverlay,
+  u as lockBodyScroll,
+  i as popOverlay,
+  c as pushOverlay,
+  d as unlockBodyScroll
+};

package/dist/utils/responsive.js

@@ -0,0 +1,32 @@
+"use client";
+const p = ["sm", "md", "lg", "xl"], a = new Set(p);
+function y(n, t) {
+  return n.split(" ").filter(Boolean).map((e) => {
+    const o = e.indexOf(":");
+    return o === -1 ? `${t}:${e}` : `${e.slice(0, o + 1)}${t}:${e.slice(o + 1)}`;
+  }).join(" ");
+}
+function B(n) {
+  return typeof n == "object" && n !== null && !Array.isArray(n);
+}
+function $(n, { maps: t, variants: e }) {
+  const o = {}, c = [];
+  for (const r in n) {
+    const s = n[r];
+    if (s !== void 0)
+      if (B(s)) {
+        const f = t[r];
+        if (!f) continue;
+        for (const i in s) {
+          const u = s[i], l = f[u];
+          l && (i === "base" ? c.push(l) : a.has(i) && c.push(y(l, i)));
+        }
+      } else
+        o[r] = s;
+  }
+  return [e(o), ...c].filter(Boolean).join(" ");
+}
+export {
+  p as BREAKPOINTS,
+  $ as resolveStyleProps
+};

package/dist/utils/split-variant-props.js

@@ -0,0 +1,13 @@
+"use client";
+function a(n, ...e) {
+  const i = e.map((t) => new Set(t)), o = e.map(() => ({})), c = {};
+  for (const t in n) {
+    if (!Object.prototype.hasOwnProperty.call(n, t)) continue;
+    const s = i.findIndex((r) => r.has(t));
+    (s === -1 ? c : o[s])[t] = n[t];
+  }
+  return [...o, c];
+}
+export {
+  a as splitVariantProps
+};

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "astralis-ui",
+  "version": "0.1.0",
+  "description": "React 19 component library on semantic design tokens — precompiled CSS, runtime brand theming, responsive style props, 62 components.",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "author": "Paul Andrew",
+  "license": "MIT",
+  "homepage": "https://astralis-zeta.vercel.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SekiroDev360/astralis-ui.git",
+    "directory": "packages/astralis-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/SekiroDev360/astralis-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "react19",
+    "components",
+    "component-library",
+    "ui",
+    "design-system",
+    "design-tokens",
+    "theming",
+    "dark-mode",
+    "tailwind"
+  ],
+  "packageManager": "pnpm@10.15.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "pnpm storybook",
+    "dev:library": "concurrently \"pnpm run dev:types\" \"pnpm run dev:lib\" \"pnpm run dev:css\"",
+    "dev:types": "tsc -p tsconfig.build.json --watch",
+    "dev:lib": "vite build --watch",
+    "gen:safelist": "node scripts/gen-responsive-safelist.mjs",
+    "dev:css": "pnpm run gen:safelist && tailwindcss -w -i ./src/tailwind-entry.css -o ./dist/styles.css",
+    "build": "vite build && pnpm run build:css",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:css": "pnpm run gen:safelist && tailwindcss -m -i ./src/tailwind-entry.css -o ./dist/styles.css && node scripts/check-css-coverage.mjs",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "concurrently \"pnpm run storybook:css\" \"storybook dev -p 6006\"",
+    "storybook:css": "pnpm run gen:safelist && tailwindcss -w -i ./src/tailwind-entry.css -o ./src/index.css",
+    "build-storybook": "concurrently \"pnpm run build-storybook:css\" \"storybook build\"",
+    "build-storybook:css": "pnpm run gen:safelist && tailwindcss -m -i ./src/tailwind-entry.css -o ./src/index.css",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/js": "^9.33.0",
+    "@storybook/addon-a11y": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-themes": "^9.1.5",
+    "@storybook/addon-vitest": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^24.3.3",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.1.5",
+    "globals": "^16.3.0",
+    "lucide-react": "^0.554.0",
+    "playwright": "^1.55.0",
+    "postcss": "^8.5.6",
+    "storybook": "^9.1.5",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "qrcode": "^1.5.4",
+    "tailwind-merge": "^3.6.0"
+  }
+}