@thangnqdev/ui 0.1.0

package/src/typography/Blockquote.tsx

@@ -0,0 +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';

package/src/typography/Code.tsx

@@ -0,0 +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';

package/src/typography/Heading.tsx

@@ -0,0 +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';

package/src/typography/Kbd.tsx

@@ -0,0 +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';

package/src/typography/Label.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const labelVariants = 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,
+    },
+  }
+);
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement>,
+    VariantProps<typeof labelVariants> {
+  required?: boolean;
+}
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, size, error, required, children, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        className={cn(labelVariants({ size, error }), className)}
+        {...props}
+      >
+        {children}
+        {required && <span className="text-[var(--ui-error)] ml-0.5" aria-hidden="true">*</span>}
+      </label>
+    );
+  }
+);
+
+Label.displayName = 'Label';

package/src/typography/Link.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ExternalLink } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const linkVariants = 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',
+    },
+  }
+);
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  external?: boolean;
+  showExternalIcon?: boolean;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ className, underline, variant, external, showExternalIcon = true, children, ...props }, ref) => {
+    const isExternal = external ?? (props.href?.startsWith('http') || props.target === '_blank');
+
+    return (
+      <a
+        ref={ref}
+        target={isExternal ? '_blank' : props.target}
+        rel={isExternal ? 'noopener noreferrer' : props.rel}
+        className={cn(linkVariants({ underline, variant }), className)}
+        {...props}
+      >
+        {children}
+        {isExternal && showExternalIcon && (
+          <ExternalLink className="w-3.5 h-3.5 opacity-70 inline-block ml-0.5 flex-shrink-0" />
+        )}
+      </a>
+    );
+  }
+);
+
+Link.displayName = 'Link';

package/src/typography/Text.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const textVariants = 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,
+  },
+});
+
+export interface TextProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof textVariants> {
+  as?: React.ElementType;
+}
+
+export const Text = forwardRef<HTMLElement, TextProps>(
+  ({ className, variant, weight, align, truncate, as: Component = 'p', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(textVariants({ variant, weight, align, truncate }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Text.displayName = 'Text';

package/src/typography/index.ts

@@ -0,0 +1,7 @@
+export * from './Heading';
+export * from './Text';
+export * from './Label';
+export * from './Link';
+export * from './Code';
+export * from './Blockquote';
+export * from './Kbd';

package/src/typography/tokens.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/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/ui-contract.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "packageName": "@my-brand/ui",
+  "version": "0.1.0",
+  "modules": {
+    "core": {
+      "exportPath": "@my-brand/ui/core",
+      "stylePath": "@my-brand/ui/styles.css",
+      "components": ["ThemeProvider", "useTheme", "cn"]
+    },
+    "layout": {
+      "exportPath": "@my-brand/ui/layout",
+      "stylePath": "@my-brand/ui/layout/styles.css",
+      "components": ["Container", "Section", "Stack", "HStack", "VStack", "Grid", "GridItem", "Flex", "Divider", "Spacer", "AspectRatio", "PageLayout", "PageHeader", "PageSidebar", "ScrollArea"]
+    },
+    "typography": {
+      "exportPath": "@my-brand/ui/typography",
+      "stylePath": "@my-brand/ui/typography/styles.css",
+      "components": ["Heading", "Text", "Label", "Link", "Code", "CodeBlock", "Blockquote", "Kbd"]
+    },
+    "buttons": {
+      "exportPath": "@my-brand/ui/buttons",
+      "stylePath": "@my-brand/ui/buttons/styles.css",
+      "components": ["Button", "IconButton", "ButtonGroup", "ToggleButton", "ToggleGroup", "SplitButton"]
+    },
+    "forms": {
+      "exportPath": "@my-brand/ui/forms",
+      "stylePath": "@my-brand/ui/forms/styles.css",
+      "components": ["FormField", "FormLabel", "FormHelperText", "FormErrorMessage", "Input", "SearchInput", "PasswordInput", "Textarea", "Select", "Checkbox", "CheckboxGroup", "Radio", "RadioGroup", "Switch", "Slider", "RangeSlider", "PinInput", "DatePicker", "DateRangePicker", "TimePicker", "Combobox", "MultiSelect", "FileUpload", "NumberInput", "CurrencyInput", "MaskedInput"]
+    },
+    "overlays": {
+      "exportPath": "@my-brand/ui/overlays",
+      "stylePath": "@my-brand/ui/overlays/styles.css",
+      "components": ["Portal", "FocusTrap", "Modal", "ModalOverlay", "ModalContent", "ModalHeader", "ModalTitle", "ModalDescription", "ModalBody", "ModalFooter", "ModalCloseButton", "AlertDialog", "Drawer", "DrawerHeader", "DrawerBody", "DrawerFooter", "Tooltip", "Popover", "Toast", "ToasterProvider", "useToast", "BottomSheet", "BottomSheetHeader", "BottomSheetBody", "BottomSheetFooter", "ContextMenu", "ContextMenuItem", "ContextMenuSeparator", "HoverCard"]
+    },
+    "navigation": {
+      "exportPath": "@my-brand/ui/navigation",
+      "stylePath": "@my-brand/ui/navigation/styles.css",
+      "components": ["Tabs", "TabsList", "TabsTrigger", "TabsContent", "Breadcrumb", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbPage", "BreadcrumbSeparator", "Pagination", "Stepper", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuSeparator", "DropdownMenuLabel", "CommandPalette"]
+    },
+    "data-display": {
+      "exportPath": "@my-brand/ui/data-display",
+      "stylePath": "@my-brand/ui/data-display/styles.css",
+      "components": ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter", "Table", "TableHeader", "TableBody", "TableFooter", "TableRow", "TableHead", "TableCell", "TableCaption", "Avatar", "AvatarGroup", "Accordion", "AccordionItem", "AccordionTrigger", "AccordionContent", "Chip", "StatCard", "Timeline", "DataTablePro", "TreeView", "Carousel"]
+    },
+    "feedback": {
+      "exportPath": "@my-brand/ui/feedback",
+      "stylePath": "@my-brand/ui/feedback/styles.css",
+      "components": ["Spinner", "Skeleton", "SkeletonText", "SkeletonCircle", "ProgressBar", "CircularProgress", "Alert", "AlertTitle", "AlertDescription", "EmptyState"]
+    },
+    "glass": {
+      "exportPath": "@my-brand/ui/glass",
+      "stylePath": "@my-brand/ui/glass/styles.css",
+      "components": ["GlassCard", "GlassButton", "GlassBadge"]
+    },
+    "bento": {
+      "exportPath": "@my-brand/ui/bento",
+      "stylePath": "@my-brand/ui/bento/styles.css",
+      "components": ["BentoGrid", "BentoCard"]
+    }
+  }
+}