@wealthx/ui 1.0.0 → 1.0.1

package/src/selection-button-group.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import MuiToggleButtonGroup, {
+  type ToggleButtonGroupProps as MuiToggleButtonGroupProps,
+} from "@mui/material/ToggleButtonGroup";
+import { ToggleButton } from "./toggle-button";
+
+export type SelectionButtonGroupProps = MuiToggleButtonGroupProps;
+
+/**
+ * Same behavior as ToggleButtonGroup (exclusive selection, at least one active)
+ * but with spacing between buttons so they are visually separate.
+ * Child ToggleButtons always use the outlined selected style
+ * (background palette[100], border palette.main).
+ */
+export interface WealthxSelectionButtonGroupProps extends Omit<
+  MuiToggleButtonGroupProps,
+  "onChange" | "exclusive"
+> {
+  onChange?: MuiToggleButtonGroupProps["onChange"];
+}
+
+export const SelectionButtonGroup = React.forwardRef<
+  HTMLDivElement,
+  WealthxSelectionButtonGroupProps
+>(({ onChange, children, ...props }, ref) => {
+  const handleChange: MuiToggleButtonGroupProps["onChange"] = (
+    event,
+    value,
+  ) => {
+    if (value == null) return;
+    onChange?.(event, value);
+  };
+
+  const childrenWithOutlined =
+    children != null
+      ? React.Children.map(children, (child) =>
+          React.isValidElement(child) && child.type === ToggleButton
+            ? React.cloneElement(child, { outlined: true } as any)
+            : child,
+        )
+      : children;
+
+  return (
+    <MuiToggleButtonGroup
+      ref={ref}
+      {...props}
+      exclusive
+      onChange={handleChange}
+      sx={{
+        gap: "var(--space-4)",
+      }}
+    >
+      {childrenWithOutlined}
+    </MuiToggleButtonGroup>
+  );
+});
+
+SelectionButtonGroup.displayName = "SelectionButtonGroup";

package/src/skeleton.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiSkeleton, {
+  type SkeletonProps as MuiSkeletonProps,
+} from "@mui/material/Skeleton";
+
+export type SkeletonProps = MuiSkeletonProps;
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  (props, ref) => {
+    return <MuiSkeleton ref={ref} {...props} />;
+  }
+);
+
+Skeleton.displayName = "Skeleton";

package/src/slider.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiSlider, { type SliderProps as MuiSliderProps } from "@mui/material/Slider";
+
+export type SliderProps = MuiSliderProps;
+
+export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
+  (props, ref) => {
+    return <MuiSlider ref={ref} {...props} />;
+  }
+);
+
+Slider.displayName = "Slider";

package/src/snackbar.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiSnackbar, {
+  type SnackbarProps as MuiSnackbarProps,
+} from "@mui/material/Snackbar";
+
+export type SnackbarProps = MuiSnackbarProps;
+
+export const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(
+  (props, ref) => {
+    return <MuiSnackbar ref={ref} {...props} />;
+  }
+);
+
+Snackbar.displayName = "Snackbar";

package/src/speed-dial-action.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiSpeedDialAction, {
+  type SpeedDialActionProps as MuiSpeedDialActionProps,
+} from "@mui/material/SpeedDialAction";
+
+export type SpeedDialActionProps = MuiSpeedDialActionProps;
+
+export const SpeedDialAction = React.forwardRef<HTMLDivElement, SpeedDialActionProps>(
+  (props, ref) => {
+    return <MuiSpeedDialAction ref={ref} {...props} />;
+  }
+);
+
+SpeedDialAction.displayName = "SpeedDialAction";

package/src/speed-dial.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiSpeedDial, {
+  type SpeedDialProps as MuiSpeedDialProps,
+} from "@mui/material/SpeedDial";
+
+export type SpeedDialProps = MuiSpeedDialProps;
+
+export const SpeedDial = React.forwardRef<HTMLDivElement, SpeedDialProps>(
+  (props, ref) => {
+    return <MuiSpeedDial ref={ref} {...props} />;
+  }
+);
+
+SpeedDial.displayName = "SpeedDial";

package/src/stack.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiStack, { type StackProps as MuiStackProps } from "@mui/material/Stack";
+
+export type StackProps = MuiStackProps;
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  (props, ref) => {
+    return <MuiStack ref={ref} {...props} />;
+  }
+);
+
+Stack.displayName = "Stack";

package/src/step-content.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiStepContent, {
+  type StepContentProps as MuiStepContentProps,
+} from "@mui/material/StepContent";
+
+export type StepContentProps = MuiStepContentProps;
+
+export const StepContent = React.forwardRef<HTMLDivElement, StepContentProps>(
+  (props, ref) => {
+    return <MuiStepContent ref={ref} {...props} />;
+  }
+);
+
+StepContent.displayName = "StepContent";

