atomsystem 0.4.3 → 0.5.1

package/components/ui/Layout.tsx

@@ -0,0 +1,220 @@
+import React, { ElementType } from 'react';
+
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: ElementType;
+  children?: React.ReactNode;
+}
+
+export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  sticky?: boolean;
+}
+
+export interface LayoutSidebarProps extends React.HTMLAttributes<HTMLElement> {
+  width?: 'sm' | 'md' | 'lg';
+}
+
+export interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {}
+
+export interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {}
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: 'vertical' | 'horizontal';
+  gap?: '1' | '2' | '3' | '4' | '6' | '8' | '12';
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+  wrap?: boolean;
+}
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  cols?: 1 | 2 | 3 | 4 | 6 | 12;
+  gap?: '1' | '2' | '3' | '4' | '6' | '8';
+}
+
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  spacing?: 'sm' | 'md' | 'lg' | 'none';
+}
+
+const SIDEBAR_WIDTH_MAP = {
+  sm: 'w-48 lg:w-56',
+  md: 'w-60 lg:w-64',
+  lg: 'w-72 lg:w-80',
+};
+
+const STACK_GAP_MAP: Record<string, string> = {
+  '1': 'gap-[var(--atom-space-1,4px)]',
+  '2': 'gap-[var(--atom-space-2,8px)]',
+  '3': 'gap-[var(--atom-space-3,12px)]',
+  '4': 'gap-[var(--atom-space-4,16px)]',
+  '6': 'gap-[var(--atom-space-6,24px)]',
+  '8': 'gap-[var(--atom-space-8,32px)]',
+  '12': 'gap-[var(--atom-space-12,48px)]',
+};
+
+const STACK_ALIGN_MAP = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+};
+
+const STACK_JUSTIFY_MAP = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+};
+
+const GRID_COLS_MAP = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+  12: 'grid-cols-12',
+};
+
+const SECTION_SPACING_MAP = {
+  none: '',
+  sm: 'py-[var(--atom-space-4,16px)] sm:py-[var(--atom-space-6,24px)]',
+  md: 'py-[var(--atom-space-8,32px)] sm:py-[var(--atom-space-12,48px)]',
+  lg: 'py-[var(--atom-space-12,48px)] sm:py-[var(--atom-space-16,64px)]',
+};
+
+const LayoutHeader: React.FC<LayoutHeaderProps> = ({
+  sticky = true,
+  className = '',
+  children,
+  ...props
+}) => (
+  <header
+    className={`${
+      sticky ? 'sticky top-0 z-40 backdrop-blur-md bg-(--bg-primary)/90' : ''
+    } border-b border-(--border-subtle) transition-colors ${className}`.trim()}
+    {...props}
+  >
+    {children}
+  </header>
+);
+
+const LayoutSidebar: React.FC<LayoutSidebarProps> = ({
+  width = 'md',
+  className = '',
+  children,
+  ...props
+}) => (
+  <aside
+    className={`shrink-0 border-r border-(--border-subtle) bg-(--bg-primary) transition-colors ${SIDEBAR_WIDTH_MAP[width]} ${className}`.trim()}
+    {...props}
+  >
+    {children}
+  </aside>
+);
+
+const LayoutContent: React.FC<LayoutContentProps> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <main className={`flex-1 w-full transition-colors ${className}`.trim()} {...props}>
+    {children}
+  </main>
+);
+
+const LayoutFooter: React.FC<LayoutFooterProps> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <footer
+    className={`border-t border-(--border-subtle) bg-(--bg-primary) transition-colors ${className}`.trim()}
+    {...props}
+  >
+    {children}
+  </footer>
+);
+
+export const Stack: React.FC<StackProps> = ({
+  direction = 'vertical',
+  gap = '4',
+  align = 'stretch',
+  justify = 'start',
+  wrap = false,
+  className = '',
+  children,
+  ...props
+}) => {
+  const dirClass = direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col';
+  const gapClass = STACK_GAP_MAP[gap] || STACK_GAP_MAP['4'];
+  const alignClass = STACK_ALIGN_MAP[align] || '';
+  const justifyClass = STACK_JUSTIFY_MAP[justify] || '';
+  const wrapClass = wrap ? 'flex-wrap' : 'flex-nowrap';
+
+  return (
+    <div
+      className={`${dirClass} ${gapClass} ${alignClass} ${justifyClass} ${wrapClass} ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Grid: React.FC<GridProps> = ({
+  cols = 3,
+  gap = '4',
+  className = '',
+  children,
+  ...props
+}) => {
+  const colsClass = GRID_COLS_MAP[cols] || GRID_COLS_MAP[3];
+  const gapClass = STACK_GAP_MAP[gap] || STACK_GAP_MAP['4'];
+  return (
+    <div className={`grid ${colsClass} ${gapClass} ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const Section: React.FC<SectionProps> = ({
+  spacing = 'md',
+  className = '',
+  children,
+  ...props
+}) => {
+  const spacingClass = SECTION_SPACING_MAP[spacing];
+  return (
+    <section className={`w-full ${spacingClass} ${className}`.trim()} {...props}>
+      {children}
+    </section>
+  );
+};
+
+export const Layout: React.FC<LayoutProps> & {
+  Header: React.FC<LayoutHeaderProps>;
+  Sidebar: React.FC<LayoutSidebarProps>;
+  Content: React.FC<LayoutContentProps>;
+  Footer: React.FC<LayoutFooterProps>;
+  Stack: React.FC<StackProps>;
+  Grid: React.FC<GridProps>;
+  Section: React.FC<SectionProps>;
+} = ({ as: Component = 'div', className = '', children, ...props }) => {
+  return (
+    <Component
+      className={`min-h-screen bg-(--bg-primary) text-(--text-primary) flex flex-col font-sans transition-colors ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};
+
+Layout.Header = LayoutHeader;
+Layout.Sidebar = LayoutSidebar;
+Layout.Content = LayoutContent;
+Layout.Footer = LayoutFooter;
+Layout.Stack = Stack;
+Layout.Grid = Grid;
+Layout.Section = Section;
+
+Layout.displayName = 'Layout';

package/components/ui/Switch.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+
+export interface SwitchProps {
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+  checked,
+  onCheckedChange,
+  disabled = false,
+  className = '',
+  id,
+}) => {
+  return (
+    <button
+      id={id}
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onCheckedChange?.(!checked)}
+      className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed ${
+        checked ? 'bg-(--accent-primary)' : 'bg-(--bg-secondary) border-(--border-subtle)'
+      } ${className}`}
+    >
+      <span
+        className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-xs ring-0 transition duration-200 ease-in-out ${
+          checked ? 'translate-x-4' : 'translate-x-0'
+        }`}
+      />
+    </button>
+  );
+};

package/components/ui/Table.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}
+
+export const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ className = '', children, ...props }, ref) => (
+    <div className="w-full overflow-auto rounded-(--radius) border border-(--border-subtle)">
+      <table
+        ref={ref}
+        className={`w-full caption-bottom text-xs text-left ${className}`}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  )
+);
+Table.displayName = 'Table';
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className = '', children, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={`bg-(--bg-secondary)/60 border-b border-(--border-subtle) font-semibold text-(--text-secondary) ${className}`}
+    {...props}
+  >
+    {children}
+  </thead>
+));
+TableHeader.displayName = 'TableHeader';
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className = '', children, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={`divide-y divide-(--border-subtle) bg-(--bg-primary) ${className}`}
+    {...props}
+  >
+    {children}
+  </tbody>
+));
+TableBody.displayName = 'TableBody';
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className = '', children, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={`hover:bg-(--bg-secondary)/40 transition-colors ${className}`}
+    {...props}
+  >
+    {children}
+  </tr>
+));
+TableRow.displayName = 'TableRow';
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className = '', children, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={`p-3 text-left font-medium text-(--text-secondary) ${className}`}
+    {...props}
+  >
+    {children}
+  </th>
+));
+TableHead.displayName = 'TableHead';
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className = '', children, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={`p-3 text-(--text-primary) align-middle ${className}`}
+    {...props}
+  >
+    {children}
+  </td>
+));
+TableCell.displayName = 'TableCell';

package/components/ui/Tabs.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+
+export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+}
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  active?: boolean;
+}
+
+export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
+  ({ className = '', children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`inline-flex items-center p-1 rounded-(--radius) bg-(--bg-secondary) text-xs border border-(--border-subtle) ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+TabsList.displayName = 'TabsList';
+
+export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ active = false, className = '', children, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      className={`px-3 py-1.5 rounded-(--radius-sm) font-medium text-xs transition-colors ${
+        active
+          ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs font-semibold'
+          : 'text-(--text-secondary) hover:text-(--text-primary)'
+      } ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+);
+TabsTrigger.displayName = 'TabsTrigger';
+
+export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ active = false, className = '', children, ...props }, ref) => {
+    if (!active) return null;
+    return (
+      <div
+        ref={ref}
+        className={`p-4 rounded-(--radius) bg-(--bg-primary) border border-(--border-subtle) text-xs ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+TabsContent.displayName = 'TabsContent';

package/components/ui/index.ts

@@ -17,3 +17,8 @@ export * from './Breadcrumb';
 export * from './Separator';
 export * from './Textarea';
 export * from './Tree';
+export * from './Table';
+export * from './Tabs';
+export * from './Switch';
+export * from './Container';
+export * from './Layout';