@wealthx/ui 0.0.1 → 1.0.1

package/src/timeline-separator.tsx

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

package/src/timeline.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTimeline, {
+  type TimelineProps as MuiTimelineProps,
+} from "@mui/lab/Timeline";
+
+export type TimelineProps = MuiTimelineProps;
+
+export const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(
+  (props, ref) => {
+    return <MuiTimeline ref={ref} {...props} />;
+  }
+);
+
+Timeline.displayName = "Timeline";

package/src/toggle-button-group.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import MuiToggleButtonGroup, {
+  type ToggleButtonGroupProps as MuiToggleButtonGroupProps,
+} from "@mui/material/ToggleButtonGroup";
+
+export type ToggleButtonGroupProps = MuiToggleButtonGroupProps;
+
+/**
+ * Wrapper around MUI ToggleButtonGroup.
+ * Always exclusive with at least one option active (deselecting the selected option is ignored).
+ */
+export interface WealthxToggleButtonGroupProps
+  extends Omit<MuiToggleButtonGroupProps, "onChange" | "exclusive"> {
+  onChange?: MuiToggleButtonGroupProps["onChange"];
+}
+
+export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, WealthxToggleButtonGroupProps>(
+  ({ onChange, ...props }, ref) => {
+    const handleChange: MuiToggleButtonGroupProps["onChange"] = (event, value) => {
+      if (value == null) return;
+      onChange?.(event, value);
+    };
+
+    return (
+      <MuiToggleButtonGroup
+        ref={ref}
+        {...props}
+        exclusive
+        onChange={handleChange}
+      />
+    );
+  }
+);
+
+ToggleButtonGroup.displayName = "ToggleButtonGroup";

package/src/toggle-button.tsx

@@ -0,0 +1,15 @@
+import "./mui-augmentation";
+import React from "react";
+import MuiToggleButton, {
+  type ToggleButtonProps as MuiToggleButtonProps,
+} from "@mui/material/ToggleButton";
+
+export type ToggleButtonProps = MuiToggleButtonProps;
+
+export const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  (props, ref) => {
+    return <MuiToggleButton ref={ref} {...props} />;
+  }
+);
+
+ToggleButton.displayName = "ToggleButton";

package/src/tooltip.tsx

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

package/src/typography.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiTypography, {
+  type TypographyProps as MuiTypographyProps,
+} from "@mui/material/Typography";
+
+export type TypographyProps = MuiTypographyProps;
+
+export const Typography = React.forwardRef<HTMLElement, TypographyProps>(
+  (props, ref) => {
+    return <MuiTypography ref={ref} {...props} />;
+  }
+);
+
+Typography.displayName = "Typography";

package/tsup.config.ts

