@krizaka/ui 1.2.0 → 2.0.0-beta.0

package/dist/native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/native/OrochiaMark.tsx","../src/marks/orochia-geometry.ts"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { AccessibilityInfo, Animated, Easing, View } from \"react-native\";\nimport Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from \"react-native-svg\";\nimport { OROCHIA as G } from \"../marks/orochia-geometry\";\n\nexport interface NativeMarkProps {\n  /** Width and height in points. */\n  size?: number;\n  /** The orbit turns and the flame breathes; always still when the system asks to reduce motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n  /** The neutral strokes (orbit, ring): the host's border colour. */\n  neutral?: string;\n}\n\nconst CENTER = G.offset + 180;\n\n/**\n * The Orochia mark for React Native — the same geometry as the web mark (marks/orochia-geometry.ts), drawn with\n * react-native-svg. Three layers so that the motion runs on the native driver: the orbit turns, the eye and the flame\n * breathe, the serpent stays still.\n */\nexport function OrochiaMark({ size = 48, animated = true, title, neutral = \"rgba(255,255,255,0.35)\" }: NativeMarkProps) {\n  const spin = useRef(new Animated.Value(0)).current;\n  const pulse = useRef(new Animated.Value(0)).current;\n  useEffect(() => {\n    if (!animated) return;\n    let loops: Animated.CompositeAnimation[] = [];\n    let cancelled = false;\n    void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {\n      if (reduce || cancelled) return;\n      loops = [\n        Animated.loop(Animated.timing(spin, { toValue: 1, duration: 30_000, easing: Easing.linear, useNativeDriver: true })),\n        Animated.loop(\n          Animated.sequence([\n            Animated.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n            Animated.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n          ]),\n        ),\n      ];\n      loops.forEach((l) => l.start());\n    });\n    return () => {\n      cancelled = true;\n      loops.forEach((l) => l.stop());\n    };\n  }, [animated, spin, pulse]);\n\n  const viewBox = size < 48 ? G.croppedViewBox : G.viewBox;\n  const layer = { position: \"absolute\" as const, width: size, height: size };\n  const a11y = title ? { accessible: true, accessibilityRole: \"image\" as const, accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: \"no-hide-descendants\" as const };\n  const bodyGradient = (\n    <LinearGradient id=\"body\" gradientUnits=\"userSpaceOnUse\" x1={G.body.x1 + G.offset} y1={G.body.y1 + G.offset} x2={G.body.x2 + G.offset} y2={G.body.y2 + G.offset}>\n      {G.body.stops.map(([offset, color]) => (\n        <Stop key={offset} offset={offset} stopColor={color} />\n      ))}\n    </LinearGradient>\n  );\n\n  return (\n    <View style={{ width: size, height: size }} {...a11y}>\n      <Svg viewBox={viewBox} style={layer}>\n        <Defs>\n          <RadialGradient id=\"glow\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <Stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n            <Stop offset=\"100%\" stopColor={G.glow.color} stopOpacity={0} />\n          </RadialGradient>\n        </Defs>\n        <Circle cx={CENTER} cy={CENTER} r={170} fill=\"url(#glow)\" />\n        <Circle cx={CENTER} cy={CENTER} r={G.ring.r} stroke={neutral} strokeWidth={G.ring.width} opacity={0.35} fill=\"none\" />\n      </Svg>\n      <Animated.View style={[layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: [\"0deg\", \"360deg\"] }) }] }]}>\n        <Svg viewBox={viewBox} style={layer}>\n          <Circle cx={CENTER} cy={CENTER} r={G.orbit.r} stroke={neutral} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity={0.6} fill=\"none\" />\n        </Svg>\n      </Animated.View>\n      <Svg viewBox={viewBox} style={layer}>\n        <Defs>{bodyGradient}</Defs>\n        <Group transform={`translate(${G.offset} ${G.offset})`}>\n          <Path d={G.arc} stroke=\"url(#body)\" strokeWidth={22} strokeLinecap=\"round\" fill=\"none\" />\n          <Path d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} fill=\"none\" />\n          <Path d={G.neck} stroke=\"url(#body)\" strokeWidth={14} strokeLinecap=\"round\" fill=\"none\" />\n          <Path d={G.tail} stroke=\"url(#body)\" strokeWidth={6} strokeLinecap=\"round\" fill=\"none\" />\n          <Ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} rotation={G.head.rotate} origin={`${G.head.cx}, ${G.head.cy}`} fill=\"url(#body)\" />\n          <Path d={G.tongue.d} stroke={G.tongue.color} strokeWidth={3} strokeLinecap=\"round\" fill=\"none\" />\n        </Group>\n      </Svg>\n      <Animated.View style={[layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }]}>\n        <Svg viewBox={viewBox} style={layer}>\n          <Defs>\n            <LinearGradient id=\"flame\" x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n              {G.flameGradient.stops.map(([offset, color]) => (\n                <Stop key={offset} offset={offset} stopColor={color} />\n              ))}\n            </LinearGradient>\n          </Defs>\n          <Group transform={`translate(${G.offset} ${G.offset})`}>\n            <Circle cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n            <Path d={G.flame.d} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} fill=\"url(#flame)\" />\n          </Group>\n        </Svg>\n      </Animated.View>\n    </View>\n  );\n}\n","/**\n * The Orochia mark's geometry — the one description of the serpent and its flame, drawn by the web mark (SVG in the\n * DOM, OrochiaLogo) and the native one (react-native-svg, @krizaka/ui/native). Coordinates are in the 360×360 artwork,\n * placed at (20, 20) in a 400×400 view box; below 48 px the view box crops to the serpent.\n */\nexport const OROCHIA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: [[\"0%\", \"#7c3aed\"], [\"55%\", \"#d946ef\"], [\"100%\", \"#f472b6\"]] },\n  flameGradient: { stops: [[\"0%\", \"#a855f7\"], [\"100%\", \"#f9a8d4\"]] },\n  glow: { color: \"#d946ef\", opacity: 0.18 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n  arc: \"M259.8,142.8 A88,88 0 1 1 142.8,100.2\",\n  neck: \"M142.8,100.2 A88,88 0 0 1 187.7,92.3\",\n  tail: \"M187.7,92.3 A88,88 0 0 1 221.3,102.3\",\n  scales: { color: \"#fdf4ff\", opacity: 0.45, width: 3, dash: \"2 14\" },\n  head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },\n  tongue: { d: \"M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3\", color: \"#f472b6\" },\n  eye: { cx: 256.3, cy: 123.5, r: 4.5, color: \"#fdf4ff\" },\n  flame: {\n    translate: [127, 120] as const,\n    scale: 4.4,\n    d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\",\n  },\n} as const;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/native/OrochiaMark.tsx","../src/marks/orochia-geometry.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { AccessibilityInfo, Animated, Easing, View } from \"react-native\";\nimport Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from \"react-native-svg\";\n\nimport { OROCHIA as G } from \"../marks/orochia-geometry\";\n\nexport interface NativeMarkProps {\n  /** Width and height in points. */\n  size?: number;\n  /** The orbit turns and the flame breathes; always still when the system asks to reduce motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n  /** The neutral strokes (orbit, ring): the host's border colour. */\n  neutral?: string;\n}\n\nconst CENTER = G.offset + 180;\n\n/**\n * The Orochia mark for React Native — the same geometry as the web mark (marks/orochia-geometry.ts), drawn with\n * react-native-svg. Three layers so that the motion runs on the native driver: the orbit turns, the eye and the flame\n * breathe, the serpent stays still.\n */\nexport function OrochiaMark({ size = 48, animated = true, title, neutral = \"rgba(255,255,255,0.35)\" }: NativeMarkProps) {\n  const [spin] = useState(() => new Animated.Value(0));\n  const [pulse] = useState(() => new Animated.Value(0));\n  useEffect(() => {\n    if (!animated) return;\n    let loops: Animated.CompositeAnimation[] = [];\n    let cancelled = false;\n    void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {\n      if (reduce || cancelled) return;\n      loops = [\n        Animated.loop(Animated.timing(spin, { toValue: 1, duration: 30_000, easing: Easing.linear, useNativeDriver: true })),\n        Animated.loop(\n          Animated.sequence([\n            Animated.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n            Animated.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n          ]),\n        ),\n      ];\n      loops.forEach((l) => l.start());\n    });\n    return () => {\n      cancelled = true;\n      loops.forEach((l) => l.stop());\n    };\n  }, [animated, spin, pulse]);\n\n  const viewBox = size < 48 ? G.croppedViewBox : G.viewBox;\n  const layer = { position: \"absolute\" as const, width: size, height: size };\n  const a11y = title ? { accessible: true, accessibilityRole: \"image\" as const, accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: \"no-hide-descendants\" as const };\n  const bodyGradient = (\n    <LinearGradient id=\"body\" gradientUnits=\"userSpaceOnUse\" x1={G.body.x1 + G.offset} y1={G.body.y1 + G.offset} x2={G.body.x2 + G.offset} y2={G.body.y2 + G.offset}>\n      {G.body.stops.map(([offset, color]) => (\n        <Stop key={offset} offset={offset} stopColor={color} />\n      ))}\n    </LinearGradient>\n  );\n\n  return (\n    <View style={{ width: size, height: size }} {...a11y}>\n      <Svg viewBox={viewBox} style={layer}>\n        <Defs>\n          <RadialGradient id=\"glow\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <Stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n            <Stop offset=\"100%\" stopColor={G.glow.color} stopOpacity={0} />\n          </RadialGradient>\n        </Defs>\n        <Circle cx={CENTER} cy={CENTER} r={170} fill=\"url(#glow)\" />\n        <Circle cx={CENTER} cy={CENTER} r={G.ring.r} stroke={neutral} strokeWidth={G.ring.width} opacity={0.35} fill=\"none\" />\n      </Svg>\n      <Animated.View style={[layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: [\"0deg\", \"360deg\"] }) }] }]}>\n        <Svg viewBox={viewBox} style={layer}>\n          <Circle cx={CENTER} cy={CENTER} r={G.orbit.r} stroke={neutral} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity={0.6} fill=\"none\" />\n        </Svg>\n      </Animated.View>\n      <Svg viewBox={viewBox} style={layer}>\n        <Defs>{bodyGradient}</Defs>\n        <Group transform={`translate(${G.offset} ${G.offset})`}>\n          <Path d={G.arc} stroke=\"url(#body)\" strokeWidth={22} strokeLinecap=\"round\" fill=\"none\" />\n          <Path d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} fill=\"none\" />\n          <Path d={G.neck} stroke=\"url(#body)\" strokeWidth={14} strokeLinecap=\"round\" fill=\"none\" />\n          <Path d={G.tail} stroke=\"url(#body)\" strokeWidth={6} strokeLinecap=\"round\" fill=\"none\" />\n          <Ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} rotation={G.head.rotate} origin={`${G.head.cx}, ${G.head.cy}`} fill=\"url(#body)\" />\n          <Path d={G.tongue.d} stroke={G.tongue.color} strokeWidth={3} strokeLinecap=\"round\" fill=\"none\" />\n        </Group>\n      </Svg>\n      <Animated.View style={[layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }]}>\n        <Svg viewBox={viewBox} style={layer}>\n          <Defs>\n            <LinearGradient id=\"flame\" x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n              {G.flameGradient.stops.map(([offset, color]) => (\n                <Stop key={offset} offset={offset} stopColor={color} />\n              ))}\n            </LinearGradient>\n          </Defs>\n          <Group transform={`translate(${G.offset} ${G.offset})`}>\n            <Circle cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n            <Path d={G.flame.d} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} fill=\"url(#flame)\" />\n          </Group>\n        </Svg>\n      </Animated.View>\n    </View>\n  );\n}\n","/**\n * The Orochia mark's geometry — the one description of the serpent and its flame, drawn by the web mark (SVG in the\n * DOM, OrochiaLogo) and the native one (react-native-svg, @krizaka/ui/native). Coordinates are in the 360×360 artwork,\n * placed at (20, 20) in a 400×400 view box; below 48 px the view box crops to the serpent.\n */\nexport const OROCHIA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: [[\"0%\", \"#7c3aed\"], [\"55%\", \"#d946ef\"], [\"100%\", \"#f472b6\"]] },\n  flameGradient: { stops: [[\"0%\", \"#a855f7\"], [\"100%\", \"#f9a8d4\"]] },\n  glow: { color: \"#d946ef\", opacity: 0.18 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n  arc: \"M259.8,142.8 A88,88 0 1 1 142.8,100.2\",\n  neck: \"M142.8,100.2 A88,88 0 0 1 187.7,92.3\",\n  tail: \"M187.7,92.3 A88,88 0 0 1 221.3,102.3\",\n  scales: { color: \"#fdf4ff\", opacity: 0.45, width: 3, dash: \"2 14\" },\n  head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },\n  tongue: { d: \"M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3\", color: \"#f472b6\" },\n  eye: { cx: 256.3, cy: 123.5, r: 4.5, color: \"#fdf4ff\" },\n  flame: {\n    translate: [127, 120] as const,\n    scale: 4.4,\n    d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\",\n  },\n} as const;\n"],"mappings":";AAAA,SAAgB,WAAW,gBAAgB;AAC3C,SAAS,mBAAmB,UAAU,QAAQ,YAAY;AAC1D,OAAO,OAAO,QAAQ,MAAM,SAAS,KAAK,OAAO,gBAAgB,MAAM,gBAAgB,YAAY;;;ACG5F,IAAM,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,MAAM,EAAE,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,OAAO,CAAC,CAAC,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,GAAG,CAAC,QAAQ,SAAS,CAAC,EAAE;AAAA,EAC9G,eAAe,EAAE,OAAO,CAAC,CAAC,MAAM,SAAS,GAAG,CAAC,QAAQ,SAAS,CAAC,EAAE;AAAA,EACjE,MAAM,EAAE,OAAO,WAAW,SAAS,KAAK;AAAA,EACxC,OAAO,EAAE,GAAG,KAAK,MAAM,OAAO,OAAO,IAAI;AAAA,EACzC,MAAM,EAAE,GAAG,KAAK,OAAO,EAAE;AAAA,EACzB,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ,EAAE,OAAO,WAAW,SAAS,MAAM,OAAO,GAAG,MAAM,OAAO;AAAA,EAClE,MAAM,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,IAAI,IAAI,IAAI,QAAQ,IAAI;AAAA,EAC1D,QAAQ,EAAE,GAAG,mEAAmE,OAAO,UAAU;AAAA,EACjG,KAAK,EAAE,IAAI,OAAO,IAAI,OAAO,GAAG,KAAK,OAAO,UAAU;AAAA,EACtD,OAAO;AAAA,IACL,WAAW,CAAC,KAAK,GAAG;AAAA,IACpB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AACF;;;AD8BQ,cASE,YATF;AAvCR,IAAM,SAAS,QAAE,SAAS;AAOnB,SAAS,YAAY,EAAE,OAAO,IAAI,WAAW,MAAM,OAAO,UAAU,yBAAyB,GAAoB;AACtH,QAAM,CAAC,IAAI,IAAI,SAAS,MAAM,IAAI,SAAS,MAAM,CAAC,CAAC;AACnD,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM,IAAI,SAAS,MAAM,CAAC,CAAC;AACpD,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,QAAI,QAAuC,CAAC;AAC5C,QAAI,YAAY;AAChB,SAAK,kBAAkB,sBAAsB,EAAE,KAAK,CAAC,WAAW;AAC9D,UAAI,UAAU,UAAW;AACzB,cAAQ;AAAA,QACN,SAAS,KAAK,SAAS,OAAO,MAAM,EAAE,SAAS,GAAG,UAAU,KAAQ,QAAQ,OAAO,QAAQ,iBAAiB,KAAK,CAAC,CAAC;AAAA,QACnH,SAAS;AAAA,UACP,SAAS,SAAS;AAAA,YAChB,SAAS,OAAO,OAAO,EAAE,SAAS,GAAG,UAAU,MAAM,QAAQ,OAAO,MAAM,OAAO,IAAI,GAAG,iBAAiB,KAAK,CAAC;AAAA,YAC/G,SAAS,OAAO,OAAO,EAAE,SAAS,GAAG,UAAU,MAAM,QAAQ,OAAO,MAAM,OAAO,IAAI,GAAG,iBAAiB,KAAK,CAAC;AAAA,UACjH,CAAC;AAAA,QACH;AAAA,MACF;AACA,YAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;AAAA,IAChC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AACZ,YAAM,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,KAAK,CAAC;AAE1B,QAAM,UAAU,OAAO,KAAK,QAAE,iBAAiB,QAAE;AACjD,QAAM,QAAQ,EAAE,UAAU,YAAqB,OAAO,MAAM,QAAQ,KAAK;AACzE,QAAM,OAAO,QAAQ,EAAE,YAAY,MAAM,mBAAmB,SAAkB,oBAAoB,MAAM,IAAI,EAAE,6BAA6B,MAAM,2BAA2B,sBAA+B;AAC3M,QAAM,eACJ,oBAAC,kBAAe,IAAG,QAAO,eAAc,kBAAiB,IAAI,QAAE,KAAK,KAAK,QAAE,QAAQ,IAAI,QAAE,KAAK,KAAK,QAAE,QAAQ,IAAI,QAAE,KAAK,KAAK,QAAE,QAAQ,IAAI,QAAE,KAAK,KAAK,QAAE,QACtJ,kBAAE,KAAK,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK,MAC/B,oBAAC,QAAkB,QAAgB,WAAW,SAAnC,MAA0C,CACtD,GACH;AAGF,SACE,qBAAC,QAAK,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,GAAI,GAAG,MAC9C;AAAA,yBAAC,OAAI,SAAkB,OAAO,OAC5B;AAAA,0BAAC,QACC,+BAAC,kBAAe,IAAG,QAAO,IAAG,OAAM,IAAG,OAAM,GAAE,OAC5C;AAAA,4BAAC,QAAK,QAAO,MAAK,WAAW,QAAE,KAAK,OAAO,aAAa,QAAE,KAAK,SAAS;AAAA,QACxE,oBAAC,QAAK,QAAO,QAAO,WAAW,QAAE,KAAK,OAAO,aAAa,GAAG;AAAA,SAC/D,GACF;AAAA,MACA,oBAAC,UAAO,IAAI,QAAQ,IAAI,QAAQ,GAAG,KAAK,MAAK,cAAa;AAAA,MAC1D,oBAAC,UAAO,IAAI,QAAQ,IAAI,QAAQ,GAAG,QAAE,KAAK,GAAG,QAAQ,SAAS,aAAa,QAAE,KAAK,OAAO,SAAS,MAAM,MAAK,QAAO;AAAA,OACtH;AAAA,IACA,oBAAC,SAAS,MAAT,EAAc,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,QAAQ,KAAK,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,QAAQ,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAClI,8BAAC,OAAI,SAAkB,OAAO,OAC5B,8BAAC,UAAO,IAAI,QAAQ,IAAI,QAAQ,GAAG,QAAE,MAAM,GAAG,QAAQ,SAAS,aAAa,QAAE,MAAM,OAAO,iBAAiB,QAAE,MAAM,MAAM,SAAS,KAAK,MAAK,QAAO,GACtJ,GACF;AAAA,IACA,qBAAC,OAAI,SAAkB,OAAO,OAC5B;AAAA,0BAAC,QAAM,wBAAa;AAAA,MACpB,qBAAC,SAAM,WAAW,aAAa,QAAE,MAAM,IAAI,QAAE,MAAM,KACjD;AAAA,4BAAC,QAAK,GAAG,QAAE,KAAK,QAAO,cAAa,aAAa,IAAI,eAAc,SAAQ,MAAK,QAAO;AAAA,QACvF,oBAAC,QAAK,GAAG,QAAE,KAAK,QAAQ,QAAE,OAAO,OAAO,eAAe,QAAE,OAAO,SAAS,aAAa,QAAE,OAAO,OAAO,eAAc,SAAQ,iBAAiB,QAAE,OAAO,MAAM,MAAK,QAAO;AAAA,QACxK,oBAAC,QAAK,GAAG,QAAE,MAAM,QAAO,cAAa,aAAa,IAAI,eAAc,SAAQ,MAAK,QAAO;AAAA,QACxF,oBAAC,QAAK,GAAG,QAAE,MAAM,QAAO,cAAa,aAAa,GAAG,eAAc,SAAQ,MAAK,QAAO;AAAA,QACvF,oBAAC,WAAQ,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,UAAU,QAAE,KAAK,QAAQ,QAAQ,GAAG,QAAE,KAAK,EAAE,KAAK,QAAE,KAAK,EAAE,IAAI,MAAK,cAAa;AAAA,QACtJ,oBAAC,QAAK,GAAG,QAAE,OAAO,GAAG,QAAQ,QAAE,OAAO,OAAO,aAAa,GAAG,eAAc,SAAQ,MAAK,QAAO;AAAA,SACjG;AAAA,OACF;AAAA,IACA,oBAAC,SAAS,MAAT,EAAc,OAAO,CAAC,OAAO,EAAE,SAAS,MAAM,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,GAC1G,+BAAC,OAAI,SAAkB,OAAO,OAC5B;AAAA,0BAAC,QACC,8BAAC,kBAAe,IAAG,SAAQ,IAAG,OAAM,IAAG,QAAO,IAAG,OAAM,IAAG,MACvD,kBAAE,cAAc,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK,MACxC,oBAAC,QAAkB,QAAgB,WAAW,SAAnC,MAA0C,CACtD,GACH,GACF;AAAA,MACA,qBAAC,SAAM,WAAW,aAAa,QAAE,MAAM,IAAI,QAAE,MAAM,KACjD;AAAA,4BAAC,UAAO,IAAI,QAAE,IAAI,IAAI,IAAI,QAAE,IAAI,IAAI,GAAG,QAAE,IAAI,GAAG,MAAM,QAAE,IAAI,OAAO;AAAA,QACnE,oBAAC,QAAK,GAAG,QAAE,MAAM,GAAG,WAAW,aAAa,QAAE,MAAM,UAAU,CAAC,CAAC,IAAI,QAAE,MAAM,UAAU,CAAC,CAAC,WAAW,QAAE,MAAM,KAAK,KAAK,MAAK,eAAc;AAAA,SAC1I;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/skeleton.d.ts

