@bitrise/bitkit-v2 0.3.365 → 0.3.367

package/AGENTS.md

@@ -121,7 +121,7 @@ Bitkit components use consistent prop names across the library:
   ```
 - **Three dialog components, one shell** — pick by intent, never reach for low-level dialog primitives (there are none exported):
   - `BitkitDialog` — header (title + close) + body (`children`) + footer. The body is the dialog's `children`. The footer is two slot props: `footerButtons` (action buttons, auto-wrapped in the standard right-aligned row — no manual wrapper) and `footerContent` (arbitrary content rendered raw, e.g. an inline `BitkitAlert`). Both can be combined (content first, then buttons); omit both for a passive dialog with no footer.
-  - `BitkitFormDialog` — same API as `BitkitDialog`, but the whole content is a `<form>`, so a `type="submit"` button in `footerButtons` submits natively. Accepts form props (`onSubmit`, `method`, …).
+  - `BitkitFormDialog` — same API as `BitkitDialog`, but the whole content is a `<form>`, so a `type="submit"` button in `footerButtons` submits natively. On top of the shared dialog props it takes `onSubmit` (correctly typed as `FormEvent<HTMLFormElement>`) and `noValidate`, and nothing else off the native `<form>`.
   - `BitkitStepperDialog` — a multi-step dialog. Pass `BitkitStepperDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; wire footer navigation via the `useStepperDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) from a component rendered in the footer slot. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
   - All three expose `.ActionTrigger` (a thin re-export of Chakra's `Dialog.ActionTrigger`): wrap a footer button in it to close the dialog on click — the default way to dismiss a trigger-based (uncontrolled) dialog without wiring `open` state.
   ```tsx
@@ -133,6 +133,8 @@ Bitkit components use consistent prop names across the library:
   </BitkitStepperDialog>
   ```
   For closing on click, use controlled `open`/`onOpenChange`, or wrap a button in `BitkitDialog.ActionTrigger` (and the `BitkitFormDialog.ActionTrigger` / `BitkitStepperDialog.ActionTrigger` equivalents). For a fully custom dialog, compose raw Chakra `Dialog.*` atoms directly.
+
+  All three forward `data-*` attributes to the element carrying `role="dialog"` (`data-testid`, `data-clarity-unmask`), and nothing else — style props, `className` and `id` don't pass through.
 - **Dialog non-dismissible + post-close callback** — works on all three: pass `closable={false}` to make the dialog fully non-dismissible (the close button is rendered but disabled, ESC is blocked, outside clicks are ignored — the only way out is an explicit footer action). Pass `onExitComplete` to run code after the close animation finishes (navigation, focus restoration, cleanup):
   ```tsx
   <BitkitDialog closable={false} open={open} onOpenChange={…} title="Action required">…</BitkitDialog>

package/dist/components/BitkitDialog/BitkitDialog.d.ts

@@ -1,7 +1,7 @@
 import { Dialog } from '@chakra-ui/react/dialog';
 import { ReactNode } from 'react';
