@stridge/kit 0.1.0-alpha.0

package/dist/shared/ui/Image/Image.js

@@ -0,0 +1 @@
+"use client";import{joinClassNames as e}from"../../utils/joinClassNames.js";import{IMAGE_SLOTS as t}from"./Image.slots.js";import{styles as n}from"./Image.styles.js";import{Children as r,createContext as i,isValidElement as a,use as o,useEffect as s,useMemo as c,useState as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";import{Avatar as p}from"@base-ui/react/avatar";const m={xs:12,sm:16,md:20,lg:24,xl:32,"2xl":36,"3xl":40},h=[[`oklch(62.47% 0.16 270.13)`,`oklch(75.33% 0.11 276.38)`],[`oklch(68.91% 0.10 172.82)`,`oklch(46.99% 0.10 153.81)`],[`oklch(81.32% 0.16 86.69)`,`oklch(68.84% 0.15 156.66)`],[`oklch(56.79% 0.18 291.23)`,`oklch(49.84% 0.22 281.48)`],[`oklch(62.56% 0.19 23.03)`,`oklch(81.94% 0.16 84.20)`],[`oklch(56.00% 0.15 253.80)`,`oklch(68.01% 0.15 244.14)`],[`oklch(52.82% 0.26 262.87)`,`oklch(56.79% 0.18 291.23)`],[`oklch(75.33% 0.11 276.38)`,`oklch(56.00% 0.15 253.80)`]],g=i(null),_=i(null);function v(e){if(e===void 0)return[];let t=typeof e==`string`?[e]:e,n=new Set,r=[];for(let e of t)typeof e!=`string`||e.length===0||n.has(e)||(n.add(e),r.push(e));return r}function y(e){let t=2166136261;for(let n=0;n<e.length;n+=1)t^=e.charCodeAt(n),t=Math.imul(t,16777619)>>>0;return t}function b(e){return e.length===0?0:y(e)%h.length}function x(e,t){if(typeof e==`number`)return Number.isFinite(e)&&e>0?e:t;if(typeof e==`string`){let n=m[e];return Number.isFinite(n)&&n>0?n:t}return t}function S(e){return e===`square`?`0`:e===`rounded`?`var(--stridge-kit-radius-lg)`:`var(--stridge-kit-radius-full)`}function C(e,t){let n=e??t;if(n.length===0)return``;let r=n.charAt(0);return/\S/.test(r)?r.toUpperCase():``}function w({src:r,alt:i,size:a,letter:y,shape:w=`circle`,fallbackDelay:T=80,className:E,style:D,children:O,...k}){let A=o(g),j=o(_),M=x(a,A?.size??j?.size??m.md),N=A?.ringed??!1,P=c(()=>v(r),[r]),F=P.join(`|`),[I,L]=l(0);s(()=>{L(0)},[F]);let R=P[I],[z,B]=l(R?`loading`:`idle`),V=y??i,[H,U]=h[b(V)],W=C(y,i),G=S(w),K={width:`${M}px`,height:`${M}px`,borderRadius:G,boxShadow:N?`0 0 0 1.5px var(--stridge-kit-tile-surface)`:void 0,...D},q=f.props(n.root),J=P.length===0&&i.length>0,Y=e=>{if(e===`error`&&I<P.length-1){L(I+1),B(`loading`);return}B(e)};return d(p.Root,{"data-stridge-slot":t.root,"data-image-shape":w,"data-image-status":z,"data-image-palette":b(V),role:J?`img`:void 0,"aria-label":J?i:void 0,className:e(q.className,E),style:{...q.style,...K},...k,children:[R?u(p.Image,{src:R,alt:i,onLoadingStatusChange:Y,"data-stridge-slot":t.image,...f.props(n.image)},R):null,u(p.Fallback,{delay:R?T:0,"data-stridge-slot":t.fallback,...f.props(n.fallback),style:{background:`linear-gradient(135deg, ${H}, ${U})`,borderRadius:G},children:z===`loading`?u(`span`,{"aria-hidden":`true`,"data-stridge-slot":t.skeleton,...f.props(n.skeleton)}):W?u(`span`,{"aria-hidden":`true`,"data-stridge-slot":t.fallbackLetter,...f.props(n.fallbackLetter),style:{fontSize:`${Math.max(8,Math.round(M*.4))}px`},children:W}):null}),u(_.Provider,{value:{size:M},children:O})]})}function T({src:e,alt:r,size:i,letter:a}){let s=o(_),c=x(i,s?Math.max(8,Math.round(s.size*.45)):m.xs);return u(`span`,{"data-stridge-slot":t.overlay,...f.props(n.overlay),children:u(_.Provider,{value:null,children:u(w,{src:e,alt:r,size:c,letter:a,...f.props(n.overlayInner)})})})}function E({max:i,size:o,overflow:s,className:c,style:l,children:p,...h}){let _=x(o,m.md),v=r.toArray(p).filter(a),y=typeof i==`number`?Math.max(0,Math.floor(i)):void 0,b=y===void 0?v:v.slice(0,y),S=y===void 0?0:Math.max(0,v.length-y),C=typeof s==`number`?Math.max(0,Math.floor(s)):S,w=Math.round(_*.3),T={...l},E=f.props(n.group);return u(g.Provider,{value:{size:_,ringed:!0},children:d(`span`,{"data-stridge-slot":t.group,className:e(E.className,c),style:{...E.style,...T},...h,children:[b.map((e,t)=>u(`span`,{style:{display:`inline-flex`,marginInlineEnd:t<b.length-1||C>0?`-${w}px`:0},children:e},t)),C>0?d(`span`,{"data-stridge-slot":t.groupOverflow,...f.props(n.groupOverflow),style:{height:`${_}px`,fontSize:`${Math.max(9,Math.round(_*.5))}px`},children:[`+`,C]}):null]})})}w.Overlay=T,w.Group=E;export{w as Image};

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

@@ -0,0 +1,14 @@
+//#region src/shared/ui/Image/Image.slots.d.ts
+declare const IMAGE_SLOTS: {
+  readonly root: "image";
+  readonly image: "image-img";
+  readonly fallback: "image-fallback";
+  readonly fallbackLetter: "image-fallback-letter";
+  readonly skeleton: "image-skeleton";
+  readonly overlay: "image-overlay";
+  readonly group: "image-group";
+  readonly groupOverflow: "image-group-overflow";
+};
+type ImageSlot = (typeof IMAGE_SLOTS)[keyof typeof IMAGE_SLOTS];
+//#endregion
+export { IMAGE_SLOTS, ImageSlot };

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

@@ -0,0 +1 @@
+const e={root:`image`,image:`image-img`,fallback:`image-fallback`,fallbackLetter:`image-fallback-letter`,skeleton:`image-skeleton`,overlay:`image-overlay`,group:`image-group`,groupOverflow:`image-group-overflow`};export{e as IMAGE_SLOTS};

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

@@ -0,0 +1 @@
+const e={root:{"Image__styles.root":`Image__styles.root`,"position-kVAEAm":`x1n2onr6`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"overflow-kVQacm":`x1rea2x4`,"verticalAlign-kXLuUW":`xxymvpz`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:12`},image:{"Image__styles.image":`Image__styles.image`,"position-kVAEAm":`x1n2onr6`,"zIndex-kY2c9j":`x1vjfegm`,"width-kzqmXN":`xh8yej3`,"height-kZKoxP":`x5yr21d`,"objectFit-kVIFPx":`x19kjcj4`,"borderRadius-kaIpWk":`x1pjcqnp`,"display-k1xSpc":`x1lliihq`,"backgroundColor-kWkggS":`xp5aqsh`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:21`},fallback:{"Image__styles.fallback":`Image__styles.fallback`,"position-kVAEAm":`x10l6tqk`,"inset-kpwlN0":`x10a8y8t`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"overflow-kVQacm":`xb3r6kr`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:31`},fallbackLetter:{"Image__styles.fallbackLetter":`Image__styles.fallbackLetter`,"display-k1xSpc":`x1lliihq`,"fontFamily-kMv6JI":`xhpaxki`,"fontWeight-k63SB2":`x1xlr1w8`,"lineHeight-kLWn49":`xo5v014`,"color-kMwMTN":`xflhhh6`,"userSelect-kfSwDN":`x87ps6o`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:39`},skeleton:{"Image__styles.skeleton":`Image__styles.skeleton`,"position-kVAEAm":`x10l6tqk`,"inset-kpwlN0":`x10a8y8t`,"borderRadius-kaIpWk":`x1pjcqnp`,"backgroundColor-kWkggS":`x3l8li6`,"backgroundImage-kKwaWg":`x1sxldtw`,"backgroundSize-kgSjnq":`xakli9p`,"backgroundRepeat-kz484i":`xiy17q3`,"animationName-kKVMdj":`x1ng0oyw x1aquc0h`,"animationDuration-k44tkh":`x1sbju2s`,"animationIterationCount-ko0y90":`xa4qsjk`,"animationTimingFunction-kyAemX":`x1esw782`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:47`},overlay:{"Image__styles.overlay":`Image__styles.overlay`,"position-kVAEAm":`x10l6tqk`,"insetInlineEnd-kt4wiu":`x1d0qlrl`,"bottom-krVfgx":`x1t1qrwb`,"display-k1xSpc":`x3nfvp2`,"zIndex-kY2c9j":`xhtitgo`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:63`},overlayInner:{"Image__styles.overlayInner":`Image__styles.overlayInner`,"boxShadow-kGVxlE":`x1gsh91t`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:78`},group:{"Image__styles.group":`Image__styles.group`,"display-k1xSpc":`x3nfvp2`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"flexShrink-kmuXW":`x2lah0s`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:81`},groupItemRing:{"Image__styles.groupItemRing":`Image__styles.groupItemRing`,"boxShadow-kGVxlE":`x1gsh91t`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:87`},groupOverflow:{"Image__styles.groupOverflow":`Image__styles.groupOverflow`,"position-kVAEAm":`x1n2onr6`,"zIndex-kY2c9j":`x1vjfegm`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"flexShrink-kmuXW":`x2lah0s`,"boxSizing-kB7OPa":`x9f619`,"paddingInline-kg3NbH":`x1xijbu4`,"borderRadius-kaIpWk":`xrsz3of`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x1bue7yx`,"backgroundColor-kWkggS":`xp5aqsh`,"color-kMwMTN":`x1gvmkps`,"fontFamily-kMv6JI":`xhpaxki`,"fontWeight-k63SB2":`x1s688f`,"lineHeight-kLWn49":`xo5v014`,"letterSpacing-kb6lSQ":`x16q24ku`,"userSelect-kfSwDN":`x87ps6o`,$$css:`@stridge/kit:src/shared/ui/Image/Image.styles.ts:90`}};export{e as styles};

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

@@ -0,0 +1,3 @@
+import { ImageGroupProps, ImageOverlayProps, ImageProps, ImageShape, ImageSize } from "./types.js";
+import { Image } from "./Image.js";
+import { IMAGE_SLOTS, ImageSlot } from "./Image.slots.js";

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

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

package/dist/shared/ui/Image/types.d.ts

@@ -0,0 +1,131 @@
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/shared/ui/Image/types.d.ts
+/**
+ * Preset sizes (in px): `xs=12`, `sm=16`, `md=20`, `lg=24`, `xl=32`,
+ * `2xl=36`, `3xl=40`.
+ */
+type ImageSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+/**
+ * Shape of the image disc. `circle` is the default; `square` keeps
+ * `object-fit` but no border-radius; `rounded` uses the kit's `lg`
+ * radius.
+ */
+type ImageShape = "circle" | "square" | "rounded";
+/**
+ * Public props for the `Image` primitive.
+ *
+ * Renders a remote image with a deterministic gradient + letter fallback. When `src` is missing
+ * or fails to load, paints a gradient disc keyed by a hash of `alt` (or `letter`) so the same
+ * input always picks the same gradient.
+ *
+ * **For token or chain logos, use `<TokenLogo>` instead.** It runs the kit's URL resolver
+ * (host override → Trustwallet convention CDN → Stridge backend → this `Image` fallback) and
+ * renders the chain badge overlay automatically. `<Image>` is for wallet glyphs, brand marks, and
+ * other non-token imagery where there is no convention CDN to probe.
+ *
+ * @example
+ * Wallet glyph (no token identity to resolve, just a remote URL):
+ * ```tsx
+ * <Image size="md" src={wallet.iconUrl} alt={wallet.name} />
+ * ```
+ *
+ * @example
+ * Brand glyph fallback:
+ * ```tsx
+ * <Image size="sm" alt="Stridge" />
+ * ```
+ */
+interface ImageProps extends Omit<ComponentProps<"span">, "children" | "size"> {
+  /**
+   * URL of the image, or a prioritized list of URLs. When an array is provided, the component
+   * tries each entry in order — on `error` it advances to the next — so a CDN-convention URL can
+   * fall back to a backend-supplied URL before the gradient+letter fallback kicks in. `undefined`
+   * or an empty array goes straight to the fallback.
+   */
+  src?: string | readonly string[];
+  /**
+   * Required for accessibility and for the deterministic fallback —
+   * the same `alt` always picks the same gradient and letter. Pass
+   * `""` for purely decorative images.
+   */
+  alt: string;
+  /**
+   * Preset or numeric pixel size. Defaults to `"md"` (20px).
+   */
+  size?: ImageSize | number;
+  /**
+   * Override the fallback letter. Defaults to the first uppercase character of `alt`.
+   */
+  letter?: string;
+  /**
+   * Disc shape. Defaults to `"circle"`.
+   */
+  shape?: ImageShape;
+  /**
+   * Milliseconds to wait before swapping a still-loading image out
+   * for the fallback. Avoids flashing the fallback on fast loads.
+   * Defaults to `80`.
+   */
+  fallbackDelay?: number;
+  /**
+   * Optional `<Image.Overlay>` child positioned bottom-right.
+   */
+  children?: ReactNode;
+}
+/**
+ * Bottom-right sub-badge layered on the parent `Image`. Defaults to
+ * ~0.45× the parent size.
+ */
+interface ImageOverlayProps {
+  /**
+   * URL of the badge image, or a prioritized list of URLs (see `ImageProps.src`).
+   */
+  src?: string | readonly string[];
+  /**
+   * Required for accessibility and fallback identity.
+   */
+  alt: string;
+  /**
+   * Optional explicit size override.
+   */
+  size?: ImageSize | number;
+  /**
+   * Override the fallback letter. Defaults to the first character of `alt`.
+   */
+  letter?: string;
+}
+/**
+ * Stacked cluster of `Image`s with an optional `+N` overflow pill. Children may be either
+ * `<Image>` or `<TokenLogo>` instances — the cluster only manages overlap and the overflow pill.
+ * For token or chain stacks, prefer `<TokenLogo>` children so each entry resolves through the
+ * kit's URL pipeline.
+ *
+ * @example
+ * ```tsx
+ * <Image.Group max={5} size="md">
+ *     <TokenLogo chainId={1} isNative symbol="Ethereum" hideChainBadge />
+ *     <TokenLogo chainId={42161} isNative symbol="Arbitrum" hideChainBadge />
+ *     <TokenLogo chainId={8453} isNative symbol="Base" hideChainBadge />
+ *     <TokenLogo chainId={56} isNative symbol="BNB Chain" hideChainBadge />
+ *     <TokenLogo symbol="Solana" hideChainBadge />
+ * </Image.Group>
+ * ```
+ */
+interface ImageGroupProps extends Omit<ComponentProps<"span">, "children" | "size"> {
+  /**
+   * Max images to render before collapsing into the `+N` pill. Defaults to all children.
+   */
+  max?: number;
+  /**
+   * Force size onto every direct child.
+   */
+  size?: ImageSize | number;
+  /**
+   * Override the overflow count. Defaults to `children.length - max` when truncated.
+   */
+  overflow?: number;
+  children: ReactNode;
+}
+//#endregion
+export { ImageGroupProps, ImageOverlayProps, ImageProps, ImageShape, ImageSize };

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

@@ -0,0 +1,129 @@
+import { Button } from "../Button/Button.js";
+import { ComponentProps, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/ui/InputGroup/InputGroup.d.ts
+/**
+ * Addon position relative to the inner control.
+ *
+ * - `inline-start` — leading edge (LTR: left). Default. Used for currency prefixes, search icons.
+ * - `inline-end` — trailing edge (LTR: right). Used for action buttons, suffix labels.
+ * - `block-start` — above the control (flips the group to a column layout). Used for header bars
+ *   over a textarea (file name, language label).
+ * - `block-end` — below the control. Used for character counters, status lines, send affordances.
+ */
+type InputGroupAddonAlign = "inline-start" | "inline-end" | "block-start" | "block-end";
+/**
+ * Chrome wrapper for a single input control and optional addons. Owns the visible border, radius,
+ * background, focus ring, and invalid ring; the inner control strips its own chrome. State
+ * propagates via `:has()` — no React context. Set `aria-invalid` on the control; the wrapper
+ * reacts automatically.
+ *
+ * Composes inside `<Field>` as the labelled control, or standalone for inputs that don't need
+ * labelling chrome.
+ *
+ * @example
+ * ```tsx
+ * <Field>
+ *   <Field.Label htmlFor="amount">Amount</Field.Label>
+ *   <InputGroup>
+ *     <InputGroup.Input id="amount" type="text" inputMode="decimal" placeholder="0.00" />
+ *     <InputGroup.Addon align="inline-end">
+ *       <InputGroup.Text>USDC</InputGroup.Text>
+ *     </InputGroup.Addon>
+ *   </InputGroup>
+ * </Field>
+ *
+ * // Textarea with character counter:
+ * <InputGroup>
+ *   <InputGroup.Textarea value={msg} onChange={(e) => setMsg(e.target.value)} rows={4} />
+ *   <InputGroup.Addon align="block-end">
+ *     <InputGroup.Text>{msg.length}/200</InputGroup.Text>
+ *   </InputGroup.Addon>
+ * </InputGroup>
+ * ```
+ */
+declare function InputGroup({
+  className,
+  style,
+  ...props
+}: InputGroup.Props): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Positioned slot inside an `InputGroup` — hosts icons, text, buttons, or counters. The `align`
+ * prop drives visual placement and the wrapper's padding compensation (`:has()` in styles).
+ *
+ * Clicking the addon focuses the inner control unless the click landed on a `<button>` descendant.
+ * The control is resolved via `data-stridge-slot="input-group-control"`, which covers both
+ * `InputGroup.Input` and `InputGroup.Textarea`. `role="group"` is intentionally omitted — addons
+ * rarely have an accessible name and the extra landmark adds screen-reader noise.
+ */
+declare function InputGroupAddon({
+  align,
+  className,
+  onClick,
+  style,
+  ...props
+}: InputGroup.AddonProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Inline text content inside an `InputGroup.Addon` — currency symbols, counter readouts, unit
+ * labels. Renders in muted foreground so the addon reads as chrome, not a user-facing label.
+ */
+declare function InputGroupText({
+  className,
+  style,
+  ...props
+}: InputGroup.TextProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Single-line text input inside an `<InputGroup>`. Chrome is stripped so the wrapper is what the
+ * user sees. Stamped `data-stridge-slot="input-group-control"` so the wrapper's `:has()` rules
+ * react to focus and `aria-invalid`.
+ */
+declare function InputGroupInput({
+  className,
+  style,
+  ...props
+}: InputGroup.InputProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Multiline text input inside an `<InputGroup>`. Chrome is stripped identically to
+ * `<InputGroup.Input>`; `fieldSizing: content` auto-grows the textarea up to `maxBlockSize`, then
+ * scrolls. Suitable for addresses and any free-form text that benefits from vertical wrapping.
+ */
+declare function InputGroupTextarea({
+  className,
+  style,
+  ...props
+}: InputGroup.TextareaProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Button inside an `<InputGroup.Addon>`. Delegates to the kit's `<Button>` with addon-density
+ * defaults: `variant="ghost"`, `size="sm"`, `type="button"`. Pass `size="icon-sm"` for
+ * icon-only affordances (copy, clear, reveal).
+ */
+declare function InputGroupButton({
+  variant,
+  size,
+  type,
+  ...props
+}: InputGroup.ButtonProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace InputGroup {
+  type Props = ComponentProps<"div">;
+  interface AddonProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * Where the addon sits relative to the inner control.
+     *
+     * @default "inline-start"
+     */
+    align?: InputGroupAddonAlign;
+    children?: ReactNode;
+  }
+  type TextProps = ComponentProps<"span">;
+  type InputProps = ComponentProps<"input">;
+  type TextareaProps = ComponentProps<"textarea">;
+  type ButtonProps = Button.Props;
+  const Addon: typeof InputGroupAddon;
+  const Text: typeof InputGroupText;
+  const Input: typeof InputGroupInput;
+  const Textarea: typeof InputGroupTextarea;
+  const Button: typeof InputGroupButton;
+}
+//#endregion
+export { InputGroup, InputGroupAddonAlign };

package/dist/shared/ui/InputGroup/InputGroup.js

@@ -0,0 +1 @@
+"use client";import{joinClassNames as e}from"../../utils/joinClassNames.js";import{Button as t}from"../Button/Button.js";import"../Button/index.js";import{INPUT_GROUP_SLOTS as n}from"./InputGroup.slots.js";import{addonAlignStyles as r,styles as i}from"./InputGroup.styles.js";import{useCallback as a}from"react";import{jsx as o}from"react/jsx-runtime";import*as s from"@stylexjs/stylex";function c({className:t,style:r,...a}){let c=s.props(i.root);return o(`div`,{role:`group`,"data-stridge-slot":n.root,...a,className:e(c.className,t),style:{...c.style,...r}})}function l({align:t=`inline-start`,className:c,onClick:l,style:u,...d}){let f=a(e=>{e.target?.closest(`button`)??(e.currentTarget.closest(`[data-stridge-slot="${n.root}"]`)?.querySelector(`[data-stridge-slot="${n.control}"]`))?.focus(),l?.(e)},[l]),p=s.props(i.addonBase,r[t]);return o(`div`,{"data-stridge-slot":n.addon,"data-align":t,...d,onClick:f,className:e(p.className,c),style:{...p.style,...u}})}function u({className:t,style:r,...a}){let c=s.props(i.text);return o(`span`,{"data-stridge-slot":n.text,...a,className:e(c.className,t),style:{...c.style,...r}})}function d({className:t,style:r,...a}){let c=s.props(i.control);return o(`input`,{"data-stridge-slot":n.control,...a,className:e(c.className,t),style:{...c.style,...r}})}function f({className:t,style:r,...a}){let c=s.props(i.control,i.controlTextarea);return o(`textarea`,{"data-stridge-slot":n.control,...a,className:e(c.className,t),style:{...c.style,...r}})}function p({variant:e=`ghost`,size:r=`sm`,type:i=`button`,...a}){return o(t,{"data-stridge-slot":n.button,variant:e,size:r,type:i,...a})}(function(e){e.Addon=l,e.Text=u,e.Input=d,e.Textarea=f,e.Button=p})(c||={});export{c as InputGroup};

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

@@ -0,0 +1,16 @@
+//#region src/shared/ui/InputGroup/InputGroup.slots.d.ts
+/**
+ * Stable `data-stridge-slot` identifiers for the `InputGroup` compound. `control` is shared by
+ * both `<InputGroup.Input>` and `<InputGroup.Textarea>` so the wrapper's `:has()` focus-ring and
+ * invalid-border rules react to either element without two separate selectors.
+ */
+declare const INPUT_GROUP_SLOTS: {
+  readonly root: "input-group";
+  readonly addon: "input-group-addon";
+  readonly text: "input-group-text";
+  readonly control: "input-group-control";
+  readonly button: "input-group-button";
+};
+type InputGroupSlot = (typeof INPUT_GROUP_SLOTS)[keyof typeof INPUT_GROUP_SLOTS];
+//#endregion
+export { INPUT_GROUP_SLOTS, InputGroupSlot };

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

@@ -0,0 +1 @@
+const e={root:`input-group`,addon:`input-group-addon`,text:`input-group-text`,control:`input-group-control`,button:`input-group-button`};export{e as INPUT_GROUP_SLOTS};

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

@@ -0,0 +1 @@
+const e={root:{"InputGroup__styles.root":`InputGroup__styles.root`,"position-kVAEAm":`x1n2onr6`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"width-kzqmXN":`xh8yej3`,"minWidth-k7Eaqz":`xeuugli`,"backgroundColor-kWkggS":`xsdq91f`,"borderRadius-kaIpWk":`x12ur2as`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x1bue7yx`,"boxShadow-kGVxlE":`xzh026d`,"outlineStyle-k3XXqK":`x1t137rt`,"transitionProperty-k1ekBW":`x12zzom9`,"transitionDuration-kIyJzY":`xx6bhzk`,"transitionTimingFunction-kAMwcw":`x9lcvmn`,":has(> [data-align='block-start'])_flexDirection-kFri6d":`x194fthc`,":has(> [data-align='block-end'])_flexDirection-kYhW9S":`x18kp75k`,':has(> [data-align="inline-start"]) > input, :has(> [data-align="inline-start"]) > textarea_paddingInlineStart-kQ95yr':`xt6ss43`,':has(> [data-align="inline-end"]) > input, :has(> [data-align="inline-end"]) > textarea_paddingInlineEnd-kU9a4k':`x1h3il70`,":has(> input:focus-visible, > textarea:focus-visible)_borderColor-k2cnuw":`xnyhjf`,":has(> input:focus-visible, > textarea:focus-visible)_boxShadow-kk70Jk":`x1yi73pz`,':has(> input[aria-invalid="true"], > textarea[aria-invalid="true"])_borderColor-kXNN1s':`xn0a4ft`,':has(> input[aria-invalid="true"]:focus-visible, > textarea[aria-invalid="true"]:focus-visible)_borderColor-kpScTd':`x1m8uku1`,':has(> input[aria-invalid="true"]:focus-visible, > textarea[aria-invalid="true"]:focus-visible)_boxShadow-kBzYxT':`xw3o6j3`,":has(> input:disabled, > textarea:disabled)_opacity-kQ45ge":`x1jyfq15`,":has(> input:disabled, > textarea:disabled)_cursor-kO6b0Y":`x13hg1u5`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:17`},addonBase:{"InputGroup__styles.addonBase":`InputGroup__styles.addonBase`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"flexShrink-kmuXW":`x2lah0s`,"gap-kOIVth":`x1a6yh9e`,"userSelect-kfSwDN":`x87ps6o`,"color-kMwMTN":`xi96bwj`,"cursor-kkrTdU":`x1ed109x`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:82`},text:{"InputGroup__styles.text":`InputGroup__styles.text`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x1a6yh9e`,"fontSize-kGuDYH":`x14qa7mu`,"lineHeight-kLWn49":`x2fnr2h`,"color-kMwMTN":`xi96bwj`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:95`},control:{"InputGroup__styles.control":`InputGroup__styles.control`,"flexGrow-kzQI83":`x1iyjqo2`,"flexShrink-kmuXW":`xs83m0k`,"minWidth-k7Eaqz":`xeuugli`,"borderWidth-kMzoRj":`xc342km`,"outlineStyle-k3XXqK":`x1t137rt`,"backgroundColor-kWkggS":`xjbqb8w`,"boxShadow-kGVxlE":`x1gnnqk1`,"paddingBlock-k8WAf4":`xrii95j`,"paddingInline-kg3NbH":`x1hr3lfm`,"fontFamily-kMv6JI":`xlaww2m`,"fontSize-kGuDYH":`x1j61zf2`,"lineHeight-kLWn49":`x19v9tvf`,"fontWeight-k63SB2":`xk50ysn`,"color-kMwMTN":`xzn0pkc`,"caretColor-knGrYV":`x1s2wxje`,"appearance-kysU6D":`xtilpmw`,"::placeholder_color-k8Qsv1":`x16nik3i`,":disabled_cursor-kYPGJ8":`x1s07b3s`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:109`},controlTextarea:{"InputGroup__styles.controlTextarea":`InputGroup__styles.controlTextarea`,"resize-kHenm0":`xtt52l0`,"overflow-kVQacm":`xysyzu8`,"fieldSizing-kOwNse":`x5f5z56`,"minHeight-kAzted":`xe0957l`,"maxHeight-kskxy":`xpulllz`,"overflowWrap-kHjlTd":`xj0a0fe`,"wordBreak-kTgw9":`x1yn0g08`,"whiteSpace-khDVqt":`x126k92a`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:138`}},t={"inline-start":{"InputGroup__addonAlignStyles.inline-start":`InputGroup__addonAlignStyles.inline-start`,"order-kayTVb":`x1clqncf`,"paddingInlineStart-kZCmMZ":`x1qntkwk`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:154`},"inline-end":{"InputGroup__addonAlignStyles.inline-end":`InputGroup__addonAlignStyles.inline-end`,"order-kayTVb":`x9ek82g`,"paddingInlineEnd-kwRFfy":`xi8f3d1`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:158`},"block-start":{"InputGroup__addonAlignStyles.block-start":`InputGroup__addonAlignStyles.block-start`,"order-kayTVb":`x1clqncf`,"width-kzqmXN":`xh8yej3`,"justifyContent-kjj79g":`x1nhvcw1`,"paddingTop-kLKAdn":`x19ment4`,"paddingInline-kg3NbH":`x1fk34n2`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:162`},"block-end":{"InputGroup__addonAlignStyles.block-end":`InputGroup__addonAlignStyles.block-end`,"order-kayTVb":`x9ek82g`,"width-kzqmXN":`xh8yej3`,"justifyContent-kjj79g":`x1nhvcw1`,"paddingBottom-kGO01o":`x1df270x`,"paddingInline-kg3NbH":`x1fk34n2`,$$css:`@stridge/kit:src/shared/ui/InputGroup/InputGroup.styles.ts:169`}};export{t as addonAlignStyles,e as styles};

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

@@ -0,0 +1,2 @@
+import { InputGroup, InputGroupAddonAlign } from "./InputGroup.js";
+import { INPUT_GROUP_SLOTS, InputGroupSlot } from "./InputGroup.slots.js";

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

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

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

@@ -0,0 +1,31 @@
+import { CSSProperties, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/ui/LtrAtom/LtrAtom.d.ts
+interface LtrAtomProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * One-line `<bdi dir="ltr">` wrapper for atomic strings whose visual order is meaningful in
+ * left-to-right form regardless of the surrounding paragraph direction — wallet addresses, tx
+ * hashes, raw token amounts, ISO timestamps. The browser's bidi algorithm would otherwise
+ * mirror these inside an RTL paragraph (e.g. flipping `0xABC…1234` → `1234…0xABC`).
+ *
+ * Use this primitive instead of inlining `<bdi dir="ltr">` everywhere so isolation behavior
+ * stays consistent across the kit. Forwards `className` + `style` so it slots into existing
+ * stylex / inline-style flows without a wrapper element.
+ *
+ * @example
+ * ```tsx
+ * <LtrAtom>{wallet.payload.address.formatted}</LtrAtom>
+ * ```
+ */
+declare function LtrAtom({
+  children,
+  className,
+  style
+}: LtrAtomProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LtrAtom, type LtrAtomProps };

package/dist/shared/ui/LtrAtom/LtrAtom.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";function t({children:t,className:n,style:r}){return e(`bdi`,{dir:`ltr`,className:n,style:r,children:t})}export{t as LtrAtom};

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

@@ -0,0 +1 @@
+import { LtrAtom, LtrAtomProps } from "./LtrAtom.js";

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

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

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

@@ -0,0 +1,86 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+
+//#region src/shared/ui/ScrollArea/ScrollArea.d.ts
+/**
+ * Overflow container with a custom scrollbar. Wraps Base UI's `ScrollArea.Root` with kit slot stamps and
+ * styling. Compose with {@link ScrollArea.Viewport}, {@link ScrollArea.Scrollbar}, and {@link ScrollArea.Thumb}.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea>
+ *   <ScrollArea.Viewport>
+ *     {children}
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar orientation="vertical">
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ * </ScrollArea>
+ * ```
+ */
+declare function ScrollArea$1({
+  className,
+  style,
+  ...props
+}: ScrollArea$1.Props): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Scrollable viewport inside a {@link ScrollArea}. Wraps Base UI's `ScrollArea.Viewport` with kit styles
+ * and state-aware class/style merging.
+ */
+declare function ScrollAreaViewport({
+  className,
+  style,
+  ...props
+}: ScrollArea$1.ViewportProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Content sizing wrapper inside a {@link ScrollArea.Viewport}. Wraps Base UI's `ScrollArea.Content` with a
+ * kit slot stamp; applies no additional styles beyond what the primitive sets.
+ */
+declare function ScrollAreaContent({
+  className,
+  style,
+  ...props
+}: ScrollArea$1.ContentProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Scrollbar track for a {@link ScrollArea}. Wraps Base UI's `ScrollArea.Scrollbar` with kit track styles.
+ * Defaults to `orientation="vertical"`. Place {@link ScrollArea.Thumb} inside to render the draggable handle.
+ */
+declare function ScrollAreaScrollbar({
+  orientation,
+  className,
+  style,
+  ...props
+}: ScrollArea$1.ScrollbarProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Draggable thumb rendered inside a {@link ScrollArea.Scrollbar}. Wraps Base UI's `ScrollArea.Thumb` with
+ * kit thumb styles and state-aware class/style merging.
+ */
+declare function ScrollAreaThumb({
+  className,
+  style,
+  ...props
+}: ScrollArea$1.ThumbProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Corner fill rendered at the intersection of a vertical and horizontal scrollbar. Wraps Base UI's
+ * `ScrollArea.Corner` with kit corner styles.
+ */
+declare function ScrollAreaCorner({
+  className,
+  style,
+  ...props
+}: ScrollArea$1.CornerProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace ScrollArea$1 {
+  type Props = ScrollArea.Root.Props;
+  type ViewportProps = ScrollArea.Viewport.Props;
+  type ContentProps = ScrollArea.Content.Props;
+  type ScrollbarProps = ScrollArea.Scrollbar.Props;
+  type ThumbProps = ScrollArea.Thumb.Props;
+  type CornerProps = ScrollArea.Corner.Props;
+  const Viewport: typeof ScrollAreaViewport;
+  const Content: typeof ScrollAreaContent;
+  const Scrollbar: typeof ScrollAreaScrollbar;
+  const Thumb: typeof ScrollAreaThumb;
+  const Corner: typeof ScrollAreaCorner;
+}
+//#endregion
+export { ScrollArea$1 as ScrollArea };

package/dist/shared/ui/ScrollArea/ScrollArea.js

@@ -0,0 +1 @@
+"use client";import{mergeClassName as e}from"../../utils/mergeClassName.js";import{mergeStyle as t}from"../../utils/mergeStyle.js";import{SCROLL_AREA_SLOTS as n}from"./ScrollArea.slots.js";import{styles as r}from"./ScrollArea.styles.js";import{jsx as i}from"react/jsx-runtime";import*as a from"@stylexjs/stylex";import{ScrollArea as o}from"@base-ui/react/scroll-area";function s({className:s,style:c,...l}){let u=a.props(r.root);return i(o.Root,{"data-stridge-slot":n.root,...l,className:e(u.className,s),style:t(u.style,c)})}function c({className:s,style:c,...l}){let u=a.props(r.viewport);return i(o.Viewport,{"data-stridge-slot":n.viewport,...l,className:e(u.className,s),style:t(u.style,c)})}function l({className:r,style:a,...s}){return i(o.Content,{"data-stridge-slot":n.content,...s,className:e(void 0,r),style:t(void 0,a)})}function u({orientation:s=`vertical`,className:c,style:l,...u}){let d=a.props(r.scrollbar);return i(o.Scrollbar,{"data-stridge-slot":n.scrollbar,orientation:s,...u,className:e(d.className,c),style:t(d.style,l)})}function d({className:s,style:c,...l}){let u=a.props(r.thumb);return i(o.Thumb,{"data-stridge-slot":n.thumb,...l,className:e(u.className,s),style:t(u.style,c)})}function f({className:s,style:c,...l}){let u=a.props(r.corner);return i(o.Corner,{"data-stridge-slot":n.corner,...l,className:e(u.className,s),style:t(u.style,c)})}(function(e){e.Viewport=c,e.Content=l,e.Scrollbar=u,e.Thumb=d,e.Corner=f})(s||={});export{s as ScrollArea};

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

@@ -0,0 +1,12 @@
+//#region src/shared/ui/ScrollArea/ScrollArea.slots.d.ts
+declare const SCROLL_AREA_SLOTS: {
+  readonly root: "scroll-area";
+  readonly viewport: "scroll-area-viewport";
+  readonly content: "scroll-area-content";
+  readonly scrollbar: "scroll-area-scrollbar";
+  readonly thumb: "scroll-area-thumb";
+  readonly corner: "scroll-area-corner";
+};
+type ScrollAreaSlot = (typeof SCROLL_AREA_SLOTS)[keyof typeof SCROLL_AREA_SLOTS];
+//#endregion
+export { SCROLL_AREA_SLOTS, ScrollAreaSlot };

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

@@ -0,0 +1 @@
+const e={root:`scroll-area`,viewport:`scroll-area-viewport`,content:`scroll-area-content`,scrollbar:`scroll-area-scrollbar`,thumb:`scroll-area-thumb`,corner:`scroll-area-corner`};export{e as SCROLL_AREA_SLOTS};

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

@@ -0,0 +1 @@
+const e={root:{"ScrollArea__styles.root":`ScrollArea__styles.root`,"position-kVAEAm":`x1n2onr6`,"overflow-kVQacm":`xb3r6kr`,"width-kzqmXN":`xh8yej3`,"height-kZKoxP":`x5yr21d`,$$css:`@stridge/kit:src/shared/ui/ScrollArea/ScrollArea.styles.ts:4`},viewport:{"ScrollArea__styles.viewport":`ScrollArea__styles.viewport`,"width-kzqmXN":`xh8yej3`,"height-kZKoxP":`x5yr21d`,"overscrollBehavior-kZeWKH":`xish69e`,"outlineStyle-k3XXqK":`x1t137rt`,":focus-visible_outlineWidth-kPJHz1":`x784prv`,":focus-visible_outlineStyle-k7shQP":`x9v5kkp`,":focus-visible_outlineColor-kZs9gx":`x11ayl2i`,":focus-visible_outlineOffset-kiEn40":`x1bqaal`,":focus-visible_borderRadius-k7aC84":`x63abuj`,$$css:`@stridge/kit:src/shared/ui/ScrollArea/ScrollArea.styles.ts:10`},scrollbar:{"ScrollArea__styles.scrollbar":`ScrollArea__styles.scrollbar`,"display-k1xSpc":`x78zum5`,"touchAction-kFalU9":`x5ve5x3`,"userSelect-kfSwDN":`x87ps6o`,"padding-kmVPX3":`x1ljrego`,"opacity-kSiTet":`xg01cxk`,"transitionProperty-k1ekBW":`x19991ni`,"transitionDuration-kIyJzY":`x1vhb3u9`,"transitionTimingFunction-kAMwcw":`x1xv5090`,"[data-orientation=vertical]_width-kwVBnF":`xr4lo6p`,"[data-orientation=vertical]_height-k2AXh":`xrhq4tq`,"[data-orientation=vertical]_top-kAKlKY":`x1gmvaq8`,"[data-orientation=vertical]_insetInlineEnd-k8vuHP":`x1julj3b`,"[data-orientation=horizontal]_flexDirection-kjU159":`xrvs7vr`,"[data-orientation=horizontal]_height-kH2gFy":`x1thhcpk`,"[data-orientation=horizontal]_width-kUUgZz":`x90yeee`,"[data-orientation=horizontal]_bottom-k9htvw":`x1e9oa8n`,"[data-orientation=horizontal]_insetInlineStart-ksRvkY":`xyj2g8q`,"[data-hovering]_opacity-knyQH7":`x5xkuxn`,"[data-scrolling]_opacity-kAgeN5":`x1mi5j4n`,"@media (prefers-reduced-motion: reduce)_transitionDuration-k6CgDc":`x12w9bfk`,$$css:`@stridge/kit:src/shared/ui/ScrollArea/ScrollArea.styles.ts:23`},thumb:{"ScrollArea__styles.thumb":`ScrollArea__styles.thumb`,"flex-kUk6DE":`x98rzlu`,"backgroundColor-kWkggS":`xriqneg`,"borderRadius-kaIpWk":`x1npxkrn`,"opacity-kSiTet":`xti2d7y`,"transitionProperty-k1ekBW":`x1e8aii2`,"transitionDuration-kIyJzY":`x1vhb3u9`,"transitionTimingFunction-kAMwcw":`x1xv5090`,":hover_opacity-kKhh5M":`x1mzqehw`,"@media (prefers-reduced-motion: reduce)_transitionDuration-k6CgDc":`x12w9bfk`,$$css:`@stridge/kit:src/shared/ui/ScrollArea/ScrollArea.styles.ts:55`},corner:{"ScrollArea__styles.corner":`ScrollArea__styles.corner`,"backgroundColor-kWkggS":`xjbqb8w`,$$css:`@stridge/kit:src/shared/ui/ScrollArea/ScrollArea.styles.ts:70`}};export{e as styles};

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

@@ -0,0 +1,2 @@
+import { ScrollArea } from "./ScrollArea.js";
+import { SCROLL_AREA_SLOTS, ScrollAreaSlot } from "./ScrollArea.slots.js";

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

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

package/dist/shared/ui/Select/Select.context.d.ts

@@ -0,0 +1,10 @@
+//#region src/shared/ui/Select/Select.context.d.ts
+/**
+ * Visual style variant shared across all parts of a `Select` compound.
+ *
+ * - `outline`: bordered input surface, fixed 36px height.
+ * - `tile`: selectable-tile surface + card border + tile radius, sized for asset-row contexts (~44px tall).
+ */
+type SelectVariant = "outline" | "tile";
+//#endregion
+export { SelectVariant };

package/dist/shared/ui/Select/Select.context.js

@@ -0,0 +1 @@
+"use client";import{createContext as e,use as t}from"react";const n={variant:`outline`},r=e(n);function i(){return t(r)}export{n as DEFAULT_SELECT_CONTEXT,r as SelectContext,i as useSelectContext};