@@ -0,0 +1,28 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const skeletonVariants: tailwind_variants.TVReturnType<{
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined, "block bg-surface-3 motion-safe:animate-pulse", {
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined>>;
+type SkeletonProps = React.ComponentProps<"span"> & VariantProps<typeof skeletonVariants>;
+/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */
+declare function Skeleton({ shape, className, ...props }: SkeletonProps): React.JSX.Element;
+
+export { Skeleton, type SkeletonProps, skeletonVariants };

package/dist/skeleton.js

@@ -0,0 +1,18 @@
+// src/skeleton/skeleton.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var skeletonVariants = tv({
+  base: "block bg-surface-3 motion-safe:animate-pulse",
+  variants: {
+    shape: { text: "h-3 w-full rounded-sm", circle: "aspect-square h-10 rounded-full", rect: "h-24 w-full rounded-lg" }
+  },
+  defaultVariants: { shape: "text" }
+});
+function Skeleton({ shape, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-shape": shape ?? "text", className: skeletonVariants({ shape, className }), ...props });
+}
+export {
+  Skeleton,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"block bg-surface-3 motion-safe:animate-pulse\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & VariantProps<typeof skeletonVariants>;\n\n/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAc7B;AAZF,IAAM,mBAAmB,GAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAKM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,oBAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;","names":[]}

package/dist/slot.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from 'react';
+import { VisuallyHidden as VisuallyHidden$1 } from 'radix-ui';
+
+/** Merges its props, `className` and `ref` into its only child: the engine of every `asChild`. */
+declare const Slot: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+} & React$1.RefAttributes<HTMLElement>>;
+/** Hidden on screen, read by assistive technology. */
+declare const VisuallyHidden: React$1.ForwardRefExoticComponent<VisuallyHidden$1.VisuallyHiddenProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+export { Slot, VisuallyHidden };

