@thangnqdev/ui 0.1.2 → 0.2.0

package/src/styles/components.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+@import "./tokens.css";
+
+@source "../";
+
+/* Enable class-based dark mode for Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Apple Liquid Glass Surface */
+.apple-glass {
+  background: var(--ui-bg-surface);
+  backdrop-filter: blur(28px) saturate(190%);
+  -webkit-backdrop-filter: blur(28px) saturate(190%);
+  border: 1px solid var(--ui-border-default);
+  box-shadow: var(--ui-shadow-lg);
+}
+
+.apple-window {
+  background: var(--ui-bg-surface);
+  backdrop-filter: blur(40px) saturate(200%);
+  -webkit-backdrop-filter: blur(40px) saturate(200%);
+  border: 1px solid var(--ui-border-default);
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--ui-border-subtle);
+}
+
+/* Apple Specular Edge */
+.apple-specular {
+  position: relative;
+}
+.apple-specular::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
+  pointer-events: none;
+}

package/src/styles/index.css

@@ -1,96 +1,5 @@
-@import "tailwindcss";
-
-@source "../";
-
-/* Enable class-based dark mode for Tailwind v4 */
-@custom-variant dark (&:where(.dark, .dark *));
-
-@import "../core/tokens.css";
-@import "../layout/tokens.css";
-@import "../typography/tokens.css";
-@import "../buttons/tokens.css";
-@import "../forms/tokens.css";
-@import "../overlays/tokens.css";
-@import "../navigation/tokens.css";
-@import "../data-display/tokens.css";
-@import "../feedback/tokens.css";
-@import "../glass/tokens.css";
-@import "../bento/tokens.css";
+@import "./components.css";
 
 @layer base {
-  * {
-    border-color: var(--ui-border-subtle);
-  }
-
-  html, body {
-    background-color: var(--ui-bg-page);
-    color: var(--ui-text-primary);
-    min-height: 100vh;
-  }
-
-  html {
-    font-family: var(--ui-font-sans, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Inter, sans-serif);
-    letter-spacing: -0.012em;
-    scroll-behavior: smooth;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  code, kbd, samp, pre {
-    font-family: var(--ui-font-mono, 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace);
-    letter-spacing: -0.02em;
-  }
-
-  /* Apple-style Sleek Capsule Scrollbar */
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: rgba(140, 140, 150, 0.25);
-    border-radius: 9999px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: rgba(140, 140, 150, 0.45);
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-}
-
-/* Apple Liquid Glass Surface */
-.apple-glass {
-  background: var(--ui-bg-surface);
-  backdrop-filter: blur(28px) saturate(190%);
-  -webkit-backdrop-filter: blur(28px) saturate(190%);
-  border: 1px solid var(--ui-border-default);
-  box-shadow: var(--ui-shadow-lg);
-}
-
-.apple-window {
-  background: var(--ui-bg-surface);
-  backdrop-filter: blur(40px) saturate(200%);
-  -webkit-backdrop-filter: blur(40px) saturate(200%);
-  border: 1px solid var(--ui-border-default);
-  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--ui-border-subtle);
-}
-
-/* Apple Specular Edge */
-.apple-specular {
-  position: relative;
-}
-.apple-specular::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
-  pointer-events: none;
+  @import "./reset.css";
 }

package/src/styles/reset.css

