@hyddenlabs/hydn-ui 0.3.11 → 0.3.13

package/dist/components/typography/code/code.js

@@ -16,7 +16,7 @@ function Code({ children, block = false, variant = "default", copy = false, clas
     }
   };
   const variantClasses = {
-    default: "bg-muted text-foreground",
+    default: "bg-muted-active text-foreground",
     primary: "text-primary",
     muted: "text-muted-foreground"
   };
@@ -31,7 +31,7 @@ function Code({ children, block = false, variant = "default", copy = false, clas
           {
             type: "button",
             onClick: handleCopy,
-            className: "absolute top-2 right-2 inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 cursor-pointer bg-background/80 backdrop-blur-sm p-1.5 rounded border border-border hover:bg-muted",
+            className: "absolute top-2 right-2 inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 cursor-pointer bg-background/80 backdrop-blur-sm p-1.5 rounded border border-border hover:bg-muted-hover",
             "aria-label": "Copy to clipboard",
             children: /* @__PURE__ */ jsx(
               Icon,

package/dist/components/typography/code/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","sources":["../../../../src/components/typography/code/code.tsx"],"sourcesContent":["import { ReactNode, useRef, useState } from 'react';\nimport Icon from '../../system/icon/icon';\n\nexport type CodeProps = {\n  /** Code content to be displayed */\n  children: ReactNode;\n  /** Whether to render as a code block (pre + code) or inline code\n   * @default false\n   */\n  block?: boolean;\n  /** Visual style variant\n   * @default 'default'\n   */\n  variant?: 'default' | 'primary' | 'muted';\n  /** Show copy-to-clipboard button\n   * @default false\n   */\n  copy?: boolean;\n  /** Additional CSS classes for custom styling */\n  className?: string;\n};\n\n/**\n * Code - Styled code snippets (inline or block)\n */\nfunction Code({ children, block = false, variant = 'default', copy = false, className = '' }: Readonly<CodeProps>) {\n  const codeRef = useRef<HTMLElement>(null);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    if (!codeRef.current) return;\n\n    try {\n      const textContent = codeRef.current.textContent || '';\n      await navigator.clipboard.writeText(textContent);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('Failed to copy code:', err);\n    }\n  };\n\n  const variantClasses = {\n    default: 'bg-muted text-foreground',\n    primary: 'text-primary',\n    muted: 'text-muted-foreground'\n  };\n\n  const baseClasses = `font-mono ${variantClasses[variant]}`;\n\n  if (block) {\n    const blockElement = (\n      <pre className={`${baseClasses} p-4 rounded-lg overflow-x-auto border border-border ${className}`} ref={codeRef}>\n        <code>{children}</code>\n      </pre>\n    );\n\n    if (copy) {\n      return (\n        <div className=\"relative group\">\n          {blockElement}\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className=\"absolute top-2 right-2 inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 cursor-pointer bg-background/80 backdrop-blur-sm p-1.5 rounded border border-border hover:bg-muted\"\n            aria-label=\"Copy to clipboard\"\n          >\n            <Icon\n              name={copied ? 'check' : 'copy'}\n              size=\"sm\"\n              color={copied ? 'success' : 'currentColor'}\n              className=\"transition-all\"\n            />\n          </button>\n        </div>\n      );\n    }\n\n    return blockElement;\n  }\n\n  const inlineElement = (\n    <code className={`${baseClasses} px-1.5 py-0.5 rounded text-sm ${className}`} ref={codeRef}>\n      {children}\n    </code>\n  );\n\n  if (copy) {\n    return (\n      <span className=\"inline-flex items-center gap-2 group\">\n        {inlineElement}\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          className=\"inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 cursor-pointer\"\n          aria-label=\"Copy to clipboard\"\n        >\n          <Icon\n            name={copied ? 'check' : 'copy'}\n            size=\"sm\"\n            color={copied ? 'success' : 'currentColor'}\n            className=\"transition-all\"\n          />\n        </button>\n      </span>\n    );\n  }\n\n  return inlineElement;\n}\n\nCode.displayName = 'Code';\n\nexport default Code;\n"],"names":[],"mappings":";;;AAyBA,SAAS,KAAK,EAAE,UAAU,QAAQ,OAAO,UAAU,WAAW,OAAO,OAAO,YAAY,GAAA,GAA2B;AACjH,QAAM,UAAU,OAAoB,IAAI;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,QAAQ,QAAS;AAEtB,QAAI;AACF,YAAM,cAAc,QAAQ,QAAQ,eAAe;AACnD,YAAM,UAAU,UAAU,UAAU,WAAW;AAC/C,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC,SAAS,KAAK;AAEZ,cAAQ,MAAM,wBAAwB,GAAG;AAAA,IAC3C;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAGT,QAAM,cAAc,aAAa,eAAe,OAAO,CAAC;AAExD,MAAI,OAAO;AACT,UAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,GAAG,WAAW,wDAAwD,SAAS,IAAI,KAAK,SACtG,UAAA,oBAAC,QAAA,EAAM,UAAS,GAClB;AAGF,QAAI,MAAM;AACR,aACE,qBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,cAAW;AAAA,YAEX,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,SAAS,UAAU;AAAA,gBACzB,MAAK;AAAA,gBACL,OAAO,SAAS,YAAY;AAAA,gBAC5B,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,gBACJ,oBAAC,QAAA,EAAK,WAAW,GAAG,WAAW,kCAAkC,SAAS,IAAI,KAAK,SAChF,SAAA,CACH;AAGF,MAAI,MAAM;AACR,WACE,qBAAC,QAAA,EAAK,WAAU,wCACb,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UACV,cAAW;AAAA,UAEX,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,SAAS,UAAU;AAAA,cACzB,MAAK;AAAA,cACL,OAAO,SAAS,YAAY;AAAA,cAC5B,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"code.js","sources":["../../../../src/components/typography/code/code.tsx"],"sourcesContent":["import { ReactNode, useRef, useState } from 'react';\nimport Icon from '../../system/icon/icon';\n\nexport type CodeProps = {\n  /** Code content to be displayed */\n  children: ReactNode;\n  /** Whether to render as a code block (pre + code) or inline code\n   * @default false\n   */\n  block?: boolean;\n  /** Visual style variant\n   * @default 'default'\n   */\n  variant?: 'default' | 'primary' | 'muted';\n  /** Show copy-to-clipboard button\n   * @default false\n   */\n  copy?: boolean;\n  /** Additional CSS classes for custom styling */\n  className?: string;\n};\n\n/**\n * Code - Styled code snippets (inline or block)\n */\nfunction Code({ children, block = false, variant = 'default', copy = false, className = '' }: Readonly<CodeProps>) {\n  const codeRef = useRef<HTMLElement>(null);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    if (!codeRef.current) return;\n\n    try {\n      const textContent = codeRef.current.textContent || '';\n      await navigator.clipboard.writeText(textContent);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('Failed to copy code:', err);\n    }\n  };\n\n  const variantClasses = {\n    default: 'bg-muted-active text-foreground',\n    primary: 'text-primary',\n    muted: 'text-muted-foreground'\n  };\n\n  const baseClasses = `font-mono ${variantClasses[variant]}`;\n\n  if (block) {\n    const blockElement = (\n      <pre className={`${baseClasses} p-4 rounded-lg overflow-x-auto border border-border ${className}`} ref={codeRef}>\n        <code>{children}</code>\n      </pre>\n    );\n\n    if (copy) {\n      return (\n        <div className=\"relative group\">\n          {blockElement}\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className=\"absolute top-2 right-2 inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 cursor-pointer bg-background/80 backdrop-blur-sm p-1.5 rounded border border-border hover:bg-muted-hover\"\n            aria-label=\"Copy to clipboard\"\n          >\n            <Icon\n              name={copied ? 'check' : 'copy'}\n              size=\"sm\"\n              color={copied ? 'success' : 'currentColor'}\n              className=\"transition-all\"\n            />\n          </button>\n        </div>\n      );\n    }\n\n    return blockElement;\n  }\n\n  const inlineElement = (\n    <code className={`${baseClasses} px-1.5 py-0.5 rounded text-sm ${className}`} ref={codeRef}>\n      {children}\n    </code>\n  );\n\n  if (copy) {\n    return (\n      <span className=\"inline-flex items-center gap-2 group\">\n        {inlineElement}\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          className=\"inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 cursor-pointer\"\n          aria-label=\"Copy to clipboard\"\n        >\n          <Icon\n            name={copied ? 'check' : 'copy'}\n            size=\"sm\"\n            color={copied ? 'success' : 'currentColor'}\n            className=\"transition-all\"\n          />\n        </button>\n      </span>\n    );\n  }\n\n  return inlineElement;\n}\n\nCode.displayName = 'Code';\n\nexport default Code;\n"],"names":[],"mappings":";;;AAyBA,SAAS,KAAK,EAAE,UAAU,QAAQ,OAAO,UAAU,WAAW,OAAO,OAAO,YAAY,GAAA,GAA2B;AACjH,QAAM,UAAU,OAAoB,IAAI;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,QAAQ,QAAS;AAEtB,QAAI;AACF,YAAM,cAAc,QAAQ,QAAQ,eAAe;AACnD,YAAM,UAAU,UAAU,UAAU,WAAW;AAC/C,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC,SAAS,KAAK;AAEZ,cAAQ,MAAM,wBAAwB,GAAG;AAAA,IAC3C;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAGT,QAAM,cAAc,aAAa,eAAe,OAAO,CAAC;AAExD,MAAI,OAAO;AACT,UAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,GAAG,WAAW,wDAAwD,SAAS,IAAI,KAAK,SACtG,UAAA,oBAAC,QAAA,EAAM,UAAS,GAClB;AAGF,QAAI,MAAM;AACR,aACE,qBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,cAAW;AAAA,YAEX,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,SAAS,UAAU;AAAA,gBACzB,MAAK;AAAA,gBACL,OAAO,SAAS,YAAY;AAAA,gBAC5B,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,gBACJ,oBAAC,QAAA,EAAK,WAAW,GAAG,WAAW,kCAAkC,SAAS,IAAI,KAAK,SAChF,SAAA,CACH;AAGF,MAAI,MAAM;AACR,WACE,qBAAC,QAAA,EAAK,WAAU,wCACb,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UACV,cAAW;AAAA,UAEX,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,SAAS,UAAU;AAAA,cACzB,MAAK;AAAA,cACL,OAAO,SAAS,YAAY;AAAA,cAC5B,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,KAAK,cAAc;"}