-import { DialogShellProps } from './DialogShell';
-export interface BitkitDialogProps {
+import { DialogDataAttributes, DialogShellProps } from './DialogShell';
+export type BitkitDialogProps = {
     children?: ReactNode;
     closable?: boolean;
     footerButtons?: ReactNode;
@@ -22,9 +22,9 @@ export interface BitkitDialogProps {
     title: ReactNode;
     trigger?: ReactNode;
     variant?: 'overflowContent';
-}
+} & DialogDataAttributes;
 declare const _default: {
-    ({ children, closable, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, }: BitkitDialogProps): import("react").JSX.Element;
+    ({ children, closable, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...dataAttributes }: BitkitDialogProps): import("react").JSX.Element;
     displayName: string;
 } & {
     ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/BitkitDialog/BitkitDialog.js

@@ -4,7 +4,7 @@ import DialogShell from "./DialogShell.js";
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@chakra-ui/react/dialog";
 //#region lib/components/BitkitDialog/BitkitDialog.tsx
-var BitkitDialog = ({ children, closable = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant }) => /* @__PURE__ */ jsx(DialogShell, {
+var BitkitDialog = ({ children, closable = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...dataAttributes }) => /* @__PURE__ */ jsx(DialogShell, {
 	closable,
 	initialFocusEl,
 	onExitComplete,
@@ -17,6 +17,7 @@ var BitkitDialog = ({ children, closable = true, footerButtons, footerContent, h
 	variant,
 	children: /* @__PURE__ */ jsx(Dialog.Content, {
 		maxHeight,
+		...dataAttributes,
 		children: /* @__PURE__ */ jsx(DialogInner, {
 			closable,
 			footerButtons,

package/dist/components/BitkitDialog/BitkitDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\n\nexport interface BitkitDialogProps {\n  children?: ReactNode;\n  closable?: boolean;\n  footerButtons?: ReactNode;\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\nconst BitkitDialog = ({\n  children,\n  closable = true,\n  footerButtons,\n  footerContent,\n  headerLabel,\n  initialFocusEl,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  title,\n  trigger,\n  variant,\n}: BitkitDialogProps) => (\n  <DialogShell\n    closable={closable}\n    initialFocusEl={initialFocusEl}\n    onExitComplete={onExitComplete}\n    onOpenChange={onOpenChange}\n    open={open}\n    preventScroll={preventScroll}\n    scrollBehavior={scrollBehavior}\n    size={size}\n    trigger={trigger}\n    variant={variant}\n  >\n    <Dialog.Content maxHeight={maxHeight}>\n      <DialogInner\n        closable={closable}\n        footerButtons={footerButtons}\n        footerContent={footerContent}\n        headerLabel={headerLabel}\n        scrollBehavior={scrollBehavior}\n        showScrollGradient={showScrollGradient}\n        title={title}\n        variant={variant}\n      >\n        {children}\n      </DialogInner>\n    </Dialog.Content>\n  </DialogShell>\n);\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;AA4BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,eACA,eACA,aACA,gBACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,cAEA,oBAAC,aAAD;CACY;CACM;CACA;CACF;CACR;CACS;CACC;CACV;CACG;CACA;CAET,UAAA,oBAAC,OAAO,SAAR;EAA2B;EACzB,UAAA,oBAAC,aAAD;GACY;GACK;GACA;GACF;GACG;GACI;GACb;GACE;GAER;EACU,CAAA;CACC,CAAA;AACL,CAAA;AAGf,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,eAAe,OAAO,cAAc,CAAC"}
+{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogDataAttributes, type DialogShellProps } from './DialogShell';\n\nexport type BitkitDialogProps = {\n  children?: ReactNode;\n  closable?: boolean;\n  footerButtons?: ReactNode;\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n} & DialogDataAttributes;\n\nconst BitkitDialog = ({\n  children,\n  closable = true,\n  footerButtons,\n  footerContent,\n  headerLabel,\n  initialFocusEl,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  title,\n  trigger,\n  variant,\n  ...dataAttributes\n}: BitkitDialogProps) => (\n  <DialogShell\n    closable={closable}\n    initialFocusEl={initialFocusEl}\n    onExitComplete={onExitComplete}\n    onOpenChange={onOpenChange}\n    open={open}\n    preventScroll={preventScroll}\n    scrollBehavior={scrollBehavior}\n    size={size}\n    trigger={trigger}\n    variant={variant}\n  >\n    <Dialog.Content maxHeight={maxHeight} {...dataAttributes}>\n      <DialogInner\n        closable={closable}\n        footerButtons={footerButtons}\n        footerContent={footerContent}\n        headerLabel={headerLabel}\n        scrollBehavior={scrollBehavior}\n        showScrollGradient={showScrollGradient}\n        title={title}\n        variant={variant}\n      >\n        {children}\n      </DialogInner>\n    </Dialog.Content>\n  </DialogShell>\n);\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;AA4BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,eACA,eACA,aACA,gBACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,SACA,GAAG,qBAEH,oBAAC,aAAD;CACY;CACM;CACA;CACF;CACR;CACS;CACC;CACV;CACG;CACA;CAET,UAAA,oBAAC,OAAO,SAAR;EAA2B;EAAW,GAAI;EACxC,UAAA,oBAAC,aAAD;GACY;GACK;GACA;GACF;GACG;GACI;GACb;GACE;GAER;EACU,CAAA;CACC,CAAA;AACL,CAAA;AAGf,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,eAAe,OAAO,cAAc,CAAC"}

package/dist/components/BitkitDialog/BitkitFormDialog.d.ts

@@ -1,9 +1,36 @@
 import { Dialog } from '@chakra-ui/react/dialog';
-import { ComponentPropsWithoutRef } from 'react';
+import { FormEventHandler } from 'react';
 import { BitkitDialogProps } from './BitkitDialog';
-export interface BitkitFormDialogProps extends BitkitDialogProps, Omit<ComponentPropsWithoutRef<'form'>, keyof BitkitDialogProps> {
-}
-declare const _default: import('react').ForwardRefExoticComponent<BitkitFormDialogProps & import('react').RefAttributes<HTMLFormElement>> & {
+export type BitkitFormDialogProps = BitkitDialogProps & {
+    /** Skips the browser's native constraint validation on submit. */
+    noValidate?: boolean;
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+};
+declare const _default: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode;
+    closable?: boolean;
+    footerButtons?: import('react').ReactNode;
+    footerContent?: import('react').ReactNode;
+    headerLabel?: string;
+    initialFocusEl?: import('./DialogShell').DialogShellProps["initialFocusEl"];
+    maxHeight?: string;
+    onExitComplete?: () => void;
+    onOpenChange?: (details: {
+        open: boolean;
+    }) => void;
+    open?: boolean;
+    preventScroll?: boolean;
+    scrollBehavior?: "inside" | "outside";
+    showScrollGradient?: boolean;
+    size?: "sm" | "md" | "lg" | "full";
+    title: import('react').ReactNode;
+    trigger?: import('react').ReactNode;
+    variant?: "overflowContent";
+} & import('./DialogShell').DialogDataAttributes & {
+    /** Skips the browser's native constraint validation on submit. */
+    noValidate?: boolean;
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+} & import('react').RefAttributes<HTMLFormElement>> & {
     ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
 };
 export default _default;

package/dist/components/BitkitDialog/BitkitFormDialog.js

@@ -8,12 +8,11 @@ import { Dialog } from "@chakra-ui/react/dialog";
 //#region lib/components/BitkitDialog/BitkitFormDialog.tsx
 /**
 * A dialog whose entire content is a `<form>`, so a `type="submit"` button in the footer submits
-* natively. Exposes native form attributes (`onSubmit`, `method`, `noValidate`, …) alongside the
-* standard dialog props. Like the other dialog overlays it owns its own layout — it intentionally
-* does NOT accept Chakra style props (`width`, `padding`, …), which would override the `size` variant.
+* natively. Like the other dialog overlays it owns its own layout, so the form surface is just
+* `onSubmit` and `noValidate` — no Chakra style props, no `className`, no `id`.
 */
 var BitkitFormDialog = forwardRef((props, ref) => {
-	const { children, closable = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...formProps } = props;
+	const { children, closable = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, noValidate, onExitComplete, onOpenChange, onSubmit, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...dataAttributes } = props;
 	return /* @__PURE__ */ jsx(DialogShell, {
 		closable,
 		initialFocusEl,
@@ -28,9 +27,11 @@ var BitkitFormDialog = forwardRef((props, ref) => {
 		children: /* @__PURE__ */ jsx(Dialog.Content, {
 			asChild: true,
 			maxHeight,
+			...dataAttributes,
 			children: /* @__PURE__ */ jsx(chakra.form, {
 				ref,
-				...formProps,
+				noValidate,
+				onSubmit,
 				children: /* @__PURE__ */ jsx(DialogInner, {
 					closable,
 					footerButtons,

package/dist/components/BitkitDialog/BitkitFormDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitFormDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitFormDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitDialogProps } from './BitkitDialog';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport interface BitkitFormDialogProps\n  extends BitkitDialogProps, Omit<ComponentPropsWithoutRef<'form'>, keyof BitkitDialogProps> {}\n\n/**\n * A dialog whose entire content is a `<form>`, so a `type=\"submit\"` button in the footer submits\n * natively. Exposes native form attributes (`onSubmit`, `method`, `noValidate`, …) alongside the\n * standard dialog props. Like the other dialog overlays it owns its own layout — it intentionally\n * does NOT accept Chakra style props (`width`, `padding`, …), which would override the `size` variant.\n */\nconst BitkitFormDialog = forwardRef<HTMLFormElement, BitkitFormDialogProps>((props, ref) => {\n  const {\n    children,\n    closable = true,\n    footerButtons,\n    footerContent,\n    headerLabel,\n    initialFocusEl,\n    maxHeight,\n    onExitComplete,\n    onOpenChange,\n    open,\n    preventScroll,\n    scrollBehavior,\n    showScrollGradient,\n    size,\n    title,\n    trigger,\n    variant,\n    ...formProps\n  } = props;\n\n  return (\n    <DialogShell\n      closable={closable}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      trigger={trigger}\n      variant={variant}\n    >\n      <Dialog.Content asChild maxHeight={maxHeight}>\n        <chakra.form ref={ref} {...formProps}>\n          <DialogInner\n            closable={closable}\n            footerButtons={footerButtons}\n            footerContent={footerContent}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            title={title}\n            variant={variant}\n          >\n            {children}\n          </DialogInner>\n        </chakra.form>\n      </Dialog.Content>\n    </DialogShell>\n  );\n});\n\nBitkitFormDialog.displayName = 'BitkitFormDialog';\n\nexport default withSubComponents(BitkitFormDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAM,mBAAmB,YAAoD,OAAO,QAAQ;CAC1F,MAAM,EACJ,UACA,WAAW,MACX,eACA,eACA,aACA,gBACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,SACA,GAAG,cACD;CAEJ,OACE,oBAAC,aAAD;EACY;EACM;EACA;EACF;EACR;EACS;EACC;EACV;EACG;EACA;EAET,UAAA,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAmB;GACjC,UAAA,oBAAC,OAAO,MAAR;IAAkB;IAAK,GAAI;IACzB,UAAA,oBAAC,aAAD;KACY;KACK;KACA;KACF;KACG;KACI;KACb;KACE;KAER;IACU,CAAA;GACF,CAAA;EACC,CAAA;CACL,CAAA;AAEjB,CAAC;AAED,iBAAiB,cAAc;AAE/B,IAAA,2BAAe,kBAAkB,kBAAkB,EAAE,eAAe,OAAO,cAAc,CAAC"}
+{"version":3,"file":"BitkitFormDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitFormDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type FormEventHandler, forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitDialogProps } from './BitkitDialog';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport type BitkitFormDialogProps = BitkitDialogProps & {\n  /** Skips the browser's native constraint validation on submit. */\n  noValidate?: boolean;\n  onSubmit?: FormEventHandler<HTMLFormElement>;\n};\n\n/**\n * A dialog whose entire content is a `<form>`, so a `type=\"submit\"` button in the footer submits\n * natively. Like the other dialog overlays it owns its own layout, so the form surface is just\n * `onSubmit` and `noValidate` — no Chakra style props, no `className`, no `id`.\n */\nconst BitkitFormDialog = forwardRef<HTMLFormElement, BitkitFormDialogProps>((props, ref) => {\n  const {\n    children,\n    closable = true,\n    footerButtons,\n    footerContent,\n    headerLabel,\n    initialFocusEl,\n    maxHeight,\n    noValidate,\n    onExitComplete,\n    onOpenChange,\n    onSubmit,\n    open,\n    preventScroll,\n    scrollBehavior,\n    showScrollGradient,\n    size,\n    title,\n    trigger,\n    variant,\n    ...dataAttributes\n  } = props;\n\n  return (\n    <DialogShell\n      closable={closable}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      trigger={trigger}\n      variant={variant}\n    >\n      <Dialog.Content asChild maxHeight={maxHeight} {...dataAttributes}>\n        <chakra.form ref={ref} noValidate={noValidate} onSubmit={onSubmit}>\n          <DialogInner\n            closable={closable}\n            footerButtons={footerButtons}\n            footerContent={footerContent}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            title={title}\n            variant={variant}\n          >\n            {children}\n          </DialogInner>\n        </chakra.form>\n      </Dialog.Content>\n    </DialogShell>\n  );\n});\n\nBitkitFormDialog.displayName = 'BitkitFormDialog';\n\nexport default withSubComponents(BitkitFormDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,mBAAmB,YAAoD,OAAO,QAAQ;CAC1F,MAAM,EACJ,UACA,WAAW,MACX,eACA,eACA,aACA,gBACA,WACA,YACA,gBACA,cACA,UACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,SACA,GAAG,mBACD;CAEJ,OACE,oBAAC,aAAD;EACY;EACM;EACA;EACF;EACR;EACS;EACC;EACV;EACG;EACA;EAET,UAAA,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAmB;GAAW,GAAI;GAChD,UAAA,oBAAC,OAAO,MAAR;IAAkB;IAAiB;IAAsB;IACvD,UAAA,oBAAC,aAAD;KACY;KACK;KACA;KACF;KACG;KACI;KACb;KACE;KAER;IACU,CAAA;GACF,CAAA;EACC,CAAA;CACL,CAAA;AAEjB,CAAC;AAED,iBAAiB,cAAc;AAE/B,IAAA,2BAAe,kBAAkB,kBAAkB,EAAE,eAAe,OAAO,cAAc,CAAC"}

package/dist/components/BitkitDialog/BitkitStepperDialog.d.ts

@@ -1,9 +1,9 @@
 import { Dialog } from '@chakra-ui/react/dialog';
 import { ReactNode } from 'react';
 import { BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';
-import { DialogShellProps } from './DialogShell';
+import { DialogDataAttributes, DialogShellProps } from './DialogShell';
 export { useStepperDialog } from './StepperContext';
-export interface BitkitStepperDialogProps {
+export type BitkitStepperDialogProps = {
     /** `BitkitStepperDialog.Step` children, one per step. */
     children: ReactNode;
     closable?: boolean;
@@ -35,9 +35,9 @@ export interface BitkitStepperDialogProps {
     title: ReactNode;
     trigger?: ReactNode;
     variant?: 'overflowContent';
-}
+} & DialogDataAttributes;
 declare const _default: {
-    ({ children, closable, defaultStep, initialFocusEl, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant, }: BitkitStepperDialogProps): import("react").JSX.Element;
+    ({ children, closable, defaultStep, initialFocusEl, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant, ...dataAttributes }: BitkitStepperDialogProps): import("react").JSX.Element;
     displayName: string;
 } & {
     ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/BitkitDialog/BitkitStepperDialog.js

@@ -13,7 +13,7 @@ import { Dialog } from "@chakra-ui/react/dialog";
 * state, auto-renders the steps header, and shows only the active step's body. Footer navigation is
 * wired by the consumer through the `useStepperDialog()` hook.
 */
-var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, initialFocusEl, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant }) => {
+var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, initialFocusEl, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant, ...dataAttributes }) => {
 	const [internalStep, setInternalStep] = useState(defaultStep);
 	const isControlled = stepProp !== void 0;
 	const rawStep = (isControlled ? stepProp : internalStep) ?? 0;
@@ -66,6 +66,7 @@ var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, initial
 			variant,
 			children: /* @__PURE__ */ jsx(Dialog.Content, {
 				maxHeight,
+				...dataAttributes,
 				children: /* @__PURE__ */ jsx(DialogInner, {
 					closable,
 					footerContent,

package/dist/components/BitkitDialog/BitkitStepperDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitStepperDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepperDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Children, isValidElement, type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepperDialogStep, { type BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\nimport { StepperDialogProvider } from './StepperContext';\n\nexport { useStepperDialog } from './StepperContext';\n\nexport interface BitkitStepperDialogProps {\n  /** `BitkitStepperDialog.Step` children, one per step. */\n  children: ReactNode;\n  closable?: boolean;\n  /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n  defaultStep?: number;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  /**\n   * Footer content rendered raw. Stepper footers are space-between (Cancel left, Prev/Next right),\n   * so build the nav row here with `useStepperDialog()` — there is no `footerButtons` slot, which\n   * would force right-alignment.\n   */\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  /** Called whenever the active step changes (controlled or uncontrolled). */\n  onStepChange?: (step: number) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n  step?: number;\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * A dialog that walks through a sequence of `BitkitStepperDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. Footer navigation is\n * wired by the consumer through the `useStepperDialog()` hook.\n */\nconst BitkitStepperDialog = ({\n  children,\n  closable = true,\n  defaultStep = 0,\n  initialFocusEl,\n  footerContent,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  onStepChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  step: stepProp,\n  title,\n  trigger,\n  variant,\n}: BitkitStepperDialogProps) => {\n  const [internalStep, setInternalStep] = useState(defaultStep);\n  const isControlled = stepProp !== undefined;\n  const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n  const steps = Children.toArray(children).filter(\n    (child): child is ReactElement<BitkitStepperDialogStepProps> =>\n      isValidElement(child) && child.type === BitkitStepperDialogStep,\n  );\n  const totalSteps = steps.length;\n  const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));\n\n  const setStep = useCallback(\n    (next: number) => {\n      const clamped = Math.max(0, Math.min(next, totalSteps - 1));\n      if (!isControlled) setInternalStep(clamped);\n      onStepChange?.(clamped);\n    },\n    [isControlled, onStepChange, totalSteps],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      goTo: setStep,\n      isFirst: step === 0,\n      isLast: step === totalSteps - 1,\n      next: () => setStep(step + 1),\n      prev: () => setStep(step - 1),\n      setStep,\n      step,\n      totalSteps,\n    }),\n    [setStep, step, totalSteps],\n  );\n\n  const handleOpenChange = (details: { open: boolean }) => {\n    if (!details.open && !isControlled) setInternalStep(defaultStep);\n    onOpenChange?.(details);\n  };\n\n  const stepsHeader = (\n    <BitkitSteps step={step}>\n      {steps.map((child, index) => (\n        <BitkitSteps.Item key={index} label={child.props.label} />\n      ))}\n    </BitkitSteps>\n  );\n\n  return (\n    <StepperDialogProvider value={ctx}>\n      <DialogShell\n        closable={closable}\n        initialFocusEl={initialFocusEl}\n        onExitComplete={onExitComplete}\n        onOpenChange={handleOpenChange}\n        open={open}\n        preventScroll={preventScroll}\n        scrollBehavior={scrollBehavior}\n        size={size}\n        trigger={trigger}\n        variant={variant}\n      >\n        <Dialog.Content maxHeight={maxHeight}>\n          <DialogInner\n            closable={closable}\n            footerContent={footerContent}\n            headerExtra={stepsHeader}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            title={title}\n            variant={variant}\n          >\n            {steps[step]}\n          </DialogInner>\n        </Dialog.Content>\n      </DialogShell>\n    </StepperDialogProvider>\n  );\n};\n\nBitkitStepperDialog.displayName = 'BitkitStepperDialog';\n\nexport default withSubComponents(BitkitStepperDialog, {\n  ActionTrigger: Dialog.ActionTrigger,\n  Step: BitkitStepperDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;;;AAiDA,IAAM,uBAAuB,EAC3B,UACA,WAAW,MACX,cAAc,GACd,gBACA,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,MAAM,UACN,OACA,SACA,cAC8B;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,SAAS,QAAQ,QAAQ,CAAC,CAAC,QACtC,UACC,eAAe,KAAK,KAAK,MAAM,SAAS,uBAC5C;CACA,MAAM,aAAa,MAAM;CACzB,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;CAEvE,MAAM,UAAU,aACb,SAAiB;EAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC;EAC1D,IAAI,CAAC,cAAc,gBAAgB,OAAO;EAC1C,eAAe,OAAO;CACxB,GACA;EAAC;EAAc;EAAc;CAAU,CACzC;CAEA,MAAM,MAAM,eACH;EACL,MAAM;EACN,SAAS,SAAS;EAClB,QAAQ,SAAS,aAAa;EAC9B,YAAY,QAAQ,OAAO,CAAC;EAC5B,YAAY,QAAQ,OAAO,CAAC;EAC5B;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAM;CAAU,CAC5B;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,CAAC,QAAQ,QAAQ,CAAC,cAAc,gBAAgB,WAAW;EAC/D,eAAe,OAAO;CACxB;CAEA,MAAM,cACJ,oBAAC,qBAAD;EAAmB;EAChB,UAAA,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,aAAD;GACY;GACM;GACA;GAChB,cAAc;GACR;GACS;GACC;GACV;GACG;GACA;GAET,UAAA,oBAAC,OAAO,SAAR;IAA2B;IACzB,UAAA,oBAAC,aAAD;KACY;KACK;KACf,aAAa;KACA;KACG;KACI;KACb;KACE;KAER,UAAA,MAAM;IACI,CAAA;GACC,CAAA;EACL,CAAA;CACQ,CAAA;AAE3B;AAEA,oBAAoB,cAAc;AAElC,IAAA,8BAAe,kBAAkB,qBAAqB;CACpD,eAAe,OAAO;CACtB,MAAM;AACR,CAAC"}
+{"version":3,"file":"BitkitStepperDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepperDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Children, isValidElement, type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepperDialogStep, { type BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogDataAttributes, type DialogShellProps } from './DialogShell';\nimport { StepperDialogProvider } from './StepperContext';\n\nexport { useStepperDialog } from './StepperContext';\n\nexport type BitkitStepperDialogProps = {\n  /** `BitkitStepperDialog.Step` children, one per step. */\n  children: ReactNode;\n  closable?: boolean;\n  /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n  defaultStep?: number;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  /**\n   * Footer content rendered raw. Stepper footers are space-between (Cancel left, Prev/Next right),\n   * so build the nav row here with `useStepperDialog()` — there is no `footerButtons` slot, which\n   * would force right-alignment.\n   */\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  /** Called whenever the active step changes (controlled or uncontrolled). */\n  onStepChange?: (step: number) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n  step?: number;\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n} & DialogDataAttributes;\n\n/**\n * A dialog that walks through a sequence of `BitkitStepperDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. Footer navigation is\n * wired by the consumer through the `useStepperDialog()` hook.\n */\nconst BitkitStepperDialog = ({\n  children,\n  closable = true,\n  defaultStep = 0,\n  initialFocusEl,\n  footerContent,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  onStepChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  step: stepProp,\n  title,\n  trigger,\n  variant,\n  ...dataAttributes\n}: BitkitStepperDialogProps) => {\n  const [internalStep, setInternalStep] = useState(defaultStep);\n  const isControlled = stepProp !== undefined;\n  const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n  const steps = Children.toArray(children).filter(\n    (child): child is ReactElement<BitkitStepperDialogStepProps> =>\n      isValidElement(child) && child.type === BitkitStepperDialogStep,\n  );\n  const totalSteps = steps.length;\n  const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));\n\n  const setStep = useCallback(\n    (next: number) => {\n      const clamped = Math.max(0, Math.min(next, totalSteps - 1));\n      if (!isControlled) setInternalStep(clamped);\n      onStepChange?.(clamped);\n    },\n    [isControlled, onStepChange, totalSteps],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      goTo: setStep,\n      isFirst: step === 0,\n      isLast: step === totalSteps - 1,\n      next: () => setStep(step + 1),\n      prev: () => setStep(step - 1),\n      setStep,\n      step,\n      totalSteps,\n    }),\n    [setStep, step, totalSteps],\n  );\n\n  const handleOpenChange = (details: { open: boolean }) => {\n    if (!details.open && !isControlled) setInternalStep(defaultStep);\n    onOpenChange?.(details);\n  };\n\n  const stepsHeader = (\n    <BitkitSteps step={step}>\n      {steps.map((child, index) => (\n        <BitkitSteps.Item key={index} label={child.props.label} />\n      ))}\n    </BitkitSteps>\n  );\n\n  return (\n    <StepperDialogProvider value={ctx}>\n      <DialogShell\n        closable={closable}\n        initialFocusEl={initialFocusEl}\n        onExitComplete={onExitComplete}\n        onOpenChange={handleOpenChange}\n        open={open}\n        preventScroll={preventScroll}\n        scrollBehavior={scrollBehavior}\n        size={size}\n        trigger={trigger}\n        variant={variant}\n      >\n        <Dialog.Content maxHeight={maxHeight} {...dataAttributes}>\n          <DialogInner\n            closable={closable}\n            footerContent={footerContent}\n            headerExtra={stepsHeader}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            title={title}\n            variant={variant}\n          >\n            {steps[step]}\n          </DialogInner>\n        </Dialog.Content>\n      </DialogShell>\n    </StepperDialogProvider>\n  );\n};\n\nBitkitStepperDialog.displayName = 'BitkitStepperDialog';\n\nexport default withSubComponents(BitkitStepperDialog, {\n  ActionTrigger: Dialog.ActionTrigger,\n  Step: BitkitStepperDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;;;AAiDA,IAAM,uBAAuB,EAC3B,UACA,WAAW,MACX,cAAc,GACd,gBACA,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,MAAM,UACN,OACA,SACA,SACA,GAAG,qBAC2B;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,SAAS,QAAQ,QAAQ,CAAC,CAAC,QACtC,UACC,eAAe,KAAK,KAAK,MAAM,SAAS,uBAC5C;CACA,MAAM,aAAa,MAAM;CACzB,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;CAEvE,MAAM,UAAU,aACb,SAAiB;EAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC;EAC1D,IAAI,CAAC,cAAc,gBAAgB,OAAO;EAC1C,eAAe,OAAO;CACxB,GACA;EAAC;EAAc;EAAc;CAAU,CACzC;CAEA,MAAM,MAAM,eACH;EACL,MAAM;EACN,SAAS,SAAS;EAClB,QAAQ,SAAS,aAAa;EAC9B,YAAY,QAAQ,OAAO,CAAC;EAC5B,YAAY,QAAQ,OAAO,CAAC;EAC5B;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAM;CAAU,CAC5B;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,CAAC,QAAQ,QAAQ,CAAC,cAAc,gBAAgB,WAAW;EAC/D,eAAe,OAAO;CACxB;CAEA,MAAM,cACJ,oBAAC,qBAAD;EAAmB;EAChB,UAAA,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,aAAD;GACY;GACM;GACA;GAChB,cAAc;GACR;GACS;GACC;GACV;GACG;GACA;GAET,UAAA,oBAAC,OAAO,SAAR;IAA2B;IAAW,GAAI;IACxC,UAAA,oBAAC,aAAD;KACY;KACK;KACf,aAAa;KACA;KACG;KACI;KACb;KACE;KAER,UAAA,MAAM;IACI,CAAA;GACC,CAAA;EACL,CAAA;CACQ,CAAA;AAE3B;AAEA,oBAAoB,cAAc;AAElC,IAAA,8BAAe,kBAAkB,qBAAqB;CACpD,eAAe,OAAO;CACtB,MAAM;AACR,CAAC"}

package/dist/components/BitkitDialog/DialogShell.d.ts

@@ -1,5 +1,13 @@
 import { Dialog } from '@chakra-ui/react/dialog';
 import { ComponentProps, ReactNode } from 'react';
+/**
+ * Data attributes every dialog flavour forwards to its content element — the one carrying
+ * `role="dialog"`. The case this exists for is `data-clarity-unmask`, which opts a region out of
+ * session replay masking, exactly where support needs to read it.
+ */
+export interface DialogDataAttributes {
+    [dataAttribute: `data-${string}`]: string | undefined;
+}
 export interface DialogShellProps {
     /** The `Dialog.Content` element (rendered inside the positioner). */
     children: ReactNode;

package/dist/components/BitkitDialog/DialogShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogShell.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogShell.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type ComponentProps, type ReactNode } from 'react';\n\nimport { resolveScrollBehavior } from './DialogBodyContext';\n\nexport interface DialogShellProps {\n  /** The `Dialog.Content` element (rendered inside the positioner). */\n  children: ReactNode;\n  closable?: boolean;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: ComponentProps<typeof Dialog.Root>['initialFocusEl'];\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +\n * backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside\n * clicks are always ignored (`closeOnInteractOutside={false}`). Note that `closable` does not reach\n * `ActionTrigger` -- a footer button wired to it closes the dialog either way, so a caller that has\n * to block every route out disables that button itself.\n * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.\n **/\n\nconst DialogShell = ({\n  children,\n  closable = true,\n  initialFocusEl,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll = true,\n  scrollBehavior: scrollBehaviorProp,\n  size,\n  trigger,\n  variant,\n}: DialogShellProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp);\n\n  return (\n    <Dialog.Root\n      closeOnEscape={closable}\n      closeOnInteractOutside={false}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      variant={variant}\n    >\n      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}\n      <Portal>\n        <Dialog.Backdrop />\n        <Dialog.Positioner>{children}</Dialog.Positioner>\n      </Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default DialogShell;\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAM,eAAe,EACnB,UACA,WAAW,MACX,gBACA,gBACA,cACA,MACA,gBAAgB,MAChB,gBAAgB,oBAChB,MACA,SACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB;CAExE,OACE,qBAAC,OAAO,MAAR;EACE,eAAe;EACf,wBAAwB;EACR;EACA;EACF;EACR;EACS;EACC;EACV;EACG;EAVX,UAAA,CAYG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAS,UAAA;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAoB,SAA4B,CAAA,CAC1C,EAAA,CAAA,CACG;;AAEjB"}
+{"version":3,"file":"DialogShell.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogShell.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type ComponentProps, type ReactNode } from 'react';\n\nimport { resolveScrollBehavior } from './DialogBodyContext';\n\n/**\n * Data attributes every dialog flavour forwards to its content element — the one carrying\n * `role=\"dialog\"`. The case this exists for is `data-clarity-unmask`, which opts a region out of\n * session replay masking, exactly where support needs to read it.\n */\nexport interface DialogDataAttributes {\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\nexport interface DialogShellProps {\n  /** The `Dialog.Content` element (rendered inside the positioner). */\n  children: ReactNode;\n  closable?: boolean;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: ComponentProps<typeof Dialog.Root>['initialFocusEl'];\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +\n * backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside\n * clicks are always ignored (`closeOnInteractOutside={false}`). Note that `closable` does not reach\n * `ActionTrigger` -- a footer button wired to it closes the dialog either way, so a caller that has\n * to block every route out disables that button itself.\n * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.\n **/\n\nconst DialogShell = ({\n  children,\n  closable = true,\n  initialFocusEl,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll = true,\n  scrollBehavior: scrollBehaviorProp,\n  size,\n  trigger,\n  variant,\n}: DialogShellProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp);\n\n  return (\n    <Dialog.Root\n      closeOnEscape={closable}\n      closeOnInteractOutside={false}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      variant={variant}\n    >\n      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}\n      <Portal>\n        <Dialog.Backdrop />\n        <Dialog.Positioner>{children}</Dialog.Positioner>\n      </Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default DialogShell;\n"],"mappings":";;;;;;;;;;;;;AAwCA,IAAM,eAAe,EACnB,UACA,WAAW,MACX,gBACA,gBACA,cACA,MACA,gBAAgB,MAChB,gBAAgB,oBAChB,MACA,SACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB;CAExE,OACE,qBAAC,OAAO,MAAR;EACE,eAAe;EACf,wBAAwB;EACR;EACA;EACF;EACR;EACS;EACC;EACV;EACG;EAVX,UAAA,CAYG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAS,UAAA;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAoB,SAA4B,CAAA,CAC1C,EAAA,CAAA,CACG;;AAEjB"}

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.d.ts

@@ -22,8 +22,9 @@ export interface BitkitNativeSelectProps extends Omit<BitkitFieldProps, 'childre
     /** Field size — controls height and typography. */
     size?: 'md' | 'lg';
     /**
-     * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and
-     * `readOnly` gate interaction.
+     * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the
+     * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the
+     * selected value.
      */
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js

@@ -15,6 +15,21 @@ var FIELD_PROPS = [
 	"placeholder",
 	"value"
 ];
+var READ_ONLY_ALLOWED_KEYS = [
+	"Enter",
+	"Escape",
+	"Tab"
+];
+var READ_ONLY_PROPS = {
+	"aria-readonly": true,
+	onKeyDown: (event) => {
+		if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) return;
+		event.preventDefault();
+	},
+	onMouseDown: (event) => {
+		event.preventDefault();
+	}
+};
 /**
 * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the
 * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape
@@ -22,6 +37,7 @@ var FIELD_PROPS = [
 */
 var BitkitNativeSelect = forwardRef((props, ref) => {
 	const { children, onValueChange, selectProps, size = "md", state, ...rest } = props;
+	const isReadOnly = state === "readOnly";
 	const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);
 	const styles = useSlotRecipe({ key: "nativeSelect" })();
 	const hasWarning = state === "warning" || !!bitkitFieldProps.warningText;
@@ -53,12 +69,20 @@ var BitkitNativeSelect = forwardRef((props, ref) => {
 					ref,
 					onChange: handleChange,
 					...restFieldProps,
+					...isReadOnly && READ_ONLY_PROPS,
 					children
 				}),
 				statusIcon,
 				/* @__PURE__ */ jsx(NativeSelect.Indicator, {
 					asChild: true,
-					children: /* @__PURE__ */ jsx(AssetSelectChevron, { pointerEvents: "none" })
+					children: /* @__PURE__ */ jsx(AssetSelectChevron, {
+						pointerEvents: "none",
+						...isReadOnly && {
+							_groupFocusWithin: { color: "icon/on-disabled" },
+							_groupHover: { color: "icon/on-disabled" },
+							color: "icon/on-disabled"
+						}
+					})
 				})
 			]
 		})

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n  /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n  children: ReactNode;\n  /** Initially selected option value, for uncontrolled usage. */\n  defaultValue?: string;\n  /** Form field name submitted with the enclosing form. */\n  name?: string;\n  /**\n   * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n   * the selected value.\n   */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n  onValueChange?: (value: string) => void;\n  /** Placeholder option shown while no value is selected. */\n  placeholder?: string;\n  /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n  selectProps?: NativeSelectRootProps;\n  /** Field size — controls height and typography. */\n  size?: 'md' | 'lg';\n  /**\n   * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n   * `readOnly` gate interaction.\n   */\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n  value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n  (props: BitkitNativeSelectProps, ref) => {\n    const { children, onValueChange, selectProps, size = 'md', state, ...rest } = props;\n    const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n    const recipe = useSlotRecipe({ key: 'nativeSelect' });\n    const styles = recipe();\n\n    const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n    const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n    let statusIcon = undefined;\n    if (isInvalid) {\n      statusIcon = (\n        <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n      );\n    } else if (hasWarning) {\n      statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n    }\n\n    // `onValueChange` fires alongside the native `onChange`, with the selected value.\n    const { onChange: fieldOnChange, ...restFieldProps } = nativeFieldProps;\n    const handleChange: ChangeEventHandler<HTMLSelectElement> | undefined =\n      onValueChange || fieldOnChange\n        ? (event) => {\n            onValueChange?.(event.target.value);\n            fieldOnChange?.(event);\n          }\n        : undefined;\n\n    return (\n      <BitkitField state={state} {...bitkitFieldProps}>\n        <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n          <NativeSelect.Field ref={ref} onChange={handleChange} {...restFieldProps}>\n            {children}\n          </NativeSelect.Field>\n          {statusIcon}\n          <NativeSelect.Indicator asChild>\n            <AssetSelectChevron pointerEvents=\"none\" />\n          </NativeSelect.Indicator>\n        </NativeSelect.Root>\n      </BitkitField>\n    );\n  },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;;;;;;AAuC/E,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAI9F,MAAM,EAAE,UAAU,eAAe,GAAG,mBAAmB;CACvD,MAAM,eACJ,iBAAiB,iBACZ,UAAU;EACT,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAC7B,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,oBAAC,aAAa,OAAd;KAAyB;KAAK,UAAU;KAAc,GAAI;KACvD;IACiB,CAAA;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KACtB,UAAA,oBAAC,oBAAD,EAAoB,eAAc,OAAQ,CAAA;IACpB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\n// Keys a closed `<select>` cannot change its value with, so read-only has no reason to swallow them:\n// Tab moves on, Escape dismisses an enclosing overlay, and Enter still submits the surrounding form.\nconst READ_ONLY_ALLOWED_KEYS: readonly string[] = ['Enter', 'Escape', 'Tab'];\n\n// A native `<select>` has no read-only mode: the browser ignores the `readonly` attribute on it, so\n// the state has to be enforced by hand. Blocking the interaction rather than the control is the\n// point of read-only over `disabled` — the field stays focusable and its value is still submitted.\nconst READ_ONLY_PROPS = {\n  'aria-readonly': true,\n  onKeyDown: (event: KeyboardEvent<HTMLSelectElement>) => {\n    // Ctrl/Cmd shortcuts belong to the browser and never reach the select's value. Alt is not on the\n    // list: Alt+Arrow opens the dropdown.\n    if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    event.preventDefault();\n  },\n  // Preventing the default also suppresses the click's focus, which is what we want: Chrome treats a\n  // clicked `<select>` as focus-visible, so the field would take the focus ring on a mere click. It\n  // stays reachable by Tab, and BitkitSelect's read-only trigger shows nothing on click either.\n  onMouseDown: (event: MouseEvent<HTMLSelectElement>) => {\n    event.preventDefault();\n  },\n} as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n  /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n  children: ReactNode;\n  /** Initially selected option value, for uncontrolled usage. */\n  defaultValue?: string;\n  /** Form field name submitted with the enclosing form. */\n  name?: string;\n  /**\n   * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n   * the selected value.\n   */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n  onValueChange?: (value: string) => void;\n  /** Placeholder option shown while no value is selected. */\n  placeholder?: string;\n  /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n  selectProps?: NativeSelectRootProps;\n  /** Field size — controls height and typography. */\n  size?: 'md' | 'lg';\n  /**\n   * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the\n   * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the\n   * selected value.\n   */\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n  value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n  (props: BitkitNativeSelectProps, ref) => {\n    const { children, onValueChange, selectProps, size = 'md', state, ...rest } = props;\n    const isReadOnly = state === 'readOnly';\n    const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n    const recipe = useSlotRecipe({ key: 'nativeSelect' });\n    const styles = recipe();\n\n    const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n    const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n    let statusIcon = undefined;\n    if (isInvalid) {\n      statusIcon = (\n        <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n      );\n    } else if (hasWarning) {\n      statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n    }\n\n    // `onValueChange` fires alongside the native `onChange`, with the selected value.\n    const { onChange: fieldOnChange, ...restFieldProps } = nativeFieldProps;\n    const handleChange: ChangeEventHandler<HTMLSelectElement> | undefined =\n      onValueChange || fieldOnChange\n        ? (event) => {\n            onValueChange?.(event.target.value);\n            fieldOnChange?.(event);\n          }\n        : undefined;\n\n    return (\n      <BitkitField state={state} {...bitkitFieldProps}>\n        <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n          <NativeSelect.Field\n            ref={ref}\n            onChange={handleChange}\n            {...restFieldProps}\n            {...(isReadOnly && READ_ONLY_PROPS)}\n          >\n            {children}\n          </NativeSelect.Field>\n          {statusIcon}\n          <NativeSelect.Indicator asChild>\n            {/*\n              A read-only chevron is inert, so it takes BitkitSelect's read-only indicator colour and\n              drops both affordances: hover, and focus-within — which a plain click triggers. Chakra's\n              `NativeSelect.Indicator` forwards only `data-disabled`/`data-invalid`, so the recipe's\n              `indicator` slot cannot see the read-only state and this has to live here.\n            */}\n            <AssetSelectChevron\n              pointerEvents=\"none\"\n              {...(isReadOnly && {\n                _groupFocusWithin: { color: 'icon/on-disabled' },\n                _groupHover: { color: 'icon/on-disabled' },\n                color: 'icon/on-disabled',\n              })}\n            />\n          </NativeSelect.Indicator>\n        </NativeSelect.Root>\n      </BitkitField>\n    );\n  },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAI/E,IAAM,yBAA4C;CAAC;CAAS;CAAU;AAAK;AAK3E,IAAM,kBAAkB;CACtB,iBAAiB;CACjB,YAAY,UAA4C;EAGtD,IAAI,uBAAuB,SAAS,MAAM,GAAG,KAAK,MAAM,WAAW,MAAM,SACvE;EAGF,MAAM,eAAe;CACvB;CAIA,cAAc,UAAyC;EACrD,MAAM,eAAe;CACvB;AACF;;;;;;AAwCA,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,aAAa,UAAU;CAC7B,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAI9F,MAAM,EAAE,UAAU,eAAe,GAAG,mBAAmB;CACvD,MAAM,eACJ,iBAAiB,iBACZ,UAAU;EACT,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAC7B,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,oBAAC,aAAa,OAAd;KACO;KACL,UAAU;KACV,GAAI;KACJ,GAAK,cAAc;KAElB;IACiB,CAAA;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KAOtB,UAAA,oBAAC,oBAAD;MACE,eAAc;MACd,GAAK,cAAc;OACjB,mBAAmB,EAAE,OAAO,mBAAmB;OAC/C,aAAa,EAAE,OAAO,mBAAmB;OACzC,OAAO;MACT;KACD,CAAA;IACqB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}

package/dist/theme/slot-recipes/NativeSelect.recipe.js

@@ -29,6 +29,11 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
 				background: "background/disabled",
 				cursor: "not-allowed"
 			},
+			_readOnly: {
+				_hover: { borderColor: "border/strong" },
+				background: "background/disabled",
+				cursor: "default"
+			},
 			_placeholderShown: { color: "input/text/placeholder" }
 		},
 		statusIcon: {

package/dist/theme/slot-recipes/NativeSelect.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NativeSelect.recipe.ts"],"sourcesContent":["import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst nativeSelectSlotRecipe = defineSlotRecipe({\n  className: 'native-select',\n  slots: [...nativeSelectAnatomy.keys(), 'statusIcon'],\n  base: {\n    root: {\n      position: 'relative',\n    },\n    field: {\n      width: '100%',\n      minWidth: 0,\n      appearance: 'none',\n      borderRadius: '4',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      transition: '200ms',\n      color: 'input/text/inputValue',\n      _hover: {\n        borderColor: 'border/hover',\n        _invalid: {\n          borderColor: 'border/error',\n        },\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _disabled: {\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n        _placeholder: {\n          color: 'text/disabled',\n        },\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _placeholderShown: {\n        color: 'input/text/placeholder',\n      },\n    },\n    statusIcon: {\n      position: 'absolute',\n      top: '50%',\n      right: '48',\n      transform: 'translateY(-50%)',\n      pointerEvents: 'none',\n    },\n    indicator: {\n      position: 'absolute',\n      top: '50%',\n      right: rem(15),\n      transform: 'translateY(-50%)',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        field: { paddingInline: rem(11), paddingBlock: rem(9), textStyle: 'body/md/regular' },\n      },\n      lg: {\n        field: { paddingInline: rem(15), paddingBlock: rem(11), textStyle: 'body/lg/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default nativeSelectSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,yBAAyB,iBAAiB;CAC9C,WAAW;CACX,OAAO,CAAC,GAAG,oBAAoB,KAAK,GAAG,YAAY;CACnD,MAAM;EACJ,MAAM,EACJ,UAAU,WACZ;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,YAAY;GACZ,cAAc;GACd,aAAa;GACb,aAAa;GACb,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,QAAQ;IACN,aAAa;IACb,UAAU,EACR,aAAa,eACf;GACF;GACA,UAAU,EACR,aAAa,eACf;GACA,WAAW;IACT,QAAQ,EACN,aAAa,kBACf;IACA,cAAc,EACZ,OAAO,gBACT;IACA,OAAO;IACP,YAAY;IACZ,QAAQ;GACV;GACA,mBAAmB,EACjB,OAAO,yBACT;EACF;EACA,YAAY;GACV,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,eAAe;EACjB;EACA,WAAW;GACT,UAAU;GACV,KAAK;GACL,OAAO,IAAI,EAAE;GACb,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,CAAC;GAAG,WAAW;EAAkB,EACtF;EACA,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,EAAE;GAAG,WAAW;EAAkB,EACvF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"NativeSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NativeSelect.recipe.ts"],"sourcesContent":["import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst nativeSelectSlotRecipe = defineSlotRecipe({\n  className: 'native-select',\n  slots: [...nativeSelectAnatomy.keys(), 'statusIcon'],\n  base: {\n    root: {\n      position: 'relative',\n    },\n    field: {\n      width: '100%',\n      minWidth: 0,\n      appearance: 'none',\n      borderRadius: '4',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      transition: '200ms',\n      color: 'input/text/inputValue',\n      _hover: {\n        borderColor: 'border/hover',\n        _invalid: {\n          borderColor: 'border/error',\n        },\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _disabled: {\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n        _placeholder: {\n          color: 'text/disabled',\n        },\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _readOnly: {\n        _hover: {\n          borderColor: 'border/strong',\n        },\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n      _placeholderShown: {\n        color: 'input/text/placeholder',\n      },\n    },\n    statusIcon: {\n      position: 'absolute',\n      top: '50%',\n      right: '48',\n      transform: 'translateY(-50%)',\n      pointerEvents: 'none',\n    },\n    indicator: {\n      position: 'absolute',\n      top: '50%',\n      right: rem(15),\n      transform: 'translateY(-50%)',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        field: { paddingInline: rem(11), paddingBlock: rem(9), textStyle: 'body/md/regular' },\n      },\n      lg: {\n        field: { paddingInline: rem(15), paddingBlock: rem(11), textStyle: 'body/lg/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default nativeSelectSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,yBAAyB,iBAAiB;CAC9C,WAAW;CACX,OAAO,CAAC,GAAG,oBAAoB,KAAK,GAAG,YAAY;CACnD,MAAM;EACJ,MAAM,EACJ,UAAU,WACZ;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,YAAY;GACZ,cAAc;GACd,aAAa;GACb,aAAa;GACb,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,QAAQ;IACN,aAAa;IACb,UAAU,EACR,aAAa,eACf;GACF;GACA,UAAU,EACR,aAAa,eACf;GACA,WAAW;IACT,QAAQ,EACN,aAAa,kBACf;IACA,cAAc,EACZ,OAAO,gBACT;IACA,OAAO;IACP,YAAY;IACZ,QAAQ;GACV;GACA,WAAW;IACT,QAAQ,EACN,aAAa,gBACf;IACA,YAAY;IACZ,QAAQ;GACV;GACA,mBAAmB,EACjB,OAAO,yBACT;EACF;EACA,YAAY;GACV,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,eAAe;EACjB;EACA,WAAW;GACT,UAAU;GACV,KAAK;GACL,OAAO,IAAI,EAAE;GACb,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,CAAC;GAAG,WAAW;EAAkB,EACtF;EACA,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,EAAE;GAAG,WAAW;EAAkB,EACvF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.365",
+  "version": "0.3.367",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",