@thangnqdev/ui 0.1.0

package/dist/typography/index.cjs

@@ -0,0 +1,311 @@
+'use strict';
+
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+// src/typography/Heading.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var headingVariants = classVarianceAuthority.cva("font-bold tracking-tight text-[var(--ui-text-primary)]", {
+  variants: {
+    size: {
+      h1: "text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight",
+      h2: "text-3xl sm:text-4xl font-bold tracking-tight",
+      h3: "text-2xl sm:text-3xl font-bold tracking-tight",
+      h4: "text-xl sm:text-2xl font-semibold",
+      h5: "text-lg sm:text-xl font-semibold",
+      h6: "text-base sm:text-lg font-medium"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extrabold: "font-extrabold"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    }
+  },
+  defaultVariants: {
+    size: "h2",
+    align: "left"
+  }
+});
+var Heading = react.forwardRef(
+  ({ className, size = "h2", weight, align, as, children, ...props }, ref) => {
+    const Component = as || size || "h2";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: cn(headingVariants({ size, weight, align }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+var textVariants = classVarianceAuthority.cva("leading-relaxed", {
+  variants: {
+    variant: {
+      body: "text-base text-[var(--ui-text-primary)]",
+      lead: "text-lg sm:text-xl text-[var(--ui-text-secondary)] font-normal leading-relaxed",
+      muted: "text-sm text-[var(--ui-text-muted)]",
+      small: "text-xs text-[var(--ui-text-secondary)] font-normal",
+      caption: "text-xs text-[var(--ui-text-muted)] uppercase tracking-wider font-semibold",
+      destructive: "text-sm text-[var(--ui-error)] font-medium",
+      success: "text-sm text-[var(--ui-success)] font-medium"
+    },
+    weight: {
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    truncate: {
+      true: "truncate",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    variant: "body",
+    weight: "normal",
+    align: "left",
+    truncate: false
+  }
+});
+var Text = react.forwardRef(
+  ({ className, variant, weight, align, truncate, as: Component = "p", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: cn(textVariants({ variant, weight, align, truncate }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[var(--ui-text-primary)] inline-flex items-center gap-1",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      error: {
+        true: "text-[var(--ui-error)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  }
+);
+var Label = react.forwardRef(
+  ({ className, size, error, required, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref,
+        className: cn(labelVariants({ size, error }), className),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-error)] ml-0.5", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var linkVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-1 font-medium transition-colors cursor-pointer text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-sm",
+  {
+    variants: {
+      underline: {
+        always: "underline underline-offset-4",
+        hover: "hover:underline underline-offset-4",
+        none: "no-underline"
+      },
+      variant: {
+        primary: "text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)]",
+        secondary: "text-[var(--ui-text-secondary)] hover:text-[var(--ui-text-primary)]",
+        muted: "text-[var(--ui-text-muted)] hover:text-[var(--ui-text-secondary)]"
+      }
+    },
+    defaultVariants: {
+      underline: "hover",
+      variant: "primary"
+    }
+  }
+);
+var Link = react.forwardRef(
+  ({ className, underline, variant, external, showExternalIcon = true, children, ...props }, ref) => {
+    const isExternal = external ?? (props.href?.startsWith("http") || props.target === "_blank");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        ref,
+        target: isExternal ? "_blank" : props.target,
+        rel: isExternal ? "noopener noreferrer" : props.rel,
+        className: cn(linkVariants({ underline, variant }), className),
+        ...props,
+        children: [
+          children,
+          isExternal && showExternalIcon && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3.5 h-3.5 opacity-70 inline-block ml-0.5 flex-shrink-0" })
+        ]
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+var Code = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
+      {
+        ref,
+        className: cn(
+          "relative rounded bg-[var(--ui-bg-tertiary)] px-[0.35rem] py-[0.15rem] font-mono text-sm font-semibold text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)]",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Code.displayName = "Code";
+var CodeBlock = react.forwardRef(
+  ({ className, code, language = "bash", copyable = true, ...props }, ref) => {
+    const [copied, setCopied] = react.useState(false);
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      } catch (err) {
+        console.error("Failed to copy text", err);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative rounded-lg border border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)] overflow-hidden font-mono text-sm shadow-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-[var(--ui-bg-tertiary)]/50 border-b border-[var(--ui-border-subtle)] text-xs text-[var(--ui-text-muted)] select-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold uppercase tracking-wider", children: language }),
+            copyable && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopy,
+                className: "flex items-center gap-1 hover:text-[var(--ui-text-primary)] transition-colors p-1 rounded hover:bg-[var(--ui-bg-surface)]",
+                "aria-label": copied ? "Copied code" : "Copy code to clipboard",
+                children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 text-[var(--ui-success)]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-success)] text-[11px]", children: "Copied" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px]", children: "Copy" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-4 overflow-x-auto text-[var(--ui-text-primary)] leading-relaxed", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) })
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var Blockquote = react.forwardRef(
+  ({ className, citeAuthor, citeSource, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "blockquote",
+      {
+        ref,
+        className: cn(
+          "mt-6 border-l-4 border-[var(--ui-primary)] pl-6 italic text-[var(--ui-text-secondary)] space-y-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base sm:text-lg", children }),
+          (citeAuthor || citeSource) && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "not-italic text-xs font-semibold text-[var(--ui-text-muted)] tracking-wider", children: [
+            citeAuthor && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "\u2014 ",
+              citeAuthor
+            ] }),
+            citeSource && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "opacity-75 ml-1", children: [
+              "(",
+              citeSource,
+              ")"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Blockquote.displayName = "Blockquote";
+var Kbd = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        ref,
+        className: cn(
+          "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--ui-border-default)] bg-[var(--ui-bg-tertiary)] px-1.5 font-mono text-[10px] font-semibold text-[var(--ui-text-muted)] opacity-100 shadow-sm",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+
+exports.Blockquote = Blockquote;
+exports.Code = Code;
+exports.CodeBlock = CodeBlock;
+exports.Heading = Heading;
+exports.Kbd = Kbd;
+exports.Label = Label;
+exports.Link = Link;
+exports.Text = Text;
+exports.headingVariants = headingVariants;
+exports.labelVariants = labelVariants;
+exports.linkVariants = linkVariants;
+exports.textVariants = textVariants;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/typography/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/typography/Heading.tsx","../../src/typography/Text.tsx","../../src/typography/Label.tsx","../../src/typography/Link.tsx","../../src/typography/Code.tsx","../../src/typography/Blockquote.tsx","../../src/typography/Kbd.tsx"],"names":["twMerge","clsx","cva","forwardRef","jsx","jsxs","ExternalLink","useState","Fragment","Check","Copy"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\r\nimport { twMerge } from 'tailwind-merge';\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const headingVariants = cva('font-bold tracking-tight text-[var(--ui-text-primary)]', {\r\n  variants: {\r\n    size: {\r\n      h1: 'text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight',\r\n      h2: 'text-3xl sm:text-4xl font-bold tracking-tight',\r\n      h3: 'text-2xl sm:text-3xl font-bold tracking-tight',\r\n      h4: 'text-xl sm:text-2xl font-semibold',\r\n      h5: 'text-lg sm:text-xl font-semibold',\r\n      h6: 'text-base sm:text-lg font-medium',\r\n    },\r\n    weight: {\r\n      normal: 'font-normal',\r\n      medium: 'font-medium',\r\n      semibold: 'font-semibold',\r\n      bold: 'font-bold',\r\n      extrabold: 'font-extrabold',\r\n    },\r\n    align: {\r\n      left: 'text-left',\r\n      center: 'text-center',\r\n      right: 'text-right',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: 'h2',\r\n    align: 'left',\r\n  },\r\n});\r\n\r\nexport interface HeadingProps\r\n  extends React.HTMLAttributes<HTMLHeadingElement>,\r\n    VariantProps<typeof headingVariants> {\r\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';\r\n}\r\n\r\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(\r\n  ({ className, size = 'h2', weight, align, as, children, ...props }, ref) => {\r\n    const Component = (as || size || 'h2') as React.ElementType;\r\n\r\n    return (\r\n      <Component\r\n        ref={ref}\r\n        className={cn(headingVariants({ size, weight, align }), className)}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </Component>\r\n    );\r\n  }\r\n);\r\n\r\nHeading.displayName = 'Heading';\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const textVariants = cva('leading-relaxed', {\r\n  variants: {\r\n    variant: {\r\n      body: 'text-base text-[var(--ui-text-primary)]',\r\n      lead: 'text-lg sm:text-xl text-[var(--ui-text-secondary)] font-normal leading-relaxed',\r\n      muted: 'text-sm text-[var(--ui-text-muted)]',\r\n      small: 'text-xs text-[var(--ui-text-secondary)] font-normal',\r\n      caption: 'text-xs text-[var(--ui-text-muted)] uppercase tracking-wider font-semibold',\r\n      destructive: 'text-sm text-[var(--ui-error)] font-medium',\r\n      success: 'text-sm text-[var(--ui-success)] font-medium',\r\n    },\r\n    weight: {\r\n      light: 'font-light',\r\n      normal: 'font-normal',\r\n      medium: 'font-medium',\r\n      semibold: 'font-semibold',\r\n      bold: 'font-bold',\r\n    },\r\n    align: {\r\n      left: 'text-left',\r\n      center: 'text-center',\r\n      right: 'text-right',\r\n      justify: 'text-justify',\r\n    },\r\n    truncate: {\r\n      true: 'truncate',\r\n      false: '',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: 'body',\r\n    weight: 'normal',\r\n    align: 'left',\r\n    truncate: false,\r\n  },\r\n});\r\n\r\nexport interface TextProps\r\n  extends React.HTMLAttributes<HTMLElement>,\r\n    VariantProps<typeof textVariants> {\r\n  as?: React.ElementType;\r\n}\r\n\r\nexport const Text = forwardRef<HTMLElement, TextProps>(\r\n  ({ className, variant, weight, align, truncate, as: Component = 'p', children, ...props }, ref) => {\r\n    return (\r\n      <Component\r\n        ref={ref}\r\n        className={cn(textVariants({ variant, weight, align, truncate }), className)}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </Component>\r\n    );\r\n  }\r\n);\r\n\r\nText.displayName = 'Text';\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const labelVariants = cva(\r\n  'text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[var(--ui-text-primary)] inline-flex items-center gap-1',\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: 'text-xs',\r\n        md: 'text-sm',\r\n        lg: 'text-base',\r\n      },\r\n      error: {\r\n        true: 'text-[var(--ui-error)]',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: 'md',\r\n      error: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface LabelProps\r\n  extends React.LabelHTMLAttributes<HTMLLabelElement>,\r\n    VariantProps<typeof labelVariants> {\r\n  required?: boolean;\r\n}\r\n\r\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\r\n  ({ className, size, error, required, children, ...props }, ref) => {\r\n    return (\r\n      <label\r\n        ref={ref}\r\n        className={cn(labelVariants({ size, error }), className)}\r\n        {...props}\r\n      >\r\n        {children}\r\n        {required && <span className=\"text-[var(--ui-error)] ml-0.5\" aria-hidden=\"true\">*</span>}\r\n      </label>\r\n    );\r\n  }\r\n);\r\n\r\nLabel.displayName = 'Label';\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { ExternalLink } from 'lucide-react';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const linkVariants = cva(\r\n  'inline-flex items-center gap-1 font-medium transition-colors cursor-pointer text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-sm',\r\n  {\r\n    variants: {\r\n      underline: {\r\n        always: 'underline underline-offset-4',\r\n        hover: 'hover:underline underline-offset-4',\r\n        none: 'no-underline',\r\n      },\r\n      variant: {\r\n        primary: 'text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)]',\r\n        secondary: 'text-[var(--ui-text-secondary)] hover:text-[var(--ui-text-primary)]',\r\n        muted: 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text-secondary)]',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      underline: 'hover',\r\n      variant: 'primary',\r\n    },\r\n  }\r\n);\r\n\r\nexport interface LinkProps\r\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,\r\n    VariantProps<typeof linkVariants> {\r\n  external?: boolean;\r\n  showExternalIcon?: boolean;\r\n}\r\n\r\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\r\n  ({ className, underline, variant, external, showExternalIcon = true, children, ...props }, ref) => {\r\n    const isExternal = external ?? (props.href?.startsWith('http') || props.target === '_blank');\r\n\r\n    return (\r\n      <a\r\n        ref={ref}\r\n        target={isExternal ? '_blank' : props.target}\r\n        rel={isExternal ? 'noopener noreferrer' : props.rel}\r\n        className={cn(linkVariants({ underline, variant }), className)}\r\n        {...props}\r\n      >\r\n        {children}\r\n        {isExternal && showExternalIcon && (\r\n          <ExternalLink className=\"w-3.5 h-3.5 opacity-70 inline-block ml-0.5 flex-shrink-0\" />\r\n        )}\r\n      </a>\r\n    );\r\n  }\r\n);\r\n\r\nLink.displayName = 'Link';\r\n","import React, { forwardRef, useState } from 'react';\r\nimport { Copy, Check } from 'lucide-react';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Code = forwardRef<HTMLElement, CodeProps>(\r\n  ({ className, children, ...props }, ref) => {\r\n    return (\r\n      <code\r\n        ref={ref}\r\n        className={cn(\r\n          'relative rounded bg-[var(--ui-bg-tertiary)] px-[0.35rem] py-[0.15rem] font-mono text-sm font-semibold text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)]',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </code>\r\n    );\r\n  }\r\n);\r\nCode.displayName = 'Code';\r\n\r\nexport interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  code: string;\r\n  language?: string;\r\n  copyable?: boolean;\r\n}\r\n\r\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(\r\n  ({ className, code, language = 'bash', copyable = true, ...props }, ref) => {\r\n    const [copied, setCopied] = useState(false);\r\n\r\n    const handleCopy = async () => {\r\n      try {\r\n        await navigator.clipboard.writeText(code);\r\n        setCopied(true);\r\n        setTimeout(() => setCopied(false), 2000);\r\n      } catch (err) {\r\n        console.error('Failed to copy text', err);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(\r\n          'relative rounded-lg border border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)] overflow-hidden font-mono text-sm shadow-sm',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {/* Header */}\r\n        <div className=\"flex items-center justify-between px-4 py-2 bg-[var(--ui-bg-tertiary)]/50 border-b border-[var(--ui-border-subtle)] text-xs text-[var(--ui-text-muted)] select-none\">\r\n          <span className=\"font-semibold uppercase tracking-wider\">{language}</span>\r\n          {copyable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={handleCopy}\r\n              className=\"flex items-center gap-1 hover:text-[var(--ui-text-primary)] transition-colors p-1 rounded hover:bg-[var(--ui-bg-surface)]\"\r\n              aria-label={copied ? 'Copied code' : 'Copy code to clipboard'}\r\n            >\r\n              {copied ? (\r\n                <>\r\n                  <Check className=\"w-3.5 h-3.5 text-[var(--ui-success)]\" />\r\n                  <span className=\"text-[var(--ui-success)] text-[11px]\">Copied</span>\r\n                </>\r\n              ) : (\r\n                <>\r\n                  <Copy className=\"w-3.5 h-3.5\" />\r\n                  <span className=\"text-[11px]\">Copy</span>\r\n                </>\r\n              )}\r\n            </button>\r\n          )}\r\n        </div>\r\n\r\n        {/* Code Content */}\r\n        <pre className=\"p-4 overflow-x-auto text-[var(--ui-text-primary)] leading-relaxed\">\r\n          <code>{code}</code>\r\n        </pre>\r\n      </div>\r\n    );\r\n  }\r\n);\r\nCodeBlock.displayName = 'CodeBlock';\r\n","import React, { forwardRef } from 'react';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {\r\n  citeAuthor?: string;\r\n  citeSource?: string;\r\n}\r\n\r\nexport const Blockquote = forwardRef<HTMLQuoteElement, BlockquoteProps>(\r\n  ({ className, citeAuthor, citeSource, children, ...props }, ref) => {\r\n    return (\r\n      <blockquote\r\n        ref={ref}\r\n        className={cn(\r\n          'mt-6 border-l-4 border-[var(--ui-primary)] pl-6 italic text-[var(--ui-text-secondary)] space-y-2',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <div className=\"text-base sm:text-lg\">{children}</div>\r\n        {(citeAuthor || citeSource) && (\r\n          <footer className=\"not-italic text-xs font-semibold text-[var(--ui-text-muted)] tracking-wider\">\r\n            {citeAuthor && <span>— {citeAuthor}</span>}\r\n            {citeSource && <span className=\"opacity-75 ml-1\">({citeSource})</span>}\r\n          </footer>\r\n        )}\r\n      </blockquote>\r\n    );\r\n  }\r\n);\r\n\r\nBlockquote.displayName = 'Blockquote';\r\n","import React, { forwardRef } from 'react';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(\r\n  ({ className, children, ...props }, ref) => {\r\n    return (\r\n      <kbd\r\n        ref={ref}\r\n        className={cn(\r\n          'pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--ui-border-default)] bg-[var(--ui-bg-tertiary)] px-1.5 font-mono text-[10px] font-semibold text-[var(--ui-text-muted)] opacity-100 shadow-sm',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </kbd>\r\n    );\r\n  }\r\n);\r\n\r\nKbd.displayName = 'Kbd';\r\n"]}

package/dist/typography/index.d.cts

@@ -0,0 +1,5 @@
+export { B as Blockquote, a as BlockquoteProps, C as Code, b as CodeBlock, c as CodeBlockProps, d as CodeProps, H as Heading, e as HeadingProps, K as Kbd, f as KbdProps, L as Link, g as LinkProps, T as Text, h as TextProps, j as headingVariants, l as linkVariants, t as textVariants } from '../index-CCeWYAvn.cjs';
+export { L as Label, a as LabelProps, l as labelVariants } from '../Label-DWOlgSNW.cjs';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/typography/index.d.ts

@@ -0,0 +1,5 @@
+export { B as Blockquote, a as BlockquoteProps, C as Code, b as CodeBlock, c as CodeBlockProps, d as CodeProps, H as Heading, e as HeadingProps, K as Kbd, f as KbdProps, L as Link, g as LinkProps, T as Text, h as TextProps, j as headingVariants, l as linkVariants, t as textVariants } from '../index-DR8cfJUG.js';
+export { L as Label, a as LabelProps, l as labelVariants } from '../Label-DWOlgSNW.js';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/typography/index.js

@@ -0,0 +1,6 @@
+export { Blockquote, Code, CodeBlock, Heading, Link, Text, headingVariants, linkVariants, textVariants } from '../chunk-ATYGDTMK.js';
+export { Label, labelVariants } from '../chunk-GXI2H5XA.js';
+export { Kbd } from '../chunk-EU2LPUYP.js';
+import '../chunk-4S6L5V7X.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/typography/styles.css

@@ -0,0 +1,5 @@
+/* Typography Tokens */
+:root {
+  --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}

package/llms.txt

@@ -0,0 +1,113 @@
+# @my-brand/ui — Full Architecture Component System Contract
+
+> Machine-readable specification for AI Coding Agents (Claude Code, Antigravity, Cursor, Qwen, Codex).
+> Package: `@my-brand/ui`
+> Aesthetic Core: Spatial Optics, Editorial Bento, and Enterprise-grade Accessible Primitives.
+> Sub-module Exports: `core`, `layout`, `typography`, `buttons`, `forms`, `overlays`, `navigation`, `data-display`, `feedback`, `glass`, `bento`.
+
+---
+
+## 1. Quick Setup & Subpath Imports
+
+```tsx
+// Option 1: Top-level flat import
+import { Button, Modal, Container, Heading, Input, Tabs, useToast } from '@my-brand/ui';
+import '@my-brand/ui/styles.css';
+
+// Option 2: Domain subpath imports (Optimized tree-shaking)
+import { Container, Stack, HStack, VStack, Grid, GridItem, Divider, AspectRatio } from '@my-brand/ui/layout';
+import { Heading, Text, Label, Link, Code, CodeBlock, Kbd, Blockquote } from '@my-brand/ui/typography';
+import { Button, IconButton, ButtonGroup, ToggleButton, ToggleGroup, SplitButton } from '@my-brand/ui/buttons';
+import { FormField, FormLabel, FormHelperText, FormErrorMessage, Input, SearchInput, PasswordInput, Textarea, Select, Checkbox, Radio, RadioGroup, Switch, Slider, RangeSlider, PinInput } from '@my-brand/ui/forms';
+import { Portal, FocusTrap, Modal, AlertDialog, Drawer, Tooltip, Popover, Toast, ToasterProvider, useToast } from '@my-brand/ui/overlays';
+import { Tabs, TabsList, TabsTrigger, TabsContent, Breadcrumb, Pagination, Stepper, DropdownMenu, CommandPalette } from '@my-brand/ui/navigation';
+import { Card, Table, Avatar, AvatarGroup, Accordion, Chip, StatCard, Timeline } from '@my-brand/ui/data-display';
+import { Spinner, Skeleton, SkeletonText, SkeletonCircle, ProgressBar, CircularProgress, Alert, EmptyState } from '@my-brand/ui/feedback';
+import { GlassCard, GlassButton, GlassBadge } from '@my-brand/ui/glass';
+import { BentoGrid, BentoCard } from '@my-brand/ui/bento';
+import { ThemeProvider, useTheme } from '@my-brand/ui/core';
+```
+
+---
+
+## 2. Component Taxonomy & API Signatures
+
+### Core & Context
+- `ThemeProvider`: Context provider for dark, light, and system themes with localStorage persistence.
+- `useTheme()`: Returns `{ theme, resolvedTheme, setTheme, toggleTheme }`.
+- `ToasterProvider`: Mounts floating toast queue.
+- `useToast()`: Returns `{ toast({ title, description, type, duration }), dismiss(id), toasts }`.
+
+### Layout Primitives (`@my-brand/ui/layout`)
+- `Container`: `size ('sm'|'md'|'lg'|'xl'|'2xl'|'fluid')`, `padding ('none'|'sm'|'md'|'lg')`.
+- `Stack`, `HStack`, `VStack`: `gap (0-12)`, `align`, `justify`, `wrap`.
+- `Grid`, `GridItem`: `cols (1-12)`, `gap`, `colSpan (1-12|'full')`, `rowSpan (1-6)`.
+- `Divider`: `orientation ('horizontal'|'vertical')`, `variant ('solid'|'dashed'|'dotted')`, `label`.
+- `AspectRatio`: `ratio (number | '16/9' | '4/3' | '1/1' | '21/9')`.
+- `PageLayout`, `PageHeader`, `PageSidebar`: Shell composition.
+
+### Typography (`@my-brand/ui/typography`)
+- `Heading`: `size ('h1'-'h6')`, polymorphic `as ('h1'-'h6'|'div'|'span')`.
+- `Text`: `variant ('body'|'lead'|'muted'|'small'|'caption'|'destructive'|'success')`.
+- `Label`: `required`, `error`, `htmlFor`.
+- `Link`: `href`, `external`, `underline ('always'|'hover'|'none')`.
+- `Code`, `CodeBlock`: `code`, `language`, `copyable`.
+- `Kbd`: Inline keyboard key badge.
+- `Blockquote`: `citeAuthor`, `citeSource`.
+
+### Buttons & Actions (`@my-brand/ui/buttons`)
+- `Button`: `variant ('primary'|'secondary'|'outline'|'ghost'|'danger'|'link'|'glass')`, `size ('xs'|'sm'|'md'|'lg'|'xl')`, `loading`, `loadingText`, `leftIcon`, `rightIcon`.
+- `IconButton`: `aria-label (required)`, `shape ('rounded'|'circle')`, `size`.
+- `ButtonGroup`: `orientation ('horizontal'|'vertical')`, `attached`.
+- `ToggleButton`, `ToggleGroup`: `type ('single'|'multiple')`, `value`, `onValueChange`.
+- `SplitButton`: `onMainClick`, `items: [{ label, icon, onClick }]`.
+
+### Form Engine (`@my-brand/ui/forms`)
+- `FormField`: Context compound wrapper with automatic ARIA `id`, `labelId`, `errorId`, `descriptionId`.
+- `Input`, `SearchInput`, `PasswordInput`: `clearable`, `prefixIcon`, `suffixIcon`, `isInvalid`.
+- `Textarea`: `autoResize`, `resize`.
+- `Select`: `options: [{ value, label, disabled }]`, native & custom.
+- `Checkbox`, `CheckboxGroup`: `indeterminate`, `label`.
+- `Radio`, `RadioGroup`: `value`, `onValueChange`, `orientation`.
+- `Switch`: `checked`, `onCheckedChange`, `label`, `size`.
+- `Slider`, `RangeSlider`: `value`, `min`, `max`, `step`, `showValue`, `formatValue`.
+- `PinInput`: `length (e.g. 4 or 6)`, `onComplete`, `mask`.
+
+### Overlay System (`@my-brand/ui/overlays`)
+- `Portal`: Safe client DOM portal.
+- `FocusTrap`: Keyboard tab trap for modals/sheets.
+- `Modal`: `isOpen`, `onClose`, `closeOnEsc`, `closeOnOverlayClick`, compound `ModalOverlay`, `ModalContent`, `ModalHeader`, `ModalBody`, `ModalFooter`, `ModalCloseButton`.
+- `AlertDialog`: Pre-built confirmation with `onConfirm`, `onClose`, `title`, `description`, `confirmText`.
+- `Drawer`: `placement ('left'|'right'|'top'|'bottom')`.
+- `Tooltip`: `content`, `placement ('top'|'bottom'|'left'|'right')`, `delayDuration`.
+- `Popover`: `trigger`, `placement`, click-outside dismiss.
+- `Toast`, `ToasterProvider`: Queue notifications with `useToast()`.
+
+### Navigation & Data Display (`@my-brand/ui/navigation` & `@my-brand/ui/data-display`)
+- `Tabs`: `variant ('pills'|'line'|'enclosed')`, compound `TabsList`, `TabsTrigger`, `TabsContent`.
+- `Breadcrumb`: `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`.
+- `Pagination`: `currentPage`, `totalPages`, `onPageChange`.
+- `Stepper`: `steps: [{ title, description }]`, `currentStep`.
+- `DropdownMenu`: Compound trigger, content, items, shortcuts.
+- `CommandPalette`: ⌘K search modal with `items: [{ id, title, category, shortcut, onSelect }]`.
+- `Card`: Flat semantic card (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`).
+- `Table`: Accessible responsive table (`TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`).
+- `Avatar`, `AvatarGroup`: Image, initials fallback, status dot (`online|offline|busy|away`), max counter.
+- `Accordion`: Single / multiple collapsible panels.
+- `Chip`: Interactive tag with `onRemove`, `variant`, `size`.
+- `StatCard`: Large metric, trend badge (`up|down|neutral`), change percentage.
+- `Timeline`: Step milestone list with vertical tracking line.
+
+### Feedback (`@my-brand/ui/feedback`)
+- `Spinner`: SVG spinner with `size ('xs'-'xl')` and color variants.
+- `Skeleton`, `SkeletonText`, `SkeletonCircle`: Shimmer placeholders.
+- `ProgressBar`, `CircularProgress`: Linear & radial progress meters with `showValue`.
+- `Alert`: Static banner status (`info|success|warning|error`), dismissible.
+- `EmptyState`: Placeholder with icon, title, description, and action button slots.
+
+### Spatial Optics & Editorial Bento (`@my-brand/ui/glass` & `@my-brand/ui/bento`)
+- `GlassCard`: Subsurface scattering, specular highlight, blur intensity (`subtle|standard|frosted|acrylic`), glow hues.
+- `GlassButton`: Reflective lens button with shimmer sweep.
+- `GlassBadge`: Pill badge with status pulsing dot.
+- `BentoGrid`: Editorial bento grid with `cols (1-4)`, `flow ('dense'|'row')`.
+- `BentoCard`: Multi-span bento block with `variant ('default'|'spotlight'|'elevated')`, tags, background slot.

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@thangnqdev/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Spatial Optics & Editorial Bento UI System",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout/index.js",
+      "require": "./dist/layout/index.cjs"
+    },
+    "./typography": {
+      "types": "./dist/typography/index.d.ts",
+      "import": "./dist/typography/index.js",
+      "require": "./dist/typography/index.cjs"
+    },
+    "./buttons": {
+      "types": "./dist/buttons/index.d.ts",
+      "import": "./dist/buttons/index.js",
+      "require": "./dist/buttons/index.cjs"
+    },
+    "./forms": {
+      "types": "./dist/forms/index.d.ts",
+      "import": "./dist/forms/index.js",
+      "require": "./dist/forms/index.cjs"
+    },
+    "./overlays": {
+      "types": "./dist/overlays/index.d.ts",
+      "import": "./dist/overlays/index.js",
+      "require": "./dist/overlays/index.cjs"
+    },
+    "./navigation": {
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation/index.js",
+      "require": "./dist/navigation/index.cjs"
+    },
+    "./data-display": {
+      "types": "./dist/data-display/index.d.ts",
+      "import": "./dist/data-display/index.js",
+      "require": "./dist/data-display/index.cjs"
+    },
+    "./feedback": {
+      "types": "./dist/feedback/index.d.ts",
+      "import": "./dist/feedback/index.js",
+      "require": "./dist/feedback/index.cjs"
+    },
+    "./glass": {
+      "types": "./dist/glass/index.d.ts",
+      "import": "./dist/glass/index.js",
+      "require": "./dist/glass/index.cjs"
+    },
+    "./bento": {
+      "types": "./dist/bento/index.d.ts",
+      "import": "./dist/bento/index.js",
+      "require": "./dist/bento/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./glass/styles.css": "./dist/glass/styles.css",
+    "./bento/styles.css": "./dist/bento/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "llms.txt",
+    "ui-contract.json"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsup && node scripts/build-css.js",
+    "build:lib": "tsup && node scripts/build-css.js",
+    "watch:lib": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.5",
+    "jsdom": "^30.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "vite": "^8.2.1",
+    "vitest": "^3.0.7"
+  }
+}