package/src/step-label.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiStepLabel, {
+  type StepLabelProps as MuiStepLabelProps,
+} from "@mui/material/StepLabel";
+
+export type StepLabelProps = MuiStepLabelProps;
+
+export const StepLabel = React.forwardRef<HTMLDivElement, StepLabelProps>(
+  (props, ref) => {
+    return <MuiStepLabel ref={ref} {...props} />;
+  }
+);
+
+StepLabel.displayName = "StepLabel";

package/src/step.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiStep, { type StepProps as MuiStepProps } from "@mui/material/Step";
+
+export type StepProps = MuiStepProps;
+
+export const Step = React.forwardRef<HTMLDivElement, StepProps>(
+  (props, ref) => {
+    return <MuiStep ref={ref} {...props} />;
+  }
+);
+
+Step.displayName = "Step";

package/src/stepper.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiStepper, { type StepperProps as MuiStepperProps } from "@mui/material/Stepper";
+
+export type StepperProps = MuiStepperProps;
+
+export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+  (props, ref) => {
+    return <MuiStepper ref={ref} {...props} />;
+  }
+);
+
+Stepper.displayName = "Stepper";

package/src/switch.tsx

@@ -0,0 +1,15 @@
+import "./mui-augmentation";
+import React from "react";
+import MuiSwitch, { type SwitchProps as MuiSwitchProps } from "@mui/material/Switch";
+
+export type SwitchProps = Omit<MuiSwitchProps, "size"> & {
+  size?: "small" | "medium" | "large";
+};
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (props, ref) => {
+    return <MuiSwitch ref={ref} {...(props as MuiSwitchProps)} />;
+  }
+);
+
+Switch.displayName = "Switch";

package/src/tab-context.tsx

@@ -0,0 +1,11 @@
+import MuiTabContext, {
+  type TabContextProps as MuiTabContextProps,
+} from "@mui/lab/TabContext";
+
+export type TabContextProps = MuiTabContextProps;
+
+export function TabContext(props: TabContextProps): JSX.Element {
+  return <MuiTabContext {...props} />;
+}
+
+TabContext.displayName = "TabContext";

package/src/tab-list.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTabList, {
+  type TabListProps as MuiTabListProps,
+} from "@mui/lab/TabList";
+
+export type TabListProps = MuiTabListProps;
+
+export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
+  (props, ref) => {
+    return <MuiTabList ref={ref} {...props} />;
+  }
+);
+
+TabList.displayName = "TabList";

package/src/tab-panel.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTabPanel, {
+  type TabPanelProps as MuiTabPanelProps,
+} from "@mui/lab/TabPanel";
+
+export type TabPanelProps = MuiTabPanelProps;
+
+export const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(
+  (props, ref) => {
+    return <MuiTabPanel ref={ref} {...props} />;
+  }
+);
+
+TabPanel.displayName = "TabPanel";

package/src/tab.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiTab, { type TabProps as MuiTabProps } from "@mui/material/Tab";
+
+export type TabProps = MuiTabProps;
+
+export const Tab = React.forwardRef<HTMLDivElement, TabProps>(
+  (props, ref) => {
+    return <MuiTab ref={ref} {...props} />;
+  }
+);
+
+Tab.displayName = "Tab";

package/src/table-body.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTableBody, {
+  type TableBodyProps as MuiTableBodyProps,
+} from "@mui/material/TableBody";
+
+export type TableBodyProps = MuiTableBodyProps;
+
+export const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  (props, ref) => {
+    return <MuiTableBody ref={ref} {...props} />;
+  }
+);
+
+TableBody.displayName = "TableBody";

package/src/table-cell.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTableCell, {
+  type TableCellProps as MuiTableCellProps,
+} from "@mui/material/TableCell";
+
+export type TableCellProps = MuiTableCellProps;
+
+export const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  (props, ref) => {
+    return <MuiTableCell ref={ref} {...props} />;
+  }
+);
+
+TableCell.displayName = "TableCell";

package/src/table-container.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTableContainer, {
+  type TableContainerProps as MuiTableContainerProps,
+} from "@mui/material/TableContainer";
+
+export type TableContainerProps = MuiTableContainerProps;
+
+export const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
+  (props, ref) => {
+    return <MuiTableContainer ref={ref} {...props} />;
+  }
+);
+
+TableContainer.displayName = "TableContainer";