@@ -0,0 +1,45 @@
+/* Opt-in Application Base Reset for @thangnqdev/ui */
+
+* {
+  border-color: var(--ui-border-subtle);
+}
+
+html, body {
+  background-color: var(--ui-bg-page);
+  color: var(--ui-text-primary);
+  min-height: 100vh;
+}
+
+html {
+  font-family: var(--ui-font-sans, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Inter, sans-serif);
+  letter-spacing: -0.012em;
+  scroll-behavior: smooth;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code, kbd, samp, pre {
+  font-family: var(--ui-font-mono, 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace);
+  letter-spacing: -0.02em;
+}
+
+/* Apple-style Sleek Capsule Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(140, 140, 150, 0.25);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(140, 140, 150, 0.45);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}

package/src/styles/tokens.css

@@ -1,2 +1,11 @@
-@import '../glass/tokens.css';
-@import '../bento/tokens.css';
+@import "../core/tokens.css";
+@import "../layout/tokens.css";
+@import "../typography/tokens.css";
+@import "../buttons/tokens.css";
+@import "../forms/tokens.css";
+@import "../overlays/tokens.css";
+@import "../navigation/tokens.css";
+@import "../data-display/tokens.css";
+@import "../feedback/tokens.css";
+@import "../glass/tokens.css";
+@import "../bento/tokens.css";

package/src/typography/Blockquote.tsx

@@ -1,32 +1,32 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {
-  citeAuthor?: string;
-  citeSource?: string;
-}
-
-export const Blockquote = forwardRef<HTMLQuoteElement, BlockquoteProps>(
-  ({ className, citeAuthor, citeSource, children, ...props }, ref) => {
-    return (
-      <blockquote
-        ref={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}
-      >
-        <div className="text-base sm:text-lg">{children}</div>
-        {(citeAuthor || citeSource) && (
-          <footer className="not-italic text-xs font-semibold text-[var(--ui-text-muted)] tracking-wider">
-            {citeAuthor && <span>— {citeAuthor}</span>}
-            {citeSource && <span className="opacity-75 ml-1">({citeSource})</span>}
-          </footer>
-        )}
-      </blockquote>
-    );
-  }
-);
-
-Blockquote.displayName = 'Blockquote';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {
+  citeAuthor?: string;
+  citeSource?: string;
+}
+
+export const Blockquote = forwardRef<HTMLQuoteElement, BlockquoteProps>(
+  ({ className, citeAuthor, citeSource, children, ...props }, ref) => {
+    return (
+      <blockquote
+        ref={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}
+      >
+        <div className="text-base sm:text-lg">{children}</div>
+        {(citeAuthor || citeSource) && (
+          <footer className="not-italic text-xs font-semibold text-[var(--ui-text-muted)] tracking-wider">
+            {citeAuthor && <span>— {citeAuthor}</span>}
+            {citeSource && <span className="opacity-75 ml-1">({citeSource})</span>}
+          </footer>
+        )}
+      </blockquote>
+    );
+  }
+);
+
+Blockquote.displayName = 'Blockquote';

package/src/typography/Code.tsx

@@ -1,89 +1,89 @@
-import React, { forwardRef, useState } from 'react';
-import { Copy, Check } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-}
-
-export const Code = forwardRef<HTMLElement, CodeProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <code
-        ref={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>
-    );
-  }
-);
-Code.displayName = 'Code';
-
-export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-  code: string;
-  language?: string;
-  copyable?: boolean;
-}
-
-export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
-  ({ className, code, language = 'bash', copyable = true, ...props }, ref) => {
-    const [copied, setCopied] = useState(false);
-
-    const handleCopy = async () => {
-      try {
-        await navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      } catch (err) {
-        console.error('Failed to copy text', err);
-      }
-    };
-
-    return (
-      <div
-        ref={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}
-      >
-        {/* Header */}
-        <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">
-          <span className="font-semibold uppercase tracking-wider">{language}</span>
-          {copyable && (
-            <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'}
-            >
-              {copied ? (
-                <>
-                  <Check className="w-3.5 h-3.5 text-[var(--ui-success)]" />
-                  <span className="text-[var(--ui-success)] text-[11px]">Copied</span>
-                </>
-              ) : (
-                <>
-                  <Copy className="w-3.5 h-3.5" />
-                  <span className="text-[11px]">Copy</span>
-                </>
-              )}
-            </button>
-          )}
-        </div>
-
-        {/* Code Content */}
-        <pre className="p-4 overflow-x-auto text-[var(--ui-text-primary)] leading-relaxed">
-          <code>{code}</code>
-        </pre>
-      </div>
-    );
-  }
-);
-CodeBlock.displayName = 'CodeBlock';
+import React, { forwardRef, useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+export const Code = forwardRef<HTMLElement, CodeProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <code
+        ref={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>
+    );
+  }
+);
+Code.displayName = 'Code';
+
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language?: string;
+  copyable?: boolean;
+}
+
+export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
+  ({ className, code, language = 'bash', copyable = true, ...props }, ref) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (err) {
+        console.error('Failed to copy text', err);
+      }
+    };
+
+    return (
+      <div
+        ref={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}
+      >
+        {/* Header */}
+        <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">
+          <span className="font-semibold uppercase tracking-wider">{language}</span>
+          {copyable && (
+            <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'}
+            >
+              {copied ? (
+                <>
+                  <Check className="w-3.5 h-3.5 text-[var(--ui-success)]" />
+                  <span className="text-[var(--ui-success)] text-[11px]">Copied</span>
+                </>
+              ) : (
+                <>
+                  <Copy className="w-3.5 h-3.5" />
+                  <span className="text-[11px]">Copy</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+
+        {/* Code Content */}
+        <pre className="p-4 overflow-x-auto text-[var(--ui-text-primary)] leading-relaxed">
+          <code>{code}</code>
+        </pre>
+      </div>
+    );
+  }
+);
+CodeBlock.displayName = 'CodeBlock';

package/src/typography/Heading.tsx

@@ -1,56 +1,56 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const headingVariants = 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',
-  },
-});
-
-export interface HeadingProps
-  extends React.HTMLAttributes<HTMLHeadingElement>,
-    VariantProps<typeof headingVariants> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
-}
-
-export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  ({ className, size = 'h2', weight, align, as, children, ...props }, ref) => {
-    const Component = (as || size || 'h2') as React.ElementType;
-
-    return (
-      <Component
-        ref={ref}
-        className={cn(headingVariants({ size, weight, align }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-
-Heading.displayName = 'Heading';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const headingVariants = 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',
+  },
+});
+
+export interface HeadingProps
+  extends React.HTMLAttributes<HTMLHeadingElement>,
+    VariantProps<typeof headingVariants> {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+}
+
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ className, size = 'h2', weight, align, as, children, ...props }, ref) => {
+    const Component = (as || size || 'h2') as React.ElementType;
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(headingVariants({ size, weight, align }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Heading.displayName = 'Heading';

package/src/typography/Kbd.tsx

@@ -1,25 +1,25 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-}
-
-export const Kbd = forwardRef<HTMLElement, KbdProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <kbd
-        ref={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>
-    );
-  }
-);
-
-Kbd.displayName = 'Kbd';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+export const Kbd = forwardRef<HTMLElement, KbdProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <kbd
+        ref={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>
+    );
+  }
+);
+
+Kbd.displayName = 'Kbd';