@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/dist/Indicator/types.d.ts

@@ -0,0 +1,177 @@
+/**
+ * @file types.ts
+ * @input None (pure type definitions)
+ * @output The indicator contract: families, states, props, names, registry
+ * @position Type foundation for stateful control visuals
+ *
+ * An **indicator** is a decorative visual that expresses a piece of component
+ * state: the box a checkbox draws, the circle a radio draws, the mark on a
+ * chosen list option. The owning component keeps the input, role, accessible
+ * name, focus, and keyboard behavior; the indicator turns state into a picture.
+ *
+ * Componentizing them buys three things a theme could not otherwise have:
+ *
+ *   1. **Theme it** — an indicator renders stable `astryx-*` class targets, so
+ *      `defineTheme({components})` restyles it like any other component, in one
+ *      place rather than per host component.
+ *   2. **Swizzle it** — `astryx swizzle <Name>` copies the source to own.
+ *   3. **Replace it** — `defineTheme({indicators})` swaps in another component
+ *      by name, and every component that renders that indicator follows. A
+ *      product that wants radio visuals for single selection replaces `check`.
+ *
+ * Indicators come in **families**, and a family fixes the state space. That is
+ * what lets one mechanism serve semantics as different as "is this option
+ * chosen" and "are several of these chosen" without either pretending to be
+ * the other, and without a shared enum that would typecheck `indeterminate` on
+ * a radio.
+ *
+ * Each family's vocabulary is the one the accessibility layer already uses, so
+ * a component passing state down says the same word its ARIA attribute says.
+ * Sharing one enum across families was measured and rejected (#4831): it
+ * produced call sites reading `aria-expanded={isOpen}` beside
+ * `state={isOpen ? 'on' : 'off'}`.
+ */
+import type { ComponentType, ReactNode, Ref } from 'react';
+import type { BaseProps } from '../BaseProps';
+/**
+ * The indicator families, each mapped to the states it can express.
+ *
+ * Single and multi selection are separate families because their state spaces
+ * genuinely differ: `aria-checked` is `true|false` for a radio and
+ * `true|false|mixed` for a checkbox. Keeping them apart is what makes a
+ * replacement type-checkable — a checkbox visual cannot stand in where only
+ * two states are ever passed, and a radio cannot be asked to draw a partial
+ * state it has no picture for.
+ *
+ * Adding a family is additive: declare it here, then declare indicators of
+ * that family in {@link IndicatorMap}. Packages outside core can contribute
+ * families through module augmentation.
+ */
+export interface IndicatorFamilyMap {
+    /** Is this one thing chosen? Radios, and the mark on a selected option. */
+    singleSelection: 'unchecked' | 'checked';
+    /** Which of these are chosen? Checkboxes, including the partial state. */
+    multiSelection: 'unchecked' | 'checked' | 'indeterminate';
+}
+export type IndicatorFamily = keyof IndicatorFamilyMap & string;
+/** The states an indicator of family `F` can be asked to draw. */
+export type IndicatorState<F extends IndicatorFamily = IndicatorFamily> = IndicatorFamilyMap[F];
+/** Indicator size scale — matches the control sizes of the owning inputs. */
+export type IndicatorSize = 'sm' | 'md';
+/**
+ * Which edge of its row an indicator sits on.
+ *
+ * Logical, not physical: `start` is the left edge in LTR and the right edge in
+ * RTL. Owned by the host component, not by the indicator — an indicator draws a
+ * picture and has no say in where the row puts it — which is why this is a prop
+ * on the components that lay out rows rather than part of
+ * {@link IndicatorProps}.
+ */
+export type IndicatorPosition = 'start' | 'end';
+/**
+ * Props every indicator accepts.
+ *
+ * Indicators are **decorative**: they render `aria-hidden` visuals and own no
+ * role, focus, keyboard handling, or state. The component that renders one
+ * (CheckboxInput, RadioListItem, a listbox option) keeps all of that. An
+ * indicator's only job is to turn `state` into a picture.
+ *
+ * The a11y props are omitted from this interface rather than left to
+ * convention: un-hiding an indicator has it announced next to the control that
+ * owns the accessible name — the same thing said twice (#4918). A replacement
+ * that genuinely needs announcing is not an indicator; name the owning control.
+ *
+ * `tabIndex` is omitted for the same reason, one step on: the element is
+ * unconditionally `aria-hidden`, so a tab stop on it is a focusable node inside
+ * a hidden subtree. Measured with axe in real Chromium: 0 `aria-hidden-focus`
+ * violations becomes 1 the moment it is forwarded.
+ *
+ * The omission is only half enforceable, and it is worth knowing which half.
+ * TypeScript exempts JSX attribute names that are not valid JS identifiers from
+ * excess-property checking, so a LITERAL `role=` is a compile error while
+ * `aria-hidden` and `aria-label` are not — and a spread (`{...props}`, the
+ * ordinary host idiom) bypasses the check for every member, `role` included.
+ * Measured, not assumed. So the components also emit their own `aria-hidden`
+ * AFTER `{...rest}` and drop a forwarded `tabIndex`: that ordering, not the
+ * type, is what enforces the contract. Nothing else is stripped — a forwarded
+ * `aria-label` still reaches the DOM, inert inside an `aria-hidden` subtree.
+ *
+ * Interaction state is deliberately *not* a prop. Hover and focus reach an
+ * indicator through the CSS ancestor marker ({@link indicatorScope}) applied
+ * by its owner, so a row hover tints the control without anyone threading a
+ * boolean through React — and an owner that should not tint its indicator
+ * simply does not apply the marker.
+ */
+export interface IndicatorProps<F extends IndicatorFamily = IndicatorFamily> extends Omit<BaseProps<HTMLSpanElement>, 'aria-hidden' | 'role' | 'aria-label' | 'aria-labelledby' | 'tabIndex'> {
+    /** Ref forwarded to the indicator's root element. */
+    ref?: Ref<HTMLSpanElement>;
+    /** Which state to draw. The state space is fixed by the family. */
+    state: IndicatorState<F>;
+    /**
+     * Control size.
+     * @default 'md'
+     */
+    size?: IndicatorSize;
+    /**
+     * Whether the owning control is disabled. Purely visual — the owner still
+     * owns the actual disabled semantics.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Content rendered inside the indicator chrome *instead of* the state mark.
+     * CheckboxInput uses this to show a loading Spinner inside the box while a
+     * change action is pending.
+     */
+    children?: ReactNode;
+}
+/** An indicator is any component accepting {@link IndicatorProps} of its family. */
+export type IndicatorComponent<F extends IndicatorFamily = IndicatorFamily> = ComponentType<IndicatorProps<F>>;
+/**
+ * The named indicators a theme can replace, each mapped to its family.
+ *
+ * The name is what a theme addresses, and what every component renders
+ * through — so replacing `check` reaches every single-selection mark at once,
+ * which is the point.
+ *
+ * Packages outside core can contribute their own through module augmentation.
+ * Core ships no default for a name it does not know, so the package that adds
+ * the name owns its default — `getIndicator`/`useIndicator` return
+ * `| undefined` for it, and the call site supplies the fallback:
+ *
+ * ```ts
+ * declare module '@astryxdesign/core/Indicator' {
+ *   interface IndicatorMap {
+ *     'brand-star': 'singleSelection';
+ *   }
+ * }
+ *
+ * const Star = useIndicator('brand-star') ?? BrandStar;
+ * ```
+ */
+export interface IndicatorMap {
+    /** The mark on a chosen option — a checkmark by default. */
+    check: 'singleSelection';
+    /** The filled circle of a radio control. */
+    radio: 'singleSelection';
+    /** The box of a checkbox control, including its partial state. */
+    checkbox: 'multiSelection';
+}
+export type IndicatorName = keyof IndicatorMap & string;
+/** The indicator names belonging to family `F`. */
+export type IndicatorNameOfFamily<F extends IndicatorFamily> = {
+    [N in IndicatorName]: IndicatorMap[N] extends F ? N : never;
+}[IndicatorName];
+/**
+ * Theme-provided indicator overrides, keyed by indicator name.
+ *
+ * Family-checked: each entry must accept the state space of that indicator's
+ * family, so a replacement cannot be written against the wrong states. A
+ * `check` replacement that only handles `collapsed`/`expanded`, or a `radio`
+ * replacement expecting `indeterminate`, is a type error rather than a
+ * runtime surprise.
+ */
+export type IndicatorRegistry = {
+    [N in IndicatorName]?: IndicatorComponent<IndicatorMap[N]>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/Indicator/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Indicator/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,GAAG,EAAC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC,0EAA0E;IAC1E,cAAc,EAAE,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;CAC3D;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAEhE,kEAAkE;AAClE,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACpE,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAExB,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,cAAc,CAC7B,CAAC,SAAS,eAAe,GAAG,eAAe,CAC3C,SAAQ,IAAI,CACZ,SAAS,CAAC,eAAe,CAAC,EAC1B,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,UAAU,CACvE;IACC,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,mEAAmE;IACnE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACxE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,YAAY;IAC3B,4DAA4D;IAC5D,KAAK,EAAE,iBAAiB,CAAC;IACzB,4CAA4C;IAC5C,KAAK,EAAE,iBAAiB,CAAC;IACzB,kEAAkE;IAClE,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,YAAY,GAAG,MAAM,CAAC;AAExD,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,eAAe,IAAI;KAC5D,CAAC,IAAI,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK;CAC5D,CAAC,aAAa,CAAC,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG;KAC7B,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC"}

package/dist/Indicator/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Indicator/useIndicator.d.ts

@@ -0,0 +1,18 @@
+import { type CoreIndicatorName } from './indicatorRegistry';
+import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types';
+/**
+ * Resolve an indicator component from the nearest `<Theme>`.
+ *
+ * A core indicator always resolves. A name contributed by augmentation
+ * resolves only if a theme supplies it, so that overload returns
+ * `| undefined` — see {@link getIndicator}.
+ *
+ * @example
+ * ```
+ * const Checkbox = useIndicator('checkbox');
+ * return <Checkbox state={isChecked ? 'checked' : 'unchecked'} size={size} />;
+ * ```
+ */
+export declare function useIndicator<N extends CoreIndicatorName>(name: N): IndicatorComponent<IndicatorMap[N]>;
+export declare function useIndicator<N extends IndicatorName>(name: N): IndicatorComponent<IndicatorMap[N]> | undefined;
+//# sourceMappingURL=useIndicator.d.ts.map

package/dist/Indicator/useIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/useIndicator.ts"],"names":[],"mappings":"AAYA,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACzE,OAAO,KAAK,EAAC,kBAAkB,EAAE,YAAY,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAE7E;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,iBAAiB,EACtD,IAAI,EAAE,CAAC,GACN,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AACvC,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,EAClD,IAAI,EAAE,CAAC,GACN,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC"}

package/dist/Indicator/useIndicator.js

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useIndicator.ts
+ * @input Indicator name
+ * @output Exports useIndicator hook for theme-aware indicator components
+ * @position Client hook used by controls that render a selection visual
+ */
+import { useThemeName } from "../theme/useTheme.js";
+import { getIndicator } from "./indicatorRegistry.js";
+
+/**
+ * Resolve an indicator component from the nearest `<Theme>`.
+ *
+ * A core indicator always resolves. A name contributed by augmentation
+ * resolves only if a theme supplies it, so that overload returns
+ * `| undefined` — see {@link getIndicator}.
+ *
+ * @example
+ * ```
+ * const Checkbox = useIndicator('checkbox');
+ * return <Checkbox state={isChecked ? 'checked' : 'unchecked'} size={size} />;
+ * ```
+ */
+
+export function useIndicator(name) {
+  return getIndicator(name, useThemeName());
+}

package/dist/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA4MX;yBArOe,IAAI"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmKD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA2MX;yBApOe,IAAI"}

