@mhome/ui 0.1.0

package/src/components/table.jsx

@@ -0,0 +1,243 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const TableContext = React.createContext({
+  verticalDivider: false,
+});
+
+const Table = React.forwardRef(
+  (
+    {
+      className,
+      size = "medium",
+      sx,
+      style,
+      border = false,
+      verticalDivider = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const sizeStyles = {
+      small: {
+        fontSize: "0.875rem",
+      },
+      medium: {
+        fontSize: "1rem",
+      },
+    };
+
+    return (
+      <TableContext.Provider value={{ verticalDivider }}>
+        <table
+          ref={ref}
+          className={cn("w-full", className)}
+          style={{
+            borderCollapse: "separate",
+            borderSpacing: 0,
+            ...(border && {
+              border: "1px solid hsl(var(--border))",
+            }),
+            ...sizeStyles[size],
+            ...mergedSx,
+            ...style,
+          }}
+          {...props}
+        >
+          {children}
+        </table>
+      </TableContext.Provider>
+    );
+  }
+);
+Table.displayName = "Table";
+
+const TableContainer = React.forwardRef(
+  ({ className, component, sx, style, children, ...props }, ref) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const Component = component || "div";
+
+    return (
+      <Component
+        ref={ref}
+        className={cn("relative", className)}
+        style={{
+          ...mergedSx,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+TableContainer.displayName = "TableContainer";
+
+const TableHead = React.forwardRef(
+  ({ className, sx, style, children, ...props }, ref) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    return (
+      <thead
+        ref={ref}
+        className={cn(className)}
+        style={{
+          ...mergedSx,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </thead>
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+
+const TableBody = React.forwardRef(
+  ({ className, sx, style, children, ...props }, ref) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    return (
+      <tbody
+        ref={ref}
+        className={cn(className)}
+        style={{
+          ...mergedSx,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </tbody>
+    );
+  }
+);
+TableBody.displayName = "TableBody";
+
+const TableRow = React.forwardRef(
+  ({ className, sx, style, children, hover, selected, ...props }, ref) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    return (
+      <tr
+        ref={ref}
+        className={cn(
+          hover && "hover:bg-accent",
+          selected && "bg-accent",
+          className
+        )}
+        style={{
+          ...mergedSx,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </tr>
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+
+const TableCell = React.forwardRef(
+  (
+    {
+      className,
+      align = "inherit",
+      padding = "normal",
+      size = "medium",
+      scope,
+      sx,
+      style,
+      children,
+      colSpan,
+      rowSpan,
+      ...props
+    },
+    ref
+  ) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const paddingMap = {
+      none: "0",
+      checkbox: "0 0 0 4px",
+      normal: "16px",
+      small: "8px",
+    };
+
+    const sizeStyles = {
+      small: {
+        padding: "6px 8px",
+        fontSize: "0.875rem",
+      },
+      medium: {
+        padding: paddingMap[padding] || paddingMap.normal,
+        fontSize: "1rem",
+      },
+    };
+
+    const alignStyles = {
+      left: { textAlign: "left" },
+      center: { textAlign: "center" },
+      right: { textAlign: "right" },
+      inherit: {},
+    };
+
+    const { verticalDivider } = React.useContext(TableContext);
+
+    const Component = scope ? "th" : "td";
+
+    return (
+      <Component
+        ref={ref}
+        scope={scope}
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+        className={cn(
+          "border-b border-border",
+          verticalDivider && "border-r border-border last:border-r-0",
+          className
+        )}
+        style={{
+          ...sizeStyles[size],
+          ...alignStyles[align],
+          ...(verticalDivider && {
+            borderRight: "1px solid hsl(var(--border))",
+          }),
+          ...mergedSx,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+
+export { Table, TableContainer, TableHead, TableBody, TableRow, TableCell };

package/src/components/tabs.jsx

@@ -0,0 +1,363 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Tabs = React.forwardRef(
+  (
+    {
+      className,
+      value,
+      onChange,
+      children,
+      centered,
+      variant, // "standard" for underline style, undefined/"pills"/"button" for circle button style
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const tabsContainerRef = React.useRef(null);
+    const indicatorRef = React.useRef(null);
+    const [selectedValue, setSelectedValue] = React.useState(() => {
+      return value !== undefined ? value : 0;
+    });
+
+    // Sync internal state with value prop
+    React.useEffect(() => {
+      if (value !== undefined) {
+        setSelectedValue(value);
+      }
+    }, [value]);
+
+    const handleTabClick = React.useCallback(
+      (index) => {
+        const newValue = index;
+        if (value === undefined) {
+          setSelectedValue(newValue);
+        }
+        if (onChange) {
+          onChange(null, newValue);
+        }
+      },
+      [value, onChange]
+    );
+
+    const currentValue = value !== undefined ? value : selectedValue;
+    const isStandardVariant = variant === "standard";
+
+    // Update indicator position when selected tab changes (only for standard variant)
+    React.useEffect(() => {
+      if (
+        !isStandardVariant ||
+        !tabsContainerRef.current ||
+        !indicatorRef.current
+      )
+        return;
+
+      const tabs =
+        tabsContainerRef.current.querySelectorAll("[data-tab-index]");
+      const selectedTab = tabs[currentValue];
+
+      if (selectedTab) {
+        const containerRect = tabsContainerRef.current.getBoundingClientRect();
+        const tabRect = selectedTab.getBoundingClientRect();
+
+        indicatorRef.current.style.left = `${
+          tabRect.left - containerRect.left
+        }px`;
+        indicatorRef.current.style.width = `${tabRect.width}px`;
+      }
+    }, [currentValue, children, isStandardVariant]);
+
+    const tabsId = React.useId();
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          isStandardVariant ? "relative mb-4" : "flex",
+          !isStandardVariant && centered && "justify-center",
+          className
+        )}
+        style={{
+          minHeight: "auto",
+          ...style,
+        }}
+        {...props}
+      >
+        <div
+          ref={tabsContainerRef}
+          role="tablist"
+          aria-label="Tabs"
+          className={cn(
+            isStandardVariant
+              ? "flex border-b relative w-full"
+              : "flex gap-4 px-8 py-4"
+          )}
+          style={{
+            ...(isStandardVariant && { borderColor: "hsl(var(--border))" }),
+            ...(isStandardVariant && { display: "flex", width: "100%" }),
+          }}
+        >
+          {React.Children.map(children, (child, index) => {
+            // Check if child is a Tab component by checking displayName or type
+            const isTabComponent =
+              React.isValidElement(child) &&
+              (child.type === Tab || child.type?.displayName === "Tab");
+
+            if (isTabComponent) {
+              // Ensure both values are numbers for comparison
+              const isSelected = Number(currentValue) === Number(index);
+              return React.cloneElement(child, {
+                ...child.props,
+                selected: isSelected,
+                onClick: () => handleTabClick(index),
+                index: index,
+                "data-tab-index": index,
+                variant: isStandardVariant ? "standard" : undefined,
+                id: `${tabsId}-tab-${index}`,
+                "aria-controls": `${tabsId}-panel-${index}`,
+              });
+            }
+            return child;
+          })}
+        </div>
+        {/* Indicator line - only for standard variant */}
+        {isStandardVariant && (
+          <div
+            ref={indicatorRef}
+            style={{
+              position: "absolute",
+              bottom: 0,
+              height: "2px",
+              backgroundColor: "hsl(var(--primary))",
+              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+
+const Tab = React.forwardRef(
+  (
+    {
+      className,
+      label,
+      selected,
+      onClick,
+      index,
+      style,
+      variant,
+      id,
+      "aria-controls": ariaControls,
+      ...props
+    },
+    ref
+  ) => {
+    const isStandardVariant = variant === "standard";
+
+    const {
+      padding,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      paddingBottom,
+      margin,
+      marginLeft,
+      marginRight,
+      backgroundColor: styleBackgroundColor,
+      color: styleColor,
+      ...restStyle
+    } = style || {};
+
+    const hasPaddingInStyle =
+      padding !== undefined ||
+      paddingLeft !== undefined ||
+      paddingRight !== undefined ||
+      paddingTop !== undefined ||
+      paddingBottom !== undefined;
+
+    // Tab styles based on variant
+    if (isStandardVariant) {
+      // Standard variant: underline style (NEW)
+      const defaultPaddingClass = hasPaddingInStyle ? "" : "px-3 py-4";
+      const finalColor =
+        styleColor !== undefined
+          ? styleColor
+          : selected
+          ? "hsl(var(--primary))"
+          : "hsl(var(--muted-foreground))";
+
+      const { onClick: propsOnClick, ...restProps } = props;
+
+      return (
+        <button
+          ref={ref}
+          type="button"
+          role="tab"
+          id={id}
+          aria-selected={selected}
+          aria-controls={ariaControls}
+          tabIndex={selected ? 0 : -1}
+          onClick={(e) => {
+            if (onClick) {
+              onClick(e);
+            }
+            if (propsOnClick) {
+              propsOnClick(e);
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (onClick) {
+                onClick(e);
+              }
+            }
+          }}
+          className={cn(
+            "cursor-pointer transition-all duration-200 text-sm border-none bg-transparent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            defaultPaddingClass,
+            "min-w-[72px] min-h-[48px] flex-1",
+            selected ? "font-semibold" : "font-medium",
+            className
+          )}
+          style={{
+            color: finalColor,
+            textTransform: "none",
+            flex: 1,
+            minWidth: 0,
+            padding: padding,
+            paddingLeft: paddingLeft,
+            paddingRight: paddingRight,
+            paddingTop: paddingTop,
+            paddingBottom: paddingBottom,
+            margin: margin,
+            marginLeft: marginLeft,
+            marginRight: marginRight,
+            ...restStyle,
+          }}
+          onMouseEnter={(e) => {
+            if (!selected) {
+              e.currentTarget.style.backgroundColor = "hsl(var(--accent))";
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          }}
+          {...restProps}
+        >
+          {label}
+        </button>
+      );
+    } else {
+      // Pills variant: existing circle button style (DO NOT CHANGE - backward compatibility)
+      const getTabColors = () => {
+        if (selected) {
+          return {
+            color: "hsl(var(--primary-foreground))",
+            backgroundColor: "hsl(var(--primary))",
+          };
+        }
+        // Unselected tabs all have the same style
+        return {
+          color: "hsl(var(--foreground))",
+          backgroundColor: "hsl(var(--accent))",
+        };
+      };
+
+      const tabColors = getTabColors();
+
+      const hasMarginInStyle =
+        margin !== undefined ||
+        marginLeft !== undefined ||
+        marginRight !== undefined;
+
+      // Default padding/margin classes, but allow override
+      const defaultPaddingClass = hasPaddingInStyle ? "" : "px-4 py-3";
+      const defaultMarginClass = hasMarginInStyle ? "" : "mx-2";
+
+      // Use style backgroundColor if provided, otherwise use tabColors
+      const finalBackgroundColor =
+        styleBackgroundColor !== undefined
+          ? styleBackgroundColor
+          : tabColors.backgroundColor;
+
+      const finalColor =
+        styleColor !== undefined ? styleColor : tabColors.color;
+
+      // Ensure restStyle doesn't override backgroundColor or color
+      const { backgroundColor: _, color: __, ...cleanRestStyle } = restStyle;
+
+      // Extract onClick from props to avoid override
+      const { onClick: propsOnClick, ...restProps } = props;
+
+      return (
+        <button
+          ref={ref}
+          type="button"
+          role="tab"
+          id={id}
+          aria-selected={selected}
+          aria-controls={ariaControls}
+          tabIndex={selected ? 0 : -1}
+          onClick={(e) => {
+            if (onClick) {
+              onClick(e);
+            }
+            if (propsOnClick) {
+              propsOnClick(e);
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (onClick) {
+                onClick(e);
+              }
+            }
+          }}
+          className={cn(
+            "cursor-pointer transition-all duration-200 min-h-[32px] min-w-[100px] rounded-2xl text-sm border-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            defaultPaddingClass,
+            defaultMarginClass,
+            selected ? "font-semibold" : "font-medium",
+            className
+          )}
+          style={{
+            color: finalColor,
+            backgroundColor: finalBackgroundColor,
+            ...(padding !== undefined && { padding }),
+            ...(paddingLeft !== undefined && { paddingLeft }),
+            ...(paddingRight !== undefined && { paddingRight }),
+            ...(paddingTop !== undefined && { paddingTop }),
+            ...(paddingBottom !== undefined && { paddingBottom }),
+            ...(margin !== undefined && { margin }),
+            ...(marginLeft !== undefined && { marginLeft }),
+            ...(marginRight !== undefined && { marginRight }),
+            ...cleanRestStyle,
+          }}
+          onMouseEnter={(e) => {
+            if (!selected) {
+              e.currentTarget.style.backgroundColor = "hsl(var(--accent))";
+            } else {
+              e.currentTarget.style.backgroundColor =
+                "hsl(var(--primary) / 0.9)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = finalBackgroundColor;
+          }}
+          {...restProps}
+        >
+          {label}
+        </button>
+      );
+    }
+  }
+);
+Tab.displayName = "Tab";
+
+export { Tabs, Tab };