@defisaver/ui 0.0.1

package/README.md

@@ -0,0 +1,104 @@
+# @defisaver/ui
+
+DeFi Saver design system — React components written in TypeScript and styled with [StyleX](https://stylexjs.com), **pre-compiled** so consumer apps need no StyleX tooling at all.
+
+> Local-only for now: the package is `private` and consumed via a packed tarball. npm publishing is a documented follow-up (see Roadmap).
+
+## How it works
+
+StyleX needs a compiler, and defisaver-app's esbuild pipeline doesn't have one. So this repo compiles StyleX at **library build time** (`@stylexjs/rollup-plugin`): `dist/` contains plain ESM JavaScript with the atomic class names already inlined, plus a single static `dist/styles.css`. Consumers just do:
+
+```tsx
+import { Panel, PanelHeader, PanelTitle, PanelFooter } from '@defisaver/ui';
+import '@defisaver/ui/styles.css'; // once, at the app entry
+```
+
+That works identically under esbuild, Vite, and Next.js — no Babel, no plugins.
+
+### Customizing components from the app
+
+Library styles are emitted inside `@layer`, and unlayered CSS beats layered CSS regardless of specificity. So the escape hatch is the one the app already knows: pass a `className` and write plain (S)CSS — a single class selector is enough, and media queries work like anywhere else:
+
+```scss
+// ChartPanel.module.scss — wins over the library defaults, no !important
+.chartHeader {
+  min-height: 44px;
+  justify-content: flex-start;
+
+  @media (max-width: 750px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+```
+
+```tsx
+<PanelHeader className={styles.chartHeader}>…</PanelHeader>
+```
+
+Only the properties you declare are overridden; everything else keeps the library value. The flip side: the library also yields to careless broad selectors (`.someParent span { … }`), same as any app-local component — keep overrides scoped to a class on the component itself.
+
+**A repeated override is a bug report against the design system.** If several call sites override the same property (say, three headers all forcing `min-height: 44px`), that's not customization — it's a missing variant or token. Request it here instead of copying the override.
+
+### Design tokens
+
+Tokens live in `src/tokens/*.stylex.ts` (`colors`, `space`, `radius`, `text`). The **spacing and radius scales are fully defined** — they're stable primitives, and as `defineConsts` they're inlined at compile time (zero CSS cost when unused). **Colors and typography are deliberately minimal**: a token is added the moment a component being ported needs it, never speculatively. The old app's full token inventory was audited (see git history / `~/.claude/plans` analysis) but not imported wholesale — most of it is legacy design debt, and every unused `defineVars` entry would ship as dead CSS to consumers. **Figma is the intended long-term source of truth for the token set** (sync pipeline TBD).
+
+Each value defers to defisaver-app's custom property with a standalone fallback, e.g. `var(--surface, #1F272E)` — inside the app, components follow `theme.scss` including `[data-theme]` switching with zero migration; standalone, the app's dark-theme fallbacks apply. Names mirror the app's (`--text-color-secondary` → `colors.textSecondary`) so porting stays mechanical.
+
+`src/tokens/tokens.test.ts` compiles every token file through a real `stylex.create()` as a regression guard.
+
+StyleX constraint: `defineVars`/`defineConsts` must live in `*.stylex.ts` files containing nothing else, named exports only.
+
+## Commands
+
+```bash
+npm run dev              # Storybook on :6006 (dev playground + docs)
+npm run test             # Vitest + React Testing Library
+npm run lint             # ESLint (org config + @stylexjs plugin), autofixes
+npm run typecheck        # tsc --noEmit
+npm run build            # Rollup (pre-compile StyleX, emit styles.css) + d.ts
+npm run pack:local       # build + npm pack → defisaver-ui-x.y.z.tgz
+```
+
+## Consuming from defisaver-app (local, for now)
+
+```bash
+# here
+npm run pack:local
+
+# in defisaver-app/client
+npm i ../../defisaver-ui/defisaver-ui-0.0.1.tgz
+```
+
+Then import components and add `import '@defisaver/ui/styles.css'` once at the app entry.
+
+## Adding a component
+
+1. Create `src/components/<Name>/` with `<Name>.tsx`, `<Name>.stories.tsx`, `<Name>.test.tsx`, `index.ts` (stories/tests are excluded from the build).
+2. Style with `stylex.create()`, using tokens from `src/tokens/` — add missing tokens there with `var(--app-var, fallback)` values, mirroring `defisaver-app/client/src/common/theme.scss`. Raw color literals in component styles **fail lint** (`propLimits` on `@stylexjs/valid-styles`) — a missing color means "add a token", never "inline a hex".
+3. Export it from `src/index.ts`.
+4. Verify: `npm run lint && npm run typecheck && npm test && npm run build`.
+
+When porting from `defisaver-app/client/src/elements/`, keep the public prop API identical so migration is a drop-in import swap.
+
+## Repo layout
+
+```
+src/
+├── tokens/            # *.stylex.ts — defineConsts/defineVars design tokens
+├── components/
+│   └── Panel/         # component + stories + tests, co-located
+└── index.ts           # public barrel export
+.storybook/            # Storybook 10, react-vite, uses vite.config.ts
+rollup.config.mjs      # publish build (pre-compiled JS + styles.css)
+vite.config.ts         # internal toolchain: Storybook + Vitest (StyleX unplugin)
+```
+
+## Roadmap (deferred, in rough order)
+
+- Migrate components from `defisaver-app/client/src/elements/` in dependency order (Icon → primitives → composites)
+- GitHub Actions CI (lint / typecheck / test / build / build-storybook)
+- Changesets versioning + npm publishing under `@defisaver` (drop `"private": true`)
+- `./tokens.stylex` source subpath export for StyleX-enabled consumers (future Next.js site)
+- `createTheme`-based ThemeProvider so themes work without the app's `theme.scss`

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type PanelSize = 's' | 'm';
+interface PanelSectionProps extends ComponentPropsWithoutRef<'div'> {
+    children: ReactNode;
+}
+interface PanelTitleProps extends ComponentPropsWithoutRef<'span'> {
+    children: ReactNode;
+}
+interface UncontrolledCollapseProps {
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    collapsed?: never;
+    onToggle?: never;
+}
+interface ControlledCollapseProps {
+    collapsed: boolean;
+    onToggle: () => void;
+    collapsible?: never;
+    defaultCollapsed?: never;
+}
+type PanelRootProps = Omit<ComponentPropsWithoutRef<'div'>, 'onToggle'> & {
+    children: ReactNode;
+    size?: PanelSize;
+} & (UncontrolledCollapseProps | ControlledCollapseProps);
+export declare const Panel: import("react").ForwardRefExoticComponent<PanelRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PanelHeader: import("react").ForwardRefExoticComponent<PanelSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PanelTitle: import("react").ForwardRefExoticComponent<PanelTitleProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const PanelBody: import("react").ForwardRefExoticComponent<PanelSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PanelFooter: import("react").ForwardRefExoticComponent<PanelSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Panel/Panel.js

@@ -0,0 +1,277 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState, useCallback, useId, useMemo, useContext } from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+const PanelContext = createContext({
+  size: 'm',
+  collapsible: false,
+  collapsed: false,
+  onToggle: () => {},
+  labelId: ''
+});
+const styles = {
+  header: {
+    kOIVth: "dsui-l10ott",
+    kmkexE: "dsui-1f1tjq8 dsui-9kvfbb",
+    kGNEyG: "dsui-6s0dn4",
+    kB7OPa: "dsui-9f619",
+    k1xSpc: "dsui-78zum5",
+    kjj79g: "dsui-1qughib",
+    kwRFfy: "dsui-shju75",
+    kZCmMZ: "dsui-67n0tv",
+    kVAEAm: "dsui-1n2onr6",
+    kL6WhQ: "dsui-1dy3hxy",
+    kfdmCh: "dsui-1q0q8m5",
+    kt9PQ7: "dsui-so031l dsui-1t1lzn6",
+    kIxVMA: "dsui-1vc0b6c",
+    ksF3WI: "dsui-16hifh2",
+    $$css: true
+  },
+  headerCollapsibleS: {
+    kZCmMZ: "dsui-izuyw3",
+    $$css: true
+  },
+  headerCollapsibleM: {
+    kZCmMZ: "dsui-ciflc3",
+    $$css: true
+  },
+  headerCollapsed: {
+    kmkexE: "dsui-1gj7el4 dsui-9kvfbb",
+    kL6WhQ: "dsui-16stqrj",
+    $$css: true
+  },
+  headerS: {
+    k8WAf4: "dsui-8p8ka2",
+    kAzted: "dsui-1gg8mnh",
+    $$css: true
+  },
+  headerM: {
+    k8WAf4: "dsui-1qmqf70",
+    kAzted: "dsui-bktkl8",
+    $$css: true
+  }
+};
+// stylex.props() produces the atomic class list (and sometimes inline vars);
+// fold the caller's className/style in after it so external overrides
+// survive the merge.
+const mergeExternal = (sx, className, style) => ({
+  ...sx,
+  className: [sx.className, className].filter(Boolean).join(' '),
+  ...(sx.style || style ? {
+    style: {
+      ...sx.style,
+      ...style
+    }
+  } : null)
+});
+// Private to Panel — a visual detail of the component, not a public icon.
+// Rendered with currentColor so it follows the toggle's token color.
+// Default (expanded) points down; collapsed rotates to point right.
+const Chevron = ({
+  size,
+  collapsed
+}) => {
+  const px = size === 'm' ? 16 : 14;
+  return jsx("svg", {
+    width: px,
+    height: px,
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    ...{
+      0: {
+        className: "dsui-1vlsjmz dsui-9kvfbb"
+      },
+      1: {
+        className: "dsui-1mz1xk5 dsui-9kvfbb dsui-9tu13d"
+      }
+    }[!!collapsed << 0],
+    children: jsx("path", {
+      d: "M9 5L6.09642 7.90358C6.04317 7.95683 5.95683 7.95683 5.90358 7.90358L3 5",
+      stroke: "currentColor",
+      strokeLinecap: "round"
+    })
+  });
+};
+const Panel = forwardRef(({
+  className,
+  style,
+  children,
+  size = 'm',
+  collapsible = false,
+  defaultCollapsed,
+  collapsed: controlledCollapsed,
+  onToggle,
+  ...rest
+}, ref) => {
+  const [ownCollapsed, setOwnCollapsed] = useState(defaultCollapsed ?? false);
+  const toggleOwn = useCallback(() => setOwnCollapsed(c => !c), []);
+  const labelId = useId();
+  const isControlled = controlledCollapsed !== undefined;
+  const context = useMemo(() => ({
+    size,
+    collapsible: isControlled || collapsible || defaultCollapsed !== undefined,
+    collapsed: isControlled ? controlledCollapsed : ownCollapsed,
+    onToggle: onToggle ?? toggleOwn,
+    labelId
+  }), [size, isControlled, collapsible, defaultCollapsed, controlledCollapsed, ownCollapsed, onToggle, toggleOwn, labelId]);
+  return jsx(PanelContext.Provider, {
+    value: context,
+    children: jsx("div", {
+      ref: ref,
+      ...rest,
+      ...mergeExternal({
+        className: "dsui-glcc71 dsui-zba1ul dsui-1y0btm7 dsui-mkeg23 dsui-b3r6kr dsui-1vg3ier dsui-78zum5 dsui-dt5ytf dsui-h8yej3"
+      }, className, style),
+      children: children
+    })
+  });
+});
+Panel.displayName = 'Panel';
+const PanelHeader = forwardRef(({
+  className,
+  style,
+  children,
+  ...rest
+}, ref) => {
+  const {
+    size,
+    collapsible,
+    collapsed,
+    onToggle,
+    labelId
+  } = useContext(PanelContext);
+  return jsxs("div", {
+    ref: ref,
+    ...rest,
+    ...mergeExternal(stylex.props(styles.header, size === 'm' ? styles.headerM : styles.headerS, collapsible && (size === 'm' ? styles.headerCollapsibleM : styles.headerCollapsibleS), collapsed && styles.headerCollapsed), className, style),
+    children: [collapsible &&
+    // Named by the title text when a PanelTitle is present (labelledby
+    // pointing at nothing is skipped), otherwise the aria-label fallback
+    // applies — so title-less headers still get a usable name.
+    jsx("button", {
+      type: "button",
+      "aria-expanded": !collapsed,
+      "aria-label": "Toggle panel",
+      "aria-labelledby": labelId,
+      onClick: onToggle,
+      ...{
+        0: {
+          className: "dsui-1717udv dsui-ng3xce dsui-wdigwf dsui-9kvfbb dsui-6s0dn4 dsui-jbqb8w dsui-uuh3xk dsui-83l8j1 dsui-1ypdohk dsui-3nfvp2 dsui-rotz4w dsui-l56j7k dsui-10l6tqk dsui-1hsy5kr dsui-1adtzmj dsui-3sa99s dsui-wa60dl dsui-1cpjm7i dsui-1hmns74 dsui-7z7f22 dsui-1qx5ct2 dsui-w4jnvo dsui-1xcb4hf"
+        },
+        1: {
+          className: "dsui-1717udv dsui-ng3xce dsui-wdigwf dsui-9kvfbb dsui-6s0dn4 dsui-jbqb8w dsui-uuh3xk dsui-83l8j1 dsui-1ypdohk dsui-3nfvp2 dsui-rotz4w dsui-l56j7k dsui-10l6tqk dsui-1hsy5kr dsui-1adtzmj dsui-3sa99s dsui-wa60dl dsui-1cpjm7i dsui-1hmns74 dsui-3s33r9 dsui-1fgtraw dsui-gd8bvy dsui-1rd3ygt"
+        }
+      }[!!(size === 'm') << 0],
+      children: jsx(Chevron, {
+        size: size,
+        collapsed: collapsed
+      })
+    }), children]
+  });
+});
+PanelHeader.displayName = 'PanelHeader';
+const PanelTitle = forwardRef(({
+  className,
+  style,
+  children,
+  ...rest
+}, ref) => {
+  const {
+    size,
+    labelId
+  } = useContext(PanelContext);
+  return jsx("span", {
+    ref: ref,
+    ...rest,
+    ...mergeExternal({
+      0: {
+        className: "dsui-xyeboe dsui-6s0dn4 dsui-83l8j1 dsui-3nfvp2 dsui-1kblbho dsui-sx9v3k dsui-1wfe3co"
+      },
+      1: {
+        className: "dsui-xyeboe dsui-6s0dn4 dsui-83l8j1 dsui-3nfvp2 dsui-1kblbho dsui-1aor607 dsui-1fc57z9"
+      }
+    }[!!(size === 'm') << 0], className, style),
+    children: jsx("span", {
+      id: labelId,
+      children: children
+    })
+  });
+});
+PanelTitle.displayName = 'PanelTitle';
+// Folds (rather than unmounts) while the panel is collapsed — see
+// styles.fold for the mechanism. Content stays mounted, so child state
+// (inputs, scroll positions) survives a collapse, like native <details>;
+// content that must truly unmount can be conditionally rendered by the
+// consumer in controlled mode. The consumer-facing div is the innermost
+// one, so className/style/ref behave exactly as before the fold existed.
+const PanelBody = forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  const {
+    collapsed
+  } = useContext(PanelContext);
+  return jsx("div", {
+    ...{
+      0: {
+        className: "dsui-b3r6kr dsui-px34qp dsui-9kvfbb dsui-rvj5dj dsui-1tu4anv dsui-npuxes"
+      },
+      1: {
+        className: "dsui-b3r6kr dsui-rvj5dj dsui-1j9udwn dsui-9kvfbb dsui-ihq33y dsui-lshs6z"
+      }
+    }[!!collapsed << 0],
+    children: jsx("div", {
+      ...{
+        className: "dsui-2lwn1j"
+      },
+      children: jsx("div", {
+        ref: ref,
+        ...rest,
+        children: children
+      })
+    })
+  });
+});
+PanelBody.displayName = 'PanelBody';
+const PanelFooter = forwardRef(({
+  className,
+  style,
+  children,
+  ...rest
+}, ref) => {
+  // A collapsed panel shows only its header — footer actions (pagination
+  // etc.) operate on the hidden body, so the footer folds in sync with it.
+  // Its top border rides on the inner content div, where the fold clips it
+  // away only as the row closes completely.
+  const {
+    collapsed
+  } = useContext(PanelContext);
+  return jsx("div", {
+    ...{
+      0: {
+        className: "dsui-b3r6kr dsui-px34qp dsui-9kvfbb dsui-rvj5dj dsui-1tu4anv dsui-npuxes"
+      },
+      1: {
+        className: "dsui-b3r6kr dsui-rvj5dj dsui-1j9udwn dsui-9kvfbb dsui-ihq33y dsui-lshs6z"
+      }
+    }[!!collapsed << 0],
+    children: jsx("div", {
+      ...{
+        className: "dsui-2lwn1j"
+      },
+      children: jsx("div", {
+        ref: ref,
+        ...rest,
+        ...mergeExternal({
+          className: "dsui-l10ott dsui-h5mxk0 dsui-114gu5o dsui-6s0dn4 dsui-9f619 dsui-78zum5 dsui-1qughib dsui-1gzt5ks dsui-13fuv20 dsui-178xt8z dsui-u0aao5"
+        }, className, style),
+        children: children
+      })
+    })
+  });
+});
+PanelFooter.displayName = 'PanelFooter';
+
+export { Panel, PanelBody, PanelFooter, PanelHeader, PanelTitle };