package/dist/Item/Item.js

@@ -25,6 +25,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 
 // =============================================================================
 // Types
@@ -68,11 +69,6 @@ const styles = {
     kWkggS: "xjbqb8w xe9uy6x xyxi2l3",
     $$css: true
   },
-  focusVisibleOutline: {
-    kI3sdo: "x1a2a7pz x1irc7jg",
-    kInvED: "x1wfwxd8 xdjuwb3",
-    $$css: true
-  },
   highlighted: {
     kWkggS: "x1lmrjuc",
     $$css: true
@@ -87,7 +83,7 @@ const styles = {
     $$css: true
   },
   label: {
-    kMwMTN: "x1tgivj0",
+    kMwMTN: "x5tbw38",
     kGuDYH: "xjm74w1",
     kLWn49: "xw6l6zx",
     $$css: true
@@ -105,7 +101,7 @@ const styles = {
     $$css: true
   },
   description: {
-    kMwMTN: "xv1l7n4",
+    kMwMTN: "x1gb3s7i",
     kGuDYH: "x141an7d",
     kLWn49: "x1ltkj2j",
     $$css: true
@@ -332,7 +328,7 @@ export function Item({
     ...mergeProps(themeProps('item', {
       density,
       align
-    }), stylex.props(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && styles.focusVisibleOutline, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),
+    }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),
     role: role,
     onClick: isDelegate ? delegatedOnClick : hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
     children: innerContent

package/dist/Layer/useLayer.d.ts

@@ -51,6 +51,20 @@ export interface ContextRenderProps {
      * is `'custom'`.
      */
     alignment?: LayerAlignment;
+    /**
+     * Clearance between the layer and its anchor, as a CSS length (a number is
+     * treated as `px`). Applied along the placement axis and flip-safe, so the
+     * gap survives a `position-try-fallbacks` flip to the opposite side.
+     *
+     * Layers sit flush by default: the hook zeroes the UA margins so anchor
+     * positioning has a clean box, and clearance is a deliberate choice per
+     * surface. `var(--spacing-1)` is the system's standard clearance.
+     *
+     * Ignored when `positioning` is `'custom'` — that mode owns its own insets.
+     *
+     * @default 0
+     */
+    offset?: number | string;
     /**
      * ARIA role applied to the popover container (e.g. `'tooltip'`). Lets
      * consumers complete the ARIA pattern and gives test tooling a stable,

package/dist/Layer/useLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAwCnD;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACpD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACrE;AAgDD;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,GAAE,cAAwB,EACnC,SAAS,GAAE,cAAyB,GACnC,MAAM,CAgBR;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;AAC3E,wBAAgB,QAAQ,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAAC"}

package/dist/Layer/useLayer.js

@@ -19,6 +19,11 @@ import { addAnchorName, removeAnchorName } from "./anchorName.js";
 import "../theme/tokens.stylex.js";
 import { typographyVars } from "../theme/tokens.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const _temp = {
+  keoZOQ: "x1vhfslr",
+  k1K539: "xlm3tn6",
+  "$$css": true
+};
 const styles = {
   base: {
     keoZOQ: "xdj266r",
@@ -39,7 +44,19 @@ const styles = {
   fixed: {
     kVAEAm: "xixxii4",
     $$css: true
-  }
+  },
+  offsetBlock: offset => [_temp, {
+    "--x-marginBlockStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(offset),
+    "--x-marginBlockEnd": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(offset)
+  }],
+  offsetInline: offset => [{
+    keTefX: offset != null ? "x4lel18" : offset,
+    k71WvV: offset != null ? "x1c9tiao" : offset,
+    $$css: true
+  }, {
+    "--x-marginInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(offset),
+    "--x-marginInlineEnd": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(offset)
+  }]
 };
 
 /**
@@ -80,6 +97,10 @@ const styles = {
  * Return type for fixed mode
  */
 
+function toCssLength(value) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
 /**
  * Map logical placement/alignment to a CSS position-area value.
  *
@@ -285,6 +306,7 @@ export function useLayer(options) {
       placement = 'above',
       alignment = 'center',
       positioning = 'anchor',
+      offset,
       role,
       'aria-label': ariaLabel,
       xstyle,
@@ -306,7 +328,8 @@ export function useLayer(options) {
       positionArea: getPositionArea(placement, alignment),
       positionTryFallbacks: getPositionTryFallbacks(placement, alignment)
     };
-    const stylexResult = stylex.props(styles.base, xstyle);
+    const offsetStyle = positioning === 'anchor' && offset ? placement === 'above' || placement === 'below' ? styles.offsetBlock(toCssLength(offset)) : styles.offsetInline(toCssLength(offset)) : null;
+    const stylexResult = stylex.props(styles.base, offsetStyle, xstyle);
     const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
 
     // Render as the requested tag. A `span` keeps the layer phrasing content

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA6JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAyYf;yBAzZe,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAyYf;yBAzZe,QAAQ"}

package/dist/Lightbox/Lightbox.js

@@ -26,6 +26,7 @@ import { useScrollLock } from "../hooks/useScrollLock.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { mergeProps, mergeRefs, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 
 /**
@@ -57,6 +58,28 @@ const styles = {
     kba3nw: "x1abwkk1",
     $$css: true
   },
+  imageWrapper: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kVQacm: "xb3r6kr",
+    kkrTdU: "xt0e3qv",
+    kfSwDN: "x87ps6o",
+    kAzted: "x2lwn1j",
+    $$css: true
+  },
+  imageWrapperZoomable: {
+    kkrTdU: "x1huxd7x x2dt3px",
+    $$css: true
+  },
+  imageWrapperZoomed: {
+    kkrTdU: "x1jm3nie",
+    $$css: true
+  },
+  imageWrapperDragging: {
+    kkrTdU: "xi9pz9s",
+    $$css: true
+  },
   image: {
     ks0D6T: "x193iq5w",
     kskxy: "xmz0i5r",
@@ -71,6 +94,28 @@ const styles = {
     k1ekBW: "x13b0p5u",
     $$css: true
   },
+  closeButton: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xyx6v2t",
+    kt4wiu: "x1mcfs9z",
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  },
+  navButton: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xwa60dl",
+    kIY38u: "x3sa99s",
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  },
+  navPrev: {
+    kLqNvP: "x1ybfrjj",
+    $$css: true
+  },
+  navNext: {
+    kt4wiu: "x1mcfs9z",
+    $$css: true
+  },
   controlButton: {
     kMwMTN: "x9e3rv5",
     $$css: true
@@ -404,40 +449,28 @@ export function Lightbox({
       ...{
         className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
       },
-      children: [/*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk xyx6v2t x1mcfs9z x1vjfegm"
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: "close",
-            size: "sm",
-            color: "inherit"
-          }),
-          label: t('@astryx.lightbox.close'),
-          variant: "ghost",
-          onClick: handleClose,
-          xstyle: styles.controlButton
-        })
-      }), isGallery && /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm x1ybfrjj"
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx("span", {
-            ...stylex.props(rtlStyles.mirror),
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronLeft",
-              size: "sm",
-              color: "inherit"
-            })
-          }),
-          label: t('@astryx.lightbox.previous'),
-          variant: "ghost",
-          isDisabled: !canPrev,
-          onClick: goToPrev,
-          xstyle: styles.controlButton
-        })
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "close",
+          size: "sm",
+          color: "inherit"
+        }),
+        label: t('@astryx.lightbox.close'),
+        variant: "ghost",
+        onClick: handleClose,
+        xstyle: [styles.closeButton, styles.controlButton]
+      }), isGallery && /*#__PURE__*/_jsx(IconButton, {
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronLeft",
+          size: "sm",
+          color: "inherit",
+          xstyle: rtlStyles.mirror
+        }),
+        label: t('@astryx.lightbox.previous'),
+        variant: "ghost",
+        isDisabled: !canPrev,
+        onClick: goToPrev,
+        xstyle: [styles.navButton, styles.navPrev, styles.controlButton]
       }), /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x78zum5 xdt5ytf x6s0dn4 x193iq5w xmz0i5r xb3r6kr"
@@ -451,56 +484,7 @@ export function Lightbox({
           tabIndex: isZoomTarget ? 0 : undefined,
           "aria-pressed": isZoomTarget ? isZoomed : undefined,
           "aria-label": isZoomTarget ? t('@astryx.lightbox.zoom') : undefined,
-          ...{
-            0: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr xt0e3qv x87ps6o x2lwn1j"
-            },
-            8: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr xt0e3qv x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
-            },
-            4: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1huxd7x x2dt3px"
-            },
-            12: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1huxd7x x2dt3px"
-            },
-            2: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1jm3nie"
-            },
-            10: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1jm3nie"
-            },
-            6: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1jm3nie"
-            },
-            14: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1jm3nie"
-            },
-            1: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
-            },
-            9: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
-            },
-            5: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
-            },
-            13: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
-            },
-            3: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
-            },
-            11: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
-            },
-            7: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
-            },
-            15: {
-              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
-            }
-          }[!!isZoomTarget << 3 | !!(!isVideo && hasZoom && !isZoomed) << 2 | !!(!isVideo && isZoomed) << 1 | !!(!isVideo && isDragging) << 0],
+          ...stylex.props(styles.imageWrapper, isZoomTarget && focusOutlineStyles.focusVisible, !isVideo && hasZoom && !isZoomed && styles.imageWrapperZoomable, !isVideo && isZoomed && styles.imageWrapperZoomed, !isVideo && isDragging && styles.imageWrapperDragging),
           onDoubleClick: isVideo ? undefined : handleDoubleClick,
           onKeyDown: isZoomTarget ? handleImageKeyDown : undefined,
           onPointerDown: isVideo ? undefined : handlePointerDown,
