@thangnqdev/ui 0.1.2 → 0.2.0

package/src/layout/PageLayout.tsx

@@ -1,59 +1,59 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-  header?: React.ReactNode;
-  sidebar?: React.ReactNode;
-  footer?: React.ReactNode;
-  sidebarWidth?: string;
-  sidebarCollapsed?: boolean;
-}
-
-export const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
-  ({ className, header, sidebar, footer, children, sidebarWidth = '16rem', sidebarCollapsed = false, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('min-h-screen flex flex-col bg-[var(--ui-bg-primary)] text-[var(--ui-text-primary)]', className)} {...props}>
-        {header && <header className="sticky top-0 z-30 w-full border-b border-[var(--ui-border-subtle)] bg-[var(--ui-bg-surface)] backdrop-blur-md">{header}</header>}
-        
-        <div className="flex-1 flex w-full">
-          {sidebar && (
-            <aside
-              style={{ width: sidebarCollapsed ? '4rem' : sidebarWidth }}
-              className="hidden md:flex flex-col flex-shrink-0 border-r border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)] transition-[width] duration-200"
-            >
-              {sidebar}
-            </aside>
-          )}
-
-          <main className="flex-1 flex flex-col min-w-0 overflow-y-auto">
-            <div className="flex-1 p-4 md:p-6 lg:p-8">{children}</div>
-            {footer && <footer className="border-t border-[var(--ui-border-subtle)] bg-[var(--ui-bg-surface)] p-4 md:p-6">{footer}</footer>}
-          </main>
-        </div>
-      </div>
-    );
-  }
-);
-PageLayout.displayName = 'PageLayout';
-
-export const PageHeader = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref as any} className={cn('flex items-center justify-between h-16 px-4 md:px-6 w-full', className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-PageHeader.displayName = 'PageHeader';
-
-export const PageSidebar = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref as any} className={cn('flex flex-col h-full p-4 overflow-y-auto', className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-PageSidebar.displayName = 'PageSidebar';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  header?: React.ReactNode;
+  sidebar?: React.ReactNode;
+  footer?: React.ReactNode;
+  sidebarWidth?: string;
+  sidebarCollapsed?: boolean;
+}
+
+export const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
+  ({ className, header, sidebar, footer, children, sidebarWidth = '16rem', sidebarCollapsed = false, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('min-h-screen flex flex-col bg-[var(--ui-bg-primary)] text-[var(--ui-text-primary)]', className)} {...props}>
+        {header && <header className="sticky top-0 z-30 w-full border-b border-[var(--ui-border-subtle)] bg-[var(--ui-bg-surface)] backdrop-blur-md">{header}</header>}
+        
+        <div className="flex-1 flex w-full">
+          {sidebar && (
+            <aside
+              style={{ width: sidebarCollapsed ? '4rem' : sidebarWidth }}
+              className="hidden md:flex flex-col flex-shrink-0 border-r border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)] transition-[width] duration-200"
+            >
+              {sidebar}
+            </aside>
+          )}
+
+          <main className="flex-1 flex flex-col min-w-0 overflow-y-auto">
+            <div className="flex-1 p-4 md:p-6 lg:p-8">{children}</div>
+            {footer && <footer className="border-t border-[var(--ui-border-subtle)] bg-[var(--ui-bg-surface)] p-4 md:p-6">{footer}</footer>}
+          </main>
+        </div>
+      </div>
+    );
+  }
+);
+PageLayout.displayName = 'PageLayout';
+
+export const PageHeader = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref as any} className={cn('flex items-center justify-between h-16 px-4 md:px-6 w-full', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PageHeader.displayName = 'PageHeader';
+
+export const PageSidebar = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref as any} className={cn('flex flex-col h-full p-4 overflow-y-auto', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PageSidebar.displayName = 'PageSidebar';

package/src/layout/Section.tsx

@@ -1,47 +1,47 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const sectionVariants = cva('w-full relative', {
-  variants: {
-    spacing: {
-      none: 'py-0',
-      sm: 'py-6 md:py-8',
-      md: 'py-12 md:py-16',
-      lg: 'py-16 md:py-24',
-      xl: 'py-24 md:py-32',
-    },
-    variant: {
-      default: 'bg-transparent text-[var(--ui-text-primary)]',
-      subtle: 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-primary)]',
-      surface: 'bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)]',
-      muted: 'bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]',
-    },
-  },
-  defaultVariants: {
-    spacing: 'md',
-    variant: 'default',
-  },
-});
-
-export interface SectionProps
-  extends React.HTMLAttributes<HTMLElement>,
-    VariantProps<typeof sectionVariants> {
-  as?: React.ElementType;
-}
-
-export const Section = forwardRef<HTMLElement, SectionProps>(
-  ({ className, spacing, variant, as: Component = 'section', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(sectionVariants({ spacing, variant }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-
-Section.displayName = 'Section';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const sectionVariants = cva('w-full relative', {
+  variants: {
+    spacing: {
+      none: 'py-0',
+      sm: 'py-6 md:py-8',
+      md: 'py-12 md:py-16',
+      lg: 'py-16 md:py-24',
+      xl: 'py-24 md:py-32',
+    },
+    variant: {
+      default: 'bg-transparent text-[var(--ui-text-primary)]',
+      subtle: 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-primary)]',
+      surface: 'bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)]',
+      muted: 'bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]',
+    },
+  },
+  defaultVariants: {
+    spacing: 'md',
+    variant: 'default',
+  },
+});
+
+export interface SectionProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof sectionVariants> {
+  as?: React.ElementType;
+}
+
+export const Section = forwardRef<HTMLElement, SectionProps>(
+  ({ className, spacing, variant, as: Component = 'section', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(sectionVariants({ spacing, variant }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Section.displayName = 'Section';

package/src/layout/Spacer.tsx

@@ -1,30 +1,30 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
-  x?: number | string;
-  y?: number | string;
-}
-
-export const Spacer = forwardRef<HTMLDivElement, SpacerProps>(
-  ({ className, x, y, style, ...props }, ref) => {
-    const spacingStyle: React.CSSProperties = {
-      ...style,
-      ...(x !== undefined && {
-        width: typeof x === 'number' ? `${x * 0.25}rem` : x,
-        minWidth: typeof x === 'number' ? `${x * 0.25}rem` : x,
-      }),
-      ...(y !== undefined && {
-        height: typeof y === 'number' ? `${y * 0.25}rem` : y,
-        minHeight: typeof y === 'number' ? `${y * 0.25}rem` : y,
-      }),
-      ...(x === undefined && y === undefined && {
-        flex: '1 1 0%',
-      }),
-    };
-
-    return <div ref={ref} aria-hidden="true" style={spacingStyle} className={cn('pointer-events-none', className)} {...props} />;
-  }
-);
-
-Spacer.displayName = 'Spacer';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+  x?: number | string;
+  y?: number | string;
+}
+
+export const Spacer = forwardRef<HTMLDivElement, SpacerProps>(
+  ({ className, x, y, style, ...props }, ref) => {
+    const spacingStyle: React.CSSProperties = {
+      ...style,
+      ...(x !== undefined && {
+        width: typeof x === 'number' ? `${x * 0.25}rem` : x,
+        minWidth: typeof x === 'number' ? `${x * 0.25}rem` : x,
+      }),
+      ...(y !== undefined && {
+        height: typeof y === 'number' ? `${y * 0.25}rem` : y,
+        minHeight: typeof y === 'number' ? `${y * 0.25}rem` : y,
+      }),
+      ...(x === undefined && y === undefined && {
+        flex: '1 1 0%',
+      }),
+    };
+
+    return <div ref={ref} aria-hidden="true" style={spacingStyle} className={cn('pointer-events-none', className)} {...props} />;
+  }
+);
+
+Spacer.displayName = 'Spacer';

package/src/layout/Stack.tsx

@@ -1,88 +1,88 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const stackVariants = cva('flex', {
-  variants: {
-    direction: {
-      row: 'flex-row',
-      'row-reverse': 'flex-row-reverse',
-      column: 'flex-col',
-      'column-reverse': 'flex-col-reverse',
-    },
-    gap: {
-      0: 'gap-0',
-      1: 'gap-1',
-      2: 'gap-2',
-      3: 'gap-3',
-      4: 'gap-4',
-      5: 'gap-5',
-      6: 'gap-6',
-      8: 'gap-8',
-      10: 'gap-10',
-      12: 'gap-12',
-    },
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      stretch: 'items-stretch',
-      baseline: 'items-baseline',
-    },
-    justify: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-      around: 'justify-around',
-      evenly: 'justify-evenly',
-    },
-    wrap: {
-      nowrap: 'flex-nowrap',
-      wrap: 'flex-wrap',
-      'wrap-reverse': 'flex-wrap-reverse',
-    },
-  },
-  defaultVariants: {
-    direction: 'column',
-    gap: 4,
-    align: 'stretch',
-    justify: 'start',
-    wrap: 'nowrap',
-  },
-});
-
-export interface StackProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof stackVariants> {
-  as?: React.ElementType;
-}
-
-export const Stack = forwardRef<HTMLDivElement, StackProps>(
-  ({ className, direction, gap, align, justify, wrap, as: Component = 'div', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(stackVariants({ direction, gap, align, justify, wrap }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-Stack.displayName = 'Stack';
-
-export const HStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
-  ({ align = 'center', ...props }, ref) => {
-    return <Stack ref={ref} direction="row" align={align} {...props} />;
-  }
-);
-HStack.displayName = 'HStack';
-
-export const VStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
-  ({ align = 'stretch', ...props }, ref) => {
-    return <Stack ref={ref} direction="column" align={align} {...props} />;
-  }
-);
-VStack.displayName = 'VStack';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const stackVariants = cva('flex', {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      'row-reverse': 'flex-row-reverse',
+      column: 'flex-col',
+      'column-reverse': 'flex-col-reverse',
+    },
+    gap: {
+      0: 'gap-0',
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+      5: 'gap-5',
+      6: 'gap-6',
+      8: 'gap-8',
+      10: 'gap-10',
+      12: 'gap-12',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+      baseline: 'items-baseline',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      nowrap: 'flex-nowrap',
+      wrap: 'flex-wrap',
+      'wrap-reverse': 'flex-wrap-reverse',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    gap: 4,
+    align: 'stretch',
+    justify: 'start',
+    wrap: 'nowrap',
+  },
+});
+
+export interface StackProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof stackVariants> {
+  as?: React.ElementType;
+}
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  ({ className, direction, gap, align, justify, wrap, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(stackVariants({ direction, gap, align, justify, wrap }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+Stack.displayName = 'Stack';
+
+export const HStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  ({ align = 'center', ...props }, ref) => {
+    return <Stack ref={ref} direction="row" align={align} {...props} />;
+  }
+);
+HStack.displayName = 'HStack';
+
+export const VStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  ({ align = 'stretch', ...props }, ref) => {
+    return <Stack ref={ref} direction="column" align={align} {...props} />;
+  }
+);
+VStack.displayName = 'VStack';

package/src/layout/tokens.css

@@ -1,8 +1,8 @@
-/* Layout Tokens */
-:root {
-  --ui-container-sm: 640px;
-  --ui-container-md: 768px;
-  --ui-container-lg: 1024px;
-  --ui-container-xl: 1280px;
-  --ui-container-2xl: 1536px;
-}
+/* Layout Tokens */
+:root {
+  --ui-container-sm: 640px;
+  --ui-container-md: 768px;
+  --ui-container-lg: 1024px;
+  --ui-container-xl: 1280px;
+  --ui-container-2xl: 1536px;
+}

package/src/navigation/Breadcrumb.tsx

@@ -1,73 +1,73 @@
-import React, { forwardRef } from 'react';
-import { ChevronRight } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export const Breadcrumb = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <nav ref={ref} aria-label="Breadcrumb" className={cn('flex items-center text-sm', className)} {...props}>
-        <ol className="flex items-center gap-1.5 sm:gap-2">{children}</ol>
-      </nav>
-    );
-  }
-);
-Breadcrumb.displayName = 'Breadcrumb';
-
-export const BreadcrumbItem = forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props}>
-        {children}
-      </li>
-    );
-  }
-);
-BreadcrumbItem.displayName = 'BreadcrumbItem';
-
-export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  as?: React.ElementType;
-}
-
-export const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-  ({ className, as: Component = 'a', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn('text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors font-medium', className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-BreadcrumbLink.displayName = 'BreadcrumbLink';
-
-export const BreadcrumbPage = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <span
-        ref={ref}
-        role="link"
-        aria-disabled="true"
-        aria-current="page"
-        className={cn('font-semibold text-[var(--ui-text-primary)]', className)}
-        {...props}
-      >
-        {children}
-      </span>
-    );
-  }
-);
-BreadcrumbPage.displayName = 'BreadcrumbPage';
-
-export const BreadcrumbSeparator = forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <li ref={ref} role="presentation" aria-hidden="true" className={cn('text-[var(--ui-text-muted)] opacity-60', className)} {...props}>
-        {children || <ChevronRight className="w-3.5 h-3.5" />}
-      </li>
-    );
-  }
-);
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+import React, { forwardRef } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const Breadcrumb = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <nav ref={ref} aria-label="Breadcrumb" className={cn('flex items-center text-sm', className)} {...props}>
+        <ol className="flex items-center gap-1.5 sm:gap-2">{children}</ol>
+      </nav>
+    );
+  }
+);
+Breadcrumb.displayName = 'Breadcrumb';
+
+export const BreadcrumbItem = forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props}>
+        {children}
+      </li>
+    );
+  }
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  as?: React.ElementType;
+}
+
+export const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ className, as: Component = 'a', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn('text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors font-medium', className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+export const BreadcrumbPage = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn('font-semibold text-[var(--ui-text-primary)]', className)}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+export const BreadcrumbSeparator = forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <li ref={ref} role="presentation" aria-hidden="true" className={cn('text-[var(--ui-text-muted)] opacity-60', className)} {...props}>
+        {children || <ChevronRight className="w-3.5 h-3.5" />}
+      </li>
+    );
+  }
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';