glass-skin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kuwada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# glass-skin
+
+React 用の「スキン付き背景サーフェス」コンポーネント集。
+ガラス・すりガラス・反射・オーロラ・金属・カーボン・紙・ホログラムの 8 種類のスキンを、依存ゼロ（React のみ）で提供します。
+
+## 特徴
+
+- **8 種類のスキン** — glassmorphism 系 3 種 + テクスチャ系 5 種
+- **依存ゼロ** — CSS-in-JS ライブラリ不要。スタイルは初回マウント時に `<style>` タグを 1 度だけ注入
+- **SSR セーフ** — `useInsertionEffect` ベースで Next.js 等でも安全
+- **ESM / CJS / TypeScript 型定義** 同梱
+- `prefers-reduced-motion` に対応（アニメーションを自動停止）
+
+## インストール
+
+```bash
+npm install glass-skin
+```
+
+## 使い方
+
+```tsx
+import { GlassSkin, FrostSkin, ReflectSkin, AuroraSkin } from "glass-skin";
+
+function Example() {
+  return (
+    <AuroraSkin style={{ padding: 32 }}>
+      <GlassSkin style={{ padding: 24 }} blur={12} radius={20}>
+        <h2>ガラスカード</h2>
+        <p>背景が透けて見えます</p>
+      </GlassSkin>
+    </AuroraSkin>
+  );
+}
+```
+
+`variant` を切り替えられる汎用コンポーネントもあります。
+
+```tsx
+import { Skin } from "glass-skin";
+
+<Skin variant="holo" style={{ padding: 24 }}>ホログラム</Skin>
+```
+
+## コンポーネント一覧
+
+| コンポーネント | 見た目 | 主な props |
+| --- | --- | --- |
+| `GlassSkin` | 透明なガラス板 | `tint` `blur` `saturation` |
+| `FrostSkin` | 半透明のすりガラス | `tint` `blur` `grain` |
+| `ReflectSkin` | 光の帯が走る反射ガラス | `sheenColor` `speed` `trigger`(`"loop"`/`"hover"`) |
+| `AuroraSkin` | ゆらめくオーロラ | `colors`(最大3色) `background` `speed` |
+| `MetalSkin` | ブラシメタル | `angle`(ヘアライン方向) |
+| `CarbonSkin` | カーボンファイバー | `scale`(織り目サイズ) |
+| `PaperSkin` | 紙・和紙の質感 | `tint` `grain` |
+| `HoloSkin` | 虹色ホログラム | `speed` |
+
+全コンポーネント共通の props:
+
+| prop | 説明 |
+| --- | --- |
+| `as` | レンダリングする要素（既定: `div`） |
+| `radius` | 角丸。数値は px（既定: `16px`） |
+| その他 | `className` / `style` / イベントハンドラ等の HTML 属性をそのまま透過 |
+
+> **メモ:** ガラス系スキン（Glass / Frost / Reflect）は `backdrop-filter` を使うため、
+> 背後にカラフルなコンテンツがあるほど効果が分かりやすくなります。
+
+## カタログ（Storybook）
+
+各スキンを controls で調整しながら確認でき、**「CSSをコピー」ボタン**で
+そのスキンを React なしでも使える素の CSS をクリップボードにコピーできます。
+
+```bash
+npm install
+npm run storybook   # http://localhost:6006
+```
+
+シンプルな Vite デモも残しています。
+
+```bash
+npm run dev   # http://localhost:5199
+```
+
+## CSS だけ使いたい場合（getSkinCSS）
+
+コンポーネントを使わず、生成済みの CSS 文字列だけ取り出せます。
+
+```ts
+import { getSkinCSS, SKIN_CLASS_NAMES } from "glass-skin";
+
+getSkinCSS("frost");        // frost スキンの自己完結 CSS（コメント付き）
+SKIN_CLASS_NAMES["frost"];  // "gsk gsk-frost" — 要素に付ける class 名
+```
+
+## ビルドと npm への公開
+
+```bash
+npm run build       # dist/ に ESM + CJS + 型定義を出力
+npm login
+npm publish --access public
+```
+
+公開前のチェックリスト:
+
+1. `package.json` の `name` が npm 上で空いているか確認（`npm view <name>`）。取られていた場合はスコープ付き（例: `@yourname/glass-skin`）に変更
+2. `version` を更新（[semver](https://semver.org/lang/ja/) に従う）
+3. `npm pack --dry-run` で同梱ファイル（`dist` のみ）を確認
+
+## ライセンス
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,511 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuroraSkin: () => AuroraSkin,
+  CarbonSkin: () => CarbonSkin,
+  FrostSkin: () => FrostSkin,
+  GlassSkin: () => GlassSkin,
+  HoloSkin: () => HoloSkin,
+  MetalSkin: () => MetalSkin,
+  PaperSkin: () => PaperSkin,
+  ReflectSkin: () => ReflectSkin,
+  SKIN_CLASS_NAMES: () => SKIN_CLASS_NAMES,
+  SKIN_CSS: () => SKIN_CSS,
+  Skin: () => Skin,
+  getSkinCSS: () => getSkinCSS
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/GlassSkin.tsx
+var React2 = __toESM(require("react"), 1);
+
+// src/internal/styles.ts
+var React = __toESM(require("react"), 1);
+var NOISE_SVG = "<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(#n)'/></svg>";
+var NOISE_URL = `url("data:image/svg+xml,${encodeURIComponent(NOISE_SVG)}")`;
+var BASE_CSS = `
+.gsk{position:relative;border-radius:var(--gsk-radius,16px);isolation:isolate;overflow:hidden;}
+.gsk::before,.gsk::after{border-radius:inherit;}
+`;
+var MOTION_CSS = `
+@media (prefers-reduced-motion: reduce){
+  .gsk-reflect-loop::after,.gsk-aurora::before,.gsk-holo{animation:none;}
+}
+`;
+var PART_CSS = {
+  glass: `
+/* ---- glass: \u900F\u660E\u306A\u30AC\u30E9\u30B9 ---- */
+.gsk-glass{
+  background:var(--gsk-tint,rgba(255,255,255,0.12));
+  -webkit-backdrop-filter:blur(var(--gsk-blur,10px)) saturate(var(--gsk-sat,160%));
+  backdrop-filter:blur(var(--gsk-blur,10px)) saturate(var(--gsk-sat,160%));
+  border:1px solid rgba(255,255,255,0.25);
+  box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.35);
+}
+.gsk-glass::before{
+  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
+  background:linear-gradient(180deg,rgba(255,255,255,0.20),rgba(255,255,255,0.05) 40%,rgba(255,255,255,0) 60%);
+}
+`,
+  frost: `
+/* ---- frost: \u3059\u308A\u30AC\u30E9\u30B9 ---- */
+.gsk-frost{
+  background:var(--gsk-tint,rgba(255,255,255,0.35));
+  -webkit-backdrop-filter:blur(var(--gsk-blur,24px)) saturate(130%);
+  backdrop-filter:blur(var(--gsk-blur,24px)) saturate(130%);
+  border:1px solid rgba(255,255,255,0.45);
+  box-shadow:0 8px 32px rgba(0,0,0,0.15);
+}
+.gsk-frost::before{
+  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
+  background-image:${NOISE_URL};background-size:160px 160px;
+  opacity:var(--gsk-grain,0.25);mix-blend-mode:overlay;
+}
+`,
+  reflect: `
+/* ---- reflect: \u5149\u304C\u8D70\u308B\u53CD\u5C04\uFF08glass \u3068\u7D44\u307F\u5408\u308F\u305B\u3066\u4F7F\u3046\uFF09 ---- */
+.gsk-reflect::after{
+  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
+  background:linear-gradient(105deg,rgba(255,255,255,0) 35%,var(--gsk-sheen,rgba(255,255,255,0.35)) 50%,rgba(255,255,255,0) 65%);
+  background-size:300% 100%;background-position:200% 0;background-repeat:no-repeat;
+}
+.gsk-reflect-loop::after{animation:gsk-sheen var(--gsk-speed,4s) ease-in-out infinite;}
+.gsk-reflect-hover::after{transition:background-position 0.9s ease;}
+.gsk-reflect-hover:hover::after{background-position:-100% 0;}
+@keyframes gsk-sheen{0%{background-position:200% 0}55%,100%{background-position:-100% 0}}
+`,
+  aurora: `
+/* ---- aurora: \u3086\u3089\u3081\u304F\u30AA\u30FC\u30ED\u30E9\u30B0\u30E9\u30C7\u30FC\u30B7\u30E7\u30F3 ---- */
+.gsk-aurora{background:var(--gsk-bg,#0b1020);}
+.gsk-aurora::before{
+  content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
+  background:
+    radial-gradient(45% 55% at 22% 28%,var(--gsk-c1,#7c3aed) 0%,transparent 62%),
+    radial-gradient(50% 50% at 78% 22%,var(--gsk-c2,#06b6d4) 0%,transparent 62%),
+    radial-gradient(55% 65% at 60% 82%,var(--gsk-c3,#ec4899) 0%,transparent 62%);
+  filter:blur(42px);
+  animation:gsk-aurora var(--gsk-speed,16s) linear infinite;
+}
+@keyframes gsk-aurora{
+  0%{transform:rotate(0deg) scale(1)}
+  50%{transform:rotate(180deg) scale(1.2)}
+  100%{transform:rotate(360deg) scale(1)}
+}
+`,
+  metal: `
+/* ---- metal: \u30D6\u30E9\u30B7\u4ED5\u4E0A\u3052\u306E\u91D1\u5C5E ---- */
+.gsk-metal{
+  background:
+    repeating-linear-gradient(var(--gsk-angle,90deg),rgba(255,255,255,0.07) 0 1px,rgba(0,0,0,0.05) 1px 2px,rgba(255,255,255,0.02) 2px 3px),
+    linear-gradient(180deg,#eceef1 0%,#b9bcc4 28%,#dcdee3 47%,#989ba3 66%,#cdd0d6 84%,#e6e8ec 100%);
+  border:1px solid rgba(60,64,72,0.55);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),inset 0 -1px 0 rgba(0,0,0,0.25),0 6px 18px rgba(0,0,0,0.28);
+}
+.gsk-metal::before{
+  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
+  background:radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,0.5),rgba(255,255,255,0) 60%);
+  mix-blend-mode:soft-light;
+}
+`,
+  carbon: `
+/* ---- carbon: \u30AB\u30FC\u30DC\u30F3\u30D5\u30A1\u30A4\u30D0\u30FC ---- */
+.gsk-carbon{
+  background:
+    radial-gradient(rgba(0,0,0,0.9) 15%,transparent 16%) 0 0 / var(--gsk-cell,14px) var(--gsk-cell,14px),
+    radial-gradient(rgba(0,0,0,0.9) 15%,transparent 16%) calc(var(--gsk-cell,14px) / 2) calc(var(--gsk-cell,14px) / 2) / var(--gsk-cell,14px) var(--gsk-cell,14px),
+    radial-gradient(rgba(255,255,255,0.12) 15%,transparent 20%) 0 1px / var(--gsk-cell,14px) var(--gsk-cell,14px),
+    radial-gradient(rgba(255,255,255,0.12) 15%,transparent 20%) calc(var(--gsk-cell,14px) / 2) calc(var(--gsk-cell,14px) / 2 + 1px) / var(--gsk-cell,14px) var(--gsk-cell,14px);
+  background-color:#26262b;
+  border:1px solid rgba(0,0,0,0.6);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 6px 18px rgba(0,0,0,0.35);
+}
+.gsk-carbon::before{
+  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
+  background:linear-gradient(115deg,rgba(255,255,255,0.14),rgba(255,255,255,0) 45%);
+}
+`,
+  paper: `
+/* ---- paper: \u7D19\u306E\u8CEA\u611F ---- */
+.gsk-paper{
+  background-color:var(--gsk-tint,#f6f1e7);
+  border:1px solid rgba(0,0,0,0.08);
+  box-shadow:0 2px 10px rgba(0,0,0,0.10);
+}
+.gsk-paper::before{
+  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
+  background-image:${NOISE_URL};background-size:160px 160px;
+  opacity:var(--gsk-grain,0.5);mix-blend-mode:multiply;
+}
+`,
+  holo: `
+/* ---- holo: \u30DB\u30ED\u30B0\u30E9\u30E0 ---- */
+.gsk-holo{
+  background:linear-gradient(115deg,#ffd6e8,#c7d2fe,#a7f3d0,#fef3c7,#fbcfe8,#c7d2fe);
+  background-size:300% 300%;
+  animation:gsk-holo var(--gsk-speed,9s) ease infinite;
+  border:1px solid rgba(255,255,255,0.6);
+  box-shadow:0 8px 32px rgba(140,120,255,0.25),inset 0 1px 0 rgba(255,255,255,0.7);
+}
+.gsk-holo::before{
+  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
+  background:conic-gradient(from 210deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(255,255,255,0.55) 80deg,rgba(255,255,255,0) 160deg,rgba(255,255,255,0.35) 260deg,rgba(255,255,255,0) 360deg);
+  mix-blend-mode:soft-light;
+}
+.gsk-holo::after{
+  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
+  background-image:${NOISE_URL};background-size:160px 160px;
+  opacity:0.15;mix-blend-mode:overlay;
+}
+@keyframes gsk-holo{
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+}
+`
+};
+var SKIN_CSS = BASE_CSS + Object.values(PART_CSS).join("") + MOTION_CSS;
+var SKIN_CLASS_NAMES = {
+  glass: "gsk gsk-glass",
+  frost: "gsk gsk-frost",
+  reflect: "gsk gsk-glass gsk-reflect gsk-reflect-loop",
+  aurora: "gsk gsk-aurora",
+  metal: "gsk gsk-metal",
+  carbon: "gsk gsk-carbon",
+  paper: "gsk gsk-paper",
+  holo: "gsk gsk-holo"
+};
+function getSkinCSS(variant) {
+  const parts = variant === "reflect" ? PART_CSS.glass + PART_CSS.reflect : PART_CSS[variant];
+  const hoverHint = variant === "reflect" ? "   \u30DB\u30D0\u30FC\u6642\u306E\u307F\u5149\u3089\u305B\u308B\u5834\u5408\u306F gsk-reflect-loop \u3092 gsk-reflect-hover \u306B\u5909\u3048\u308B\n" : "";
+  const header = `/* glass-skin: ${variant} \u30B9\u30AD\u30F3
+   \u30DE\u30FC\u30AF\u30A2\u30C3\u30D7\u4F8B: <div class="${SKIN_CLASS_NAMES[variant]}">...</div>
+` + hoverHint + ` */
+`;
+  return header + BASE_CSS + parts + MOTION_CSS;
+}
+var STYLE_ID = "glass-skin-css";
+var useIsoInsertionEffect = typeof document !== "undefined" ? React.useInsertionEffect ?? React.useLayoutEffect : React.useEffect;
+function useSkinStyles() {
+  useIsoInsertionEffect(() => {
+    if (document.getElementById(STYLE_ID)) return;
+    const el = document.createElement("style");
+    el.id = STYLE_ID;
+    el.textContent = SKIN_CSS;
+    document.head.appendChild(el);
+  }, []);
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function toLen(v) {
+  if (v == null) return void 0;
+  return typeof v === "number" ? `${v}px` : v;
+}
+function cssVars(vars) {
+  const out = {};
+  for (const key in vars) {
+    const value = vars[key];
+    if (value != null) out[key] = value;
+  }
+  return out;
+}
+
+// src/components/GlassSkin.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var GlassSkin = React2.forwardRef(
+  function GlassSkin2({ as, tint, blur, saturation, radius, className, style, children, ...rest }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx("gsk", "gsk-glass", className),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-tint": tint,
+            "--gsk-blur": toLen(blur),
+            "--gsk-sat": saturation
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/FrostSkin.tsx
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FrostSkin = React3.forwardRef(
+  function FrostSkin2({ as, tint, blur, grain, radius, className, style, children, ...rest }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx("gsk", "gsk-frost", className),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-tint": tint,
+            "--gsk-blur": toLen(blur),
+            "--gsk-grain": grain != null ? String(grain) : void 0
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/ReflectSkin.tsx
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ReflectSkin = React4.forwardRef(
+  function ReflectSkin2({
+    as,
+    tint,
+    blur,
+    sheenColor,
+    speed,
+    trigger = "loop",
+    radius,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx(
+          "gsk",
+          "gsk-glass",
+          "gsk-reflect",
+          trigger === "hover" ? "gsk-reflect-hover" : "gsk-reflect-loop",
+          className
+        ),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-tint": tint,
+            "--gsk-blur": toLen(blur),
+            "--gsk-sheen": sheenColor,
+            "--gsk-speed": typeof speed === "number" ? `${speed}s` : speed
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/AuroraSkin.tsx
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AuroraSkin = React5.forwardRef(
+  function AuroraSkin2({ as, colors, background, speed, radius, className, style, children, ...rest }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx("gsk", "gsk-aurora", className),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-bg": background,
+            "--gsk-c1": colors?.[0],
+            "--gsk-c2": colors?.[1],
+            "--gsk-c3": colors?.[2],
+            "--gsk-speed": typeof speed === "number" ? `${speed}s` : speed
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/MetalSkin.tsx
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MetalSkin = React6.forwardRef(
+  function MetalSkin2({ as, angle, radius, className, style, children, ...rest }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx("gsk", "gsk-metal", className),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-angle": typeof angle === "number" ? `${angle}deg` : angle
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/CarbonSkin.tsx
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CarbonSkin = React7.forwardRef(
+  function CarbonSkin2({ as, scale, radius, className, style, children, ...rest }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx("gsk", "gsk-carbon", className),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-cell": toLen(scale)
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/PaperSkin.tsx
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PaperSkin = React8.forwardRef(
+  function PaperSkin2({ as, tint, grain, radius, className, style, children, ...rest }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx("gsk", "gsk-paper", className),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-tint": tint,
+            "--gsk-grain": grain != null ? String(grain) : void 0
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/HoloSkin.tsx
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var HoloSkin = React9.forwardRef(
+  function HoloSkin2({ as, speed, radius, className, style, children, ...rest }, ref) {
+    useSkinStyles();
+    const Comp = as ?? "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Comp,
+      {
+        ref,
+        className: cx("gsk", "gsk-holo", className),
+        style: {
+          ...cssVars({
+            "--gsk-radius": toLen(radius),
+            "--gsk-speed": typeof speed === "number" ? `${speed}s` : speed
+          }),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Skin.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var registry = {
+  glass: GlassSkin,
+  frost: FrostSkin,
+  reflect: ReflectSkin,
+  aurora: AuroraSkin,
+  metal: MetalSkin,
+  carbon: CarbonSkin,
+  paper: PaperSkin,
+  holo: HoloSkin
+};
+function Skin(props) {
+  const { variant = "glass", ...rest } = props;
+  const Comp = registry[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Comp, { ...rest });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuroraSkin,
+  CarbonSkin,
+  FrostSkin,
+  GlassSkin,
+  HoloSkin,
+  MetalSkin,
+  PaperSkin,
+  ReflectSkin,
+  SKIN_CLASS_NAMES,
+  SKIN_CSS,
+  Skin,
+  getSkinCSS
+});
+//# sourceMappingURL=index.cjs.map