@@ -524,25 +508,18 @@ export function Lightbox({
           },
           children: currentItem.caption
         })]
-      }), isGallery && /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm x1mcfs9z"
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx("span", {
-            ...stylex.props(rtlStyles.mirror),
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronRight",
-              size: "sm",
-              color: "inherit"
-            })
-          }),
-          label: t('@astryx.lightbox.next'),
-          variant: "ghost",
-          isDisabled: !canNext,
-          onClick: goToNext,
-          xstyle: styles.controlButton
-        })
+      }), isGallery && /*#__PURE__*/_jsx(IconButton, {
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronRight",
+          size: "sm",
+          color: "inherit",
+          xstyle: rtlStyles.mirror
+        }),
+        label: t('@astryx.lightbox.next'),
+        variant: "ghost",
+        isDisabled: !canNext,
+        onClick: goToNext,
+        xstyle: [styles.navButton, styles.navNext, styles.controlButton]
       }), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x10l6tqk xyx6v2t x1ybfrjj x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"

package/dist/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAuG/C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,iBAAiB,GAAG,iBAAiB,CACtC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,eAAe,EACvB,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,IAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAgB,EAChB,OAAkB,EAClB,QAAY,EACZ,QAAQ,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAyIX;yBAlKe,IAAI"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAgG/C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,iBAAiB,GAAG,iBAAiB,CACtC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,eAAe,EACvB,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,IAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAgB,EAChB,OAAkB,EAClB,QAAY,EACZ,QAAQ,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAyIX;yBAlKe,IAAI"}