@umituz/web-design-system 1.0.2 → 1.0.3

package/src/presentation/organisms/Table.tsx

@@ -0,0 +1,120 @@
+/**
+ * Table Component (Organism)
+ * @description Data table component
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface TableProps extends HTMLAttributes<HTMLTableElement>, BaseProps, ChildrenProps {}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div className="relative w-full overflow-auto">
+        <table
+          ref={ref}
+          className={cn('w-full caption-bottom text-sm', className)}
+          {...props}
+        >
+          {children}
+        </table>
+      </div>
+    );
+  }
+);
+
+Table.displayName = 'Table';
+
+export const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  )
+);
+
+TableHeader.displayName = 'TableHeader';
+
+export const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+);
+
+TableBody.displayName = 'TableBody';
+
+export const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={cn(
+        'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+TableFooter.displayName = 'TableFooter';
+
+export const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+TableRow.displayName = 'TableRow';
+
+export const TableHead = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+TableHead.displayName = 'TableHead';
+
+export const TableCell = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn(
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+TableCell.displayName = 'TableCell';
+
+export const TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption
+      ref={ref}
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+);
+
+TableCaption.displayName = 'TableCaption';

package/src/presentation/organisms/Tabs.tsx

@@ -0,0 +1,99 @@
+/**
+ * Tabs Component (Organism)
+ * @description Tabbed interface
+ */
+
+import { useState, useCallback, type ReactNode, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface Tab {
+  value: string;
+  label: string;
+  content?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  tabs: Tab[];
+  defaultValue?: string;
+  variant?: 'default' | 'pills' | 'underline';
+}
+
+const variantStyles: Record<'default' | 'pills' | 'underline', string> = {
+  default: 'bg-muted p-1 rounded-lg gap-1',
+  pills: 'bg-transparent gap-2',
+  underline: 'bg-transparent border-b gap-6',
+};
+
+const tabVariantStyles: Record<'default' | 'pills' | 'underline', { base: string; active: string }> = {
+  default: {
+    base: 'px-3 py-1.5 rounded-md text-sm font-medium transition-all',
+    active: 'bg-background text-foreground shadow-sm',
+  },
+  pills: {
+    base: 'px-4 py-2 rounded-full text-sm font-medium transition-all',
+    active: 'bg-primary text-primary-foreground',
+  },
+  underline: {
+    base: 'px-1 pb-3 text-sm font-medium transition-all border-b-2 border-transparent',
+    active: 'text-foreground border-primary',
+  },
+};
+
+export function Tabs({ tabs, defaultValue, variant = 'default', className, ...props }: TabsProps) {
+  const [activeTab, setActiveTab] = useState(defaultValue || tabs[0]?.value);
+
+  const handleTabChange = useCallback((value: string) => {
+    const tab = tabs.find((t) => t.value === value);
+    if (tab && !tab.disabled) {
+      setActiveTab(value);
+    }
+  }, [tabs]);
+
+  const currentTab = tabs.find((t) => t.value === activeTab);
+
+  return (
+    <div className={cn('w-full', className)} {...props}>
+      {/* Tab List */}
+      <div
+        role="tablist"
+        className={cn('inline-flex w-full', variantStyles[variant])}
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.value;
+          const styles = tabVariantStyles[variant];
+
+          return (
+            <button
+              key={tab.value}
+              role="tab"
+              aria-selected={isActive}
+              disabled={tab.disabled}
+              onClick={() => handleTabChange(tab.value)}
+              className={cn(
+                styles.base,
+                isActive
+                  ? styles.active
+                  : 'text-muted-foreground hover:text-foreground',
+                tab.disabled && 'opacity-50 cursor-not-allowed'
+              )}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Tab Content */}
+      <div
+        role="tabpanel"
+        className="mt-4"
+      >
+        {currentTab?.content}
+      </div>
+    </div>
+  );
+}
+
+Tabs.displayName = 'Tabs';

package/src/presentation/organisms/index.ts

@@ -15,3 +15,24 @@ export type { ModalProps } from './Modal';
 
 export { Navbar, NavbarBrand, NavbarLinks, NavbarActions } from './Navbar';
 export type { NavbarProps } from './Navbar';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption
+} from './Table';
+export type { TableProps } from './Table';
+
+export { Tabs } from './Tabs';
+export type { TabsProps, Tab } from './Tabs';
+
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItem } from './Accordion';
+
+export { Breadcrumbs } from './Breadcrumb';
+export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';