@xsolla/xui-b2b-drawer 0.147.1

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@xsolla/xui-b2b-drawer",
+  "version": "0.147.1",
+  "main": "./web/index.js",
+  "module": "./web/index.mjs",
+  "types": "./web/index.d.ts",
+  "scripts": {
+    "build": "yarn build:web && yarn build:native",
+    "build:web": "PLATFORM=web tsup",
+    "build:native": "PLATFORM=native tsup",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@xsolla/xui-b2b-stepper": "0.147.1",
+    "@xsolla/xui-button": "0.147.1",
+    "@xsolla/xui-core": "0.147.1",
+    "@xsolla/xui-icons-base": "0.147.1",
+    "@xsolla/xui-primitives-core": "0.147.1",
+    "@xsolla/xui-typography": "0.147.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16",
+    "styled-components": ">=4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^24.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "vitest": "^4.0.18"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "react-native": "./native/index.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./native/index.d.ts",
+        "import": "./native/index.mjs",
+        "require": "./native/index.js"
+      },
+      "import": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.mjs"
+      },
+      "require": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      },
+      "default": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      }
+    }
+  }
+}

package/web/index.d.mts

@@ -0,0 +1,64 @@
+import * as react from 'react';
+import { ReactNode, RefObject } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type DrawerSize = "sm" | "md" | "lg";
+type DrawerFooterAlign = "center" | "right";
+/** @deprecated Use individual `title` and `onBack` props instead */
+interface LegacyDrawerHeader {
+    title?: ReactNode;
+    onBack?: () => void;
+}
+interface DrawerProps extends ThemeOverrideProps {
+    /** Whether the drawer is open */
+    open?: boolean;
+    /** @deprecated Use `open` instead */
+    isOpen?: boolean;
+    /** Called when the drawer should close */
+    onClose?: () => void;
+    /** Width preset: sm=480px, md=620px, lg=1056px */
+    size?: DrawerSize;
+    /** Title text displayed in the header (18px compact/Medium, ellipsis) */
+    title?: ReactNode;
+    /** @deprecated Use `title` and `onBack` props instead */
+    header?: LegacyDrawerHeader;
+    /** Renders a back arrow button in the header when provided */
+    onBack?: () => void;
+    /** Optional action element in the header, rendered between title and close button */
+    headerAction?: ReactNode;
+    /** Whether clicking the scrim backdrop closes the drawer. Defaults to true. */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape closes the drawer. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Footer content (typically a ButtonGroup) */
+    footer?: ReactNode;
+    /** @deprecated Use `footer` instead */
+    bottom?: ReactNode;
+    /** Alignment of footer content. Defaults to "right". */
+    footerAlign?: DrawerFooterAlign;
+    /** Show a drop shadow above the footer. Defaults to false. */
+    footerShadow?: boolean;
+    /** Whether footer buttons stretch to full width. Defaults to true. */
+    footerFullWidth?: boolean;
+    /** Optional stepper sidebar rendered to the left of the content panel */
+    stepper?: ReactNode;
+    /** Main drawer content */
+    children: ReactNode;
+    /** Ref to element that should receive focus when the drawer opens */
+    initialFocusRef?: RefObject<HTMLElement>;
+}
+
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface UseDrawerOptions {
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+interface UseDrawerReturn {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+}
+declare function useDrawer(options?: UseDrawerOptions): UseDrawerReturn;
+
+export { Drawer, type DrawerFooterAlign, type DrawerProps, type DrawerSize, type LegacyDrawerHeader, type UseDrawerOptions, type UseDrawerReturn, useDrawer };

package/web/index.d.ts

@@ -0,0 +1,64 @@
+import * as react from 'react';
+import { ReactNode, RefObject } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type DrawerSize = "sm" | "md" | "lg";
+type DrawerFooterAlign = "center" | "right";
+/** @deprecated Use individual `title` and `onBack` props instead */
+interface LegacyDrawerHeader {
+    title?: ReactNode;
+    onBack?: () => void;
+}
+interface DrawerProps extends ThemeOverrideProps {
+    /** Whether the drawer is open */
+    open?: boolean;
+    /** @deprecated Use `open` instead */
+    isOpen?: boolean;
+    /** Called when the drawer should close */
+    onClose?: () => void;
+    /** Width preset: sm=480px, md=620px, lg=1056px */
+    size?: DrawerSize;
+    /** Title text displayed in the header (18px compact/Medium, ellipsis) */
+    title?: ReactNode;
+    /** @deprecated Use `title` and `onBack` props instead */
+    header?: LegacyDrawerHeader;
+    /** Renders a back arrow button in the header when provided */
+    onBack?: () => void;
+    /** Optional action element in the header, rendered between title and close button */
+    headerAction?: ReactNode;
+    /** Whether clicking the scrim backdrop closes the drawer. Defaults to true. */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape closes the drawer. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Footer content (typically a ButtonGroup) */
+    footer?: ReactNode;
+    /** @deprecated Use `footer` instead */
+    bottom?: ReactNode;
+    /** Alignment of footer content. Defaults to "right". */
+    footerAlign?: DrawerFooterAlign;
+    /** Show a drop shadow above the footer. Defaults to false. */
+    footerShadow?: boolean;
+    /** Whether footer buttons stretch to full width. Defaults to true. */
+    footerFullWidth?: boolean;
+    /** Optional stepper sidebar rendered to the left of the content panel */
+    stepper?: ReactNode;
+    /** Main drawer content */
+    children: ReactNode;
+    /** Ref to element that should receive focus when the drawer opens */
+    initialFocusRef?: RefObject<HTMLElement>;
+}
+
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface UseDrawerOptions {
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+interface UseDrawerReturn {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+}
+declare function useDrawer(options?: UseDrawerOptions): UseDrawerReturn;
+
+export { Drawer, type DrawerFooterAlign, type DrawerProps, type DrawerSize, type LegacyDrawerHeader, type UseDrawerOptions, type UseDrawerReturn, useDrawer };