glass-skin 0.1.0

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/GlassSkin.tsx","../src/internal/styles.ts","../src/components/FrostSkin.tsx","../src/components/ReflectSkin.tsx","../src/components/AuroraSkin.tsx","../src/components/MetalSkin.tsx","../src/components/CarbonSkin.tsx","../src/components/PaperSkin.tsx","../src/components/HoloSkin.tsx","../src/components/Skin.tsx"],"sourcesContent":["export { GlassSkin, type GlassSkinProps } from \"./components/GlassSkin\";\nexport { FrostSkin, type FrostSkinProps } from \"./components/FrostSkin\";\nexport { ReflectSkin, type ReflectSkinProps } from \"./components/ReflectSkin\";\nexport { AuroraSkin, type AuroraSkinProps } from \"./components/AuroraSkin\";\nexport { MetalSkin, type MetalSkinProps } from \"./components/MetalSkin\";\nexport { CarbonSkin, type CarbonSkinProps } from \"./components/CarbonSkin\";\nexport { PaperSkin, type PaperSkinProps } from \"./components/PaperSkin\";\nexport { HoloSkin, type HoloSkinProps } from \"./components/HoloSkin\";\nexport { Skin, type SkinProps, type SkinVariant } from \"./components/Skin\";\nexport type { SkinBaseProps } from \"./components/types\";\nexport { getSkinCSS, SKIN_CLASS_NAMES, SKIN_CSS } from \"./internal/styles\";\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface GlassSkinProps extends SkinBaseProps {\n  /** ガラスの色味（CSSカラー。例: \"rgba(120,180,255,0.15)\"） */\n  tint?: string;\n  /** 背景のぼかし量。数値は px（既定: 10px） */\n  blur?: number | string;\n  /** 背景の彩度強調（例: \"180%\"。既定: \"160%\"） */\n  saturation?: string;\n}\n\n/** 透明なガラス板。背後のコンテンツがうっすら透けて見える */\nexport const GlassSkin = React.forwardRef<HTMLElement, GlassSkinProps>(\n  function GlassSkin(\n    { as, tint, blur, saturation, radius, className, style, children, ...rest },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\"gsk\", \"gsk-glass\", className)}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-tint\": tint,\n            \"--gsk-blur\": toLen(blur),\n            \"--gsk-sat\": saturation,\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\n\nexport type SkinVariant =\n  | \"glass\"\n  | \"frost\"\n  | \"reflect\"\n  | \"aurora\"\n  | \"metal\"\n  | \"carbon\"\n  | \"paper\"\n  | \"holo\";\n\n/**\n * SVG feTurbulence によるノイズテクスチャ（外部アセット不要）。\n * frost / paper / holo のグレイン表現に使う。\n */\nconst NOISE_SVG =\n  \"<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\" +\n  \"<filter id='n'>\" +\n  \"<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/>\" +\n  \"<feColorMatrix type='saturate' values='0'/>\" +\n  \"</filter>\" +\n  \"<rect width='100%' height='100%' filter='url(#n)'/>\" +\n  \"</svg>\";\n\nexport const NOISE_URL = `url(\"data:image/svg+xml,${encodeURIComponent(NOISE_SVG)}\")`;\n\nconst BASE_CSS = `\n.gsk{position:relative;border-radius:var(--gsk-radius,16px);isolation:isolate;overflow:hidden;}\n.gsk::before,.gsk::after{border-radius:inherit;}\n`;\n\nconst MOTION_CSS = `\n@media (prefers-reduced-motion: reduce){\n  .gsk-reflect-loop::after,.gsk-aurora::before,.gsk-holo{animation:none;}\n}\n`;\n\n/** スキンごとの自己完結した CSS ブロック */\nconst PART_CSS: Record<SkinVariant, string> = {\n  glass: `\n/* ---- glass: 透明なガラス ---- */\n.gsk-glass{\n  background:var(--gsk-tint,rgba(255,255,255,0.12));\n  -webkit-backdrop-filter:blur(var(--gsk-blur,10px)) saturate(var(--gsk-sat,160%));\n  backdrop-filter:blur(var(--gsk-blur,10px)) saturate(var(--gsk-sat,160%));\n  border:1px solid rgba(255,255,255,0.25);\n  box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.35);\n}\n.gsk-glass::before{\n  content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;\n  background:linear-gradient(180deg,rgba(255,255,255,0.20),rgba(255,255,255,0.05) 40%,rgba(255,255,255,0) 60%);\n}\n`,\n  frost: `\n/* ---- frost: すりガラス ---- */\n.gsk-frost{\n  background:var(--gsk-tint,rgba(255,255,255,0.35));\n  -webkit-backdrop-filter:blur(var(--gsk-blur,24px)) saturate(130%);\n  backdrop-filter:blur(var(--gsk-blur,24px)) saturate(130%);\n  border:1px solid rgba(255,255,255,0.45);\n  box-shadow:0 8px 32px rgba(0,0,0,0.15);\n}\n.gsk-frost::before{\n  content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;\n  background-image:${NOISE_URL};background-size:160px 160px;\n  opacity:var(--gsk-grain,0.25);mix-blend-mode:overlay;\n}\n`,\n  reflect: `\n/* ---- reflect: 光が走る反射（glass と組み合わせて使う） ---- */\n.gsk-reflect::after{\n  content:\"\";position:absolute;inset:0;z-index:2;pointer-events:none;\n  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%);\n  background-size:300% 100%;background-position:200% 0;background-repeat:no-repeat;\n}\n.gsk-reflect-loop::after{animation:gsk-sheen var(--gsk-speed,4s) ease-in-out infinite;}\n.gsk-reflect-hover::after{transition:background-position 0.9s ease;}\n.gsk-reflect-hover:hover::after{background-position:-100% 0;}\n@keyframes gsk-sheen{0%{background-position:200% 0}55%,100%{background-position:-100% 0}}\n`,\n  aurora: `\n/* ---- aurora: ゆらめくオーロラグラデーション ---- */\n.gsk-aurora{background:var(--gsk-bg,#0b1020);}\n.gsk-aurora::before{\n  content:\"\";position:absolute;inset:-40%;z-index:-1;pointer-events:none;\n  background:\n    radial-gradient(45% 55% at 22% 28%,var(--gsk-c1,#7c3aed) 0%,transparent 62%),\n    radial-gradient(50% 50% at 78% 22%,var(--gsk-c2,#06b6d4) 0%,transparent 62%),\n    radial-gradient(55% 65% at 60% 82%,var(--gsk-c3,#ec4899) 0%,transparent 62%);\n  filter:blur(42px);\n  animation:gsk-aurora var(--gsk-speed,16s) linear infinite;\n}\n@keyframes gsk-aurora{\n  0%{transform:rotate(0deg) scale(1)}\n  50%{transform:rotate(180deg) scale(1.2)}\n  100%{transform:rotate(360deg) scale(1)}\n}\n`,\n  metal: `\n/* ---- metal: ブラシ仕上げの金属 ---- */\n.gsk-metal{\n  background:\n    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),\n    linear-gradient(180deg,#eceef1 0%,#b9bcc4 28%,#dcdee3 47%,#989ba3 66%,#cdd0d6 84%,#e6e8ec 100%);\n  border:1px solid rgba(60,64,72,0.55);\n  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);\n}\n.gsk-metal::before{\n  content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;\n  background:radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,0.5),rgba(255,255,255,0) 60%);\n  mix-blend-mode:soft-light;\n}\n`,\n  carbon: `\n/* ---- carbon: カーボンファイバー ---- */\n.gsk-carbon{\n  background:\n    radial-gradient(rgba(0,0,0,0.9) 15%,transparent 16%) 0 0 / var(--gsk-cell,14px) var(--gsk-cell,14px),\n    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),\n    radial-gradient(rgba(255,255,255,0.12) 15%,transparent 20%) 0 1px / var(--gsk-cell,14px) var(--gsk-cell,14px),\n    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);\n  background-color:#26262b;\n  border:1px solid rgba(0,0,0,0.6);\n  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 6px 18px rgba(0,0,0,0.35);\n}\n.gsk-carbon::before{\n  content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;\n  background:linear-gradient(115deg,rgba(255,255,255,0.14),rgba(255,255,255,0) 45%);\n}\n`,\n  paper: `\n/* ---- paper: 紙の質感 ---- */\n.gsk-paper{\n  background-color:var(--gsk-tint,#f6f1e7);\n  border:1px solid rgba(0,0,0,0.08);\n  box-shadow:0 2px 10px rgba(0,0,0,0.10);\n}\n.gsk-paper::before{\n  content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;\n  background-image:${NOISE_URL};background-size:160px 160px;\n  opacity:var(--gsk-grain,0.5);mix-blend-mode:multiply;\n}\n`,\n  holo: `\n/* ---- holo: ホログラム ---- */\n.gsk-holo{\n  background:linear-gradient(115deg,#ffd6e8,#c7d2fe,#a7f3d0,#fef3c7,#fbcfe8,#c7d2fe);\n  background-size:300% 300%;\n  animation:gsk-holo var(--gsk-speed,9s) ease infinite;\n  border:1px solid rgba(255,255,255,0.6);\n  box-shadow:0 8px 32px rgba(140,120,255,0.25),inset 0 1px 0 rgba(255,255,255,0.7);\n}\n.gsk-holo::before{\n  content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;\n  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);\n  mix-blend-mode:soft-light;\n}\n.gsk-holo::after{\n  content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;\n  background-image:${NOISE_URL};background-size:160px 160px;\n  opacity:0.15;mix-blend-mode:overlay;\n}\n@keyframes gsk-holo{\n  0%{background-position:0% 50%}\n  50%{background-position:100% 50%}\n  100%{background-position:0% 50%}\n}\n`,\n};\n\n/** 全スキンを含むスタイルシート（コンポーネントが注入するもの） */\nexport const SKIN_CSS =\n  BASE_CSS + Object.values(PART_CSS).join(\"\") + MOTION_CSS;\n\n/** variant ごとに要素へ付ける class 名 */\nexport const SKIN_CLASS_NAMES: Record<SkinVariant, string> = {\n  glass: \"gsk gsk-glass\",\n  frost: \"gsk gsk-frost\",\n  reflect: \"gsk gsk-glass gsk-reflect gsk-reflect-loop\",\n  aurora: \"gsk gsk-aurora\",\n  metal: \"gsk gsk-metal\",\n  carbon: \"gsk gsk-carbon\",\n  paper: \"gsk gsk-paper\",\n  holo: \"gsk gsk-holo\",\n};\n\n/**\n * 指定スキンを React なしでも使える自己完結 CSS を返す（コピー&ペースト用）。\n * 返り値をスタイルシートに貼り、SKIN_CLASS_NAMES の class を要素に付ければ動く。\n */\nexport function getSkinCSS(variant: SkinVariant): string {\n  const parts =\n    variant === \"reflect\"\n      ? PART_CSS.glass + PART_CSS.reflect\n      : PART_CSS[variant];\n  const hoverHint =\n    variant === \"reflect\"\n      ? \"   ホバー時のみ光らせる場合は gsk-reflect-loop を gsk-reflect-hover に変える\\n\"\n      : \"\";\n  const header =\n    `/* glass-skin: ${variant} スキン\\n` +\n    `   マークアップ例: <div class=\"${SKIN_CLASS_NAMES[variant]}\">...</div>\\n` +\n    hoverHint +\n    ` */\\n`;\n  return header + BASE_CSS + parts + MOTION_CSS;\n}\n\nconst STYLE_ID = \"glass-skin-css\";\n\nconst useIsoInsertionEffect =\n  typeof document !== \"undefined\"\n    ? React.useInsertionEffect ?? React.useLayoutEffect\n    : React.useEffect;\n\n/** スタイルシートを document.head に1度だけ注入する（SSRセーフ） */\nexport function useSkinStyles(): void {\n  useIsoInsertionEffect(() => {\n    if (document.getElementById(STYLE_ID)) return;\n    const el = document.createElement(\"style\");\n    el.id = STYLE_ID;\n    el.textContent = SKIN_CSS;\n    document.head.appendChild(el);\n  }, []);\n}\n\nexport function cx(...parts: Array<string | undefined | false>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n\n/** 数値は px 扱い、文字列はそのまま CSS 長さとして使う */\nexport function toLen(v: number | string | undefined): string | undefined {\n  if (v == null) return undefined;\n  return typeof v === \"number\" ? `${v}px` : v;\n}\n\n/** undefined を除いた CSS カスタムプロパティの style オブジェクトを作る */\nexport function cssVars(\n  vars: Record<string, string | undefined>\n): React.CSSProperties {\n  const out: Record<string, string> = {};\n  for (const key in vars) {\n    const value = vars[key];\n    if (value != null) out[key] = value;\n  }\n  return out as React.CSSProperties;\n}\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface FrostSkinProps extends SkinBaseProps {\n  /** すりガラスの色味（CSSカラー） */\n  tint?: string;\n  /** 背景のぼかし量。数値は px（既定: 24px） */\n  blur?: number | string;\n  /** ざらつき（グレイン）の強さ 0〜1（既定: 0.25） */\n  grain?: number;\n}\n\n/** 半透明のすりガラス。強いぼかしと微細なノイズで磨りガラス質感を出す */\nexport const FrostSkin = React.forwardRef<HTMLElement, FrostSkinProps>(\n  function FrostSkin(\n    { as, tint, blur, grain, radius, className, style, children, ...rest },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\"gsk\", \"gsk-frost\", className)}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-tint\": tint,\n            \"--gsk-blur\": toLen(blur),\n            \"--gsk-grain\": grain != null ? String(grain) : undefined,\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface ReflectSkinProps extends SkinBaseProps {\n  /** ガラスの色味（CSSカラー） */\n  tint?: string;\n  /** 背景のぼかし量。数値は px（既定: 10px） */\n  blur?: number | string;\n  /** 反射光の色（既定: rgba(255,255,255,0.35)） */\n  sheenColor?: string;\n  /** 反射が一往復する時間。数値は秒（既定: 4秒） */\n  speed?: number | string;\n  /** \"loop\": 常時アニメーション / \"hover\": ホバー時のみ（既定: \"loop\"） */\n  trigger?: \"loop\" | \"hover\";\n}\n\n/** ガラスの表面を光の帯が走る、一部が反射するスキン */\nexport const ReflectSkin = React.forwardRef<HTMLElement, ReflectSkinProps>(\n  function ReflectSkin(\n    {\n      as,\n      tint,\n      blur,\n      sheenColor,\n      speed,\n      trigger = \"loop\",\n      radius,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\n          \"gsk\",\n          \"gsk-glass\",\n          \"gsk-reflect\",\n          trigger === \"hover\" ? \"gsk-reflect-hover\" : \"gsk-reflect-loop\",\n          className\n        )}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-tint\": tint,\n            \"--gsk-blur\": toLen(blur),\n            \"--gsk-sheen\": sheenColor,\n            \"--gsk-speed\": typeof speed === \"number\" ? `${speed}s` : speed,\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface AuroraSkinProps extends SkinBaseProps {\n  /** オーロラの色（最大3色。既定: 紫・シアン・ピンク） */\n  colors?: string[];\n  /** ベースの背景色（既定: #0b1020） */\n  background?: string;\n  /** 一周する時間。数値は秒（既定: 16秒） */\n  speed?: number | string;\n}\n\n/** ゆっくり回転しながらゆらめくオーロラ調のグラデーション背景 */\nexport const AuroraSkin = React.forwardRef<HTMLElement, AuroraSkinProps>(\n  function AuroraSkin(\n    { as, colors, background, speed, radius, className, style, children, ...rest },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\"gsk\", \"gsk-aurora\", className)}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-bg\": background,\n            \"--gsk-c1\": colors?.[0],\n            \"--gsk-c2\": colors?.[1],\n            \"--gsk-c3\": colors?.[2],\n            \"--gsk-speed\": typeof speed === \"number\" ? `${speed}s` : speed,\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface MetalSkinProps extends SkinBaseProps {\n  /** ヘアライン（ブラシ目）の方向。数値は deg（既定: 90deg = 横方向） */\n  angle?: number | string;\n}\n\n/** ヘアライン加工されたブラシメタル（アルミ調）の質感 */\nexport const MetalSkin = React.forwardRef<HTMLElement, MetalSkinProps>(\n  function MetalSkin(\n    { as, angle, radius, className, style, children, ...rest },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\"gsk\", \"gsk-metal\", className)}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-angle\": typeof angle === \"number\" ? `${angle}deg` : angle,\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface CarbonSkinProps extends SkinBaseProps {\n  /** 織り目1マスの大きさ。数値は px（既定: 14px） */\n  scale?: number | string;\n}\n\n/** カーボンファイバーの織り目パターン */\nexport const CarbonSkin = React.forwardRef<HTMLElement, CarbonSkinProps>(\n  function CarbonSkin(\n    { as, scale, radius, className, style, children, ...rest },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\"gsk\", \"gsk-carbon\", className)}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-cell\": toLen(scale),\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface PaperSkinProps extends SkinBaseProps {\n  /** 紙の色（既定: #f6f1e7 の生成り色） */\n  tint?: string;\n  /** 紙のざらつきの強さ 0〜1（既定: 0.5） */\n  grain?: number;\n}\n\n/** ざらついた紙・和紙のようなテクスチャ */\nexport const PaperSkin = React.forwardRef<HTMLElement, PaperSkinProps>(\n  function PaperSkin(\n    { as, tint, grain, radius, className, style, children, ...rest },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\"gsk\", \"gsk-paper\", className)}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-tint\": tint,\n            \"--gsk-grain\": grain != null ? String(grain) : undefined,\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\nimport { cssVars, cx, toLen, useSkinStyles } from \"../internal/styles\";\nimport type { SkinBaseProps } from \"./types\";\n\nexport interface HoloSkinProps extends SkinBaseProps {\n  /** 虹色が流れる周期。数値は秒（既定: 9秒） */\n  speed?: number | string;\n}\n\n/** トレーディングカードのようなホログラム（虹色に流れる）質感 */\nexport const HoloSkin = React.forwardRef<HTMLElement, HoloSkinProps>(\n  function HoloSkin(\n    { as, speed, radius, className, style, children, ...rest },\n    ref\n  ) {\n    useSkinStyles();\n    const Comp = (as ?? \"div\") as React.ElementType;\n    return (\n      <Comp\n        ref={ref}\n        className={cx(\"gsk\", \"gsk-holo\", className)}\n        style={{\n          ...cssVars({\n            \"--gsk-radius\": toLen(radius),\n            \"--gsk-speed\": typeof speed === \"number\" ? `${speed}s` : speed,\n          }),\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n","import * as React from \"react\";\nimport type { SkinVariant } from \"../internal/styles\";\nimport { AuroraSkin, AuroraSkinProps } from \"./AuroraSkin\";\nimport { CarbonSkin, CarbonSkinProps } from \"./CarbonSkin\";\nimport { FrostSkin, FrostSkinProps } from \"./FrostSkin\";\nimport { GlassSkin, GlassSkinProps } from \"./GlassSkin\";\nimport { HoloSkin, HoloSkinProps } from \"./HoloSkin\";\nimport { MetalSkin, MetalSkinProps } from \"./MetalSkin\";\nimport { PaperSkin, PaperSkinProps } from \"./PaperSkin\";\nimport { ReflectSkin, ReflectSkinProps } from \"./ReflectSkin\";\n\nexport type { SkinVariant };\n\nexport type SkinProps =\n  | ({ variant?: \"glass\" } & GlassSkinProps)\n  | ({ variant: \"frost\" } & FrostSkinProps)\n  | ({ variant: \"reflect\" } & ReflectSkinProps)\n  | ({ variant: \"aurora\" } & AuroraSkinProps)\n  | ({ variant: \"metal\" } & MetalSkinProps)\n  | ({ variant: \"carbon\" } & CarbonSkinProps)\n  | ({ variant: \"paper\" } & PaperSkinProps)\n  | ({ variant: \"holo\" } & HoloSkinProps);\n\nconst registry = {\n  glass: GlassSkin,\n  frost: FrostSkin,\n  reflect: ReflectSkin,\n  aurora: AuroraSkin,\n  metal: MetalSkin,\n  carbon: CarbonSkin,\n  paper: PaperSkin,\n  holo: HoloSkin,\n} as const;\n\n/** variant 指定で任意のスキンを切り替えられる汎用コンポーネント */\nexport function Skin(props: SkinProps): React.ReactElement {\n  const { variant = \"glass\", ...rest } = props;\n  const Comp = registry[variant] as React.ElementType;\n  return <Comp {...rest} />;\n}\n"],"mappings":"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","names":["React","GlassSkin","React","import_jsx_runtime","FrostSkin","React","import_jsx_runtime","ReflectSkin","React","import_jsx_runtime","AuroraSkin","React","import_jsx_runtime","MetalSkin","React","import_jsx_runtime","CarbonSkin","React","import_jsx_runtime","PaperSkin","React","import_jsx_runtime","HoloSkin","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+/** 全スキン共通の props */
+interface SkinBaseProps extends React.HTMLAttributes<HTMLElement> {
+    /** レンダリングする要素（既定: div） */
+    as?: React.ElementType;
+    /** 角丸。数値は px 扱い（既定: 16px） */
+    radius?: number | string;
+}
+
+interface GlassSkinProps extends SkinBaseProps {
+    /** ガラスの色味（CSSカラー。例: "rgba(120,180,255,0.15)"） */
+    tint?: string;
+    /** 背景のぼかし量。数値は px（既定: 10px） */
+    blur?: number | string;
+    /** 背景の彩度強調（例: "180%"。既定: "160%"） */
+    saturation?: string;
+}
+/** 透明なガラス板。背後のコンテンツがうっすら透けて見える */
+declare const GlassSkin: React.ForwardRefExoticComponent<GlassSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface FrostSkinProps extends SkinBaseProps {
+    /** すりガラスの色味（CSSカラー） */
+    tint?: string;
+    /** 背景のぼかし量。数値は px（既定: 24px） */
+    blur?: number | string;
+    /** ざらつき（グレイン）の強さ 0〜1（既定: 0.25） */
+    grain?: number;
+}
+/** 半透明のすりガラス。強いぼかしと微細なノイズで磨りガラス質感を出す */
+declare const FrostSkin: React.ForwardRefExoticComponent<FrostSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface ReflectSkinProps extends SkinBaseProps {
+    /** ガラスの色味（CSSカラー） */
+    tint?: string;
+    /** 背景のぼかし量。数値は px（既定: 10px） */
+    blur?: number | string;
+    /** 反射光の色（既定: rgba(255,255,255,0.35)） */
+    sheenColor?: string;
+    /** 反射が一往復する時間。数値は秒（既定: 4秒） */
+    speed?: number | string;
+    /** "loop": 常時アニメーション / "hover": ホバー時のみ（既定: "loop"） */
+    trigger?: "loop" | "hover";
+}
+/** ガラスの表面を光の帯が走る、一部が反射するスキン */
+declare const ReflectSkin: React.ForwardRefExoticComponent<ReflectSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface AuroraSkinProps extends SkinBaseProps {
+    /** オーロラの色（最大3色。既定: 紫・シアン・ピンク） */
+    colors?: string[];
+    /** ベースの背景色（既定: #0b1020） */
+    background?: string;
+    /** 一周する時間。数値は秒（既定: 16秒） */
+    speed?: number | string;
+}
+/** ゆっくり回転しながらゆらめくオーロラ調のグラデーション背景 */
+declare const AuroraSkin: React.ForwardRefExoticComponent<AuroraSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface MetalSkinProps extends SkinBaseProps {
+    /** ヘアライン（ブラシ目）の方向。数値は deg（既定: 90deg = 横方向） */
+    angle?: number | string;
+}
+/** ヘアライン加工されたブラシメタル（アルミ調）の質感 */
+declare const MetalSkin: React.ForwardRefExoticComponent<MetalSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface CarbonSkinProps extends SkinBaseProps {
+    /** 織り目1マスの大きさ。数値は px（既定: 14px） */
+    scale?: number | string;
+}
+/** カーボンファイバーの織り目パターン */
+declare const CarbonSkin: React.ForwardRefExoticComponent<CarbonSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface PaperSkinProps extends SkinBaseProps {
+    /** 紙の色（既定: #f6f1e7 の生成り色） */
+    tint?: string;
+    /** 紙のざらつきの強さ 0〜1（既定: 0.5） */
+    grain?: number;
+}
+/** ざらついた紙・和紙のようなテクスチャ */
+declare const PaperSkin: React.ForwardRefExoticComponent<PaperSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface HoloSkinProps extends SkinBaseProps {
+    /** 虹色が流れる周期。数値は秒（既定: 9秒） */
+    speed?: number | string;
+}
+/** トレーディングカードのようなホログラム（虹色に流れる）質感 */
+declare const HoloSkin: React.ForwardRefExoticComponent<HoloSkinProps & React.RefAttributes<HTMLElement>>;
+
+type SkinVariant = "glass" | "frost" | "reflect" | "aurora" | "metal" | "carbon" | "paper" | "holo";
+/** 全スキンを含むスタイルシート（コンポーネントが注入するもの） */
+declare const SKIN_CSS: string;
+/** variant ごとに要素へ付ける class 名 */
+declare const SKIN_CLASS_NAMES: Record<SkinVariant, string>;
+/**
+ * 指定スキンを React なしでも使える自己完結 CSS を返す（コピー&ペースト用）。
+ * 返り値をスタイルシートに貼り、SKIN_CLASS_NAMES の class を要素に付ければ動く。
+ */
+declare function getSkinCSS(variant: SkinVariant): string;
+
+type SkinProps = ({
+    variant?: "glass";
+} & GlassSkinProps) | ({
+    variant: "frost";
+} & FrostSkinProps) | ({
+    variant: "reflect";
+} & ReflectSkinProps) | ({
+    variant: "aurora";
+} & AuroraSkinProps) | ({
+    variant: "metal";
+} & MetalSkinProps) | ({
+    variant: "carbon";
+} & CarbonSkinProps) | ({
+    variant: "paper";
+} & PaperSkinProps) | ({
+    variant: "holo";
+} & HoloSkinProps);
+/** variant 指定で任意のスキンを切り替えられる汎用コンポーネント */
+declare function Skin(props: SkinProps): React.ReactElement;
+
+export { AuroraSkin, type AuroraSkinProps, CarbonSkin, type CarbonSkinProps, FrostSkin, type FrostSkinProps, GlassSkin, type GlassSkinProps, HoloSkin, type HoloSkinProps, MetalSkin, type MetalSkinProps, PaperSkin, type PaperSkinProps, ReflectSkin, type ReflectSkinProps, SKIN_CLASS_NAMES, SKIN_CSS, Skin, type SkinBaseProps, type SkinProps, type SkinVariant, getSkinCSS };

package/dist/index.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+/** 全スキン共通の props */
+interface SkinBaseProps extends React.HTMLAttributes<HTMLElement> {
+    /** レンダリングする要素（既定: div） */
+    as?: React.ElementType;
+    /** 角丸。数値は px 扱い（既定: 16px） */
+    radius?: number | string;
+}
+
+interface GlassSkinProps extends SkinBaseProps {
+    /** ガラスの色味（CSSカラー。例: "rgba(120,180,255,0.15)"） */
+    tint?: string;
+    /** 背景のぼかし量。数値は px（既定: 10px） */
+    blur?: number | string;
+    /** 背景の彩度強調（例: "180%"。既定: "160%"） */
+    saturation?: string;
+}
+/** 透明なガラス板。背後のコンテンツがうっすら透けて見える */
+declare const GlassSkin: React.ForwardRefExoticComponent<GlassSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface FrostSkinProps extends SkinBaseProps {
+    /** すりガラスの色味（CSSカラー） */
+    tint?: string;
+    /** 背景のぼかし量。数値は px（既定: 24px） */
+    blur?: number | string;
+    /** ざらつき（グレイン）の強さ 0〜1（既定: 0.25） */
+    grain?: number;
+}
+/** 半透明のすりガラス。強いぼかしと微細なノイズで磨りガラス質感を出す */
+declare const FrostSkin: React.ForwardRefExoticComponent<FrostSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface ReflectSkinProps extends SkinBaseProps {
+    /** ガラスの色味（CSSカラー） */
+    tint?: string;
+    /** 背景のぼかし量。数値は px（既定: 10px） */
+    blur?: number | string;
+    /** 反射光の色（既定: rgba(255,255,255,0.35)） */
+    sheenColor?: string;
+    /** 反射が一往復する時間。数値は秒（既定: 4秒） */
+    speed?: number | string;
+    /** "loop": 常時アニメーション / "hover": ホバー時のみ（既定: "loop"） */
+    trigger?: "loop" | "hover";
+}
+/** ガラスの表面を光の帯が走る、一部が反射するスキン */
+declare const ReflectSkin: React.ForwardRefExoticComponent<ReflectSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface AuroraSkinProps extends SkinBaseProps {
+    /** オーロラの色（最大3色。既定: 紫・シアン・ピンク） */
+    colors?: string[];
+    /** ベースの背景色（既定: #0b1020） */
+    background?: string;
+    /** 一周する時間。数値は秒（既定: 16秒） */
+    speed?: number | string;
+}
+/** ゆっくり回転しながらゆらめくオーロラ調のグラデーション背景 */
+declare const AuroraSkin: React.ForwardRefExoticComponent<AuroraSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface MetalSkinProps extends SkinBaseProps {
+    /** ヘアライン（ブラシ目）の方向。数値は deg（既定: 90deg = 横方向） */
+    angle?: number | string;
+}
+/** ヘアライン加工されたブラシメタル（アルミ調）の質感 */
+declare const MetalSkin: React.ForwardRefExoticComponent<MetalSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface CarbonSkinProps extends SkinBaseProps {
+    /** 織り目1マスの大きさ。数値は px（既定: 14px） */
+    scale?: number | string;
+}
+/** カーボンファイバーの織り目パターン */
+declare const CarbonSkin: React.ForwardRefExoticComponent<CarbonSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface PaperSkinProps extends SkinBaseProps {
+    /** 紙の色（既定: #f6f1e7 の生成り色） */
+    tint?: string;
+    /** 紙のざらつきの強さ 0〜1（既定: 0.5） */
+    grain?: number;
+}
+/** ざらついた紙・和紙のようなテクスチャ */
+declare const PaperSkin: React.ForwardRefExoticComponent<PaperSkinProps & React.RefAttributes<HTMLElement>>;
+
+interface HoloSkinProps extends SkinBaseProps {
+    /** 虹色が流れる周期。数値は秒（既定: 9秒） */
+    speed?: number | string;
+}
+/** トレーディングカードのようなホログラム（虹色に流れる）質感 */
+declare const HoloSkin: React.ForwardRefExoticComponent<HoloSkinProps & React.RefAttributes<HTMLElement>>;
+
+type SkinVariant = "glass" | "frost" | "reflect" | "aurora" | "metal" | "carbon" | "paper" | "holo";
+/** 全スキンを含むスタイルシート（コンポーネントが注入するもの） */
+declare const SKIN_CSS: string;
+/** variant ごとに要素へ付ける class 名 */
+declare const SKIN_CLASS_NAMES: Record<SkinVariant, string>;
+/**
+ * 指定スキンを React なしでも使える自己完結 CSS を返す（コピー&ペースト用）。
+ * 返り値をスタイルシートに貼り、SKIN_CLASS_NAMES の class を要素に付ければ動く。
+ */
+declare function getSkinCSS(variant: SkinVariant): string;
+
+type SkinProps = ({
+    variant?: "glass";
+} & GlassSkinProps) | ({
+    variant: "frost";
+} & FrostSkinProps) | ({
+    variant: "reflect";
+} & ReflectSkinProps) | ({
+    variant: "aurora";
+} & AuroraSkinProps) | ({
+    variant: "metal";
+} & MetalSkinProps) | ({
+    variant: "carbon";
+} & CarbonSkinProps) | ({
+    variant: "paper";
+} & PaperSkinProps) | ({
+    variant: "holo";
+} & HoloSkinProps);
+/** variant 指定で任意のスキンを切り替えられる汎用コンポーネント */
+declare function Skin(props: SkinProps): React.ReactElement;
+
+export { AuroraSkin, type AuroraSkinProps, CarbonSkin, type CarbonSkinProps, FrostSkin, type FrostSkinProps, GlassSkin, type GlassSkinProps, HoloSkin, type HoloSkinProps, MetalSkin, type MetalSkinProps, PaperSkin, type PaperSkinProps, ReflectSkin, type ReflectSkinProps, SKIN_CLASS_NAMES, SKIN_CSS, Skin, type SkinBaseProps, type SkinProps, type SkinVariant, getSkinCSS };