package/dist/components/Panel/index.d.ts

@@ -0,0 +1 @@
+export { Panel, PanelHeader, PanelTitle, PanelBody, PanelFooter, } from './Panel';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Panel, PanelHeader, PanelTitle, PanelBody, PanelFooter, } from './components/Panel';

package/dist/index.js

@@ -0,0 +1 @@
+export { Panel, PanelBody, PanelFooter, PanelHeader, PanelTitle } from './components/Panel/Panel.js';

package/dist/styles.css

@@ -0,0 +1,343 @@
+@layer priority1 {
+  :root, .dsui-1cp4su5 {
+    --dsui-1vymh5z: var(--surface, #1f272e);
+    --dsui-1ov11o: var(--surface-shade, #181f25);
+    --dsui-z4f854: var(--surface-border-surface, #252f37);
+    --dsui-1c3ib43: var(--text-color-secondary, #b2c1cc);
+    --dsui-1ew4bd3: var(--interaction-white-5-hover, #ffffff0d);
+  }
+}
+
+@layer priority2 {
+  .dsui-1717udv {
+    padding: 0;
+  }
+}
+
+@layer priority3 {
+  .dsui-glcc71 {
+    border-color: var(--dsui-z4f854);
+  }
+
+  .dsui-7z7f22 {
+    border-radius: var(--border-radius-medium, 6px);
+  }
+
+  .dsui-zba1ul {
+    border-radius: var(--border-radius-xl, 12px);
+  }
+
+  .dsui-3s33r9 {
+    border-radius: var(--border-radius-large, 8px);
+  }
+
+  .dsui-ng3xce {
+    border-style: none;
+  }
+
+  .dsui-1y0btm7 {
+    border-style: solid;
+  }
+
+  .dsui-mkeg23 {
+    border-width: 1px;
+  }
+
+  .dsui-xyeboe {
+    gap: var(--space-1-5, 6px);
+  }
+
+  .dsui-l10ott {
+    gap: var(--space-2, 8px);
+  }
+
+  .dsui-b3r6kr {
+    overflow: hidden;
+  }
+
+  .dsui-h5mxk0 {
+    padding-block: var(--space-1, 4px);
+  }
+
+  .dsui-8p8ka2 {
+    padding-block: var(--space-2, 8px);
+  }
+
+  .dsui-1qmqf70 {
+    padding-block: var(--space-2-5, 10px);
+  }
+
+  .dsui-114gu5o {
+    padding-inline: var(--space-2, 8px);
+  }
+
+  .dsui-wdigwf {
+    transition: background-color .2s, scale .15s ease-out;
+  }
+
+  .dsui-1f1tjq8 {
+    transition: border-bottom-color .25s cubic-bezier(.165, .84, .44, 1);
+  }
+
+  .dsui-1gj7el4 {
+    transition: border-bottom-color .2s cubic-bezier(.165, .84, .44, 1);
+  }
+
+  .dsui-px34qp {
+    transition: grid-template-rows .25s cubic-bezier(.165, .84, .44, 1), visibility .25s;
+  }
+
+  .dsui-1j9udwn {
+    transition: grid-template-rows .2s cubic-bezier(.165, .84, .44, 1), visibility .2s;
+  }
+
+  .dsui-1vlsjmz {
+    transition: transform .25s cubic-bezier(.165, .84, .44, 1);
+  }
+
+  .dsui-1mz1xk5 {
+    transition: transform .2s cubic-bezier(.165, .84, .44, 1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dsui-9kvfbb.dsui-9kvfbb {
+      transition: none;
+    }
+  }
+}
+
+@layer priority4 {
+  .dsui-6s0dn4 {
+    align-items: center;
+  }
+
+  .dsui-jbqb8w {
+    background-color: #0000;
+  }
+
+  .dsui-1vg3ier {
+    background-color: var(--dsui-1ov11o);
+  }
+
+  .dsui-9f619 {
+    box-sizing: border-box;
+  }
+
+  .dsui-83l8j1 {
+    color: var(--dsui-1c3ib43);
+  }
+
+  .dsui-1ypdohk {
+    cursor: pointer;
+  }
+
+  .dsui-78zum5 {
+    display: flex;
+  }
+
+  .dsui-rvj5dj {
+    display: grid;
+  }
+
+  .dsui-3nfvp2 {
+    display: inline-flex;
+  }
+
+  .dsui-dt5ytf {
+    flex-direction: column;
+  }
+
+  .dsui-sx9v3k {
+    font-size: var(--text-size-small, 12px);
+  }
+
+  .dsui-1aor607 {
+    font-size: var(--text-size-regular, 14px);
+  }
+
+  .dsui-1kblbho {
+    font-weight: var(--text-weight-semi-bold, 500);
+  }
+
+  .dsui-ihq33y {
+    grid-template-rows: 0fr;
+  }
+
+  .dsui-1tu4anv {
+    grid-template-rows: 1fr;
+  }
+
+  .dsui-rotz4w {
+    inset-inline-start: 8px;
+  }
+
+  .dsui-l56j7k {
+    justify-content: center;
+  }
+
+  .dsui-1qughib {
+    justify-content: space-between;
+  }
+
+  .dsui-1wfe3co {
+    line-height: 12px;
+  }
+
+  .dsui-1fc57z9 {
+    line-height: 20px;
+  }
+
+  .dsui-shju75 {
+    padding-inline-end: var(--space-2, 8px);
+  }
+
+  .dsui-izuyw3 {
+    padding-inline-start: 34px;
+  }
+
+  .dsui-ciflc3 {
+    padding-inline-start: 42px;
+  }
+
+  .dsui-67n0tv {
+    padding-inline-start: var(--space-3, 12px);
+  }
+
+  .dsui-10l6tqk {
+    position: absolute;
+  }
+
+  .dsui-1n2onr6 {
+    position: relative;
+  }
+
+  .dsui-1hsy5kr {
+    scale: 1;
+  }
+
+  .dsui-9tu13d {
+    transform: rotate(-90deg);
+  }
+
+  .dsui-3sa99s {
+    translate: 0 -50%;
+  }
+
+  .dsui-lshs6z {
+    visibility: hidden;
+  }
+
+  .dsui-npuxes {
+    visibility: visible;
+  }
+
+  .dsui-uuh3xk:hover {
+    background-color: var(--dsui-1ew4bd3);
+  }
+
+  .dsui-1adtzmj:active {
+    scale: .96;
+  }
+}
+
+@layer priority5 {
+  .dsui-16stqrj {
+    border-bottom-color: #0000;
+  }
+
+  .dsui-1dy3hxy {
+    border-bottom-color: var(--dsui-z4f854);
+  }
+
+  .dsui-1q0q8m5 {
+    border-bottom-style: solid;
+  }
+
+  .dsui-so031l {
+    border-bottom-width: 1px;
+  }
+
+  .dsui-1gzt5ks {
+    border-top-color: var(--dsui-z4f854);
+  }
+
+  .dsui-1vc0b6c {
+    border-top-left-radius: calc(var(--border-radius-xl, 12px) - 1px);
+  }
+
+  .dsui-16hifh2 {
+    border-top-right-radius: calc(var(--border-radius-xl, 12px) - 1px);
+  }
+
+  .dsui-13fuv20 {
+    border-top-style: solid;
+  }
+
+  .dsui-178xt8z {
+    border-top-width: 1px;
+  }
+
+  .dsui-1qx5ct2 {
+    height: 20px;
+  }
+
+  .dsui-1fgtraw {
+    height: 28px;
+  }
+
+  .dsui-2lwn1j {
+    min-height: 0;
+  }
+
+  .dsui-u0aao5 {
+    min-height: 36px;
+  }
+
+  .dsui-1gg8mnh {
+    min-height: 44px;
+  }
+
+  .dsui-bktkl8 {
+    min-height: 56px;
+  }
+
+  .dsui-wa60dl {
+    top: 50%;
+  }
+
+  .dsui-h8yej3 {
+    width: 100%;
+  }
+
+  .dsui-w4jnvo {
+    width: 20px;
+  }
+
+  .dsui-gd8bvy {
+    width: 28px;
+  }
+
+  .dsui-1t1lzn6:last-child {
+    border-bottom-width: 0;
+  }
+}
+
+@layer priority6 {
+  .dsui-1xcb4hf:before {
+    inset: -10px;
+  }
+
+  .dsui-1rd3ygt:before {
+    inset: -6px;
+  }
+}
+
+@layer priority7 {
+  .dsui-1cpjm7i:before {
+    content: "";
+  }
+
+  .dsui-1hmns74:before {
+    position: absolute;
+  }
+}

package/dist/tokens/colors.stylex.d.ts

@@ -0,0 +1,8 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const colors: stylex.VarGroup<Readonly<{
+    surface: string;
+    surfaceShade: string;
+    surfaceBorderSurface: string;
+    textSecondary: string;
+    white5Hover: string;
+}>, symbol>;

package/dist/tokens/radius.stylex.d.ts

@@ -0,0 +1,9 @@
+export declare const radius: {
+    small: string;
+    medium: string;
+    large: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    fullyRounded: string;
+};

package/dist/tokens/spacing.stylex.d.ts

@@ -0,0 +1,26 @@
+export declare const space: {
+    px1: string;
+    px2: string;
+    px4: string;
+    px6: string;
+    px8: string;
+    px10: string;
+    px12: string;
+    px16: string;
+    px20: string;
+    px24: string;
+    px28: string;
+    px32: string;
+    px36: string;
+    px40: string;
+    px44: string;
+    px48: string;
+    px52: string;
+    px56: string;
+    px60: string;
+    px64: string;
+    px68: string;
+    px72: string;
+    px76: string;
+    px80: string;
+};

package/dist/tokens/typography.stylex.d.ts

@@ -0,0 +1,5 @@
+export declare const text: {
+    sizeSmall: string;
+    sizeRegular: string;
+    weightSemiBold: string;
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@defisaver/ui",
+  "version": "0.0.1",
+  "description": "DeFi Saver design system — React components styled with StyleX, pre-compiled so consumers need no StyleX tooling.",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rollup -c && tsc -p tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "pack:local": "npm run build && npm pack"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "dependencies": {
+    "@stylexjs/stylex": "^0.19.0"
+  },
+  "devDependencies": {
+    "@defisaver/eslint-config": "^2.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "@stylexjs/eslint-plugin": "^0.19.0",
+    "@stylexjs/rollup-plugin": "^0.19.0",
+    "@stylexjs/unplugin": "^0.19.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.20.0",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "eslint": "^9.39.4",
+    "jsdom": "^29.1.1",
+    "playwright": "^1.61.1",
+    "prettier": "^3.9.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.62.2",
+    "storybook": "^10.4.6",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.9"
+  }
+}