package/dist/slot.js

@@ -0,0 +1,9 @@
+// src/slot/index.ts
+import { Slot as SlotPrimitive, VisuallyHidden as VisuallyHiddenPrimitive } from "radix-ui";
+var Slot = SlotPrimitive.Root;
+var VisuallyHidden = VisuallyHiddenPrimitive.Root;
+export {
+  Slot,
+  VisuallyHidden
+};
+//# sourceMappingURL=slot.js.map

package/dist/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slot/index.ts"],"sourcesContent":["/** @krizaka/ui/slot — `Slot` (what `asChild` renders) and `VisuallyHidden` (a name for assistive technology only), from Radix. */\nimport { Slot as SlotPrimitive, VisuallyHidden as VisuallyHiddenPrimitive } from \"radix-ui\";\n\n/** Merges its props, `className` and `ref` into its only child: the engine of every `asChild`. */\nexport const Slot = SlotPrimitive.Root;\n/** Hidden on screen, read by assistive technology. */\nexport const VisuallyHidden = VisuallyHiddenPrimitive.Root;\n"],"mappings":";AACA,SAAS,QAAQ,eAAe,kBAAkB,+BAA+B;AAG1E,IAAM,OAAO,cAAc;AAE3B,IAAM,iBAAiB,wBAAwB;","names":[]}

