{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon-label-subtext-button",
  "type": "registry:ui",
  "title": "Icon Label Subtext Button",
  "description": "iOS 26 liquid-glass card-button with icon circle, label, and subtext.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/icon-label-subtext-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\n\n/* ── sound ── */\nlet _a: AudioContext, _b: AudioBuffer;\nconst tick = () => {\n  if (typeof window === \"undefined\") return;\n  if (!_a) {\n    _a = new AudioContext();\n    _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate);\n    const d = _b.getChannelData(0);\n    for (let i = 0; i < d.length; i++)\n      d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4;\n  }\n  const s = _a.createBufferSource();\n  s.buffer = _b;\n  const g = _a.createGain();\n  g.gain.value = 0.08;\n  s.connect(g).connect(_a.destination);\n  s.start();\n};\n\n/* ── theme ── */\nconst CSS = `\n.il{\n  --il-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --il-border:rgba(0,0,0,0.06);\n  --il-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8);\n  --il-hi:rgba(0,0,0,0.88);\n  --il-dim:rgba(0,0,0,0.42);\n  --il-icon-bg:rgba(0,0,0,0.04)\n}\n.dark .il,[data-theme=\"dark\"] .il{\n  --il-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --il-border:rgba(255,255,255,0.07);\n  --il-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --il-hi:rgba(255,255,255,0.88);\n  --il-dim:rgba(255,255,255,0.28);\n  --il-icon-bg:rgba(255,255,255,0.06)\n}`;\n\n/* ── component ── */\nexport interface IconLabelSubtextButtonProps {\n  icon?: React.ReactNode;\n  label: string;\n  subtext?: string;\n  onClick?: () => void;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\nconst IconLabelSubtextButton: React.FC<IconLabelSubtextButtonProps> = ({\n  icon,\n  label,\n  subtext,\n  onClick,\n  sound = true,\n  style,\n}) => {\n  const defaultIcon = (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n      <polyline points=\"7 10 12 15 17 10\" />\n      <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" />\n    </svg>\n  );\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.button\n        className=\"il\"\n        onClick={() => {\n          onClick?.();\n          if (sound) tick();\n        }}\n        whileHover={{ scale: 1.03 }}\n        whileTap={{ scale: 0.97 }}\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: 10,\n          padding: \"10px 16px\",\n          borderRadius: 12,\n          border: \"1px solid var(--il-border)\",\n          background: \"var(--il-glass)\",\n          boxShadow: \"var(--il-shadow)\",\n          backdropFilter: \"blur(24px)\",\n          WebkitBackdropFilter: \"blur(24px)\",\n          cursor: \"pointer\",\n          outline: \"none\",\n          userSelect: \"none\",\n          textAlign: \"left\" as const,\n          ...style,\n        }}\n      >\n        {/* icon circle */}\n        <span\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            width: 32,\n            height: 32,\n            borderRadius: 8,\n            background: \"var(--il-icon-bg)\",\n            color: \"var(--il-hi)\",\n            flexShrink: 0,\n          }}\n        >\n          {icon || defaultIcon}\n        </span>\n\n        {/* text column */}\n        <span style={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n          <span\n            style={{\n              fontSize: 13,\n              fontWeight: 500,\n              color: \"var(--il-hi)\",\n              lineHeight: 1.3,\n            }}\n          >\n            {label}\n          </span>\n          {subtext && (\n            <span\n              style={{\n                fontSize: 11,\n                fontWeight: 400,\n                color: \"var(--il-dim)\",\n                lineHeight: 1.3,\n              }}\n            >\n              {subtext}\n            </span>\n          )}\n        </span>\n      </motion.button>\n    </>\n  );\n};\n\nexport default IconLabelSubtextButton;\n",
      "type": "registry:ui",
      "target": "components/ruixen/icon-label-subtext-button.tsx"
    }
  ]
}