@@ -1,7 +1,95 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig((options) => ({
-  entryPoints: ["src/button.tsx", "src/theme/index.ts"],
+  entryPoints: [
+    "src/accordion.tsx",
+    "src/accordion-summary.tsx",
+    "src/accordion-details.tsx",
+    "src/alert.tsx",
+    "src/app-bar.tsx",
+    "src/autocomplete.tsx",
+    "src/avatar.tsx",
+    "src/backdrop.tsx",
+    "src/badge.tsx",
+    "src/box.tsx",
+    "src/bottom-navigation.tsx",
+    "src/bottom-navigation-action.tsx",
+    "src/breadcrumbs.tsx",
+    "src/button.tsx",
+    "src/button-group.tsx",
+    "src/card.tsx",
+    "src/card-content.tsx",
+    "src/card-actions.tsx",
+    "src/card-header.tsx",
+    "src/card-media.tsx",
+    "src/charts/index.ts",
+    "src/checkbox.tsx",
+    "src/chip.tsx",
+    "src/container.tsx",
+    "src/dialog.tsx",
+    "src/dialog-title.tsx",
+    "src/dialog-content.tsx",
+    "src/dialog-actions.tsx",
+    "src/divider.tsx",
+    "src/drawer.tsx",
+    "src/fab.tsx",
+    "src/form-control.tsx",
+    "src/grid.tsx",
+    "src/icon-button.tsx",
+    "src/image-list.tsx",
+    "src/image-list-item.tsx",
+    "src/input-label.tsx",
+    "src/link.tsx",
+    "src/list.tsx",
+    "src/list-item.tsx",
+    "src/list-item-text.tsx",
+    "src/list-item-icon.tsx",
+    "src/masonry.tsx",
+    "src/menu.tsx",
+    "src/menu-item.tsx",
+    "src/pagination.tsx",
+    "src/paper.tsx",
+    "src/progress.tsx",
+    "src/radio.tsx",
+    "src/radio-group.tsx",
+    "src/rating.tsx",
+    "src/select.tsx",
+    "src/skeleton.tsx",
+    "src/slider.tsx",
+    "src/snackbar.tsx",
+    "src/speed-dial.tsx",
+    "src/speed-dial-action.tsx",
+    "src/stack.tsx",
+    "src/stepper.tsx",
+    "src/step.tsx",
+    "src/step-label.tsx",
+    "src/step-content.tsx",
+    "src/switch.tsx",
+    "src/tab.tsx",
+    "src/tabs.tsx",
+    "src/tab-panel.tsx",
+    "src/tab-context.tsx",
+    "src/tab-list.tsx",
+    "src/table.tsx",
+    "src/table-body.tsx",
+    "src/table-cell.tsx",
+    "src/table-container.tsx",
+    "src/table-head.tsx",
+    "src/table-row.tsx",
+    "src/text-field.tsx",
+    "src/theme/index.ts",
+    "src/timeline.tsx",
+    "src/timeline-item.tsx",
+    "src/timeline-separator.tsx",
+    "src/timeline-connector.tsx",
+    "src/timeline-dot.tsx",
+    "src/timeline-content.tsx",
+    "src/toggle-button.tsx",
+    "src/toggle-button-group.tsx",
+    "src/selection-button-group.tsx",
+    "src/tooltip.tsx",
+    "src/typography.tsx",
+  ],
   format: ["cjs", "esm"],
   dts: true,
   external: ["react", "react-dom"],

package/README.md

@@ -1,124 +0,0 @@
-# @wealthx/ui
-
-UI components and design system theme for WealthX. Built on [MUI (Material UI)](https://mui.com/) with a tenant-based color system, typography tokens, and CSS variables.
-
-## Installation
-
-```bash
-yarn add @wealthx/ui @mui/material @emotion/react @emotion/styled react react-dom
-```
-
-**Peer dependencies:** `react` and `react-dom` (^18.3.1). MUI packages are listed as dependencies; ensure your app satisfies them or install as needed.
-
-## Quick start
-
-Wrap your app with `ThemeProvider` and use design system components:
-
-```tsx
-import { ThemeProvider } from "@wealthx/ui/theme";
-import { Button } from "@wealthx/ui/button";
-
-function App() {
-  return (
-    <ThemeProvider primary="#33FF99" secondary="#162029">
-      <Button variant="contained" color="primary">
-        Primary action
-      </Button>
-    </ThemeProvider>
-  );
-}
-```
-
-`ThemeProvider` applies the MUI theme and injects design-system CSS variables. `primary` and `secondary` are optional; omit them to use the default brand colors.
-
-## Exports
-
-| Specifier           | Description                          |
-|---------------------|--------------------------------------|
-| `@wealthx/ui/button` | Button component (MUI Button wrapper) |
-| `@wealthx/ui/theme` | Theme provider, theme factory, tokens, typography, utilities |
-
-## Theme
-
-### ThemeProvider
-
-Provides the MUI theme and design-system CSS variables. Use it once at the root (e.g. `App`).
-
-```tsx
-import { ThemeProvider } from "@wealthx/ui/theme";
-
-<ThemeProvider
-  primary="#33FF99"   // optional; tenant primary
-  secondary="#162029" // optional; tenant secondary
-  injectCssVariables={true} // default: inject :root CSS variables
->
-  {children}
-</ThemeProvider>
-```
-
-### createDesignTheme
-
-Build an MUI theme with the design system palette (e.g. for custom providers or testing):
-
-```tsx
-import { createDesignTheme } from "@wealthx/ui/theme";
-
-const theme = createDesignTheme({ primary: "#33FF99", secondary: "#162029" });
-```
-
-### CSS variables
-
-When using `ThemeProvider`, the library injects CSS variables such as:
-
-- **Brand:** `--color-brand-primary`, `--color-brand-secondary`
-- **Text:** `--color-text-primary`, `--color-text-secondary`, `--color-text-disabled`, `--color-text-inverse`
-- **Background:** `--color-background-primary`, `--color-background-secondary`, `--color-background-tertiary`, `--color-background-elevated`
-- **Borders:** `--color-border-default`, `--color-border-focus`, `--color-border-error`
-- **Primary scale:** `--primary-50` … `--primary-900` (derived from `primary`)
-
-Use them in your styles or MUI `sx` (e.g. `color: "var(--color-text-primary)"`).
-
-### Tokens and utilities
-
-From `@wealthx/ui/theme` you can also use:
-
-- **Colors:** `FOUNDATION_COLORS`, `GRAY_SCALE`, `ACCENTS`, `CHART_COLORS`, `OPACITY_UTILITY`
-- **Typography:** `TYPOGRAPHY`, `getTypographyCssVars`, `getResponsiveFontOverrides`, `VIEWPORT_LABELS`, `VIEWPORT_MAX_WIDTH`, etc.
-- **Utils:** `getContrastText`, `hexToRgb`, `rgba`, `getLuminance`, `buildOpacityScale`, and related helpers
-
-## Components
-
-### Button
-
-MUI `Button` re-exported for consistent use with the design theme. Supports all MUI Button props (`variant`, `color`, `size`, `disabled`, `loading`, `startIcon`, `endIcon`, etc.).
-
-```tsx
-import { Button } from "@wealthx/ui/button";
-
-<Button variant="contained" color="primary">Save</Button>
-<Button variant="outlined" color="secondary" startIcon={<SendIcon />}>Send</Button>
-```
-
-## Building
-
-From the repo root:
-
-```bash
-yarn build
-```
-
-This compiles the package with [tsup](https://tsup.egoist.dev/) into `dist/` (ESM and CJS). Types are emitted (`.d.ts` / `.d.mts`).
-
-## Documentation
-
-The design system is documented in Storybook in the `apps/docs` app. From the repo root:
-
-```bash
-yarn dev
-```
-
-Then open the Storybook URL (e.g. `http://localhost:6006`) for components, colors, and typography.
-
-## License
-
-MIT