package/src/table-head.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTableHead, {
+  type TableHeadProps as MuiTableHeadProps,
+} from "@mui/material/TableHead";
+
+export type TableHeadProps = MuiTableHeadProps;
+
+export const TableHead = React.forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  (props, ref) => {
+    return <MuiTableHead ref={ref} {...props} />;
+  }
+);
+
+TableHead.displayName = "TableHead";

package/src/table-row.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTableRow, {
+  type TableRowProps as MuiTableRowProps,
+} from "@mui/material/TableRow";
+
+export type TableRowProps = MuiTableRowProps;
+
+export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+  (props, ref) => {
+    return <MuiTableRow ref={ref} {...props} />;
+  }
+);
+
+TableRow.displayName = "TableRow";

package/src/table.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiTable, { type TableProps as MuiTableProps } from "@mui/material/Table";
+
+export type TableProps = MuiTableProps;
+
+export const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  (props, ref) => {
+    return <MuiTable ref={ref} {...props} />;
+  }
+);
+
+Table.displayName = "Table";

package/src/tabs.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiTabs, { type TabsProps as MuiTabsProps } from "@mui/material/Tabs";
+
+export type TabsProps = MuiTabsProps;
+
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  (props, ref) => {
+    return <MuiTabs ref={ref} {...props} />;
+  }
+);
+
+Tabs.displayName = "Tabs";

package/src/text-field.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTextField, {
+  type TextFieldProps as MuiTextFieldProps,
+} from "@mui/material/TextField";
+
+export type TextFieldProps = MuiTextFieldProps;
+
+export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
+  (props, ref) => {
+    return <MuiTextField ref={ref} {...props} />;
+  }
+);
+
+TextField.displayName = "TextField";

package/src/theme/buildCssVariables.ts

@@ -13,6 +13,7 @@ import {
   PRIMARY_SCALE_KEYS,
   SECONDARY_SCALE_KEYS,
 } from "./constants";
+import { SPACING_SCALE } from "./spacing";
 import { getTypographyCssVars } from "./typography";
 import { hexToRgb, rgbToCssRgbString, rgba } from "./utils";
 
@@ -76,6 +77,8 @@ export function buildCssVariables(options: DesignThemeOptions): Record<string, s
     "--secondary-rgb": rgbToCssRgbString(secondaryRgb),
 
     // Brand (tenant)
+    "--primary": primary,
+    "--secondary": secondary,
     "--color-brand-primary": primary,
     "--color-brand-secondary": secondary,
 
@@ -118,6 +121,9 @@ export function buildCssVariables(options: DesignThemeOptions): Record<string, s
     "--opacity-disabled": String(OPACITY_UTILITY.disabled),
     "--opacity-hover": String(OPACITY_UTILITY.hover),
 
+    // Spacing (4px base: --space-1 … --space-12)
+    ...entriesToVars("--space-", SPACING_SCALE),
+
     // Semantic aliases (component-level tokens that alias foundation/extended)
     "--input-background": foundation.background.primary,
     "--input-border": foundation.border.default,

package/src/theme/createDesignTheme.ts

@@ -3,6 +3,7 @@
  * Primary and secondary are tenant-based (dynamic).
  */
 
