@stridge/kit 0.1.0-alpha.52 → 0.1.0-alpha.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -1
- package/dist/package.js +1 -1
- package/dist/scope/KitScope.d.ts +9 -0
- package/dist/scope/KitScope.js +1 -1
- package/dist/scope/context.d.ts +7 -0
- package/dist/shared/presentation/index.js +1 -0
- package/dist/shared/presentation/types.d.ts +30 -0
- package/dist/shared/presentation/types.js +1 -0
- package/dist/shared/presentation/useResolvedSurfaceKind.js +1 -0
- package/dist/shared/ui/AdaptiveSurface/AdaptiveSurface.d.ts +52 -0
- package/dist/shared/ui/AdaptiveSurface/AdaptiveSurface.js +1 -0
- package/dist/shared/ui/AdaptiveSurface/index.d.ts +2 -0
- package/dist/shared/ui/AdaptiveSurface/index.js +1 -0
- package/dist/shared/ui/Dialog/Dialog.d.ts +10 -8
- package/dist/shared/ui/Dialog/Dialog.js +1 -1
- package/dist/shared/ui/Drawer/Drawer.d.ts +135 -0
- package/dist/shared/ui/Drawer/Drawer.js +1 -0
- package/dist/shared/ui/Drawer/Drawer.slots.d.ts +19 -0
- package/dist/shared/ui/Drawer/Drawer.slots.js +1 -0
- package/dist/shared/ui/Drawer/Drawer.styles.js +1 -0
- package/dist/shared/ui/Drawer/index.d.ts +2 -0
- package/dist/shared/ui/Drawer/index.js +1 -0
- package/dist/shared/ui/surfaceContext.d.ts +9 -0
- package/dist/shared/ui/surfaceContext.js +1 -0
- package/dist/styles/index.css +85 -0
- package/dist/types.d.ts +2 -1
- package/dist/ui/index.d.ts +5 -1
- package/dist/ui/index.js +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import { DepositActions, DepositController, DepositMethod, DepositMethodConfig,
|
|
|
9
9
|
import { ChainType, isValidAddressForChainType, isValidEvmAddress, isValidTronAddress, toChainType } from "./shared/chains/index.js";
|
|
10
10
|
import { WithdrawSnapshot } from "./flows/withdraw/driver/types.js";
|
|
11
11
|
import { useWithdrawSnapshot } from "./flows/withdraw/driver/context.js";
|
|
12
|
+
import { Presentation, PresentationConfig, PresentationMode } from "./shared/presentation/types.js";
|
|
12
13
|
import { useKitConfig } from "./scope/context.js";
|
|
13
14
|
import { KitPortalScope } from "./scope/KitPortalScope.js";
|
|
14
15
|
import { IntercomMerchantContext } from "./shared/support/useIntercomMerchantContext.js";
|
|
@@ -42,4 +43,4 @@ import { useWithdrawState } from "./flows/withdraw/orchestrator/controller.js";
|
|
|
42
43
|
import { useOptionalWithdraw, usePrefetchWithdraw, useWithdraw } from "./flows/withdraw/orchestrator/useWithdraw.js";
|
|
43
44
|
import { ConnectWalletConfig } from "./shared/wallet/ConnectWalletContext.js";
|
|
44
45
|
import { StridgeAppearance, StridgeAsset, StridgeDepositDestination, StridgeDepositFlowConfig, StridgeDepositMethodConfig, StridgeDepositMethodsConfig, StridgeFlowOwner, StridgePrefetchConfig, StridgeProvider, StridgeStorageConfig, StridgeWithdrawFlowConfig } from "./stridge/StridgeProvider.js";
|
|
45
|
-
export { type ActivityActions, type ActivityAmount, type ActivityController, type ActivityDirection, type ActivityDriver, type ActivityOpenInput, type ActivityPayload, type ActivityRowPayload, type ActivitySnapshot, type ActivityState, type ActivityStateName, type ActivityStatus, type ActivityStatusType, type BannerAckBucket, type ChainLogoInput, type ChainLogoMeta, type ChainType, type ConnectWalletConfig, DEFAULT_KIT_STORAGE_NAMESPACE, type DepositActions, type DepositController, type DepositMethod, type DepositMethodConfig, type DepositMethodsConfig, type OpenInput as DepositOpenInput, type DepositSnapshot, type DepositState, type DepositStateName, type FailureInfo, type FlowEvent, type FlowIdKey, type IntercomMerchantContext, KitPortalScope, KitStorageProvider, type LogosNamespace, type PublicStridgeEventBus, type StridgeAppearance, type StridgeAsset, type StridgeDepositDestination, type StridgeDepositFlowConfig, type StridgeDepositMethodConfig, type StridgeDepositMethodsConfig, type StridgeEnvironment, type StridgeEvent, type StridgeFlowOwner, type StridgePrefetchConfig, StridgeProvider, type StridgeStorageConfig, type StridgeWithdrawFlowConfig, type SupportConfig, type SupportOpenContext, type TermsConfig, type TermsSelectContext, type TokenLogoInput, type TxRef, type UiEvent, type WithdrawActions, type WithdrawBalanceInput, type WithdrawBindings, type WithdrawController, type WithdrawSnapshot, type WithdrawState, type WithdrawStateName, type WithdrawSubmitActions, type WithdrawSubmitCallback, type WithdrawSubmitInput, type WithdrawSuggestedRecipient, type WithdrawalFormSnapshot, bannerAckStorageKey, bucketFromSettlement, createKitStorage, createLocalStorageAdapter, createMemoryStorageAdapter, createSessionStorageAdapter, isValidAddressForChainType, isValidEvmAddress, isValidTronAddress, logos, resolveStorageAdapter, toChainType, useActivity, useActivitySnapshot, useActivityState, useBannerAck, useBannerAckForSettlement, useCurrentFlowId, useDeposit, useDepositSnapshot, useDepositState, useKitConfig, useKitStorage, useKitStorageValue, useOptionalActivity, useOptionalDeposit, useOptionalPrefetchActivity, useOptionalWithdraw, usePrefetchActivity, usePrefetchDeposit, usePrefetchWithdraw, useStridgeEvent, useStridgeEventBus, useStridgeEvents, useStridgeFlowEvent, useStridgeFlowEvents, useWithdraw, useWithdrawBindings, useWithdrawSnapshot, useWithdrawState };
|
|
46
|
+
export { type ActivityActions, type ActivityAmount, type ActivityController, type ActivityDirection, type ActivityDriver, type ActivityOpenInput, type ActivityPayload, type ActivityRowPayload, type ActivitySnapshot, type ActivityState, type ActivityStateName, type ActivityStatus, type ActivityStatusType, type BannerAckBucket, type ChainLogoInput, type ChainLogoMeta, type ChainType, type ConnectWalletConfig, DEFAULT_KIT_STORAGE_NAMESPACE, type DepositActions, type DepositController, type DepositMethod, type DepositMethodConfig, type DepositMethodsConfig, type OpenInput as DepositOpenInput, type DepositSnapshot, type DepositState, type DepositStateName, type FailureInfo, type FlowEvent, type FlowIdKey, type IntercomMerchantContext, KitPortalScope, KitStorageProvider, type LogosNamespace, type Presentation, type PresentationConfig, type PresentationMode, type PublicStridgeEventBus, type StridgeAppearance, type StridgeAsset, type StridgeDepositDestination, type StridgeDepositFlowConfig, type StridgeDepositMethodConfig, type StridgeDepositMethodsConfig, type StridgeEnvironment, type StridgeEvent, type StridgeFlowOwner, type StridgePrefetchConfig, StridgeProvider, type StridgeStorageConfig, type StridgeWithdrawFlowConfig, type SupportConfig, type SupportOpenContext, type TermsConfig, type TermsSelectContext, type TokenLogoInput, type TxRef, type UiEvent, type WithdrawActions, type WithdrawBalanceInput, type WithdrawBindings, type WithdrawController, type WithdrawSnapshot, type WithdrawState, type WithdrawStateName, type WithdrawSubmitActions, type WithdrawSubmitCallback, type WithdrawSubmitInput, type WithdrawSuggestedRecipient, type WithdrawalFormSnapshot, bannerAckStorageKey, bucketFromSettlement, createKitStorage, createLocalStorageAdapter, createMemoryStorageAdapter, createSessionStorageAdapter, isValidAddressForChainType, isValidEvmAddress, isValidTronAddress, logos, resolveStorageAdapter, toChainType, useActivity, useActivitySnapshot, useActivityState, useBannerAck, useBannerAckForSettlement, useCurrentFlowId, useDeposit, useDepositSnapshot, useDepositState, useKitConfig, useKitStorage, useKitStorageValue, useOptionalActivity, useOptionalDeposit, useOptionalPrefetchActivity, useOptionalWithdraw, usePrefetchActivity, usePrefetchDeposit, usePrefetchWithdraw, useStridgeEvent, useStridgeEventBus, useStridgeEvents, useStridgeFlowEvent, useStridgeFlowEvents, useWithdraw, useWithdrawBindings, useWithdrawSnapshot, useWithdrawState };
|
package/dist/package.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=`0.1.0-alpha.
|
|
1
|
+
var e=`0.1.0-alpha.53`;export{e as version};
|
package/dist/scope/KitScope.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Presentation } from "../shared/presentation/types.js";
|
|
1
2
|
import { KitAttribution, KitDirection, KitRadius, KitTarget, KitTheme } from "./context.js";
|
|
2
3
|
import { ComponentProps, ReactNode } from "react";
|
|
3
4
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
@@ -22,6 +23,7 @@ declare function KitScope({
|
|
|
22
23
|
locale,
|
|
23
24
|
target,
|
|
24
25
|
attribution,
|
|
26
|
+
presentation,
|
|
25
27
|
className,
|
|
26
28
|
style,
|
|
27
29
|
dir,
|
|
@@ -72,6 +74,13 @@ declare namespace KitScope {
|
|
|
72
74
|
* compositions always render — set this to `"hidden"` when composing the brand row manually.
|
|
73
75
|
*/
|
|
74
76
|
attribution?: KitAttribution;
|
|
77
|
+
/**
|
|
78
|
+
* How gateway surfaces present themselves. `"auto"` (default) renders a centred dialog on
|
|
79
|
+
* wide containers and a bottom-sheet drawer below the breakpoint; `"dialog"` / `"drawer"`
|
|
80
|
+
* force one. Pass `{ mode, breakpoint }` to tune the px threshold. Published into kit config
|
|
81
|
+
* as the global default for `AdaptiveSurface`; a per-surface `presentation` prop overrides it.
|
|
82
|
+
*/
|
|
83
|
+
presentation?: Presentation;
|
|
75
84
|
/** Children rendered inside the kit scope. */
|
|
76
85
|
children?: ReactNode;
|
|
77
86
|
}
|
package/dist/scope/KitScope.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{KitContext as e}from"./context.js";import{KIT_SCOPE_SLOTS as t}from"./KitScope.slots.js";import{useCallback as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";import{DirectionProvider as c}from"@base-ui/react/direction-provider";function l({accent:r,radius:o,theme:l,direction:d,locale:m,target:h,attribution:g,
|
|
1
|
+
"use client";import{KitContext as e}from"./context.js";import{KIT_SCOPE_SLOTS as t}from"./KitScope.slots.js";import{useCallback as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";import{DirectionProvider as c}from"@base-ui/react/direction-provider";function l({accent:r,radius:o,theme:l,direction:d,locale:m,target:h,attribution:g,presentation:_,className:v,style:y,dir:b,ref:x,children:S,...C}){let w=a(null),T=f(w,b),E=u(b)??d??T,D=n(e=>{w.current=e,p(x,e)},[x]),O=i(()=>({accent:r,radius:o,theme:l,direction:E,locale:m,target:h,attribution:g,presentation:_}),[r,o,l,E,m,h,g,_]),k=r?{"--stridge-kit-primary":r}:void 0,A=k||y?{...k,...y}:void 0;return s(e.Provider,{value:O,children:s(c,{direction:E??`ltr`,children:s(`div`,{...C,ref:D,dir:b,"data-stridge-scope":``,"data-stridge-radius":o,"data-stridge-theme":l,"data-stridge-locale":m,"data-stridge-slot":t.root,className:v,style:A,children:S})})})}function u(e){return e===`ltr`||e===`rtl`?e:void 0}function d(e){for(let t=e;t;t=t.parentElement){let e=u(t.getAttribute(`dir`)??void 0);if(e)return e}if(!(typeof window>`u`))return u(window.getComputedStyle(e).direction)}function f(e,t){let[n,i]=o(()=>u(t));return r(()=>{let n=e.current;if(!n){i(u(t));return}let r=()=>{i(d(n))};if(r(),typeof MutationObserver>`u`)return;let a=new MutationObserver(r);for(let e=n;e;e=e.parentElement)a.observe(e,{attributes:!0,attributeFilter:[`dir`]});return()=>a.disconnect()},[t,e]),n}function p(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}export{l as KitScope};
|
package/dist/scope/context.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Presentation } from "../shared/presentation/types.js";
|
|
1
2
|
//#region src/scope/context.d.ts
|
|
2
3
|
type KitRadius = "sharp" | "subtle" | "rounded" | "pill";
|
|
3
4
|
type KitTheme = "dark" | "light";
|
|
@@ -73,6 +74,12 @@ interface KitConfig {
|
|
|
73
74
|
* composing the brand row manually".
|
|
74
75
|
*/
|
|
75
76
|
attribution?: KitAttribution;
|
|
77
|
+
/**
|
|
78
|
+
* How gateway surfaces present themselves — `"auto"` (default) renders a centred dialog on wide
|
|
79
|
+
* containers and a bottom-sheet drawer below the breakpoint, `"dialog"` / `"drawer"` force one.
|
|
80
|
+
* Read by {@link AdaptiveSurface} as the global default; a per-surface `presentation` prop wins.
|
|
81
|
+
*/
|
|
82
|
+
presentation?: Presentation;
|
|
76
83
|
}
|
|
77
84
|
/**
|
|
78
85
|
* Reads the active {@link KitConfig} from the nearest provider. Returns `{}` when no provider is
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./types.js";import"./useResolvedSurfaceKind.js";
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
//#region src/shared/presentation/types.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* How a kit surface presents itself.
|
|
4
|
+
*
|
|
5
|
+
* - `"auto"` (default) renders a centred dialog when the surface's containing block is at or above
|
|
6
|
+
* the breakpoint, and a bottom-sheet drawer below it.
|
|
7
|
+
* - `"dialog"` always renders the centred dialog.
|
|
8
|
+
* - `"drawer"` always renders the bottom-sheet drawer.
|
|
9
|
+
*/
|
|
10
|
+
type PresentationMode = "auto" | "dialog" | "drawer";
|
|
11
|
+
/**
|
|
12
|
+
* Object form of {@link Presentation} for tuning the responsive breakpoint.
|
|
13
|
+
*/
|
|
14
|
+
interface PresentationConfig {
|
|
15
|
+
/** @default "auto" */
|
|
16
|
+
mode?: PresentationMode;
|
|
17
|
+
/**
|
|
18
|
+
* Containing-block width (px) below which `"auto"` renders the drawer. Measured against the
|
|
19
|
+
* surface's portal `container` when one is supplied, else the viewport.
|
|
20
|
+
* @default 600
|
|
21
|
+
*/
|
|
22
|
+
breakpoint?: number;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* String shorthand for the common case, or the object form to tune the breakpoint. Set globally via
|
|
26
|
+
* `StridgeProvider`'s `appearance.presentation` or per-surface via the `presentation` prop.
|
|
27
|
+
*/
|
|
28
|
+
type Presentation = PresentationMode | PresentationConfig;
|
|
29
|
+
//#endregion
|
|
30
|
+
export { Presentation, PresentationConfig, PresentationMode };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function e(e){if(e===void 0)return{mode:`auto`,breakpoint:600};if(typeof e==`string`)return{mode:e,breakpoint:600};let t=typeof e.breakpoint==`number`&&Number.isFinite(e.breakpoint)&&e.breakpoint>0?e.breakpoint:600;return{mode:e.mode??`auto`,breakpoint:t}}export{e as resolvePresentation};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{resolvePresentation as e}from"./types.js";import{useEffect as t,useLayoutEffect as n,useState as r}from"react";const i=typeof window>`u`?t:n;function a(e){return typeof window>`u`?null:e?e.getBoundingClientRect().width:document.documentElement.clientWidth}function o({container:t,presentation:n}){let{mode:o,breakpoint:s}=e(n),[c,l]=r(`dialog`);return i(()=>{if(o!==`auto`)return;let e=()=>{let e=a(t);l(e!==null&&e<s?`drawer`:`dialog`)};if(e(),t){if(typeof ResizeObserver>`u`)return;let n=new ResizeObserver(e);return n.observe(t),()=>n.disconnect()}if(!(typeof window>`u`))return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[o,s,t]),o===`auto`?c:o}export{o as useResolvedSurfaceKind};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { Presentation } from "../../presentation/types.js";
|
|
2
|
+
import { ReactElement, ReactNode } from "react";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/shared/ui/AdaptiveSurface/AdaptiveSurface.d.ts
|
|
6
|
+
interface AdaptiveSurfaceProps {
|
|
7
|
+
/** Controlled open state. Pair with `onOpenChange` for full control. */
|
|
8
|
+
open?: boolean;
|
|
9
|
+
/** Initial open state when uncontrolled. Ignored if `open` is set. */
|
|
10
|
+
defaultOpen?: boolean;
|
|
11
|
+
/** Fires whenever the surface open state changes. */
|
|
12
|
+
onOpenChange?: (open: boolean) => void;
|
|
13
|
+
/**
|
|
14
|
+
* Element rendered as the surface trigger. Omit when the surface is opened programmatically via
|
|
15
|
+
* `open`.
|
|
16
|
+
*/
|
|
17
|
+
trigger?: ReactElement;
|
|
18
|
+
/**
|
|
19
|
+
* Element the surface portals into. Defaults to `document.body`. Doubles as the measured
|
|
20
|
+
* containing block for `"auto"` presentation — when supplied, the dialog-vs-drawer breakpoint is
|
|
21
|
+
* measured against this element's width instead of the viewport.
|
|
22
|
+
*/
|
|
23
|
+
container?: HTMLElement | null;
|
|
24
|
+
/**
|
|
25
|
+
* Per-surface presentation override. Falls back to the provider's `appearance.presentation`
|
|
26
|
+
* (read from kit config), then to `"auto"`. Precedence: prop > provider config > `"auto"`.
|
|
27
|
+
*/
|
|
28
|
+
presentation?: Presentation;
|
|
29
|
+
/** Content rendered inside the surface (dialog or drawer). */
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Surface that renders a centred {@link Dialog} or a bottom-sheet {@link Drawer} depending on the
|
|
34
|
+
* resolved {@link Presentation}. In `"auto"` mode it measures the containing block (the `container`
|
|
35
|
+
* prop, else the viewport) and stays in sync with it — resizing across the breakpoint live swaps
|
|
36
|
+
* dialog↔drawer (see {@link useResolvedSurfaceKind}). The swap only remounts the surface subtree;
|
|
37
|
+
* flow state survives because the FSM controllers are mounted above the surface and the widgets
|
|
38
|
+
* re-read it from context. Both surfaces publish the shared surface-content context, so gateway
|
|
39
|
+
* widgets render their bare frame and `Dialog.CloseButton` (which closes either surface, since Base
|
|
40
|
+
* UI builds the drawer on the dialog store) works unchanged inside both.
|
|
41
|
+
*/
|
|
42
|
+
declare function AdaptiveSurface({
|
|
43
|
+
open,
|
|
44
|
+
defaultOpen,
|
|
45
|
+
onOpenChange,
|
|
46
|
+
trigger,
|
|
47
|
+
container,
|
|
48
|
+
presentation,
|
|
49
|
+
children
|
|
50
|
+
}: AdaptiveSurfaceProps): _$react_jsx_runtime0.JSX.Element;
|
|
51
|
+
//#endregion
|
|
52
|
+
export { AdaptiveSurface, AdaptiveSurfaceProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{useKitConfig as e}from"../../../scope/context.js";import{Dialog as t}from"../Dialog/Dialog.js";import"../Dialog/index.js";import{useResolvedSurfaceKind as n}from"../../presentation/useResolvedSurfaceKind.js";import"../../presentation/index.js";import{Drawer as r}from"../Drawer/Drawer.js";import"../Drawer/index.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({open:o,defaultOpen:s,onOpenChange:c,trigger:l,container:u,presentation:d,children:f}){let p=e();return n({container:u,presentation:d??p.presentation})===`drawer`?a(r,{open:o,defaultOpen:s,onOpenChange:c,children:[l?i(r.Trigger,{render:l}):null,i(r.Content,{container:u,children:f})]}):a(t,{open:o,defaultOpen:s,onOpenChange:c,children:[l?i(t.Trigger,{render:l}):null,i(t.Content,{container:u,children:f})]})}export{o as AdaptiveSurface};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./AdaptiveSurface.js";
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
+
import { useIsInsideSurfaceContent } from "../surfaceContext.js";
|
|
1
2
|
import { ComponentProps } from "react";
|
|
2
3
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
4
|
import { Dialog } from "@base-ui/react/dialog";
|
|
4
5
|
|
|
5
6
|
//#region src/shared/ui/Dialog/Dialog.d.ts
|
|
6
7
|
/**
|
|
7
|
-
* Returns `true` when the calling component is rendered inside a
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* Returns `true` when the calling component is rendered inside a kit surface's content region. Kept
|
|
9
|
+
* as the stable public name; aliases the surface-neutral {@link useIsInsideSurfaceContent} so the
|
|
10
|
+
* hook resolves `true` inside both `Dialog.Content` and `Drawer.Content`.
|
|
10
11
|
*/
|
|
11
|
-
declare
|
|
12
|
+
declare const useIsInsideDialogContent: typeof useIsInsideSurfaceContent;
|
|
12
13
|
/**
|
|
13
14
|
* Root of the dialog compound. Wraps Base UI's `Dialog.Root` and stamps `data-stridge-slot` on the element.
|
|
14
15
|
*
|
|
@@ -40,8 +41,8 @@ declare function DialogOverlay({
|
|
|
40
41
|
}: Dialog$1.OverlayProps): _$react_jsx_runtime0.JSX.Element;
|
|
41
42
|
/**
|
|
42
43
|
* Popup shell for the dialog. Wraps Base UI's `Dialog.Popup` inside {@link Dialog.Portal} and
|
|
43
|
-
* {@link Dialog.Overlay}, scopes the portal into `KitPortalScope`, and sets
|
|
44
|
-
*
|
|
44
|
+
* {@link Dialog.Overlay}, scopes the portal into `KitPortalScope`, and sets the shared
|
|
45
|
+
* surface-content context so descendants can detect they are inside a kit surface.
|
|
45
46
|
*
|
|
46
47
|
* @see {@link Dialog.ContentProps} for the `container` prop that scopes the overlay to a custom element.
|
|
47
48
|
*/
|
|
@@ -57,8 +58,9 @@ declare function DialogContent({
|
|
|
57
58
|
* child of its parent (via `margin-inline-start: auto`) and wired through `Dialog.Close` so the dialog's open state is the
|
|
58
59
|
* source of truth.
|
|
59
60
|
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
61
|
+
* Renders only inside a `Dialog.Content` (the X is a dialog affordance). Returns `null` in card mode (no surface) and in a
|
|
62
|
+
* `Drawer.Content` — a drawer dismisses via its grabber / swipe-down / backdrop, not a close button — so gateway widget
|
|
63
|
+
* headers can compose it unconditionally and it self-hides in the drawer presentation.
|
|
62
64
|
*/
|
|
63
65
|
declare function DialogCloseButton(): _$react_jsx_runtime0.JSX.Element | null;
|
|
64
66
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{useLingui as e}from"../../i18n/useLingui.js";import"../../../i18n/index.js";import{KitPortalScope as t}from"../../../scope/KitPortalScope.js";import"../../../scope/index.js";import{joinClassNames as n}from"../../utils/joinClassNames.js";import{XIcon as r}from"../../icons/XIcon.js";import"../../../icons/index.js";import{mergeClassName as i}from"../../utils/mergeClassName.js";import{mergeStyle as a}from"../../utils/mergeStyle.js";import{IconButton as o}from"../IconButton/IconButton.js";import"../IconButton/index.js";import{ScrollArea as s}from"../ScrollArea/ScrollArea.js";import"../ScrollArea/index.js";import{
|
|
1
|
+
"use client";import{useLingui as e}from"../../i18n/useLingui.js";import"../../../i18n/index.js";import{KitPortalScope as t}from"../../../scope/KitPortalScope.js";import"../../../scope/index.js";import{joinClassNames as n}from"../../utils/joinClassNames.js";import{XIcon as r}from"../../icons/XIcon.js";import"../../../icons/index.js";import{mergeClassName as i}from"../../utils/mergeClassName.js";import{mergeStyle as a}from"../../utils/mergeStyle.js";import{IconButton as o}from"../IconButton/IconButton.js";import"../IconButton/index.js";import{ScrollArea as s}from"../ScrollArea/ScrollArea.js";import"../ScrollArea/index.js";import{SurfaceContentContext as c,useIsInsideSurfaceContent as l,useSurfaceKind as u}from"../surfaceContext.js";import{DIALOG_SLOTS as d}from"./Dialog.slots.js";import{styles as f}from"./Dialog.styles.js";import{jsx as p,jsxs as m}from"react/jsx-runtime";import*as h from"@stylexjs/stylex";import{Dialog as g}from"@base-ui/react/dialog";const _=l;function v(e){return p(g.Root,{"data-stridge-slot":d.root,...e})}function y(e){return p(g.Trigger,{"data-stridge-slot":d.trigger,...e})}function b(e){return p(g.Portal,{"data-stridge-slot":d.portal,...e})}function x(e){return p(g.Close,{"data-stridge-slot":d.close,...e})}function S({className:e,style:t,...n}){let r=h.props(f.overlay);return p(g.Backdrop,{"data-stridge-slot":d.overlay,...n,className:i(r.className,e),style:a(r.style,t)})}function C({children:e,className:n,style:r,container:o,...s}){let l=h.props(f.content);return p(b,{container:o??void 0,children:m(t,{children:[p(S,{}),p(g.Popup,{"data-stridge-slot":d.content,...s,className:i(l.className,n),style:a(l.style,r),children:p(c,{value:`dialog`,children:e})})]})})}function w(){let t=u(),{_:n}=e();return t===`dialog`?p(g.Close,{"data-stridge-slot":d.close,render:p(o,{"aria-label":n({id:`yz7wBu`,message:`Close`}),...h.props(f.closeButton),children:p(r,{"aria-hidden":!0})})}):null}function T({className:e,style:t,...r}){let i=h.props(f.header);return p(`div`,{"data-stridge-slot":d.header,...r,className:n(i.className,e),style:{...i.style,...t}})}function E({className:e,style:t,children:r,...i}){let a=h.props(f.body),o=h.props(f.bodyScrollArea),c=h.props(f.bodyScrollViewport),l=h.props(f.bodyInner);return p(`div`,{"data-stridge-slot":d.body,className:a.className,style:a.style,children:m(s,{className:o.className,style:o.style,children:[p(s.Viewport,{...i,className:n(c.className,e),style:{...c.style,...t},children:p(`div`,{className:l.className,style:l.style,children:r})}),p(s.Scrollbar,{orientation:`vertical`,children:p(s.Thumb,{})})]})})}function D({className:e,style:t,...r}){let i=h.props(f.footer);return p(`div`,{"data-stridge-slot":d.footer,...r,className:n(i.className,e),style:{...i.style,...t}})}function O({className:e,style:t,...n}){let r=h.props(f.title);return p(g.Title,{"data-stridge-slot":d.title,...n,className:i(r.className,e),style:a(r.style,t)})}function k({className:e,style:t,...n}){let r=h.props(f.description);return p(g.Description,{"data-stridge-slot":d.description,...n,className:i(r.className,e),style:a(r.style,t)})}(function(e){e.Trigger=y,e.Close=x,e.CloseButton=w,e.Portal=b,e.Overlay=S,e.Content=C,e.Header=T,e.Body=E,e.Footer=D,e.Title=O,e.Description=k})(v||={});export{v as Dialog,_ as useIsInsideDialogContent};
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { ComponentProps } from "react";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import { Drawer } from "@base-ui/react/drawer";
|
|
4
|
+
|
|
5
|
+
//#region src/shared/ui/Drawer/Drawer.d.ts
|
|
6
|
+
/**
|
|
7
|
+
* Root of the drawer compound. Wraps Base UI's `Drawer.Root` as a bottom sheet (`swipeDirection`
|
|
8
|
+
* defaults to `"down"`) and stamps `data-stridge-slot`. A drawer is dismissed by swiping the grabber
|
|
9
|
+
* down, tapping the backdrop, or pressing escape — it ships no close (X) button; that's a dialog
|
|
10
|
+
* affordance. Base UI builds the drawer on the same dialog store as `Dialog`, so `Dialog.Close`
|
|
11
|
+
* (e.g. a "Cancel" action) still closes it; the kit's `Dialog.CloseButton` self-hides in a drawer
|
|
12
|
+
* (see {@link useSurfaceKind}), so gateway widget headers compose it unconditionally with no drawer X.
|
|
13
|
+
*
|
|
14
|
+
* Compose with {@link Drawer.Content}, {@link Drawer.Title}, and {@link Drawer.Description} to build
|
|
15
|
+
* an accessible bottom-sheet dialog.
|
|
16
|
+
*/
|
|
17
|
+
declare function Drawer$1(props: Drawer$1.Props): _$react_jsx_runtime0.JSX.Element;
|
|
18
|
+
/**
|
|
19
|
+
* Toggles the drawer open state. Wraps Base UI's `Drawer.Trigger`.
|
|
20
|
+
*/
|
|
21
|
+
declare function DrawerTrigger(props: Drawer$1.TriggerProps): _$react_jsx_runtime0.JSX.Element;
|
|
22
|
+
/**
|
|
23
|
+
* Portals its children outside the current DOM subtree. Wraps Base UI's `Drawer.Portal`.
|
|
24
|
+
*/
|
|
25
|
+
declare function DrawerPortal(props: Drawer$1.PortalProps): _$react_jsx_runtime0.JSX.Element;
|
|
26
|
+
/**
|
|
27
|
+
* Closes the drawer when activated. Wraps Base UI's `Drawer.Close` — render a labelled action
|
|
28
|
+
* (e.g. a "Cancel" button) through it. A drawer has no close (X) affordance by design.
|
|
29
|
+
*/
|
|
30
|
+
declare function DrawerClose(props: Drawer$1.CloseProps): _$react_jsx_runtime0.JSX.Element;
|
|
31
|
+
/**
|
|
32
|
+
* Full-viewport backdrop rendered behind the drawer popup. Wraps Base UI's `Drawer.Backdrop`.
|
|
33
|
+
* Automatically composed by {@link Drawer.Content} — mount separately only for custom layering.
|
|
34
|
+
*/
|
|
35
|
+
declare function DrawerOverlay({
|
|
36
|
+
className,
|
|
37
|
+
style,
|
|
38
|
+
...props
|
|
39
|
+
}: Drawer$1.OverlayProps): _$react_jsx_runtime0.JSX.Element;
|
|
40
|
+
/**
|
|
41
|
+
* Popup shell for the drawer — a bottom sheet. Wraps Base UI's `Drawer.Popup` inside
|
|
42
|
+
* {@link Drawer.Portal}, {@link Drawer.Overlay}, and Base UI's positioning `Drawer.Viewport`,
|
|
43
|
+
* scopes the portal into `KitPortalScope`, renders the grabber handle, and sets the shared
|
|
44
|
+
* surface-content context so descendants can detect they are inside a kit surface (gateway widgets
|
|
45
|
+
* then render their bare frame instead of a doubled `Card`).
|
|
46
|
+
*
|
|
47
|
+
* @see {@link Drawer.ContentProps} for the `container` prop that scopes the sheet to a custom element.
|
|
48
|
+
*/
|
|
49
|
+
declare function DrawerContent({
|
|
50
|
+
children,
|
|
51
|
+
className,
|
|
52
|
+
style,
|
|
53
|
+
container,
|
|
54
|
+
...props
|
|
55
|
+
}: Drawer$1.ContentProps): _$react_jsx_runtime0.JSX.Element;
|
|
56
|
+
/**
|
|
57
|
+
* Header row for the drawer. Renders as a styled `<div>` that lays out the title (and any actions)
|
|
58
|
+
* in a flex row. Compose with {@link Drawer.Title}. A drawer has no close (X) button.
|
|
59
|
+
*/
|
|
60
|
+
declare function DrawerHeader({
|
|
61
|
+
className,
|
|
62
|
+
style,
|
|
63
|
+
...props
|
|
64
|
+
}: Drawer$1.HeaderProps): _$react_jsx_runtime0.JSX.Element;
|
|
65
|
+
/**
|
|
66
|
+
* Body content slot for non-gateway drawer usage. Mirrors {@link import("../Dialog").Dialog.Body}:
|
|
67
|
+
* a flex column that absorbs leftover sheet height with an embedded {@link ScrollArea} as its sole
|
|
68
|
+
* flex child, so tall content scrolls inside the sheet while header and footer stay pinned. Padding
|
|
69
|
+
* lives on the inner wrapper so it scrolls with the content.
|
|
70
|
+
*/
|
|
71
|
+
declare function DrawerBody({
|
|
72
|
+
className,
|
|
73
|
+
style,
|
|
74
|
+
children,
|
|
75
|
+
...props
|
|
76
|
+
}: Drawer$1.BodyProps): _$react_jsx_runtime0.JSX.Element;
|
|
77
|
+
/**
|
|
78
|
+
* Footer row for the drawer. Renders as a styled `<div>` intended for action buttons placed at the
|
|
79
|
+
* bottom of the sheet.
|
|
80
|
+
*/
|
|
81
|
+
declare function DrawerFooter({
|
|
82
|
+
className,
|
|
83
|
+
style,
|
|
84
|
+
...props
|
|
85
|
+
}: Drawer$1.FooterProps): _$react_jsx_runtime0.JSX.Element;
|
|
86
|
+
/**
|
|
87
|
+
* Accessible title for the drawer. Wraps Base UI's `Drawer.Title` and is automatically referenced by
|
|
88
|
+
* the drawer's `aria-labelledby` attribute.
|
|
89
|
+
*/
|
|
90
|
+
declare function DrawerTitle({
|
|
91
|
+
className,
|
|
92
|
+
style,
|
|
93
|
+
...props
|
|
94
|
+
}: Drawer$1.TitleProps): _$react_jsx_runtime0.JSX.Element;
|
|
95
|
+
/**
|
|
96
|
+
* Accessible description for the drawer. Wraps Base UI's `Drawer.Description` and is automatically
|
|
97
|
+
* referenced by the drawer's `aria-describedby` attribute.
|
|
98
|
+
*/
|
|
99
|
+
declare function DrawerDescription({
|
|
100
|
+
className,
|
|
101
|
+
style,
|
|
102
|
+
...props
|
|
103
|
+
}: Drawer$1.DescriptionProps): _$react_jsx_runtime0.JSX.Element;
|
|
104
|
+
declare namespace Drawer$1 {
|
|
105
|
+
type Props = Drawer.Root.Props;
|
|
106
|
+
type TriggerProps = Drawer.Trigger.Props;
|
|
107
|
+
type PortalProps = Drawer.Portal.Props;
|
|
108
|
+
type CloseProps = Drawer.Close.Props;
|
|
109
|
+
type OverlayProps = Drawer.Backdrop.Props;
|
|
110
|
+
interface ContentProps extends Drawer.Popup.Props {
|
|
111
|
+
/**
|
|
112
|
+
* Element the drawer portals into. Defaults to `document.body` (full-page sheet). Pass a
|
|
113
|
+
* transformed ancestor with `overflow: clip` — e.g. a mobile mockup frame — to scope the
|
|
114
|
+
* sheet's width, height, and backdrop to that rect.
|
|
115
|
+
*/
|
|
116
|
+
container?: HTMLElement | null;
|
|
117
|
+
}
|
|
118
|
+
type HeaderProps = ComponentProps<"div">;
|
|
119
|
+
type BodyProps = ComponentProps<"div">;
|
|
120
|
+
type FooterProps = ComponentProps<"div">;
|
|
121
|
+
type TitleProps = Drawer.Title.Props;
|
|
122
|
+
type DescriptionProps = Drawer.Description.Props;
|
|
123
|
+
const Trigger: typeof DrawerTrigger;
|
|
124
|
+
const Close: typeof DrawerClose;
|
|
125
|
+
const Portal: typeof DrawerPortal;
|
|
126
|
+
const Overlay: typeof DrawerOverlay;
|
|
127
|
+
const Content: typeof DrawerContent;
|
|
128
|
+
const Header: typeof DrawerHeader;
|
|
129
|
+
const Body: typeof DrawerBody;
|
|
130
|
+
const Footer: typeof DrawerFooter;
|
|
131
|
+
const Title: typeof DrawerTitle;
|
|
132
|
+
const Description: typeof DrawerDescription;
|
|
133
|
+
}
|
|
134
|
+
//#endregion
|
|
135
|
+
export { Drawer$1 as Drawer };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{KitPortalScope as e}from"../../../scope/KitPortalScope.js";import"../../../scope/index.js";import{joinClassNames as t}from"../../utils/joinClassNames.js";import{mergeClassName as n}from"../../utils/mergeClassName.js";import{mergeStyle as r}from"../../utils/mergeStyle.js";import{ScrollArea as i}from"../ScrollArea/ScrollArea.js";import"../ScrollArea/index.js";import{SurfaceContentContext as a}from"../surfaceContext.js";import{DRAWER_SLOTS as o}from"./Drawer.slots.js";import{styles as s}from"./Drawer.styles.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";import*as u from"@stylexjs/stylex";import{Drawer as d}from"@base-ui/react/drawer";function f(e){return c(d.Root,{swipeDirection:`down`,"data-stridge-slot":o.root,...e})}function p(e){return c(d.Trigger,{"data-stridge-slot":o.trigger,...e})}function m(e){return c(d.Portal,{"data-stridge-slot":o.portal,...e})}function h(e){return c(d.Close,{"data-stridge-slot":o.close,...e})}function g({className:e,style:t,...i}){let a=u.props(s.overlay);return c(d.Backdrop,{"data-stridge-slot":o.overlay,...i,className:n(a.className,e),style:r(a.style,t)})}function _({children:t,className:i,style:f,container:p,...h}){let _=u.props(s.content),v=u.props(s.viewport),y=u.props(s.handle);return c(m,{container:p??void 0,children:l(e,{children:[c(g,{}),c(d.Viewport,{"data-stridge-slot":o.viewport,className:v.className,style:v.style,children:l(d.Popup,{"data-stridge-slot":o.content,...h,className:n(_.className,i),style:r(_.style,f),children:[c(`div`,{"data-stridge-slot":o.handle,"aria-hidden":!0,className:y.className,style:y.style}),c(a,{value:`drawer`,children:t})]})})]})})}function v({className:e,style:n,...r}){let i=u.props(s.header);return c(`div`,{"data-stridge-slot":o.header,...r,className:t(i.className,e),style:{...i.style,...n}})}function y({className:e,style:n,children:r,...a}){let d=u.props(s.body),f=u.props(s.bodyScrollArea),p=u.props(s.bodyScrollViewport),m=u.props(s.bodyInner);return c(`div`,{"data-stridge-slot":o.body,className:d.className,style:d.style,children:l(i,{className:f.className,style:f.style,children:[c(i.Viewport,{...a,className:t(p.className,e),style:{...p.style,...n},children:c(`div`,{className:m.className,style:m.style,children:r})}),c(i.Scrollbar,{orientation:`vertical`,children:c(i.Thumb,{})})]})})}function b({className:e,style:n,...r}){let i=u.props(s.footer);return c(`div`,{"data-stridge-slot":o.footer,...r,className:t(i.className,e),style:{...i.style,...n}})}function x({className:e,style:t,...i}){let a=u.props(s.title);return c(d.Title,{"data-stridge-slot":o.title,...i,className:n(a.className,e),style:r(a.style,t)})}function S({className:e,style:t,...i}){let a=u.props(s.description);return c(d.Description,{"data-stridge-slot":o.description,...i,className:n(a.className,e),style:r(a.style,t)})}(function(e){e.Trigger=p,e.Close=h,e.Portal=m,e.Overlay=g,e.Content=_,e.Header=v,e.Body=y,e.Footer=b,e.Title=x,e.Description=S})(f||={});export{f as Drawer};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//#region src/shared/ui/Drawer/Drawer.slots.d.ts
|
|
2
|
+
declare const DRAWER_SLOTS: {
|
|
3
|
+
readonly root: "drawer";
|
|
4
|
+
readonly trigger: "drawer-trigger";
|
|
5
|
+
readonly portal: "drawer-portal";
|
|
6
|
+
readonly overlay: "drawer-overlay";
|
|
7
|
+
readonly viewport: "drawer-viewport";
|
|
8
|
+
readonly content: "drawer-content";
|
|
9
|
+
readonly handle: "drawer-handle";
|
|
10
|
+
readonly close: "drawer-close";
|
|
11
|
+
readonly title: "drawer-title";
|
|
12
|
+
readonly description: "drawer-description";
|
|
13
|
+
readonly header: "drawer-header";
|
|
14
|
+
readonly body: "drawer-body";
|
|
15
|
+
readonly footer: "drawer-footer";
|
|
16
|
+
};
|
|
17
|
+
type DrawerSlot = (typeof DRAWER_SLOTS)[keyof typeof DRAWER_SLOTS];
|
|
18
|
+
//#endregion
|
|
19
|
+
export { DRAWER_SLOTS, DrawerSlot };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e={root:`drawer`,trigger:`drawer-trigger`,portal:`drawer-portal`,overlay:`drawer-overlay`,viewport:`drawer-viewport`,content:`drawer-content`,handle:`drawer-handle`,close:`drawer-close`,title:`drawer-title`,description:`drawer-description`,header:`drawer-header`,body:`drawer-body`,footer:`drawer-footer`};export{e as DRAWER_SLOTS};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e={overlay:{"Drawer__styles.overlay":`Drawer__styles.overlay`,"position-kVAEAm":`xixxii4`,"inset-kpwlN0":`x10a8y8t`,"zIndex-kY2c9j":`xg4qres`,"backgroundColor-kWkggS":`xyxldge`,"opacity-kSiTet":`x1hc1fzr`,"transitionProperty-k1ekBW":`x19991ni`,"transitionDuration-kIyJzY":`x1s4mzch`,"transitionTimingFunction-kAMwcw":`x1xv5090`,":is([data-starting-style], [data-ending-style])_opacity-kdD3Bq":`x1i2unn7`,"@media (prefers-reduced-motion: reduce)_transitionProperty-kXHXEI":`x4wkmsb`,"@media (prefers-reduced-motion: reduce)_transitionDuration-k6CgDc":`x12w9bfk`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:9`},viewport:{"Drawer__styles.viewport":`Drawer__styles.viewport`,"position-kVAEAm":`xixxii4`,"insetBlock-kYYq5F":`x10no89f`,"insetInline-kkqhue":`x17y0mx6`,"zIndex-kY2c9j":`x51lqrf`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"justifyContent-kjj79g":`x13a6bvl`,"alignItems-kGNEyG":`x1qjc9v5`,"pointerEvents-kfzvcC":`x47corl`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:32`},content:{"Drawer__styles.content":`Drawer__styles.content`,"pointerEvents-kfzvcC":`x67bb7w`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"width-kzqmXN":`xh8yej3`,"minHeight-kAzted":`x2lwn1j`,"maxHeight-kskxy":`x96tae4`,"borderStartStartRadius-krdFHd":`x8htq0b`,"borderStartEndRadius-kfmiAY":`x1af6ir8`,"borderTopWidth-kEafiO":`x178xt8z`,"borderInlineWidth-kjGldf":`x1l0rsgs`,"borderBottomWidth-kt9PQ7":`x1qhh985`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x1aqcfi1`,"backgroundColor-kWkggS":`x3cgcfv`,"color-kMwMTN":`xzn0pkc`,"boxShadow-kGVxlE":`xa2vu2y`,"fontFamily-kMv6JI":`xlaww2m`,"outline-kI3sdo":`x1a2a7pz`,"overflow-kVQacm":`x7giv3`,"transform-k3aq6I":`xacbhai`,"transitionProperty-k1ekBW":`x11xpdln`,"transitionDuration-kIyJzY":`x1s4mzch`,"transitionTimingFunction-kAMwcw":`xr4whw6`,":is([data-starting-style], [data-ending-style])_transform-koVVf4":`xjvuu2i`,"[data-swiping]_transitionDuration-kRUqrN":`xsqp3co`,"@media (prefers-reduced-motion: reduce)_transitionProperty-kXHXEI":`x4wkmsb`,"@media (prefers-reduced-motion: reduce)_transitionDuration-k6CgDc":`x12w9bfk`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:56`},handle:{"Drawer__styles.handle":`Drawer__styles.handle`,"flexShrink-kmuXW":`x2lah0s`,"width-kzqmXN":`x19k59d4`,"height-kZKoxP":`xl3s093`,"marginInline-kUOVxO":`xvueqy4`,"marginTop-keoZOQ":`xq9mr0s`,"marginBottom-k1K539":`x1782xsq`,"borderRadius-kaIpWk":`x1npxkrn`,"backgroundColor-kWkggS":`x1p0xf7o`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:95`},header:{"Drawer__styles.header":`Drawer__styles.header`,"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/Drawer/Drawer.styles.ts:106`},body:{"Drawer__styles.body":`Drawer__styles.body`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"flex-kUk6DE":`x12lumcd`,"minHeight-kAzted":`x2lwn1j`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:120`},bodyScrollArea:{"Drawer__styles.bodyScrollArea":`Drawer__styles.bodyScrollArea`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"flex-kUk6DE":`x12lumcd`,"minHeight-kAzted":`x2lwn1j`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:126`},bodyScrollViewport:{"Drawer__styles.bodyScrollViewport":`Drawer__styles.bodyScrollViewport`,"flex-kUk6DE":`x845mor`,"minHeight-kAzted":`x2lwn1j`,"width-kzqmXN":`xh8yej3`,"maxWidth-ks0D6T":`x193iq5w`,"height-kZKoxP":`xt7dq6l`,"maxHeight-kskxy":`xmz0i5r`,"overflowX-kXHlph":`x6ikm8r`,"overflowY-kORKVm":`x1odjw0f`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:132`},bodyInner:{"Drawer__styles.bodyInner":`Drawer__styles.bodyInner`,"boxSizing-kB7OPa":`x9f619`,"width-kzqmXN":`xh8yej3`,"maxWidth-ks0D6T":`x193iq5w`,"minWidth-k7Eaqz":`xeuugli`,"paddingTop-kLKAdn":`x1h03h88`,"paddingBottom-kGO01o":`xfvigk`,"paddingInlineStart-kZCmMZ":`xz7312c`,"paddingInlineEnd-kwRFfy":`x1o5r3ls`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:142`},footer:{"Drawer__styles.footer":`Drawer__styles.footer`,"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/Drawer/Drawer.styles.ts:153`},title:{"Drawer__styles.title":`Drawer__styles.title`,"marginTop-keoZOQ":`xdj266r`,"marginBottom-k1K539":`xat24cr`,"color-kMwMTN":`xzn0pkc`,"fontFamily-kMv6JI":`xlaww2m`,"fontSize-kGuDYH":`x126f79r`,"fontWeight-k63SB2":`x1qvi77d`,"lineHeight-kLWn49":`xfh9y1j`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:162`},description:{"Drawer__styles.description":`Drawer__styles.description`,"marginTop-keoZOQ":`xdj266r`,"marginBottom-k1K539":`xat24cr`,"color-kMwMTN":`xi96bwj`,"fontFamily-kMv6JI":`xlaww2m`,"fontSize-kGuDYH":`x14qa7mu`,"lineHeight-kLWn49":`x14vj8e1`,$$css:`@stridge/kit:src/shared/ui/Drawer/Drawer.styles.ts:171`}};export{e as styles};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./Drawer.slots.js";import"./Drawer.js";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
//#region src/shared/ui/surfaceContext.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Returns `true` when the calling component is rendered inside any kit surface's content region
|
|
4
|
+
* (`Dialog.Content` or `Drawer.Content`). Lets gateway widgets pick the right shell — `Card` frame
|
|
5
|
+
* inline, bare frame when portaled.
|
|
6
|
+
*/
|
|
7
|
+
declare function useIsInsideSurfaceContent(): boolean;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { useIsInsideSurfaceContent };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{createContext as e,use as t}from"react";const n=e(null);n.displayName=`SurfaceContentContext`;function r(){return t(n)!==null}function i(){return t(n)}export{n as SurfaceContentContext,r as useIsInsideSurfaceContent,i as useSurfaceKind};
|
package/dist/styles/index.css
CHANGED
|
@@ -66,6 +66,9 @@
|
|
|
66
66
|
--stridge-kit-z-tooltip: 1070;
|
|
67
67
|
--stridge-kit-overlay: oklch(0% 0 0 / .4);
|
|
68
68
|
--stridge-kit-dialog-width: 480px;
|
|
69
|
+
--stridge-kit-drawer-max-block-size: calc(100% - 2rem);
|
|
70
|
+
--stridge-kit-drawer-handle-size: 36px;
|
|
71
|
+
--stridge-kit-drawer-handle-thickness: 4px;
|
|
69
72
|
}
|
|
70
73
|
|
|
71
74
|
:root, [data-stridge-scope] {
|
|
@@ -196,6 +199,7 @@
|
|
|
196
199
|
--stridge-kit-card-border: oklch(29.55% .01 285.72);
|
|
197
200
|
--stridge-kit-card-border-frame: oklch(27.07% .01 285.77);
|
|
198
201
|
--stridge-kit-card-shadow: 0 30px 80px oklch(0% 0 0 / .6), 0 2px 6px oklch(0% 0 0 / .4);
|
|
202
|
+
--stridge-kit-drawer-handle-color: oklch(52.95% .01 286.13 / .55);
|
|
199
203
|
--stridge-kit-skeleton-base: oklch(29.55% .01 285.72);
|
|
200
204
|
--stridge-kit-skeleton-highlight: oklch(35.16% .01 285.67);
|
|
201
205
|
--stridge-kit-attribution-prefix-color: oklch(62% .005 286);
|
|
@@ -257,6 +261,7 @@
|
|
|
257
261
|
--stridge-kit-card-border: oklch(91% 0 286);
|
|
258
262
|
--stridge-kit-card-border-frame: oklch(91% 0 286);
|
|
259
263
|
--stridge-kit-card-shadow: 0 30px 80px oklch(0% 0 0 / .16), 0 2px 6px oklch(0% 0 0 / .08);
|
|
264
|
+
--stridge-kit-drawer-handle-color: oklch(60% .01 286 / .4);
|
|
260
265
|
--stridge-kit-skeleton-base: oklch(91% 0 286);
|
|
261
266
|
--stridge-kit-skeleton-highlight: oklch(95% 0 286);
|
|
262
267
|
--stridge-kit-attribution-prefix-color: oklch(50% .01 286);
|
|
@@ -396,6 +401,10 @@
|
|
|
396
401
|
border-color: var(--stridge-kit-border);
|
|
397
402
|
}
|
|
398
403
|
|
|
404
|
+
.x1l0rsgs {
|
|
405
|
+
border-inline-width: 1px;
|
|
406
|
+
}
|
|
407
|
+
|
|
399
408
|
.x6i6fhv {
|
|
400
409
|
border-radius: .375rem;
|
|
401
410
|
}
|
|
@@ -604,6 +613,14 @@
|
|
|
604
613
|
gap: var(--stridge-kit-space-2);
|
|
605
614
|
}
|
|
606
615
|
|
|
616
|
+
.x10no89f {
|
|
617
|
+
inset-block: 0;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.x17y0mx6 {
|
|
621
|
+
inset-inline: 0;
|
|
622
|
+
}
|
|
623
|
+
|
|
607
624
|
.x10im51j {
|
|
608
625
|
margin-block: 0;
|
|
609
626
|
}
|
|
@@ -612,6 +629,10 @@
|
|
|
612
629
|
margin-inline: 22px;
|
|
613
630
|
}
|
|
614
631
|
|
|
632
|
+
.xvueqy4 {
|
|
633
|
+
margin-inline: auto;
|
|
634
|
+
}
|
|
635
|
+
|
|
615
636
|
.x1mqxmvn {
|
|
616
637
|
margin-inline: calc(var(--stridge-kit-space-1) * -1);
|
|
617
638
|
}
|
|
@@ -1144,6 +1165,10 @@
|
|
|
1144
1165
|
background-color: var(--stridge-kit-skeleton-base);
|
|
1145
1166
|
}
|
|
1146
1167
|
|
|
1168
|
+
.x1p0xf7o {
|
|
1169
|
+
background-color: var(--stridge-kit-drawer-handle-color);
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1147
1172
|
.xfhhmty {
|
|
1148
1173
|
background-color: var(--stridge-kit-destructive-soft);
|
|
1149
1174
|
}
|
|
@@ -1196,10 +1221,18 @@
|
|
|
1196
1221
|
border-start-end-radius: var(--stridge-kit-radius-md);
|
|
1197
1222
|
}
|
|
1198
1223
|
|
|
1224
|
+
.x1af6ir8 {
|
|
1225
|
+
border-start-end-radius: var(--stridge-kit-card-radius-frame);
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1199
1228
|
.x1d6sz28 {
|
|
1200
1229
|
border-start-start-radius: var(--stridge-kit-radius-md);
|
|
1201
1230
|
}
|
|
1202
1231
|
|
|
1232
|
+
.x8htq0b {
|
|
1233
|
+
border-start-start-radius: var(--stridge-kit-card-radius-frame);
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1203
1236
|
.x1gsh91t {
|
|
1204
1237
|
box-shadow: 0 0 0 1.5px var(--stridge-kit-tile-surface);
|
|
1205
1238
|
}
|
|
@@ -1672,6 +1705,10 @@
|
|
|
1672
1705
|
justify-content: center;
|
|
1673
1706
|
}
|
|
1674
1707
|
|
|
1708
|
+
.x13a6bvl {
|
|
1709
|
+
justify-content: flex-end;
|
|
1710
|
+
}
|
|
1711
|
+
|
|
1675
1712
|
.x1nhvcw1 {
|
|
1676
1713
|
justify-content: flex-start;
|
|
1677
1714
|
}
|
|
@@ -1844,6 +1881,10 @@
|
|
|
1844
1881
|
opacity: 0;
|
|
1845
1882
|
}
|
|
1846
1883
|
|
|
1884
|
+
.x1hc1fzr {
|
|
1885
|
+
opacity: 1;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1847
1888
|
.x1clqncf {
|
|
1848
1889
|
order: -1;
|
|
1849
1890
|
}
|
|
@@ -1944,6 +1985,10 @@
|
|
|
1944
1985
|
padding-inline-start: var(--stridge-kit-space-2);
|
|
1945
1986
|
}
|
|
1946
1987
|
|
|
1988
|
+
.x67bb7w {
|
|
1989
|
+
pointer-events: auto;
|
|
1990
|
+
}
|
|
1991
|
+
|
|
1947
1992
|
.x47corl {
|
|
1948
1993
|
pointer-events: none;
|
|
1949
1994
|
}
|
|
@@ -2108,6 +2153,10 @@
|
|
|
2108
2153
|
transform: translate(-50%, -50%);
|
|
2109
2154
|
}
|
|
2110
2155
|
|
|
2156
|
+
.xacbhai {
|
|
2157
|
+
transform: translateY(var(--drawer-swipe-movement-y, 0px));
|
|
2158
|
+
}
|
|
2159
|
+
|
|
2111
2160
|
.xx6bhzk {
|
|
2112
2161
|
transition-duration: .15s;
|
|
2113
2162
|
}
|
|
@@ -2128,6 +2177,10 @@
|
|
|
2128
2177
|
transition-duration: var(--stridge-kit-duration-fast);
|
|
2129
2178
|
}
|
|
2130
2179
|
|
|
2180
|
+
.x1s4mzch {
|
|
2181
|
+
transition-duration: var(--stridge-kit-duration-slow);
|
|
2182
|
+
}
|
|
2183
|
+
|
|
2131
2184
|
.x11vqxbs {
|
|
2132
2185
|
transition-property: background-color, border-color, box-shadow;
|
|
2133
2186
|
}
|
|
@@ -2196,6 +2249,10 @@
|
|
|
2196
2249
|
transition-timing-function: ease-out;
|
|
2197
2250
|
}
|
|
2198
2251
|
|
|
2252
|
+
.xr4whw6 {
|
|
2253
|
+
transition-timing-function: var(--stridge-kit-ease-enter);
|
|
2254
|
+
}
|
|
2255
|
+
|
|
2199
2256
|
.x1xv5090 {
|
|
2200
2257
|
transition-timing-function: var(--stridge-kit-ease-out);
|
|
2201
2258
|
}
|
|
@@ -2365,6 +2422,10 @@
|
|
|
2365
2422
|
color: var(--stridge-kit-muted-foreground);
|
|
2366
2423
|
}
|
|
2367
2424
|
|
|
2425
|
+
.x1i2unn7:is([data-starting-style], [data-ending-style]) {
|
|
2426
|
+
opacity: 0;
|
|
2427
|
+
}
|
|
2428
|
+
|
|
2368
2429
|
.x11ayl2i:focus-visible {
|
|
2369
2430
|
outline-color: var(--stridge-kit-ring);
|
|
2370
2431
|
}
|
|
@@ -2389,6 +2450,10 @@
|
|
|
2389
2450
|
text-underline-offset: 2px;
|
|
2390
2451
|
}
|
|
2391
2452
|
|
|
2453
|
+
.xjvuu2i:is([data-starting-style], [data-ending-style]) {
|
|
2454
|
+
transform: translateY(100%);
|
|
2455
|
+
}
|
|
2456
|
+
|
|
2392
2457
|
.x1yi73pz:has( > input:focus-visible, > textarea:focus-visible) {
|
|
2393
2458
|
box-shadow: var(--stridge-kit-shadow-ring-focus);
|
|
2394
2459
|
}
|
|
@@ -2533,6 +2598,10 @@
|
|
|
2533
2598
|
.x12w9bfk.x12w9bfk {
|
|
2534
2599
|
transition-duration: 0s;
|
|
2535
2600
|
}
|
|
2601
|
+
|
|
2602
|
+
.x4wkmsb.x4wkmsb {
|
|
2603
|
+
transition-property: none;
|
|
2604
|
+
}
|
|
2536
2605
|
}
|
|
2537
2606
|
|
|
2538
2607
|
@container field-group (width >= 32rem) {
|
|
@@ -2729,6 +2798,10 @@
|
|
|
2729
2798
|
height: var(--collapsible-panel-height);
|
|
2730
2799
|
}
|
|
2731
2800
|
|
|
2801
|
+
.xl3s093 {
|
|
2802
|
+
height: var(--stridge-kit-drawer-handle-thickness);
|
|
2803
|
+
}
|
|
2804
|
+
|
|
2732
2805
|
.x1nrll8i {
|
|
2733
2806
|
left: 50%;
|
|
2734
2807
|
}
|
|
@@ -2841,6 +2914,10 @@
|
|
|
2841
2914
|
max-height: min(var(--available-height),200px);
|
|
2842
2915
|
}
|
|
2843
2916
|
|
|
2917
|
+
.x96tae4 {
|
|
2918
|
+
max-height: var(--stridge-kit-drawer-max-block-size);
|
|
2919
|
+
}
|
|
2920
|
+
|
|
2844
2921
|
.x193iq5w {
|
|
2845
2922
|
max-width: 100%;
|
|
2846
2923
|
}
|
|
@@ -3173,6 +3250,10 @@
|
|
|
3173
3250
|
width: max-content;
|
|
3174
3251
|
}
|
|
3175
3252
|
|
|
3253
|
+
.x19k59d4 {
|
|
3254
|
+
width: var(--stridge-kit-drawer-handle-size);
|
|
3255
|
+
}
|
|
3256
|
+
|
|
3176
3257
|
.x1g31smg:first-child {
|
|
3177
3258
|
border-top-width: 0;
|
|
3178
3259
|
}
|
|
@@ -3387,6 +3468,10 @@
|
|
|
3387
3468
|
transform: rotate(90deg);
|
|
3388
3469
|
}
|
|
3389
3470
|
|
|
3471
|
+
.xsqp3co[data-swiping] {
|
|
3472
|
+
transition-duration: 0s;
|
|
3473
|
+
}
|
|
3474
|
+
|
|
3390
3475
|
@media (prefers-reduced-motion: reduce) {
|
|
3391
3476
|
.xgx5xwo.xgx5xwo[data-closed], .xslpr3k.xslpr3k[data-open] {
|
|
3392
3477
|
animation-duration: 0s;
|
package/dist/types.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import { ConfirmDepositPhase, DepositActions, DepositController, DepositMethod,
|
|
|
6
6
|
import { ReceiveOptionDto, ReceiveOptionsResponse, WithdrawableBalanceDto, WithdrawableBalancesResponse, WithdrawalQuoteDto, WithdrawalQuoteResponse, WithdrawalSettlementDto, WithdrawalSettlementResponse } from "./flows/withdraw/driver/dto.js";
|
|
7
7
|
import { ReceiveChainPayload, ReceiveTokenOptionPayload, WithdrawableBalanceItemPayload, WithdrawalQuoteBreakdownPayload, WithdrawalQuotePayload, WithdrawalReceiveAssetPayload, WithdrawalSettlementFailurePayload, WithdrawalSettlementPayload, WithdrawalSettlementPendingPayload, WithdrawalSettlementSuccessPayload } from "./flows/withdraw/driver/payloads.js";
|
|
8
8
|
import { WithdrawSnapshot } from "./flows/withdraw/driver/types.js";
|
|
9
|
+
import { Presentation, PresentationConfig, PresentationMode } from "./shared/presentation/types.js";
|
|
9
10
|
import { KitConfig, KitDirection, KitRadius, KitTarget, KitTheme } from "./scope/context.js";
|
|
10
11
|
import { KitStorageAdapter, KitStoragePersistence } from "./storage/types.js";
|
|
11
12
|
import { KitStorage } from "./storage/createKitStorage.js";
|
|
@@ -13,4 +14,4 @@ import { WithdrawActions, WithdrawController, WithdrawEvent, WithdrawState, With
|
|
|
13
14
|
import { WithdrawBalanceInput, WithdrawBindings, WithdrawSuggestedRecipient } from "./flows/withdraw/bindings/WithdrawBindings.js";
|
|
14
15
|
import { BannerAckBucket } from "./banners/useBannerAck.js";
|
|
15
16
|
import { STEPS_WITH_OWN_SETTLEMENT_VIEW, stepRendersSettlement } from "./flows/deposit/orchestrator/steps.js";
|
|
16
|
-
export { type AcceptedAssetPayload, type AddressItemPayload, type AssetPayload, type BalanceItemPayload, type BannerAckBucket, type BrandPayload, type ChainPayload, type ConfirmDepositPhase, type DepositActions, type DepositController, type DepositMethod, type DepositSnapshot, type DepositState, type DepositStateName, type Entity, type FailureInfo, type GatewayEvent, type KitConfig, type KitDirection, type KitRadius, type KitStorage, type KitStorageAdapter, type KitStoragePersistence, type KitTarget, type KitTheme, type OpenInput, type QuoteBreakdownPayload, type QuotePayload, type QuoteRoutePayload, type ReceiveChainPayload, type ReceiveOptionDto, type ReceiveOptionsResponse, type ReceiveTokenOptionPayload, type ResolvedOpenInput, type RetryTargetSpec, STEPS_WITH_OWN_SETTLEMENT_VIEW, type SettlementFailureKind, type SettlementFailurePayload, type SettlementPayload, type SettlementPendingPayload, type SettlementSuccessPayload, type SourceWalletPayload, type TargetPayload, type TxRef, type WalletInfo, type WalletPayload, type WithdrawActions, type WithdrawBalanceInput, type WithdrawBindings, type WithdrawController, type WithdrawEvent, type WithdrawSnapshot, type WithdrawState, type WithdrawStateName, type WithdrawSubmitActions, type WithdrawSubmitCallback, type WithdrawSubmitInput, type WithdrawSuggestedRecipient, type WithdrawableBalanceDto, type WithdrawableBalanceItemPayload, type WithdrawableBalancesResponse, type WithdrawalFormSnapshot, type WithdrawalQuoteBreakdownPayload, type WithdrawalQuoteDto, type WithdrawalQuotePayload, type WithdrawalQuoteResponse, type WithdrawalReceiveAssetPayload, type WithdrawalSettlementDto, type WithdrawalSettlementFailurePayload, type WithdrawalSettlementPayload, type WithdrawalSettlementPendingPayload, type WithdrawalSettlementResponse, type WithdrawalSettlementSuccessPayload, stepRendersSettlement };
|
|
17
|
+
export { type AcceptedAssetPayload, type AddressItemPayload, type AssetPayload, type BalanceItemPayload, type BannerAckBucket, type BrandPayload, type ChainPayload, type ConfirmDepositPhase, type DepositActions, type DepositController, type DepositMethod, type DepositSnapshot, type DepositState, type DepositStateName, type Entity, type FailureInfo, type GatewayEvent, type KitConfig, type KitDirection, type KitRadius, type KitStorage, type KitStorageAdapter, type KitStoragePersistence, type KitTarget, type KitTheme, type OpenInput, type Presentation, type PresentationConfig, type PresentationMode, type QuoteBreakdownPayload, type QuotePayload, type QuoteRoutePayload, type ReceiveChainPayload, type ReceiveOptionDto, type ReceiveOptionsResponse, type ReceiveTokenOptionPayload, type ResolvedOpenInput, type RetryTargetSpec, STEPS_WITH_OWN_SETTLEMENT_VIEW, type SettlementFailureKind, type SettlementFailurePayload, type SettlementPayload, type SettlementPendingPayload, type SettlementSuccessPayload, type SourceWalletPayload, type TargetPayload, type TxRef, type WalletInfo, type WalletPayload, type WithdrawActions, type WithdrawBalanceInput, type WithdrawBindings, type WithdrawController, type WithdrawEvent, type WithdrawSnapshot, type WithdrawState, type WithdrawStateName, type WithdrawSubmitActions, type WithdrawSubmitCallback, type WithdrawSubmitInput, type WithdrawSuggestedRecipient, type WithdrawableBalanceDto, type WithdrawableBalanceItemPayload, type WithdrawableBalancesResponse, type WithdrawalFormSnapshot, type WithdrawalQuoteBreakdownPayload, type WithdrawalQuoteDto, type WithdrawalQuotePayload, type WithdrawalQuoteResponse, type WithdrawalReceiveAssetPayload, type WithdrawalSettlementDto, type WithdrawalSettlementFailurePayload, type WithdrawalSettlementPayload, type WithdrawalSettlementPendingPayload, type WithdrawalSettlementResponse, type WithdrawalSettlementSuccessPayload, stepRendersSettlement };
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { Presentation, PresentationConfig, PresentationMode } from "../shared/presentation/types.js";
|
|
1
2
|
import { WalletRow, WalletRowDensity, WalletRowProps } from "../shared/ui/WalletRow/WalletRow.js";
|
|
2
3
|
import { WALLET_ROW_SLOTS, WalletRowSlot } from "../shared/ui/WalletRow/WalletRow.slots.js";
|
|
4
|
+
import { AdaptiveSurface, AdaptiveSurfaceProps } from "../shared/ui/AdaptiveSurface/AdaptiveSurface.js";
|
|
3
5
|
import { Alert, AlertVariant } from "../shared/ui/Alert/Alert.js";
|
|
4
6
|
import { ALERT_SLOTS, AlertSlot } from "../shared/ui/Alert/Alert.slots.js";
|
|
5
7
|
import { AmountInput } from "../shared/ui/AmountInput/AmountInput.js";
|
|
@@ -17,6 +19,8 @@ import { Details } from "../shared/ui/Details/Details.js";
|
|
|
17
19
|
import { DETAILS_SLOTS, DetailsSlot } from "../shared/ui/Details/Details.slots.js";
|
|
18
20
|
import { Dialog, useIsInsideDialogContent } from "../shared/ui/Dialog/Dialog.js";
|
|
19
21
|
import { DIALOG_SLOTS, DialogSlot } from "../shared/ui/Dialog/Dialog.slots.js";
|
|
22
|
+
import { Drawer } from "../shared/ui/Drawer/Drawer.js";
|
|
23
|
+
import { DRAWER_SLOTS, DrawerSlot } from "../shared/ui/Drawer/Drawer.slots.js";
|
|
20
24
|
import { ExternalLink } from "../shared/ui/ExternalLink/ExternalLink.js";
|
|
21
25
|
import { EXTERNAL_LINK_SLOTS, ExternalLinkSlot } from "../shared/ui/ExternalLink/ExternalLink.slots.js";
|
|
22
26
|
import { Field, FieldOrientation } from "../shared/ui/Field/Field.js";
|
|
@@ -47,4 +51,4 @@ import { TokenLogoProps } from "../shared/ui/TokenLogo/types.js";
|
|
|
47
51
|
import { TokenLogo } from "../shared/ui/TokenLogo/TokenLogo.js";
|
|
48
52
|
import { Tooltip, TooltipVariant } from "../shared/ui/Tooltip/Tooltip.js";
|
|
49
53
|
import { TOOLTIP_SLOTS, TooltipSlot } from "../shared/ui/Tooltip/Tooltip.slots.js";
|
|
50
|
-
export { ALERT_SLOTS, AMOUNT_INPUT_SLOTS, Alert, AlertSlot, AlertVariant, AmountInput, AmountInputSlot, BADGE_SLOTS, BUTTON_SLOTS, Badge, BadgeColor, BadgeRoundness, BadgeSize, BadgeSlot, BadgeVariant, Button, ButtonSize, ButtonSlot, ButtonVariant, CARD_SLOTS, COLLAPSIBLE_SLOTS, Card, CardSlot, CardVariant, Collapsible, CollapsibleSlot, DETAILS_SLOTS, DIALOG_SLOTS, Details, DetailsSlot, Dialog, DialogSlot, EXTERNAL_LINK_SLOTS, ExternalLink, ExternalLinkSlot, FIELD_SLOTS, Field, FieldOrientation, FieldSlot, HtmlTags, ICON_BUTTON_SLOTS, IMAGE_SLOTS, INPUT_GROUP_SLOTS, IconButton, IconButtonSize, IconButtonSlot, Image, ImageGroupProps, ImageOverlayProps, ImageProps, ImageShape, ImageSize, ImageSlot, InputGroup, InputGroupAddonAlign, InputGroupSlot, LtrAtom, LtrAtomProps, SCROLL_AREA_SLOTS, SELECTABLE_TILE_SLOTS, SELECT_SLOTS, SKELETON_SLOTS, STEPS_SLOTS, ScrollArea, ScrollAreaSlot, Select, SelectSlot, SelectVariant, SelectableTile, SelectableTileGroup, SelectableTileGroupProps, SelectableTileShape, SelectableTileSlot, Skeleton, SkeletonSlot, Step, Steps, StepsSlot, TEXT_SLOTS, TOOLTIP_SLOTS, TextAlign, TextColor, TextComponent, TextFactory, TextFont, TextFontWeight, TextLeading, TextProps, TextSize, TextSlot, TextTracking, TextTransform, TokenLogo, TokenLogoProps, Tooltip, TooltipSlot, TooltipVariant, WALLET_ROW_SLOTS, WalletRow, WalletRowDensity, WalletRowProps, WalletRowSlot, formatAmountForInput, parseAmountInputValue, text, useIsInsideDialogContent };
|
|
54
|
+
export { ALERT_SLOTS, AMOUNT_INPUT_SLOTS, AdaptiveSurface, AdaptiveSurfaceProps, Alert, AlertSlot, AlertVariant, AmountInput, AmountInputSlot, BADGE_SLOTS, BUTTON_SLOTS, Badge, BadgeColor, BadgeRoundness, BadgeSize, BadgeSlot, BadgeVariant, Button, ButtonSize, ButtonSlot, ButtonVariant, CARD_SLOTS, COLLAPSIBLE_SLOTS, Card, CardSlot, CardVariant, Collapsible, CollapsibleSlot, DETAILS_SLOTS, DIALOG_SLOTS, DRAWER_SLOTS, Details, DetailsSlot, Dialog, DialogSlot, Drawer, DrawerSlot, EXTERNAL_LINK_SLOTS, ExternalLink, ExternalLinkSlot, FIELD_SLOTS, Field, FieldOrientation, FieldSlot, HtmlTags, ICON_BUTTON_SLOTS, IMAGE_SLOTS, INPUT_GROUP_SLOTS, IconButton, IconButtonSize, IconButtonSlot, Image, ImageGroupProps, ImageOverlayProps, ImageProps, ImageShape, ImageSize, ImageSlot, InputGroup, InputGroupAddonAlign, InputGroupSlot, LtrAtom, LtrAtomProps, Presentation, PresentationConfig, PresentationMode, SCROLL_AREA_SLOTS, SELECTABLE_TILE_SLOTS, SELECT_SLOTS, SKELETON_SLOTS, STEPS_SLOTS, ScrollArea, ScrollAreaSlot, Select, SelectSlot, SelectVariant, SelectableTile, SelectableTileGroup, SelectableTileGroupProps, SelectableTileShape, SelectableTileSlot, Skeleton, SkeletonSlot, Step, Steps, StepsSlot, TEXT_SLOTS, TOOLTIP_SLOTS, TextAlign, TextColor, TextComponent, TextFactory, TextFont, TextFontWeight, TextLeading, TextProps, TextSize, TextSlot, TextTracking, TextTransform, TokenLogo, TokenLogoProps, Tooltip, TooltipSlot, TooltipVariant, WALLET_ROW_SLOTS, WalletRow, WalletRowDensity, WalletRowProps, WalletRowSlot, formatAmountForInput, parseAmountInputValue, text, useIsInsideDialogContent };
|
package/dist/ui/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{EXTERNAL_LINK_SLOTS as e}from"../shared/ui/ExternalLink/ExternalLink.slots.js";import{ExternalLink as t}from"../shared/ui/ExternalLink/ExternalLink.js";import"../shared/ui/ExternalLink/index.js";import{BUTTON_SLOTS as n}from"../shared/ui/Button/Button.slots.js";import{Button as r}from"../shared/ui/Button/Button.js";import"../shared/ui/Button/index.js";import{ICON_BUTTON_SLOTS as i}from"../shared/ui/IconButton/IconButton.slots.js";import{IconButton as a}from"../shared/ui/IconButton/IconButton.js";import"../shared/ui/IconButton/index.js";import{SCROLL_AREA_SLOTS as o}from"../shared/ui/ScrollArea/ScrollArea.slots.js";import{ScrollArea as s}from"../shared/ui/ScrollArea/ScrollArea.js";import"../shared/ui/ScrollArea/index.js";import{DIALOG_SLOTS as c}from"../shared/ui/Dialog/Dialog.slots.js";import{Dialog as l,useIsInsideDialogContent as u}from"../shared/ui/Dialog/Dialog.js";import"../shared/ui/Dialog/index.js";import{
|
|
1
|
+
import{EXTERNAL_LINK_SLOTS as e}from"../shared/ui/ExternalLink/ExternalLink.slots.js";import{ExternalLink as t}from"../shared/ui/ExternalLink/ExternalLink.js";import"../shared/ui/ExternalLink/index.js";import{BUTTON_SLOTS as n}from"../shared/ui/Button/Button.slots.js";import{Button as r}from"../shared/ui/Button/Button.js";import"../shared/ui/Button/index.js";import{ICON_BUTTON_SLOTS as i}from"../shared/ui/IconButton/IconButton.slots.js";import{IconButton as a}from"../shared/ui/IconButton/IconButton.js";import"../shared/ui/IconButton/index.js";import{SCROLL_AREA_SLOTS as o}from"../shared/ui/ScrollArea/ScrollArea.slots.js";import{ScrollArea as s}from"../shared/ui/ScrollArea/ScrollArea.js";import"../shared/ui/ScrollArea/index.js";import{DIALOG_SLOTS as c}from"../shared/ui/Dialog/Dialog.slots.js";import{Dialog as l,useIsInsideDialogContent as u}from"../shared/ui/Dialog/Dialog.js";import"../shared/ui/Dialog/index.js";import{DRAWER_SLOTS as d}from"../shared/ui/Drawer/Drawer.slots.js";import{Drawer as f}from"../shared/ui/Drawer/Drawer.js";import"../shared/ui/Drawer/index.js";import{AdaptiveSurface as p}from"../shared/ui/AdaptiveSurface/AdaptiveSurface.js";import"../shared/ui/AdaptiveSurface/index.js";import{ALERT_SLOTS as m}from"../shared/ui/Alert/Alert.slots.js";import{Alert as h}from"../shared/ui/Alert/Alert.js";import"../shared/ui/Alert/index.js";import{AMOUNT_INPUT_SLOTS as g}from"../shared/ui/AmountInput/AmountInput.slots.js";import{formatAmountForInput as _,parseAmountInputValue as v}from"../shared/ui/AmountInput/utils.js";import{AmountInput as y}from"../shared/ui/AmountInput/AmountInput.js";import"../shared/ui/AmountInput/index.js";import{BADGE_SLOTS as b}from"../shared/ui/Badge/Badge.slots.js";import{Badge as x}from"../shared/ui/Badge/Badge.js";import"../shared/ui/Badge/index.js";import{CARD_SLOTS as S}from"../shared/ui/Card/Card.slots.js";import{Card as C}from"../shared/ui/Card/Card.js";import"../shared/ui/Card/index.js";import{COLLAPSIBLE_SLOTS as w}from"../shared/ui/Collapsible/Collapsible.slots.js";import{Collapsible as T}from"../shared/ui/Collapsible/Collapsible.js";import"../shared/ui/Collapsible/index.js";import{DETAILS_SLOTS as E}from"../shared/ui/Details/Details.slots.js";import{Details as D}from"../shared/ui/Details/Details.js";import"../shared/ui/Details/index.js";import{FIELD_SLOTS as O}from"../shared/ui/Field/Field.slots.js";import{Field as k}from"../shared/ui/Field/Field.js";import"../shared/ui/Field/index.js";import{IMAGE_SLOTS as A}from"../shared/ui/Image/Image.slots.js";import{Image as j}from"../shared/ui/Image/Image.js";import"../shared/ui/Image/index.js";import{INPUT_GROUP_SLOTS as M}from"../shared/ui/InputGroup/InputGroup.slots.js";import{InputGroup as N}from"../shared/ui/InputGroup/InputGroup.js";import"../shared/ui/InputGroup/index.js";import{LtrAtom as P}from"../shared/ui/LtrAtom/LtrAtom.js";import"../shared/ui/LtrAtom/index.js";import{SELECT_SLOTS as F}from"../shared/ui/Select/Select.slots.js";import{Select as I}from"../shared/ui/Select/Select.js";import"../shared/ui/Select/index.js";import{SELECTABLE_TILE_SLOTS as L}from"../shared/ui/SelectableTile/SelectableTile.slots.js";import{SelectableTile as R}from"../shared/ui/SelectableTile/SelectableTile.js";import{SelectableTileGroup as z}from"../shared/ui/SelectableTile/SelectableTileGroup.js";import"../shared/ui/SelectableTile/index.js";import{SKELETON_SLOTS as B}from"../shared/ui/Skeleton/Skeleton.slots.js";import{Skeleton as V}from"../shared/ui/Skeleton/Skeleton.js";import"../shared/ui/Skeleton/index.js";import{STEPS_SLOTS as H}from"../shared/ui/Steps/Steps.slots.js";import{Step as U,Steps as W}from"../shared/ui/Steps/Steps.js";import"../shared/ui/Steps/index.js";import{TEXT_SLOTS as G}from"../shared/ui/Text/Text.slots.js";import{text as K}from"../shared/ui/Text/Text.js";import"../shared/ui/Text/index.js";import{TokenLogo as q}from"../shared/ui/TokenLogo/TokenLogo.js";import"../shared/ui/TokenLogo/index.js";import{TOOLTIP_SLOTS as J}from"../shared/ui/Tooltip/Tooltip.slots.js";import{Tooltip as Y}from"../shared/ui/Tooltip/Tooltip.js";import"../shared/ui/Tooltip/index.js";import{WALLET_ROW_SLOTS as X}from"../shared/ui/WalletRow/WalletRow.slots.js";import{WalletRow as Z}from"../shared/ui/WalletRow/WalletRow.js";import"../shared/ui/WalletRow/index.js";export{m as ALERT_SLOTS,g as AMOUNT_INPUT_SLOTS,p as AdaptiveSurface,h as Alert,y as AmountInput,b as BADGE_SLOTS,n as BUTTON_SLOTS,x as Badge,r as Button,S as CARD_SLOTS,w as COLLAPSIBLE_SLOTS,C as Card,T as Collapsible,E as DETAILS_SLOTS,c as DIALOG_SLOTS,d as DRAWER_SLOTS,D as Details,l as Dialog,f as Drawer,e as EXTERNAL_LINK_SLOTS,t as ExternalLink,O as FIELD_SLOTS,k as Field,i as ICON_BUTTON_SLOTS,A as IMAGE_SLOTS,M as INPUT_GROUP_SLOTS,a as IconButton,j as Image,N as InputGroup,P as LtrAtom,o as SCROLL_AREA_SLOTS,L as SELECTABLE_TILE_SLOTS,F as SELECT_SLOTS,B as SKELETON_SLOTS,H as STEPS_SLOTS,s as ScrollArea,I as Select,R as SelectableTile,z as SelectableTileGroup,V as Skeleton,U as Step,W as Steps,G as TEXT_SLOTS,J as TOOLTIP_SLOTS,q as TokenLogo,Y as Tooltip,X as WALLET_ROW_SLOTS,Z as WalletRow,_ as formatAmountForInput,v as parseAmountInputValue,K as text,u as useIsInsideDialogContent};
|