package/dist/spinner.d.ts

@@ -0,0 +1,31 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const spinnerVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined, "shrink-0 text-accent motion-safe:animate-spin", {
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined>>;
+type SpinnerProps = Omit<React.ComponentProps<"svg">, "children"> & VariantProps<typeof spinnerVariants> & {
+    /** The accessible name of the wait, e.g. "Loading" — passed translated. */
+    label: string;
+};
+/** A turning ring with `role="status"` (it stops turning under prefers-reduced-motion). */
+declare function Spinner({ label, size, className, ...props }: SpinnerProps): React.JSX.Element;
+
+export { Spinner, type SpinnerProps, spinnerVariants };

package/dist/spinner.js

@@ -0,0 +1,31 @@
+// src/spinner/spinner.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var spinnerVariants = tv({
+  base: "shrink-0 text-accent motion-safe:animate-spin",
+  variants: { size: { sm: "h-4 w-4", md: "h-6 w-6", lg: "h-10 w-10" } },
+  defaultVariants: { size: "md" }
+});
+function Spinner({ label, size, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      role: "status",
+      "aria-label": label,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "data-size": size ?? "md",
+      className: spinnerVariants({ size, className }),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+export {
+  Spinner,
+  spinnerVariants
+};
+//# sourceMappingURL=spinner.js.map

package/dist/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/spinner.tsx"],"sourcesContent":["// Server-safe. An indeterminate wait: an SVG ring, announced as a status with its `label`.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const spinnerVariants = tv({\n  base: \"shrink-0 text-accent motion-safe:animate-spin\",\n  variants: { size: { sm: \"h-4 w-4\", md: \"h-6 w-6\", lg: \"h-10 w-10\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SpinnerProps = Omit<React.ComponentProps<\"svg\">, \"children\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /** The accessible name of the wait, e.g. \"Loading\" — passed translated. */\n    label: string;\n  };\n\n/** A turning ring with `role=\"status\"` (it stops turning under prefers-reduced-motion). */\nexport function Spinner({ label, size, className, ...props }: SpinnerProps) {\n  return (\n    <svg\n      role=\"status\"\n      aria-label={label}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      data-size={size ?? \"md\"}\n      className={spinnerVariants({ size, className })}\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeOpacity=\"0.2\" strokeWidth=\"3\" />\n      <path d=\"M21 12a9 9 0 0 0-9-9\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAiBlC,SASE,KATF;AAfG,IAAM,kBAAkB,GAAG;AAAA,EAChC,MAAM;AAAA,EACN,UAAU,EAAE,MAAM,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE;AAAA,EACpE,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AASM,SAAS,QAAQ,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAiB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,aAAW,QAAQ;AAAA,MACnB,WAAW,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAAA,MAC7C,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,QAAO,gBAAe,eAAc,OAAM,aAAY,KAAI;AAAA,QACxF,oBAAC,UAAK,GAAE,wBAAuB,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ;AAAA;AAAA;AAAA,EAC7F;AAEJ;","names":[]}

package/dist/theme.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const buttonVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent";
+        ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    };
+    size: {
+        sm: "h-8 px-3 text-xs";
+        md: "h-10 px-4 text-sm";
+        lg: "h-12 px-6 text-sm";
+        icon: "h-10 w-10";
+    };
+    shape: {
+        rounded: "rounded-lg";
+        pill: "rounded-full";
+    };
+}, undefined, string, {
+    variant: {
+        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent";
+        ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    };
+    size: {
+        sm: "h-8 px-3 text-xs";
+        md: "h-10 px-4 text-sm";
+        lg: "h-12 px-6 text-sm";
+        icon: "h-10 w-10";
+    };
+    shape: {
+        rounded: "rounded-lg";
+        pill: "rounded-full";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent";
+        ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    };
+    size: {
+        sm: "h-8 px-3 text-xs";
+        md: "h-10 px-4 text-sm";
+        lg: "h-12 px-6 text-sm";
+        icon: "h-10 w-10";
+    };
+    shape: {
+        rounded: "rounded-lg";
+        pill: "rounded-full";
+    };
+}, undefined>>;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+type Mode = "dark" | "light" | "system";
+/**
+ * In <head>, before anything renders: applies the persisted mode and named theme, so the page never flashes.
+ * `nonce` for a strict Content-Security-Policy.
+ */
+declare function ThemeScript({ nonce }: {
+    nonce?: string;
+}): React.JSX.Element;
+type ThemeContextValue = {
+    /** The chosen mode: dark, light or follow the system. */
+    mode: Mode;
+    setMode: (mode: Mode) => void;
+    /** The named theme (`html.theme-<name>`), or null. */
+    theme: string | null;
+    setTheme: (theme: string | null) => void;
+};
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    /** The mode before anything is persisted. */
+    defaultMode?: Mode;
+};
+declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): React.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+type ThemeToggleProps = Omit<React.ComponentProps<"button">, "onClick" | "children"> & Pick<ButtonVariants, "variant" | "shape"> & {
+    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t("theme." + mode)`). */
+    label: string | ((mode: Mode) => string);
+};
+/**
+ * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a
+ * <ThemeProvider> above it. State: `data-mode`.
+ */
+declare function ThemeToggle({ label, variant, shape, className, ...props }: ThemeToggleProps): React.JSX.Element;
+
+export { type Mode, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeScript, ThemeToggle, type ThemeToggleProps, useTheme };

package/dist/theme.js

@@ -0,0 +1,140 @@
+"use client";
+
+// src/theme/theme.tsx
+import * as React from "react";
+
+// src/button/button.tsx
+import { Slot } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = tv({
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]",
+  variants: {
+    variant: {
+      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
+      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
+      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent",
+      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
+      // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a
+      // text role, the border and the tint carry the danger.
+      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
+    },
+    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
+    shape: { rounded: "rounded-lg", pill: "rounded-full" }
+  },
+  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
+});
+
+// src/theme/theme.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var MODE_KEY = "kz-theme";
+var NAME_KEY = "kz-theme-name";
+var MODES = ["dark", "light", "system"];
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var isMode = (value) => MODES.includes(value);
+var memory = /* @__PURE__ */ new Map();
+function read(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return memory.get(key) ?? null;
+  }
+}
+function write(key, value) {
+  if (value === null) memory.delete(key);
+  else memory.set(key, value);
+  try {
+    if (value === null) localStorage.removeItem(key);
+    else localStorage.setItem(key, value);
+  } catch {
+  }
+}
+var listeners = /* @__PURE__ */ new Set();
+var notify = () => listeners.forEach((listener) => listener());
+function subscribe(listener) {
+  listeners.add(listener);
+  window.addEventListener("storage", listener);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener("storage", listener);
+  };
+}
+function applyMode(mode) {
+  const dark = window.matchMedia(DARK_QUERY).matches;
+  document.documentElement.classList.toggle("light", mode === "light" || mode === "system" && !dark);
+}
+function applyName(previous, next) {
+  const classes = document.documentElement.classList;
+  if (previous) classes.remove(`theme-${previous}`);
+  if (next) classes.add(`theme-${next}`);
+}
+function ThemeScript({ nonce }) {
+  const js = `(function(){try{var m=localStorage.getItem("${MODE_KEY}")||"system";var n=localStorage.getItem("${NAME_KEY}");var d=matchMedia("${DARK_QUERY}").matches;var c=document.documentElement.classList;c.toggle("light",m==="light"||(m==="system"&&!d));if(n)c.add("theme-"+n)}catch(e){}})()`;
+  return /* @__PURE__ */ jsx2("script", { nonce, dangerouslySetInnerHTML: { __html: js } });
+}
+var ThemeContext = React.createContext(null);
+function ThemeProvider({ children, defaultMode = "system" }) {
+  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);
+  const mode = isMode(stored) ? stored : defaultMode;
+  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);
+  React.useEffect(() => {
+    if (mode !== "system") return;
+    const query = window.matchMedia(DARK_QUERY);
+    const onChange = () => applyMode("system");
+    query.addEventListener?.("change", onChange);
+    return () => query.removeEventListener?.("change", onChange);
+  }, [mode]);
+  const setMode = React.useCallback((next) => {
+    write(MODE_KEY, next);
+    applyMode(next);
+    notify();
+  }, []);
+  const setTheme = React.useCallback((next) => {
+    applyName(read(NAME_KEY), next);
+    write(NAME_KEY, next);
+    notify();
+  }, []);
+  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) throw new Error("useTheme: wrap the app in <ThemeProvider>");
+  return context;
+}
+var ICONS = {
+  dark: /* @__PURE__ */ jsx2("path", { d: "M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" }),
+  light: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })
+  ] }),
+  system: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 20h8M12 16v4" })
+  ] })
+};
+function ThemeToggle({ label, variant = "ghost", shape, className, ...props }) {
+  const { mode, setMode } = useTheme();
+  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length];
+  const name = typeof label === "function" ? label(mode) : label;
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      "aria-label": name,
+      title: name,
+      "data-mode": mode,
+      onClick: () => setMode(next),
+      className: buttonVariants({ variant, shape, size: "icon", className }),
+      ...props,
+      children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: ICONS[mode] })
+    }
+  );
+}
+export {
+  ThemeProvider,
+  ThemeScript,
+  ThemeToggle,
+  useTheme
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/theme.tsx","../src/button/button.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\n/**\n * In <head>, before anything renders: applies the persisted mode and named theme, so the page never flashes.\n * `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce }: { nonce?: string }) {\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\")||\"system\";var n=localStorage.getItem(\"${NAME_KEY}\");` +\n    `var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /** The mode before anything is persisted. */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n","// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a\n      // text role, the border and the tint carry the danger.\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */\n    loading?: boolean;\n  };\n\nexport function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({ variant, size, shape, className })}\n      {...props}\n    />\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. */\nexport function IconButton({ label, size = \"icon\", ...props }: IconButtonProps) {\n  return <Button aria-label={label} title={label} size={size} {...props} />;\n}\n"],"mappings":"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","names":["jsx"]}