+import "../mui-augmentation";
 import {
   createTheme,
   type ThemeOptions,
@@ -98,10 +99,13 @@ export function createDesignTheme(config: DesignThemeConfig) {
   const { primary, secondary } = config;
   const foundation = FOUNDATION_COLORS;
 
+  const primaryPalette = buildPrimaryScalePalette(primary);
+  const secondaryPalette = buildSecondaryScalePalette(secondary);
+
   const palette: PaletteOptions = {
     mode: "light",
-    primary: buildPrimaryScalePalette(primary),
-    secondary: buildSecondaryScalePalette(secondary),
+    primary: primaryPalette,
+    secondary: secondaryPalette,
     error: {
       main: FOUNDATION_COLORS.state.error,
     },
@@ -207,6 +211,118 @@ export function createDesignTheme(config: DesignThemeConfig) {
           },
         },
       },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: ({ ownerState }) => {
+            const palette =
+              ownerState.color === "secondary"
+                ? secondaryPalette
+                : primaryPalette;
+            const outlined = ownerState.outlined === true;
+            return {
+              borderRadius: 0,
+              textTransform: "none",
+              color: CONTRAST_DARK,
+              "&:hover": {
+                backgroundColor: palette[100],
+              },
+              "&.MuiToggleButtonGroup-lastButton, &.MuiToggleButtonGroup-middleButton":
+                outlined
+                  ? {
+                      borderLeft: `1px solid ${foundation.border.default}`,
+                      borderTop: `1px solid ${foundation.border.default}`,
+                    }
+                  : {},
+              "&.Mui-disabled.MuiToggleButtonGroup-lastButton, &.Mui-disabled.MuiToggleButtonGroup-middleButton":
+                outlined
+                  ? {
+                      borderLeft: `1px solid ${foundation.border.default}`,
+                      borderTop: `1px solid ${foundation.border.default}`,
+                    }
+                  : {},
+              "&.Mui-selected": outlined
+                ? {
+                    backgroundColor: palette[100],
+                    border: `1px solid ${palette.main}`,
+                    color: CONTRAST_DARK,
+                  }
+                : {
+                    backgroundColor: palette.main,
+                    color: palette.contrastText,
+                    "&:hover": {
+                      backgroundColor: palette.dark,
+                      color: palette.contrastText,
+                    },
+                  },
+            };
+          },
+        },
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 },
+                },
+              },
+            ],
+          },
+        },
+      },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 },
+                },
+              },
+            ],
+          },
+        },
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 68,
+                  height: 44,
+                  padding: 8,
+                  "& .MuiSwitch-switchBase": {
+                    padding: 8,
+                    "&.Mui-checked": {
+                      transform: "translateX(24px)",
+                    },
+                  },
+                  "& .MuiSwitch-thumb": {
+                    width: 28,
+                    height: 28,
+                  },
+                  "& .MuiSwitch-track": {
+                    height: 16,
+                    margin: "auto",
+                    borderRadius: 16 / 2,
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
       MuiCssBaseline: {
         styleOverrides: {
           ":root": {

package/src/theme/index.ts

@@ -27,6 +27,7 @@ export {
   OPACITY_UTILITY,
   CHART_COLORS,
 } from "./constants";
+export { SPACING_BASE_PX, SPACING_SCALE } from "./spacing";
 export {
   FONT_FAMILY_SANS,
   TYPOGRAPHY,

package/src/theme/spacing.ts

@@ -0,0 +1,23 @@
+/**
+ * Design system – Spacing scale (4px base).
+ * Matches tokens.css reference: --space-1 … --space-12.
+ */
+
+/** Base unit in pixels. All spacing tokens are multiples of this. */
+export const SPACING_BASE_PX = 4;
+
+/**
+ * Spacing scale: token name → CSS value (e.g. "1" → "4px").
+ * Keys match tokens.css: 1, 2, 3, 4, 5, 6, 8, 10, 12.
+ */
+export const SPACING_SCALE: Record<string, string> = {
+  "1": `${1 * SPACING_BASE_PX}px`,
+  "2": `${2 * SPACING_BASE_PX}px`,
+  "3": `${3 * SPACING_BASE_PX}px`,
+  "4": `${4 * SPACING_BASE_PX}px`,
+  "5": `${5 * SPACING_BASE_PX}px`,
+  "6": `${6 * SPACING_BASE_PX}px`,
+  "8": `${8 * SPACING_BASE_PX}px`,
+  "10": `${10 * SPACING_BASE_PX}px`,
+  "12": `${12 * SPACING_BASE_PX}px`,
+};

package/src/timeline-connector.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTimelineConnector, {
+  type TimelineConnectorProps as MuiTimelineConnectorProps,
+} from "@mui/lab/TimelineConnector";
+
+export type TimelineConnectorProps = MuiTimelineConnectorProps;
+
+export const TimelineConnector = React.forwardRef<HTMLDivElement, TimelineConnectorProps>(
+  (props, ref) => {
+    return <MuiTimelineConnector ref={ref} {...props} />;
+  }
+);
+
+TimelineConnector.displayName = "TimelineConnector";

package/src/timeline-content.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTimelineContent, {
+  type TimelineContentProps as MuiTimelineContentProps,
+} from "@mui/lab/TimelineContent";
+
+export type TimelineContentProps = MuiTimelineContentProps;
+
+export const TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(
+  (props, ref) => {
+    return <MuiTimelineContent ref={ref} {...props} />;
+  }
+);
+
+TimelineContent.displayName = "TimelineContent";

package/src/timeline-dot.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTimelineDot, {
+  type TimelineDotProps as MuiTimelineDotProps,
+} from "@mui/lab/TimelineDot";
+
+export type TimelineDotProps = MuiTimelineDotProps;
+
+export const TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(
+  (props, ref) => {
+    return <MuiTimelineDot ref={ref} {...props} />;
+  }
+);
+
+TimelineDot.displayName = "TimelineDot";

package/src/timeline-item.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTimelineItem, {
+  type TimelineItemProps as MuiTimelineItemProps,
+} from "@mui/lab/TimelineItem";
+
+export type TimelineItemProps = MuiTimelineItemProps;
+
+export const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
+  (props, ref) => {
+    return <MuiTimelineItem ref={ref} {...props} />;
+  }
+);
+
+TimelineItem.displayName = "TimelineItem";