@stridge/kit 0.1.0-alpha.0

package/dist/shared/ui/Badge/Badge.d.ts

@@ -0,0 +1,89 @@
+import { ComponentProps, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/ui/Badge/Badge.d.ts
+/**
+ * Semantic color palette for badges.
+ *
+ * - `primary` / `secondary` — brand surfaces.
+ * - `success` / `danger` / `warning` / `info` — status accents.
+ */
+type BadgeColor = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+/**
+ * Visual treatment for the badge surface.
+ *
+ * - `contained` — filled background in the chosen color.
+ * - `outline` — transparent background with a colored border and text.
+ */
+type BadgeVariant = "contained" | "outline";
+/**
+ * Size preset for the badge.
+ *
+ * - `sm` — compact; default for inline status chips.
+ * - `md` — standard.
+ * - `lg` — large; for standalone labels.
+ */
+type BadgeSize = "sm" | "md" | "lg";
+/**
+ * Border-radius preset for the badge pill.
+ *
+ * - `sm` — slightly rounded corners.
+ * - `md` — moderate radius.
+ * - `lg` — fully pill-shaped.
+ */
+type BadgeRoundness = "sm" | "md" | "lg";
+/**
+ * Inline status chip with optional leading and trailing icon slots. Renders as a `<span role="presentation">`.
+ *
+ * Combine `color` and `variant` to express semantic state: `color="success" variant="contained"` for a filled
+ * confirmation chip, `color="danger" variant="outline"` for a bordered error label.
+ *
+ * @example
+ * ```tsx
+ * <Badge color="success" variant="contained" size="sm">
+ *   Confirmed
+ * </Badge>
+ * ```
+ */
+declare function Badge({
+  color,
+  variant,
+  size,
+  roundness,
+  prefix,
+  suffix,
+  className,
+  style,
+  children,
+  ...props
+}: Badge.Props): _$react_jsx_runtime0.JSX.Element;
+declare namespace Badge {
+  type Props = Omit<ComponentProps<"span">, "color" | "prefix"> & {
+    /**
+     * Semantic color accent. Defaults to `"primary"`.
+     */
+    color?: BadgeColor;
+    /**
+     * Surface treatment — filled or outlined. Defaults to `"outline"`.
+     */
+    variant?: BadgeVariant;
+    /**
+     * Size preset. Defaults to `"sm"`.
+     */
+    size?: BadgeSize;
+    /**
+     * Border-radius preset. Defaults to `"sm"`.
+     */
+    roundness?: BadgeRoundness;
+    /**
+     * Leading icon slot. Pass the raw icon element; sizing is applied automatically.
+     */
+    prefix?: ReactNode;
+    /**
+     * Trailing icon slot. Pass the raw icon element; sizing is applied automatically.
+     */
+    suffix?: ReactNode;
+  };
+}
+//#endregion
+export { Badge, BadgeColor, BadgeRoundness, BadgeSize, BadgeVariant };

package/dist/shared/ui/Badge/Badge.js

@@ -0,0 +1 @@
+import{joinClassNames as e}from"../../utils/joinClassNames.js";import{BADGE_SLOTS as t}from"./Badge.slots.js";import{containedColorStyles as n,iconSizeStyles as r,outlineColorStyles as i,roundnessStyles as a,sizeStyles as o,styles as s}from"./Badge.styles.js";import{cloneElement as c,isValidElement as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";function p({color:c=`primary`,variant:l=`outline`,size:p=`sm`,roundness:h=`sm`,prefix:g,suffix:_,className:v,style:y,children:b,...x}){let S=f.props(r[p]),C=f.props(s.base,o[p],a[h],l===`contained`?n[c]:i[c]);return d(`span`,{role:`presentation`,"data-stridge-slot":t.root,...x,className:e(C.className,v),style:{...C.style,...y},children:[g?u(`span`,{"data-icon":`inline-start`,...S,children:m(g)}):null,b,_?u(`span`,{"data-icon":`inline-end`,...S,children:m(_)}):null]})}function m(e){if(!l(e))return e;let t=f.props(s.iconSvg);return c(e,{className:[e.props.className,t.className].filter(Boolean).join(` `),style:{...e.props.style,...t.style}})}export{p as Badge};

package/dist/shared/ui/Badge/Badge.slots.d.ts

@@ -0,0 +1,7 @@
+//#region src/shared/ui/Badge/Badge.slots.d.ts
+declare const BADGE_SLOTS: {
+  readonly root: "badge";
+};
+type BadgeSlot = (typeof BADGE_SLOTS)[keyof typeof BADGE_SLOTS];
+//#endregion
+export { BADGE_SLOTS, BadgeSlot };

package/dist/shared/ui/Badge/Badge.slots.js

@@ -0,0 +1 @@
+const e={root:`badge`};export{e as BADGE_SLOTS};

package/dist/shared/ui/Badge/Badge.styles.js

@@ -0,0 +1 @@
+const e={base:{"Badge__styles.base":`Badge__styles.base`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`xeq5yr9`,"whiteSpace-khDVqt":`xuxw1ft`,"borderRadius-kaIpWk":`x12ur2as`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x9r1u3d`,"fontFamily-kMv6JI":`xlaww2m`,"fontWeight-k63SB2":`x1qvi77d`,"transitionProperty-k1ekBW":`x1eaenvl`,"transitionDuration-kIyJzY":`xx6bhzk`,"transitionTimingFunction-kAMwcw":`x9lcvmn`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:4`},iconSvg:{"Badge__styles.iconSvg":`Badge__styles.iconSvg`,"display-k1xSpc":`x1lliihq`,"width-kzqmXN":`x15vhz18`,"height-kZKoxP":`xlzyvqe`,"minWidth-k7Eaqz":`xslf67s`,"minHeight-kAzted":`x1xaadd7`,"maxWidth-ks0D6T":`x12pq5kg`,"maxHeight-kskxy":`x1akyapa`,"flexShrink-kmuXW":`x2lah0s`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:21`}},t={sm:{"Badge__sizeStyles.sm":`Badge__sizeStyles.sm`,"minHeight-kAzted":`xe0957l`,"gap-kOIVth":`x1r05nms`,"paddingInline-kg3NbH":`xxztuhb`,"fontSize-kGuDYH":`x1oae1zf`,"lineHeight-kLWn49":`x14vj8e1`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:33`},md:{"Badge__sizeStyles.md":`Badge__sizeStyles.md`,"minHeight-kAzted":`xj9xw9b`,"gap-kOIVth":`x1r05nms`,"paddingInline-kg3NbH":`x1fk34n2`,"fontSize-kGuDYH":`x14qa7mu`,"lineHeight-kLWn49":`x14vj8e1`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:40`},lg:{"Badge__sizeStyles.lg":`Badge__sizeStyles.lg`,"minHeight-kAzted":`x1rz828m`,"gap-kOIVth":`xpj7pl4`,"paddingInline-kg3NbH":`x13s4r1c`,"fontSize-kGuDYH":`xmnoevb`,"lineHeight-kLWn49":`x14vj8e1`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:47`}},n={sm:{"Badge__roundnessStyles.sm":`Badge__roundnessStyles.sm`,"borderRadius-kaIpWk":`x6i6fhv`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:56`},md:{"Badge__roundnessStyles.md":`Badge__roundnessStyles.md`,"borderRadius-kaIpWk":`xmx9ex2`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:59`},lg:{"Badge__roundnessStyles.lg":`Badge__roundnessStyles.lg`,"borderRadius-kaIpWk":`x10hpsqq`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:62`}},r={sm:{"Badge__iconSizeStyles.sm":`Badge__iconSizeStyles.sm`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`xsmyaan`,"height-kZKoxP":`x1kpxq89`,"fontSize-kGuDYH":`xfifm61`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:67`},md:{"Badge__iconSizeStyles.md":`Badge__iconSizeStyles.md`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`x6jxa94`,"height-kZKoxP":`x1v9usgg`,"fontSize-kGuDYH":`xif65rj`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:77`},lg:{"Badge__iconSizeStyles.lg":`Badge__iconSizeStyles.lg`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`x1kky2od`,"height-kZKoxP":`xlup9mm`,"fontSize-kGuDYH":`x1j61zf2`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:87`}},i={primary:{"Badge__containedColorStyles.primary":`Badge__containedColorStyles.primary`,"backgroundColor-kWkggS":`xdmxa9o`,"color-kMwMTN":`x1kho0d4`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:99`},secondary:{"Badge__containedColorStyles.secondary":`Badge__containedColorStyles.secondary`,"backgroundColor-kWkggS":`xldstci`,"color-kMwMTN":`x1xr5t3o`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:103`},success:{"Badge__containedColorStyles.success":`Badge__containedColorStyles.success`,"backgroundColor-kWkggS":`x1yy7n3w`,"color-kMwMTN":`xwiqrka`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:107`},danger:{"Badge__containedColorStyles.danger":`Badge__containedColorStyles.danger`,"backgroundColor-kWkggS":`xfhhmty`,"color-kMwMTN":`x19vemxs`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:111`},warning:{"Badge__containedColorStyles.warning":`Badge__containedColorStyles.warning`,"backgroundColor-kWkggS":`xpm24si`,"color-kMwMTN":`x1a3v400`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:115`},info:{"Badge__containedColorStyles.info":`Badge__containedColorStyles.info`,"backgroundColor-kWkggS":`xivzh3d`,"color-kMwMTN":`x1b9tnpo`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:119`}},a={primary:{"Badge__outlineColorStyles.primary":`Badge__outlineColorStyles.primary`,"borderColor-kVAM5u":`x2dcuha`,"color-kMwMTN":`x1me39qh`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:125`},secondary:{"Badge__outlineColorStyles.secondary":`Badge__outlineColorStyles.secondary`,"borderColor-kVAM5u":`x12c9lpl`,"color-kMwMTN":`x1xr5t3o`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:129`},success:{"Badge__outlineColorStyles.success":`Badge__outlineColorStyles.success`,"borderColor-kVAM5u":`xb4kgwu`,"color-kMwMTN":`xwiqrka`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:133`},danger:{"Badge__outlineColorStyles.danger":`Badge__outlineColorStyles.danger`,"borderColor-kVAM5u":`x1smv8d1`,"color-kMwMTN":`x19vemxs`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:137`},warning:{"Badge__outlineColorStyles.warning":`Badge__outlineColorStyles.warning`,"borderColor-kVAM5u":`x1kw7hx1`,"color-kMwMTN":`x1a3v400`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:141`},info:{"Badge__outlineColorStyles.info":`Badge__outlineColorStyles.info`,"borderColor-kVAM5u":`x1awroyi`,"color-kMwMTN":`x1b9tnpo`,$$css:`@stridge/kit:src/shared/ui/Badge/Badge.styles.ts:145`}};export{i as containedColorStyles,r as iconSizeStyles,a as outlineColorStyles,n as roundnessStyles,t as sizeStyles,e as styles};

package/dist/shared/ui/Badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeColor, BadgeRoundness, BadgeSize, BadgeVariant } from "./Badge.js";
+import { BADGE_SLOTS, BadgeSlot } from "./Badge.slots.js";

package/dist/shared/ui/Badge/index.js

@@ -0,0 +1 @@
+import"./Badge.slots.js";import"./Badge.js";

package/dist/shared/ui/Button/Button.d.ts

@@ -0,0 +1,82 @@
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { Button } from "@base-ui/react/button";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/shared/ui/Button/Button.d.ts
+/**
+ * Visual treatment applied to the button surface.
+ *
+ * - `default` — primary CTA surface.
+ * - `secondary` — muted surface used by widget header controls.
+ * - `ghost` — chromeless; inherits parent color, lifts to `surfaceHover` on hover.
+ */
+type ButtonVariant = "default" | "secondary" | "ghost";
+/**
+ * Size preset applied to the button.
+ *
+ * - `default` — 36px tall; general-purpose.
+ * - `sm` — 28px tall; compact text variant for inline and footer affordances.
+ * - `cta` — 46px tall; bakes in canvas-spec CTA typography (15px / semibold) so gateway footers don't redeclare it.
+ * - `icon` — 36×36px square; no padding.
+ * - `icon-sm` — 28×28px square; radius clamped to `min(button-radius, 9px)`.
+ */
+type ButtonSize = "default" | "sm" | "cta" | "icon" | "icon-sm";
+/**
+ * Pressable button built on Base UI's `Button` primitive. Supports leading and trailing icon slots,
+ * a loading state, and a `render` prop for render-slot indirection via `useRender`.
+ *
+ * Variants: `default` (primary CTA), `secondary` (muted surface), `ghost` (chromeless).
+ *
+ * Sizes: `default` (36px), `sm` (28px compact), `cta` (46px block), `icon` (36×36px), `icon-sm` (28×28px).
+ *
+ * When `isLoading` is `true`, the `prefix` slot is replaced by a spinning loader and the button is
+ * disabled for the duration.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default" size="cta" isLoading={isPending}>
+ *   Confirm
+ * </Button>
+ * ```
+ */
+declare function Button$1({
+  prefix,
+  suffix,
+  children,
+  disabled,
+  variant,
+  size,
+  isLoading,
+  render,
+  ...props
+}: Button$1.Props): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+declare namespace Button$1 {
+  type BaseProps = Omit<Button.Props & useRender.ComponentProps<typeof Button>, "prefix" | "suffix">;
+  export type Props = BaseProps & {
+    /**
+     * Visual treatment. Defaults to `"default"`.
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size preset. Defaults to `"default"`.
+     */
+    size?: ButtonSize;
+    /**
+     * Leading icon slot. When `isLoading` is `true`, the spinner replaces this slot.
+     */
+    prefix?: ReactNode;
+    /**
+     * Trailing icon slot.
+     */
+    suffix?: ReactNode;
+    /**
+     * When `true`, replaces the `prefix` slot with a spinning loader and disables the button.
+     * Defaults to `false`.
+     */
+    isLoading?: boolean;
+  };
+  export {};
+}
+//#endregion
+export { Button$1 as Button, ButtonSize, ButtonVariant };

package/dist/shared/ui/Button/Button.js

@@ -0,0 +1 @@
+"use client";import{LoaderIcon as e}from"../../icons/LoaderIcon.js";import"../../../icons/index.js";import{BUTTON_SLOTS as t}from"./Button.slots.js";import{iconSizeStyles as n,sizeAdjustmentStyles as r,sizeStyles as i,styles as a,variantStyles as o}from"./Button.styles.js";import{Fragment as s,cloneElement as c,isValidElement as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";import{Button as p}from"@base-ui/react/button";import{mergeProps as m}from"@base-ui/react/merge-props";import{useRender as h}from"@base-ui/react/use-render";function g({prefix:c,suffix:l,children:g,disabled:v,variant:y=`default`,size:b=`default`,isLoading:x=!1,render:S=u(p,{}),...C}){let w=!!c||x,T=!!l,E=!g&&(w||T||x),D=f.props(n[b]);return h({defaultTagName:`button`,render:S,props:m({"data-stridge-slot":t.root,"data-icon-only":E?``:void 0,disabled:x||v,children:d(s,{children:[x?u(`span`,{"data-icon":`inline-start`,...D,children:u(e,{"aria-label":`loading`,...f.props(a.loader)})}):c?u(`span`,{"data-icon":`inline-start`,...D,children:_(c)}):null,g,l?u(`span`,{"data-icon":`inline-end`,...D,children:_(l)}):null]}),...f.props(a.base,o[y],i[b],w&&!E&&r.withPrefix,T&&!E&&r.withSuffix)},C)})}function _(e){if(!l(e))return e;let t=f.props(a.iconSvg);return c(e,{className:[e.props.className,t.className].filter(Boolean).join(` `),style:{...e.props.style,...t.style}})}export{g as Button};

package/dist/shared/ui/Button/Button.slots.d.ts

@@ -0,0 +1,7 @@
+//#region src/shared/ui/Button/Button.slots.d.ts
+declare const BUTTON_SLOTS: {
+  readonly root: "button";
+};
+type ButtonSlot = (typeof BUTTON_SLOTS)[keyof typeof BUTTON_SLOTS];
+//#endregion
+export { BUTTON_SLOTS, ButtonSlot };

package/dist/shared/ui/Button/Button.slots.js

@@ -0,0 +1 @@
+const e={root:`button`};export{e as BUTTON_SLOTS};

package/dist/shared/ui/Button/Button.styles.js

@@ -0,0 +1 @@
+const e={base:{"Button__styles.base":`Button__styles.base`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"boxSizing-kB7OPa":`x9f619`,"cursor-kkrTdU":`x1ypdohk`,"userSelect-kfSwDN":`x87ps6o`,"whiteSpace-khDVqt":`xuxw1ft`,"borderRadius-kaIpWk":`x1s7mj9v`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x9r1u3d`,"backgroundClip-kHypHr":`xx83zyx`,"fontFamily-kMv6JI":`xlaww2m`,"fontWeight-k63SB2":`xi0sa8g`,"fontSize-kGuDYH":`x14qa7mu`,"lineHeight-kLWn49":`x14vj8e1`,"outline-kI3sdo":`x1a2a7pz`,"textDecoration-kybGjl":`x1hl2dhg`,"transitionProperty-k1ekBW":`xcnuv27`,"transitionDuration-kIyJzY":`xx6bhzk`,"transitionTimingFunction-kAMwcw":`x9lcvmn`,":focus-visible_borderColor-kOJeXU":`x1mt3fz5`,":focus-visible_boxShadow-kEtg5x":`x159teg`,":disabled_pointerEvents-k7HAVu":`xaqnwrm`,":disabled_opacity-kWCcOm":`xijokvz`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:12`},loader:{"Button__styles.loader":`Button__styles.loader`,"display-k1xSpc":`x1lliihq`,"width-kzqmXN":`x15vhz18`,"height-kZKoxP":`xlzyvqe`,"animationName-kKVMdj":`x1aerksh`,"animationDuration-k44tkh":`xof6966`,"animationIterationCount-ko0y90":`xa4qsjk`,"animationTimingFunction-kyAemX":`x1esw782`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:44`},iconSvg:{"Button__styles.iconSvg":`Button__styles.iconSvg`,"display-k1xSpc":`x1lliihq`,"width-kzqmXN":`x15vhz18`,"height-kZKoxP":`xlzyvqe`,"minWidth-k7Eaqz":`xslf67s`,"minHeight-kAzted":`x1xaadd7`,"maxWidth-ks0D6T":`x12pq5kg`,"maxHeight-kskxy":`x1akyapa`,"flexShrink-kmuXW":`x2lah0s`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:53`}},t={default:{"Button__variantStyles.default":`Button__variantStyles.default`,"backgroundColor-kWkggS":`xdmxa9o`,"color-kMwMTN":`x1kho0d4`,":hover:not(:disabled)_backgroundColor-kIa11j":`x19dz5jx`,":active:not(:disabled)_backgroundColor-kDKVdO":`x1e9pno2`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:71`},secondary:{"Button__variantStyles.secondary":`Button__variantStyles.secondary`,"backgroundColor-kWkggS":`xldstci`,"color-kMwMTN":`x1xr5t3o`,":hover:not(:disabled)_backgroundColor-kIa11j":`x1el1875`,":active:not(:disabled)_backgroundColor-kDKVdO":`x11p7ntb`,"[aria-expanded=true]_backgroundColor-kO0H77":`x9oo2q2`,"[aria-expanded=true]_color-kyCbai":`x1pm5o7e`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:81`},ghost:{"Button__variantStyles.ghost":`Button__variantStyles.ghost`,"backgroundColor-kWkggS":`xjbqb8w`,"color-kMwMTN":`x1heor9g`,"boxShadow-kGVxlE":`x1gnnqk1`,":hover:not(:disabled)_backgroundColor-kIa11j":`x1muuk1`,":hover:not(:disabled)_color-kf7JFr":`x70x1a4`,":active:not(:disabled)_backgroundColor-kDKVdO":`x3celgi`,":active:not(:disabled)_color-kMB0Px":`x111phvh`,"[aria-expanded=true]_backgroundColor-kO0H77":`x9oo2q2`,"[aria-expanded=true]_color-kyCbai":`x19yg9bl`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:95`}},n={default:{"Button__sizeStyles.default":`Button__sizeStyles.default`,"height-kZKoxP":`xc9qbxq`,"gap-kOIVth":`xpj7pl4`,"paddingInline-kg3NbH":`xvpgqt4`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:128`},sm:{"Button__sizeStyles.sm":`Button__sizeStyles.sm`,"height-kZKoxP":`x1fgtraw`,"gap-kOIVth":`xvh977a`,"paddingInline-kg3NbH":`xvpgqt4`,"fontSize-kGuDYH":`x1oae1zf`,"lineHeight-kLWn49":`x2fnr2h`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:133`},cta:{"Button__sizeStyles.cta":`Button__sizeStyles.cta`,"height-kZKoxP":`xwvwv9b`,"gap-kOIVth":`x1a6yh9e`,"paddingInline-kg3NbH":`x1fk34n2`,"fontSize-kGuDYH":`x1jvydc1`,"fontWeight-k63SB2":`x1qvi77d`,"lineHeight-kLWn49":`xd4r4e8`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:140`},icon:{"Button__sizeStyles.icon":`Button__sizeStyles.icon`,"width-kzqmXN":`x14qfxbe`,"height-kZKoxP":`xc9qbxq`,"gap-kOIVth":`xxhr3t`,"paddingInline-kg3NbH":`xnjsko4`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:148`},"icon-sm":{"Button__sizeStyles.icon-sm":`Button__sizeStyles.icon-sm`,"width-kzqmXN":`xgd8bvy`,"height-kZKoxP":`x1fgtraw`,"gap-kOIVth":`xxhr3t`,"paddingInline-kg3NbH":`xnjsko4`,"borderRadius-kaIpWk":`xhua5ru`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:154`}},r={withPrefix:{"Button__sizeAdjustmentStyles.withPrefix":`Button__sizeAdjustmentStyles.withPrefix`,"paddingInlineStart-kZCmMZ":`xpsy26f`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:163`},withSuffix:{"Button__sizeAdjustmentStyles.withSuffix":`Button__sizeAdjustmentStyles.withSuffix`,"paddingInlineEnd-kwRFfy":`xzfcf9p`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:166`}},i={default:{"Button__iconSizeStyles.default":`Button__iconSizeStyles.default`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`x1kky2od`,"height-kZKoxP":`xlup9mm`,"fontSize-kGuDYH":`x1j61zf2`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:171`},sm:{"Button__iconSizeStyles.sm":`Button__iconSizeStyles.sm`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`xsmyaan`,"height-kZKoxP":`x1kpxq89`,"fontSize-kGuDYH":`xfifm61`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:181`},cta:{"Button__iconSizeStyles.cta":`Button__iconSizeStyles.cta`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`x1kky2od`,"height-kZKoxP":`xlup9mm`,"fontSize-kGuDYH":`x1j61zf2`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:191`},icon:{"Button__iconSizeStyles.icon":`Button__iconSizeStyles.icon`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`x1kky2od`,"height-kZKoxP":`xlup9mm`,"fontSize-kGuDYH":`x1j61zf2`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:201`},"icon-sm":{"Button__iconSizeStyles.icon-sm":`Button__iconSizeStyles.icon-sm`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`x6jxa94`,"height-kZKoxP":`x1v9usgg`,"fontSize-kGuDYH":`xif65rj`,"lineHeight-kLWn49":`xo5v014`,$$css:`@stridge/kit:src/shared/ui/Button/Button.styles.ts:211`}};export{i as iconSizeStyles,r as sizeAdjustmentStyles,n as sizeStyles,e as styles,t as variantStyles};

package/dist/shared/ui/Button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonSize, ButtonVariant } from "./Button.js";
+import { BUTTON_SLOTS, ButtonSlot } from "./Button.slots.js";

package/dist/shared/ui/Button/index.js

@@ -0,0 +1 @@
+import"./Button.slots.js";import"./Button.js";

package/dist/shared/ui/Card/Card.d.ts

@@ -0,0 +1,93 @@
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/ui/Card/Card.d.ts
+type CardVariant = "default" | "subdued" | "frame";
+/**
+ * Bordered, rounded surface primitive. Use as a generic container — modal frames, QR frames, address pills, disclosure
+ * shells, disclaimer banners.
+ *
+ * Variants:
+ *
+ * - `default` — raised inner surface for content floating inside a modal frame.
+ * - `subdued` — recessed inner surface for de-emphasized blocks.
+ * - `frame` — outer modal shell with elevation shadow, larger radius, and imposed kit typography.
+ *
+ * Padding and width are left to the consumer. Compose {@link Card.Header} / {@link Card.Body} / {@link Card.Footer} inside
+ * a `frame` card to render the canonical title row, scrollable body, and action row.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="frame">
+ *   <Card.Header>
+ *     <span>Title</span>
+ *     <IconButton aria-label="Close" onClick={onClose}><XIcon /></IconButton>
+ *   </Card.Header>
+ *   <Card.Body>Body…</Card.Body>
+ *   <Card.Footer>Actions…</Card.Footer>
+ * </Card>
+ * ```
+ */
+declare function Card({
+  variant,
+  className,
+  style,
+  children,
+  ...props
+}: Card.Props): _$react_jsx_runtime0.JSX.Element;
+declare namespace Card {
+  var Header: typeof CardHeader;
+  var Body: typeof CardBody;
+  var Footer: typeof CardFooter;
+}
+/**
+ * Header row for a `frame`-variant {@link Card}. Renders a flex row with a hairline divider on its bottom edge. Consumers
+ * control padding, `justify-content`, and `gap`.
+ */
+declare function CardHeader({
+  className,
+  style,
+  children,
+  ...props
+}: Card.HeaderProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Body slot for a `frame`-variant {@link Card}. Stacks children in a flex column.
+ *
+ * When the body is mounted inside `Dialog.Content` (detected via the dialog content context), the body wrapper becomes a
+ * flex column that absorbs leftover dialog height, with the embedded {@link ScrollArea} as its sole flex child. Sizing the
+ * scroll-area via flex (rather than a percentage height) makes the chain resolve reliably: the scroll-area's intrinsic
+ * content size carries back through the body so the dialog flex shrink can compress the body to its allocated space, and
+ * once the body is sized, flex distributes that space to the scroll-area instead of having its `height: 100%` fall through
+ * an indefinite parent (the dialog only declares `max-height`) and balloon. The flex-column rhythm moves inside the
+ * viewport so widget children that depend on a flex-column parent (`alignSelf: stretch` on the `ConfirmDeposit` CTA, for
+ * instance) keep working unchanged. Inline (card-mode) bodies skip the scroll branch and stack their children.
+ */
+declare function CardBody({
+  className,
+  style,
+  children,
+  ...props
+}: Card.BodyProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Footer row mirroring {@link Card.Header} with the divider on the top edge. Use for action rows separated from the body
+ * above.
+ */
+declare function CardFooter({
+  className,
+  style,
+  children,
+  ...props
+}: Card.FooterProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace Card {
+  type Props = ComponentProps<"div"> & {
+    /**
+     * Visual treatment. Defaults to `"default"`.
+     */
+    variant?: CardVariant;
+  };
+  type HeaderProps = ComponentProps<"div">;
+  type BodyProps = ComponentProps<"div">;
+  type FooterProps = ComponentProps<"div">;
+}
+//#endregion
+export { Card, CardVariant };

package/dist/shared/ui/Card/Card.js

@@ -0,0 +1 @@
+"use client";import{joinClassNames as e}from"../../utils/joinClassNames.js";import{ScrollArea as t}from"../ScrollArea/ScrollArea.js";import"../ScrollArea/index.js";import{useIsInsideDialogContent as n}from"../Dialog/Dialog.js";import"../Dialog/index.js";import{CARD_SLOTS as r}from"./Card.slots.js";import{bodyStyles as i,footerStyles as a,headerStyles as o,styles as s,variantStyles as c}from"./Card.styles.js";import{jsx as l,jsxs as u}from"react/jsx-runtime";import*as d from"@stylexjs/stylex";function f({variant:t=`default`,className:n,style:i,children:a,...o}){let u=d.props(s.root,c[t]);return l(`div`,{"data-stridge-slot":r.root,"data-variant":t,...o,className:e(u.className,n),style:{...u.style,...i},children:a})}function p({className:t,style:n,children:i,...a}){let s=d.props(o.root);return l(`div`,{"data-stridge-slot":r.header,...a,className:e(s.className,t),style:{...s.style,...n},children:i})}function m({className:a,style:o,children:s,...c}){if(n()){let n=d.props(i.scroll),f=d.props(i.scrollArea),p=d.props(i.scrollViewport),m=d.props(i.root);return l(`div`,{"data-stridge-slot":r.body,className:n.className,style:n.style,children:u(t,{className:f.className,style:f.style,children:[l(t.Viewport,{...c,className:e(p.className,a),style:{...p.style,...o},children:l(`div`,{className:m.className,style:m.style,children:s})}),l(t.Scrollbar,{orientation:`vertical`,children:l(t.Thumb,{})})]})})}let f=d.props(i.root);return l(`div`,{"data-stridge-slot":r.body,...c,className:e(f.className,a),style:{...f.style,...o},children:s})}function h({className:t,style:n,children:i,...o}){let s=d.props(a.root);return l(`div`,{"data-stridge-slot":r.footer,...o,className:e(s.className,t),style:{...s.style,...n},children:i})}f.Header=p,f.Body=m,f.Footer=h;export{f as Card};

package/dist/shared/ui/Card/Card.slots.d.ts

@@ -0,0 +1,10 @@
+//#region src/shared/ui/Card/Card.slots.d.ts
+declare const CARD_SLOTS: {
+  readonly root: "card";
+  readonly header: "card-header";
+  readonly body: "card-body";
+  readonly footer: "card-footer";
+};
+type CardSlot = (typeof CARD_SLOTS)[keyof typeof CARD_SLOTS];
+//#endregion
+export { CARD_SLOTS, CardSlot };

package/dist/shared/ui/Card/Card.slots.js

@@ -0,0 +1 @@
+const e={root:`card`,header:`card-header`,body:`card-body`,footer:`card-footer`};export{e as CARD_SLOTS};

package/dist/shared/ui/Card/Card.styles.js

@@ -0,0 +1 @@
+const e={root:{"Card__styles.root":`Card__styles.root`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"borderStyle-ksu8eU":`x1y0btm7`,"borderWidth-kMzoRj":`xmkeg23`,"overflow-kVQacm":`x7giv3`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:4`}},t={default:{"Card__variantStyles.default":`Card__variantStyles.default`,"backgroundColor-kWkggS":`x12obg9s`,"borderColor-kVAM5u":`x1bue7yx`,"borderRadius-kaIpWk":`x5bw3pk`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:13`},subdued:{"Card__variantStyles.subdued":`Card__variantStyles.subdued`,"backgroundColor-kWkggS":`x407w7c`,"borderColor-kVAM5u":`x1bue7yx`,"borderRadius-kaIpWk":`x5bw3pk`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:18`},frame:{"Card__variantStyles.frame":`Card__variantStyles.frame`,"backgroundColor-kWkggS":`x3cgcfv`,"borderColor-kVAM5u":`x1aqcfi1`,"borderRadius-kaIpWk":`x1c2egtx`,"boxShadow-kGVxlE":`xa2vu2y`,"color-kMwMTN":`xzn0pkc`,"fontFamily-kMv6JI":`xlaww2m`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:23`}},n={root:{"Card__headerStyles.root":`Card__headerStyles.root`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"flexShrink-kmuXW":`x2lah0s`,"paddingTop-kLKAdn":`x1cnzs8`,"paddingInlineEnd-kwRFfy":`x1o5r3ls`,"paddingBottom-kGO01o":`x1hhzuzn`,"paddingInlineStart-kZCmMZ":`xz7312c`,"borderBottomWidth-kt9PQ7":`xso031l`,"borderBottomStyle-kfdmCh":`x1q0q8m5`,"borderBottomColor-kL6WhQ":`x188r5k3`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:39`}},r={root:{"Card__footerStyles.root":`Card__footerStyles.root`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"flexShrink-kmuXW":`x2lah0s`,"borderTopWidth-kEafiO":`x178xt8z`,"borderTopStyle-kPef9Z":`x13fuv20`,"borderTopColor-kLZC3w":`x1wc9ssx`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:54`}},i={root:{"Card__bodyStyles.root":`Card__bodyStyles.root`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:71`},scroll:{"Card__bodyStyles.scroll":`Card__bodyStyles.scroll`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"flex-kUk6DE":`x12lumcd`,"minHeight-kAzted":`x2lwn1j`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:82`},scrollArea:{"Card__bodyStyles.scrollArea":`Card__bodyStyles.scrollArea`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"flex-kUk6DE":`x12lumcd`,"minHeight-kAzted":`x2lwn1j`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:97`},scrollViewport:{"Card__bodyStyles.scrollViewport":`Card__bodyStyles.scrollViewport`,"flex-kUk6DE":`x845mor`,"minHeight-kAzted":`x2lwn1j`,"width-kzqmXN":`xh8yej3`,"maxWidth-ks0D6T":`x193iq5w`,"height-kZKoxP":`xt7dq6l`,"maxHeight-kskxy":`xmz0i5r`,"overflowX-kXHlph":`x6ikm8r`,"overflowY-kORKVm":`x1rife3k`,$$css:`@stridge/kit:src/shared/ui/Card/Card.styles.ts:103`}};export{i as bodyStyles,r as footerStyles,n as headerStyles,e as styles,t as variantStyles};

package/dist/shared/ui/Card/index.d.ts

@@ -0,0 +1,2 @@
+import { Card, CardVariant } from "./Card.js";
+import { CARD_SLOTS, CardSlot } from "./Card.slots.js";

package/dist/shared/ui/Card/index.js

@@ -0,0 +1 @@
+import"./Card.slots.js";import"./Card.js";

package/dist/shared/ui/Collapsible/Collapsible.d.ts

@@ -0,0 +1,57 @@
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+
+//#region src/shared/ui/Collapsible/Collapsible.d.ts
+/**
+ * Disclosure widget. Wraps Base UI's `Collapsible.Root` with a kit slot stamp. Compose with
+ * {@link Collapsible.Trigger} and {@link Collapsible.Panel} to match Base UI's collapsible pattern.
+ * Nest multiple instances inside {@link Collapsible.Group} to stack them in a flex column.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <Collapsible.Trigger>Show details</Collapsible.Trigger>
+ *   <Collapsible.Panel>Hidden content</Collapsible.Panel>
+ * </Collapsible>
+ * ```
+ */
+declare function Collapsible$1(props: Collapsible$1.Props): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Toggle button that opens and closes the sibling {@link Collapsible.Panel}. Wraps Base UI's
+ * `Collapsible.Trigger` with a kit slot stamp and forwards state-aware `className` / `style` merging.
+ */
+declare function CollapsibleTrigger({
+  className,
+  style,
+  ...props
+}: Collapsible$1.TriggerProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Expandable content region controlled by {@link Collapsible.Trigger}. Wraps Base UI's `Collapsible.Panel`
+ * with kit panel styles and state-aware `className` / `style` merging.
+ */
+declare function CollapsiblePanel({
+  className,
+  style,
+  ...props
+}: Collapsible$1.PanelProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Flex column wrapper for stacking multiple {@link Collapsible} instances. A kit-only layout primitive —
+ * Base UI's collapsible has no group concept; this `div` supplies the vertical rhythm.
+ */
+declare function CollapsibleGroup({
+  className,
+  style,
+  ...props
+}: Collapsible$1.GroupProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace Collapsible$1 {
+  type Props = Collapsible.Root.Props;
+  type TriggerProps = Collapsible.Trigger.Props;
+  type PanelProps = Collapsible.Panel.Props;
+  type GroupProps = ComponentProps<"div">;
+  const Trigger: typeof CollapsibleTrigger;
+  const Panel: typeof CollapsiblePanel;
+  const Group: typeof CollapsibleGroup;
+}
+//#endregion
+export { Collapsible$1 as Collapsible };

package/dist/shared/ui/Collapsible/Collapsible.js

@@ -0,0 +1 @@
+"use client";import{joinClassNames as e}from"../../utils/joinClassNames.js";import{mergeClassName as t}from"../../utils/mergeClassName.js";import{mergeStyle as n}from"../../utils/mergeStyle.js";import{COLLAPSIBLE_SLOTS as r}from"./Collapsible.slots.js";import{styles as i}from"./Collapsible.styles.js";import{jsx as a}from"react/jsx-runtime";import*as o from"@stylexjs/stylex";import{Collapsible as s}from"@base-ui/react/collapsible";function c(e){return a(s.Root,{"data-stridge-slot":r.root,...e})}function l({className:e,style:i,...o}){return a(s.Trigger,{"data-stridge-slot":r.trigger,...o,className:t(void 0,e),style:n(void 0,i)})}function u({className:e,style:c,...l}){let u=o.props(i.panel);return a(s.Panel,{"data-stridge-slot":r.panel,...l,className:t(u.className,e),style:n(u.style,c)})}function d({className:t,style:n,...s}){let c=o.props(i.group);return a(`div`,{"data-stridge-slot":r.group,...s,className:e(c.className,t),style:{...c.style,...n}})}(function(e){e.Trigger=l,e.Panel=u,e.Group=d})(c||={});export{c as Collapsible};

package/dist/shared/ui/Collapsible/Collapsible.slots.d.ts

@@ -0,0 +1,10 @@
+//#region src/shared/ui/Collapsible/Collapsible.slots.d.ts
+declare const COLLAPSIBLE_SLOTS: {
+  readonly root: "collapsible";
+  readonly trigger: "collapsible-trigger";
+  readonly panel: "collapsible-panel";
+  readonly group: "collapsible-group";
+};
+type CollapsibleSlot = (typeof COLLAPSIBLE_SLOTS)[keyof typeof COLLAPSIBLE_SLOTS];
+//#endregion
+export { COLLAPSIBLE_SLOTS, CollapsibleSlot };

package/dist/shared/ui/Collapsible/Collapsible.slots.js

@@ -0,0 +1 @@
+const e={root:`collapsible`,trigger:`collapsible-trigger`,panel:`collapsible-panel`,group:`collapsible-group`};export{e as COLLAPSIBLE_SLOTS};

package/dist/shared/ui/Collapsible/Collapsible.styles.js

@@ -0,0 +1 @@
+const e={panel:{"Collapsible__styles.panel":`Collapsible__styles.panel`,"overflow-kVQacm":`xb3r6kr`,"height-kZKoxP":`xuan8c8`,"transitionProperty-k1ekBW":`xua3uq3`,"transitionDuration-kIyJzY":`x1vhb3u9`,"transitionTimingFunction-kAMwcw":`x1xv5090`,"willChange-k6sLGO":`x5uqrmk`,"[data-starting-style]_height-kjDl6":`x1fe7yth`,"[data-ending-style]_height-kYYDV6":`x12wejat`,"[hidden]:not([hidden='until-found'])_display-kjoudi":`xzuuoaq`,"@media (prefers-reduced-motion: reduce)_transitionDuration-k6CgDc":`x12w9bfk`,$$css:`@stridge/kit:src/shared/ui/Collapsible/Collapsible.styles.ts:4`},group:{"Collapsible__styles.group":`Collapsible__styles.group`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x1r05nms`,$$css:`@stridge/kit:src/shared/ui/Collapsible/Collapsible.styles.ts:24`}};export{e as styles};

package/dist/shared/ui/Collapsible/index.d.ts

@@ -0,0 +1,2 @@
+import { Collapsible } from "./Collapsible.js";
+import { COLLAPSIBLE_SLOTS, CollapsibleSlot } from "./Collapsible.slots.js";

package/dist/shared/ui/Collapsible/index.js

@@ -0,0 +1 @@
+import"./Collapsible.slots.js";import"./Collapsible.js";

package/dist/shared/ui/Details/Details.d.ts

@@ -0,0 +1,76 @@
+import { ComponentProps, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/ui/Details/Details.d.ts
+/**
+ * Bordered key/value list. Compose with {@link Details.Row} and {@link Details.Value}.
+ *
+ * @example
+ * ```tsx
+ * <Details>
+ *   <Details.Row label="Source">
+ *     <Details.Value>0xabc…1234</Details.Value>
+ *   </Details.Row>
+ *   <Details.Row label="Total time">
+ *     <Details.Value>~30 sec</Details.Value>
+ *   </Details.Row>
+ * </Details>
+ * ```
+ */
+declare function Details({
+  className,
+  style,
+  children,
+  ...props
+}: Details.Props): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Single row inside a {@link Details} list. Renders a `label` on the leading edge and its `children` on the
+ * trailing edge. Compose with {@link Details.Value} for the standard value typography, or pass any node directly.
+ */
+declare function DetailsRow({
+  label,
+  className,
+  style,
+  children,
+  ...props
+}: Details.RowProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Value slot for a {@link Details.Row}. Applies row-value typography with an optional leading icon. Consumers may
+ * render any `ReactNode` inside `Details.Row` directly instead.
+ *
+ * The cluster is force-LTR via `dir="ltr"` so an icon paired with a numeric / symbol / hex
+ * atom — `[icon] 5 USDC`, `[icon] Stridge ACME`, `[wallet-icon] محفظة (…685c)` — keeps the
+ * icon-leading visual ordering in RTL contexts. The pair is treated as a single LTR atom in
+ * the row's flex layout; the surrounding Detail row and label still respect ambient direction.
+ */
+declare function DetailsValue({
+  icon,
+  className,
+  style,
+  children,
+  ...props
+}: Details.ValueProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace Details {
+  type Props = ComponentProps<"div">;
+  type RowProps = Omit<ComponentProps<"div">, "children"> & {
+    /**
+     * Leading-edge label.
+     */
+    label: ReactNode;
+    /**
+     * Trailing-edge content. Compose with {@link Details.Value} or pass any node.
+     */
+    children?: ReactNode;
+  };
+  type ValueProps = Omit<ComponentProps<"span">, "children"> & {
+    /**
+     * Optional leading element (icon, badge, etc.).
+     */
+    icon?: ReactNode;
+    children?: ReactNode;
+  };
+  const Row: typeof DetailsRow;
+  const Value: typeof DetailsValue;
+}
+//#endregion
+export { Details };

package/dist/shared/ui/Details/Details.js

@@ -0,0 +1 @@
+"use client";import{joinClassNames as e}from"../../utils/joinClassNames.js";import{DETAILS_SLOTS as t}from"./Details.slots.js";import{styles as n}from"./Details.styles.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import*as a from"@stylexjs/stylex";function o({className:i,style:o,children:s,...c}){let l=a.props(n.root);return r(`div`,{"data-stridge-slot":t.root,...c,className:e(l.className,i),style:{...l.style,...o},children:s})}function s({label:o,className:s,style:c,children:l,...u}){let d=a.props(n.row),f=a.props(n.label);return i(`div`,{"data-stridge-slot":t.row,...u,className:e(d.className,s),style:{...d.style,...c},children:[r(`span`,{className:f.className,style:f.style,children:o}),l]})}function c({icon:r,className:o,style:s,children:c,...l}){let u=a.props(n.value);return i(`span`,{"data-stridge-slot":t.value,dir:`ltr`,...l,className:e(u.className,o),style:{...u.style,...s},children:[r,c]})}(function(e){e.Row=s,e.Value=c})(o||={});export{o as Details};

package/dist/shared/ui/Details/Details.slots.d.ts

@@ -0,0 +1,9 @@
+//#region src/shared/ui/Details/Details.slots.d.ts
+declare const DETAILS_SLOTS: {
+  readonly root: "details";
+  readonly row: "details-row";
+  readonly value: "details-value";
+};
+type DetailsSlot = (typeof DETAILS_SLOTS)[keyof typeof DETAILS_SLOTS];
+//#endregion
+export { DETAILS_SLOTS, DetailsSlot };

package/dist/shared/ui/Details/Details.slots.js

@@ -0,0 +1 @@
+const e={root:`details`,row:`details-row`,value:`details-value`};export{e as DETAILS_SLOTS};

package/dist/shared/ui/Details/Details.styles.js

@@ -0,0 +1 @@
+const e={root:{"Details__styles.root":`Details__styles.root`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"backgroundColor-kWkggS":`x14ogoj5`,"borderColor-kVAM5u":`xbeer74`,"borderRadius-kaIpWk":`xxbqt08`,"borderStyle-ksu8eU":`x1y0btm7`,"borderWidth-kMzoRj":`xmkeg23`,"color-kMwMTN":`x1i40r7x`,"fontFamily-kMv6JI":`xlaww2m`,"overflow-kVQacm":`x7giv3`,$$css:`@stridge/kit:src/shared/ui/Details/Details.styles.ts:4`},row:{"Details__styles.row":`Details__styles.row`,"alignItems-kGNEyG":`x6s0dn4`,"borderBottomColor-kL6WhQ":`x2kdqbz`,"borderBottomStyle-kfdmCh":`x1q0q8m5`,"borderBottomWidth-kt9PQ7":`xso031l`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`x1q0g3np`,"gap-kOIVth":`x1v2ro7d`,"justifyContent-kjj79g":`x1qughib`,"paddingBlock-k8WAf4":`xxlmvz2`,"paddingInline-kg3NbH":`x1hr3lfm`,":last-child_borderBottomWidth-kx8K5S":`x1t1lzn6`,$$css:`@stridge/kit:src/shared/ui/Details/Details.styles.ts:16`},label:{"Details__styles.label":`Details__styles.label`,"color-kMwMTN":`x18cw6k6`,"fontSize-kGuDYH":`x4z9k3i`,"fontWeight-k63SB2":`xk50ysn`,"letterSpacing-kb6lSQ":`x1ixy4ik`,"lineHeight-kLWn49":`x1d3mw78`,$$css:`@stridge/kit:src/shared/ui/Details/Details.styles.ts:31`},value:{"Details__styles.value":`Details__styles.value`,"alignItems-kGNEyG":`x6s0dn4`,"color-kMwMTN":`x1i40r7x`,"display-k1xSpc":`x3nfvp2`,"flexDirection-kXwgrk":`x1q0g3np`,"fontSize-kGuDYH":`x4z9k3i`,"fontWeight-k63SB2":`x1s688f`,"gap-kOIVth":`x167g77z`,"letterSpacing-kb6lSQ":`x1ixy4ik`,"lineHeight-kLWn49":`x1d3mw78`,"minWidth-k7Eaqz":`xeuugli`,"textAlign-k9WMMc":`xp4054r`,$$css:`@stridge/kit:src/shared/ui/Details/Details.styles.ts:38`}};export{e as styles};

package/dist/shared/ui/Details/index.d.ts

@@ -0,0 +1,2 @@
+import { Details } from "./Details.js";
+import { DETAILS_SLOTS, DetailsSlot } from "./Details.slots.js";

package/dist/shared/ui/Details/index.js

@@ -0,0 +1 @@
+import"./Details.slots.js";import"./Details.js";