@tea-ui/core 0.1.0

package/dist/internal/refs.js

@@ -0,0 +1,34 @@
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref && typeof ref === "object") {
+    ref.current = value;
+  }
+}
+function setRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) assignRef(ref, value);
+  };
+}
+function composeRefs(...refs) {
+  return setRefs(...refs);
+}
+function splitProps(props, ownKeys) {
+  const own = {};
+  const rest = {};
+  const ownSet = new Set(ownKeys);
+  for (const key of Object.keys(props)) {
+    if (ownSet.has(key)) {
+      own[key] = props[key];
+    } else {
+      rest[key] = props[key];
+    }
+  }
+  return { own, rest };
+}
+export {
+  composeRefs,
+  setRefs,
+  splitProps
+};
+//# sourceMappingURL=refs.js.map

package/dist/internal/refs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/refs.ts"],"sourcesContent":["import type * as React from \"react\";\n\n/**\n * Ref plumbing for DOM-backed components.\n *\n * Every interactive TEA UI component forwards its ref, and every TEA UI\n * component accepts an external ref. That means every component needs the same\n * three-way merge between its own ref, the forwarded ref, and any prop ref a\n * Radix primitive hands to it. Doing it once here is the only way it is done\n * consistently.\n */\n\nexport type PossibleRef<T> = React.Ref<T> | undefined;\n\nfunction assignRef<T>(ref: PossibleRef<T>, value: T): void {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref && typeof ref === \"object\") {\n    (ref as React.RefObject<T | null>).current = value;\n  }\n}\n\n/** A ref that can hold several refs at once. */\nexport function setRefs<T>(...refs: PossibleRef<T>[]): (value: T) => void {\n  return (value: T) => {\n    for (const ref of refs) assignRef(ref, value);\n  };\n}\n\n/**\n * Merge a component's internal ref with a forwarded one into a single\n * callback ref. Internal first, so a component always knows its own node.\n */\nexport function composeRefs<T>(...refs: PossibleRef<T>[]): (value: T) => void {\n  return setRefs(...refs);\n}\n\n/**\n * Split an incoming props object into \"ours to handle\" and \"the consumer's\",\n * merging anything that is not ours forward. This is how a TEA UI wrapper stays\n * transparent: unknown props are never swallowed, and every known prop is\n * consumed exactly once.\n */\nexport function splitProps<T extends Record<string, unknown>, K extends keyof T>(\n  props: T,\n  ownKeys: readonly K[],\n): { own: Pick<T, K>; rest: Omit<T, K> } {\n  const own = {} as Pick<T, K>;\n  const rest = {} as Omit<T, K>;\n  const ownSet = new Set<PropertyKey>(ownKeys as readonly PropertyKey[]);\n\n  for (const key of Object.keys(props) as Array<Extract<keyof T, string>>) {\n    if (ownSet.has(key)) {\n      (own as Record<string, unknown>)[key] = props[key];\n    } else {\n      (rest as Record<string, unknown>)[key] = props[key];\n    }\n  }\n  return { own, rest };\n}\n"],"mappings":"AAcA,SAAS,UAAa,KAAqB,OAAgB;AACzD,MAAI,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AAAA,EACX,WAAW,OAAO,OAAO,QAAQ,UAAU;AACzC,IAAC,IAAkC,UAAU;AAAA,EAC/C;AACF;AAGO,SAAS,WAAc,MAA4C;AACxE,SAAO,CAAC,UAAa;AACnB,eAAW,OAAO,KAAM,WAAU,KAAK,KAAK;AAAA,EAC9C;AACF;AAMO,SAAS,eAAkB,MAA4C;AAC5E,SAAO,QAAQ,GAAG,IAAI;AACxB;AAQO,SAAS,WACd,OACA,SACuC;AACvC,QAAM,MAAM,CAAC;AACb,QAAM,OAAO,CAAC;AACd,QAAM,SAAS,IAAI,IAAiB,OAAiC;AAErE,aAAW,OAAO,OAAO,KAAK,KAAK,GAAsC;AACvE,QAAI,OAAO,IAAI,GAAG,GAAG;AACnB,MAAC,IAAgC,GAAG,IAAI,MAAM,GAAG;AAAA,IACnD,OAAO;AACL,MAAC,KAAiC,GAAG,IAAI,MAAM,GAAG;AAAA,IACpD;AAAA,EACF;AACA,SAAO,EAAE,KAAK,KAAK;AACrB;","names":[]}

package/dist/internal/slot.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+export { cn } from '@tea-ui/utils';
+
+/**
+ * The `asChild` contract.
+ *
+ * Native semantics first is a TEA UI rule, and this is the mechanism that makes
+ * it practical: a consumer can render a real `<a>` with the styles of a
+ * `<button>`, or a real `<summary>` with the styles of a `<div>`, without the
+ * library pretending to be the other element. The audit's `<a>` styled by hand
+ * as a primary button, and its `<button>` wrapping an icon, both disappear into
+ * `<Button asChild>`.
+ */
+interface SlotProps {
+    /** Render the consumer's single child element instead of a `button`/`div`. */
+    asChild?: boolean | undefined;
+    /** The element this component renders when `asChild` is not used. */
+    as?: React.ElementType | undefined;
+}
+interface RenderProps {
+    asChild?: boolean | undefined;
+    as?: React.ElementType | undefined;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+    className?: string | undefined;
+}
+/**
+ * Render either the default element or the consumer's child, forwarding the ref
+ * and merging the class names into whichever element actually lands in the DOM.
+ */
+declare function renderElement({ asChild, as, className, children, ref, ...rest }: RenderProps & Record<string, unknown>, defaultTag: React.ElementType): React.ReactElement;
+/**
+ * The `data-slot` value a component stamps on its root. Present so that a
+ * consumer can target TEA UI internals from CSS or a test without depending on
+ * class names, which are an implementation detail.
+ */
+declare function dataSlot(...parts: string[]): Record<`data-slot`, string>;
+/**
+ * Every interactive TEA UI component exposes its state as data attributes, so
+ * state is inspectable from the DOM and assertable in a test — not only visible.
+ *
+ * This is the attribute vocabulary, in one object, so no component invents its
+ * own spelling.
+ */
+interface StateAttributes {
+    "data-disabled"?: true;
+    "data-loading"?: true;
+    "data-invalid"?: true;
+    "data-readonly"?: true;
+    "data-selected"?: true;
+    "data-active"?: true;
+    "data-checked"?: true;
+    "data-open"?: true;
+    "data-empty"?: true;
+    "data-orientation"?: "horizontal" | "vertical";
+}
+declare function stateAttributes(state: {
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    invalid?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    selected?: boolean | undefined;
+    active?: boolean | undefined;
+    checked?: boolean | undefined;
+    open?: boolean | undefined;
+    empty?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+}): StateAttributes;
+/**
+ * Merge refs from a forwarded ref, a prop-supplied ref and a private one.
+ * `privateRef` may be a function that receives the node as well as a ref object,
+ * which is how a component observes its own element without a state update.
+ */
+declare function withPrivateRef<T>(forwarded: React.Ref<T> | undefined, propRef: React.Ref<T> | undefined, privateRef?: React.Ref<T>): React.RefCallback<T>;
+
+export { type RenderProps, type SlotProps, type StateAttributes, dataSlot, renderElement, stateAttributes, withPrivateRef };

package/dist/internal/slot.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { cn, slot as slotName } from "@tea-ui/utils";
+import { composeRefs } from "./refs.js";
+function renderElement({ asChild, as, className, children, ref, ...rest }, defaultTag) {
+  const Component = asChild ? Slot.Root : as ?? defaultTag;
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Component, { className, ref, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx(Component, { className, ref, ...rest, children });
+}
+function dataSlot(...parts) {
+  return { "data-slot": slotName(...parts) };
+}
+function stateAttributes(state) {
+  const attrs = {};
+  if (state.disabled) attrs["data-disabled"] = true;
+  if (state.loading) attrs["data-loading"] = true;
+  if (state.invalid) attrs["data-invalid"] = true;
+  if (state.readOnly) attrs["data-readonly"] = true;
+  if (state.selected) attrs["data-selected"] = true;
+  if (state.active) attrs["data-active"] = true;
+  if (state.checked) attrs["data-checked"] = true;
+  if (state.open) attrs["data-open"] = true;
+  if (state.empty) attrs["data-empty"] = true;
+  if (state.orientation) attrs["data-orientation"] = state.orientation;
+  return attrs;
+}
+function withPrivateRef(forwarded, propRef, privateRef) {
+  return composeRefs(forwarded, propRef, privateRef);
+}
+export {
+  cn,
+  dataSlot,
+  renderElement,
+  stateAttributes,
+  withPrivateRef
+};
+//# sourceMappingURL=slot.js.map

package/dist/internal/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/slot.tsx"],"sourcesContent":["import { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { cn, slot as slotName } from \"@tea-ui/utils\";\n\nimport { composeRefs } from \"./refs\";\n\n/**\n * The `asChild` contract.\n *\n * Native semantics first is a TEA UI rule, and this is the mechanism that makes\n * it practical: a consumer can render a real `<a>` with the styles of a\n * `<button>`, or a real `<summary>` with the styles of a `<div>`, without the\n * library pretending to be the other element. The audit's `<a>` styled by hand\n * as a primary button, and its `<button>` wrapping an icon, both disappear into\n * `<Button asChild>`.\n */\n\nexport interface SlotProps {\n  /** Render the consumer's single child element instead of a `button`/`div`. */\n  asChild?: boolean | undefined;\n  /** The element this component renders when `asChild` is not used. */\n  as?: React.ElementType | undefined;\n}\n\nexport interface RenderProps {\n  asChild?: boolean | undefined;\n  as?: React.ElementType | undefined;\n  children?: React.ReactNode;\n  ref?: React.Ref<HTMLElement>;\n  className?: string | undefined;\n}\n\n/**\n * Render either the default element or the consumer's child, forwarding the ref\n * and merging the class names into whichever element actually lands in the DOM.\n */\nexport function renderElement(\n  { asChild, as, className, children, ref, ...rest }: RenderProps & Record<string, unknown>,\n  defaultTag: React.ElementType,\n): React.ReactElement {\n  const Component = (asChild ? Slot.Root : (as ?? defaultTag)) as React.ElementType;\n\n  if (asChild) {\n    return (\n      <Component className={className} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  }\n\n  return (\n    <Component className={className} ref={ref} {...rest}>\n      {children}\n    </Component>\n  );\n}\n\n/**\n * The `data-slot` value a component stamps on its root. Present so that a\n * consumer can target TEA UI internals from CSS or a test without depending on\n * class names, which are an implementation detail.\n */\nexport function dataSlot(...parts: string[]): Record<`data-slot`, string> {\n  return { \"data-slot\": slotName(...parts) };\n}\n\n/**\n * Every interactive TEA UI component exposes its state as data attributes, so\n * state is inspectable from the DOM and assertable in a test — not only visible.\n *\n * This is the attribute vocabulary, in one object, so no component invents its\n * own spelling.\n */\nexport interface StateAttributes {\n  \"data-disabled\"?: true;\n  \"data-loading\"?: true;\n  \"data-invalid\"?: true;\n  \"data-readonly\"?: true;\n  \"data-selected\"?: true;\n  \"data-active\"?: true;\n  \"data-checked\"?: true;\n  \"data-open\"?: true;\n  \"data-empty\"?: true;\n  \"data-orientation\"?: \"horizontal\" | \"vertical\";\n}\n\nexport function stateAttributes(state: {\n  disabled?: boolean | undefined;\n  loading?: boolean | undefined;\n  invalid?: boolean | undefined;\n  readOnly?: boolean | undefined;\n  selected?: boolean | undefined;\n  active?: boolean | undefined;\n  checked?: boolean | undefined;\n  open?: boolean | undefined;\n  empty?: boolean | undefined;\n  orientation?: \"horizontal\" | \"vertical\" | undefined;\n}): StateAttributes {\n  const attrs: StateAttributes = {};\n  if (state.disabled) attrs[\"data-disabled\"] = true;\n  if (state.loading) attrs[\"data-loading\"] = true;\n  if (state.invalid) attrs[\"data-invalid\"] = true;\n  if (state.readOnly) attrs[\"data-readonly\"] = true;\n  if (state.selected) attrs[\"data-selected\"] = true;\n  if (state.active) attrs[\"data-active\"] = true;\n  if (state.checked) attrs[\"data-checked\"] = true;\n  if (state.open) attrs[\"data-open\"] = true;\n  if (state.empty) attrs[\"data-empty\"] = true;\n  if (state.orientation) attrs[\"data-orientation\"] = state.orientation;\n  return attrs;\n}\n\n/**\n * Merge refs from a forwarded ref, a prop-supplied ref and a private one.\n * `privateRef` may be a function that receives the node as well as a ref object,\n * which is how a component observes its own element without a state update.\n */\nexport function withPrivateRef<T>(\n  forwarded: React.Ref<T> | undefined,\n  propRef: React.Ref<T> | undefined,\n  privateRef?: React.Ref<T>,\n): React.RefCallback<T> {\n  return composeRefs(forwarded, propRef, privateRef);\n}\n\nexport { cn };\n"],"mappings":"AA4CM;AA5CN,SAAS,YAAY;AACrB,YAAY,WAAW;AACvB,SAAS,IAAI,QAAQ,gBAAgB;AAErC,SAAS,mBAAmB;AAgCrB,SAAS,cACd,EAAE,SAAS,IAAI,WAAW,UAAU,KAAK,GAAG,KAAK,GACjD,YACoB;AACpB,QAAM,YAAa,UAAU,KAAK,OAAQ,MAAM;AAEhD,MAAI,SAAS;AACX,WACE,oBAAC,aAAU,WAAsB,KAAW,GAAG,MAC5C,UACH;AAAA,EAEJ;AAEA,SACE,oBAAC,aAAU,WAAsB,KAAW,GAAG,MAC5C,UACH;AAEJ;AAOO,SAAS,YAAY,OAA8C;AACxE,SAAO,EAAE,aAAa,SAAS,GAAG,KAAK,EAAE;AAC3C;AAsBO,SAAS,gBAAgB,OAWZ;AAClB,QAAM,QAAyB,CAAC;AAChC,MAAI,MAAM,SAAU,OAAM,eAAe,IAAI;AAC7C,MAAI,MAAM,QAAS,OAAM,cAAc,IAAI;AAC3C,MAAI,MAAM,QAAS,OAAM,cAAc,IAAI;AAC3C,MAAI,MAAM,SAAU,OAAM,eAAe,IAAI;AAC7C,MAAI,MAAM,SAAU,OAAM,eAAe,IAAI;AAC7C,MAAI,MAAM,OAAQ,OAAM,aAAa,IAAI;AACzC,MAAI,MAAM,QAAS,OAAM,cAAc,IAAI;AAC3C,MAAI,MAAM,KAAM,OAAM,WAAW,IAAI;AACrC,MAAI,MAAM,MAAO,OAAM,YAAY,IAAI;AACvC,MAAI,MAAM,YAAa,OAAM,kBAAkB,IAAI,MAAM;AACzD,SAAO;AACT;AAOO,SAAS,eACd,WACA,SACA,YACsB;AACtB,SAAO,YAAY,WAAW,SAAS,UAAU;AACnD;","names":[]}

package/dist/internal/use-controllable-state.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Controlled/uncontrolled state in one place.
+ *
+ * TEA UI components are controlled, uncontrolled, or switch between the two at
+ * runtime without losing state — and the switch must not fire a spurious change
+ * callback, because a consumer's `onChange` writing back to state is the
+ * normal pattern and a spurious call turns it into a render loop.
+ *
+ * The distinction that matters: an *uncontrolled-to-controlled* transition is a
+ * real error and is reported. A *controlled* value that equals the internal one
+ * never notifies.
+ */
+interface UseControllableStateParams<T> {
+    /** The controlled value. `undefined` means "the component owns it". */
+    value?: T | undefined;
+    /** The uncontrolled initial value. Ignored once `value` is provided. */
+    defaultValue?: T | undefined;
+    /** Called on every real change, in both modes. */
+    onChange?: ((next: T) => void) | undefined;
+    /** Name used in the controlled/uncontrolled error message. */
+    name?: string | undefined;
+}
+declare function useControllableState<T>({ value, defaultValue, onChange, name, }: UseControllableStateParams<T>): [T, (next: T | ((prev: T) => T)) => void];
+
+export { type UseControllableStateParams, useControllableState };

package/dist/internal/use-controllable-state.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+function useControllableState({
+  value,
+  defaultValue,
+  onChange,
+  name = "component"
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  const onChangeRef = React.useRef(onChange);
+  React.useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const wasControlled = React.useRef(isControlled);
+  React.useEffect(() => {
+    if (wasControlled.current !== isControlled) {
+      console.warn(
+        `[tea-ui] <${name}> switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Pick one mode and keep it.`
+      );
+      wasControlled.current = isControlled;
+    }
+  }, [isControlled, name]);
+  const setValue = React.useCallback(
+    (next) => {
+      const resolved = typeof next === "function" ? next(current) : next;
+      if (Object.is(resolved, current)) return;
+      if (!isControlled) setUncontrolled(resolved);
+      onChangeRef.current?.(resolved);
+    },
+    [current, isControlled]
+  );
+  return [current, setValue];
+}
+export {
+  useControllableState
+};
+//# sourceMappingURL=use-controllable-state.js.map

package/dist/internal/use-controllable-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/use-controllable-state.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Controlled/uncontrolled state in one place.\n *\n * TEA UI components are controlled, uncontrolled, or switch between the two at\n * runtime without losing state — and the switch must not fire a spurious change\n * callback, because a consumer's `onChange` writing back to state is the\n * normal pattern and a spurious call turns it into a render loop.\n *\n * The distinction that matters: an *uncontrolled-to-controlled* transition is a\n * real error and is reported. A *controlled* value that equals the internal one\n * never notifies.\n */\nexport interface UseControllableStateParams<T> {\n  /** The controlled value. `undefined` means \"the component owns it\". */\n  value?: T | undefined;\n  /** The uncontrolled initial value. Ignored once `value` is provided. */\n  defaultValue?: T | undefined;\n  /** Called on every real change, in both modes. */\n  onChange?: ((next: T) => void) | undefined;\n  /** Name used in the controlled/uncontrolled error message. */\n  name?: string | undefined;\n}\n\nexport function useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n  name = \"component\",\n}: UseControllableStateParams<T>): [T, (next: T | ((prev: T) => T)) => void] {\n  const [uncontrolled, setUncontrolled] = React.useState<T>(defaultValue as T);\n  const isControlled = value !== undefined;\n  const current = (isControlled ? value : uncontrolled) as T;\n\n  // `onChange` is read through a ref so a caller passing an inline arrow does\n  // not invalidate the setter identity and re-render every consumer of it.\n  const onChangeRef = React.useRef(onChange);\n  React.useEffect(() => {\n    onChangeRef.current = onChange;\n  });\n\n  const wasControlled = React.useRef(isControlled);\n  React.useEffect(() => {\n    if (wasControlled.current !== isControlled) {\n      // Not fatal, but it means the consumer's expectation and the component's\n      // state have diverged — usually a missing `value` in a conditional render.\n      console.warn(\n        `[tea-ui] <${name}> switched from ${wasControlled.current ? \"controlled\" : \"uncontrolled\"} to ${\n          isControlled ? \"controlled\" : \"uncontrolled\"\n        }. Pick one mode and keep it.`,\n      );\n      wasControlled.current = isControlled;\n    }\n  }, [isControlled, name]);\n\n  const setValue = React.useCallback(\n    (next: T | ((prev: T) => T)) => {\n      const resolved =\n        typeof next === \"function\" ? (next as (prev: T) => T)(current) : next;\n      if (Object.is(resolved, current)) return;\n      if (!isControlled) setUncontrolled(resolved);\n      onChangeRef.current?.(resolved);\n    },\n    [current, isControlled],\n  );\n\n  return [current, setValue];\n}\n"],"mappings":"AAAA,YAAY,WAAW;AAyBhB,SAAS,qBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAA6E;AAC3E,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAY,YAAiB;AAC3E,QAAM,eAAe,UAAU;AAC/B,QAAM,UAAW,eAAe,QAAQ;AAIxC,QAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,QAAM,UAAU,MAAM;AACpB,gBAAY,UAAU;AAAA,EACxB,CAAC;AAED,QAAM,gBAAgB,MAAM,OAAO,YAAY;AAC/C,QAAM,UAAU,MAAM;AACpB,QAAI,cAAc,YAAY,cAAc;AAG1C,cAAQ;AAAA,QACN,aAAa,IAAI,mBAAmB,cAAc,UAAU,eAAe,cAAc,OACvF,eAAe,eAAe,cAChC;AAAA,MACF;AACA,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,SAA+B;AAC9B,YAAM,WACJ,OAAO,SAAS,aAAc,KAAwB,OAAO,IAAI;AACnE,UAAI,OAAO,GAAG,UAAU,OAAO,EAAG;AAClC,UAAI,CAAC,aAAc,iBAAgB,QAAQ;AAC3C,kBAAY,UAAU,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,SAAS,YAAY;AAAA,EACxB;AAEA,SAAO,CAAC,SAAS,QAAQ;AAC3B;","names":[]}

package/dist/layout/index.d.ts

@@ -0,0 +1,131 @@
+import * as React from 'react';
+
+/**
+ * TEA UI — layout primitives.
+ *
+ * Product-agnostic structure, with no opinions about what a page *is*. Density
+ * is not a prop here: `Stack` and friends read `--tea-gap` and
+ * `--tea-section-gap`, so a compact table inside a comfortable page retunes
+ * itself without either container knowing about the other. That is the whole
+ * reason density is expressed in CSS rather than in props.
+ */
+interface BoxProps extends React.ComponentProps<"div"> {
+    asChild?: boolean | undefined;
+    as?: React.ElementType | undefined;
+}
+/** The escape hatch. A `div` that contributes nothing but structure. */
+declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface StackProps extends React.ComponentProps<"div"> {
+    direction?: "vertical" | "horizontal" | undefined;
+    /**
+     * The gap step. `ui` reads the density variable; `section` uses the larger
+     * one; a Tailwind class is accepted for deliberate one-offs.
+     */
+    gap?: "ui" | "section" | "none" | string | undefined;
+    align?: React.CSSProperties["alignItems"] | undefined;
+    justify?: React.CSSProperties["justifyContent"] | undefined;
+    wrap?: boolean | undefined;
+    children: React.ReactNode;
+}
+declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const HStack: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "direction">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const VStack: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "direction">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface FlexProps extends React.ComponentProps<"div"> {
+    direction?: React.CSSProperties["flexDirection"] | undefined;
+    align?: React.CSSProperties["alignItems"] | undefined;
+    justify?: React.CSSProperties["justifyContent"] | undefined;
+    wrap?: boolean | undefined;
+    grow?: boolean | undefined;
+    shrink?: boolean | undefined;
+    basis?: string | number | undefined;
+    gap?: string | number | undefined;
+    children: React.ReactNode;
+}
+/** Escape-hatch flexbox, for when a Stack's opinion is wrong. */
+declare const Flex: React.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface GridProps extends React.ComponentProps<"div"> {
+    cols?: number | undefined;
+    /**
+     * Auto-fit columns that never fall below `minChildWidth`. This is the
+     * responsive default for card grids, and it is why a TEA card grid needs no
+     * per-breakpoint column counts.
+     */
+    minChildWidth?: string | undefined;
+    gap?: "ui" | "section" | "none" | string | undefined;
+    children: React.ReactNode;
+}
+declare const Grid: React.ForwardRefExoticComponent<Omit<GridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CONTAINER_SIZES: {
+    readonly xs: "max-w-xs";
+    readonly sm: "max-w-sm";
+    readonly md: "max-w-md";
+    readonly lg: "max-w-lg";
+    readonly xl: "max-w-xl";
+    readonly "2xl": "max-w-2xl";
+    readonly "3xl": "max-w-3xl";
+    readonly "4xl": "max-w-4xl";
+    readonly "5xl": "max-w-5xl";
+    readonly "6xl": "max-w-6xl";
+    readonly full: "max-w-none";
+};
+interface ContainerProps extends React.ComponentProps<"div"> {
+    /** The measure. Admin panels are `full`; Public UI prose uses `lg`–`3xl`. */
+    size?: keyof typeof CONTAINER_SIZES | undefined;
+    /** Centre the container. Off for a container inside a grid cell. */
+    center?: boolean | undefined;
+    children: React.ReactNode;
+}
+declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SpacerProps extends React.ComponentProps<"div"> {
+    /** The gap step to insert. */
+    size?: "ui" | "section" | "none" | string | undefined;
+    /** Grow to fill the remaining space instead of a fixed gap. */
+    grow?: boolean | undefined;
+}
+declare const Spacer: React.ForwardRefExoticComponent<Omit<SpacerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface CenterProps extends React.ComponentProps<"div"> {
+    /** Restrict to a full-viewport centring, for empty routes and error pages. */
+    full?: boolean | undefined;
+    children: React.ReactNode;
+}
+declare const Center: React.ForwardRefExoticComponent<Omit<CenterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DividerProps extends Omit<React.ComponentProps<"hr">, "children"> {
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * A label rendered in a gap in the rule. A visible divider that separates
+     * nothing is decoration, and a labelled one is a section boundary worth
+     * announcing.
+     */
+    label?: React.ReactNode | undefined;
+}
+/**
+ * A real `<hr>`. The audit found a divider rendering `role="none"` by default,
+ * which removed it from the accessibility tree entirely — so the structural
+ * boundary a screen-reader user most needs was the one they could not perceive.
+ */
+declare const Divider: React.ForwardRefExoticComponent<Omit<DividerProps, "ref"> & React.RefAttributes<HTMLHRElement>>;
+interface AspectRatioProps extends React.ComponentProps<"div"> {
+    ratio?: number | undefined;
+    children: React.ReactNode;
+}
+/** Reserves space before content arrives, so nothing reflows on load. */
+declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ScrollAreaProps extends React.ComponentProps<"div"> {
+    orientation?: "vertical" | "horizontal" | "both" | undefined;
+    /** How far a wheel or trackpad gesture scrolls per event. */
+    scrollStep?: number | undefined;
+    children: React.ReactNode;
+}
+/**
+ * A styled scroll container.
+ *
+ * This is *not* Radix's `ScrollArea`, on purpose: that primitive hides the
+ * native scrollbar and reinvents a thumb, which costs a full extra layer of
+ * layout and breaks native scroll chaining and momentum on touch. Here the
+ * browser keeps its own scrollbar, and the token stylesheet styles it — with
+ * the standards `scrollbar-color` first, so Firefox is not left on UA defaults
+ * as both source projects were.
+ */
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { AspectRatio, type AspectRatioProps, Box, type BoxProps, CONTAINER_SIZES, Center, type CenterProps, Container, type ContainerProps, Divider, type DividerProps, Flex, type FlexProps, Grid, type GridProps, HStack, ScrollArea, type ScrollAreaProps, Spacer, type SpacerProps, Stack, type StackProps, VStack };

package/dist/layout/index.js

@@ -0,0 +1,212 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cn } from "@tea-ui/utils";
+import { dataSlot } from "../internal/index.js";
+const Box = React.forwardRef(function Box2({ asChild = false, as, className, ...props }, ref) {
+  const Component = asChild ? Slot.Root : as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...dataSlot("box"), ...props });
+});
+const GAP = {
+  ui: "gap-ui",
+  section: "section-gap",
+  none: "gap-0"
+};
+const Stack = React.forwardRef(function Stack2({ direction = "vertical", gap = "ui", align, justify, wrap = false, className, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: { alignItems: align, justifyContent: justify, ...style },
+      className: cn(
+        "flex",
+        direction === "vertical" ? "flex-col" : "flex-row",
+        wrap && "flex-wrap",
+        gap === "ui" || gap === "section" || gap === "none" ? GAP[gap] : gap,
+        className
+      ),
+      ...dataSlot("stack"),
+      ...props,
+      children
+    }
+  );
+});
+const HStack = React.forwardRef(
+  function HStack2(props, ref) {
+    return /* @__PURE__ */ jsx(Stack, { ref, direction: "horizontal", ...props });
+  }
+);
+const VStack = React.forwardRef(
+  function VStack2(props, ref) {
+    return /* @__PURE__ */ jsx(Stack, { ref, direction: "vertical", ...props });
+  }
+);
+const Flex = React.forwardRef(function Flex2({ direction, align, justify, wrap, grow, shrink, basis, gap, className, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: {
+        flexDirection: direction,
+        alignItems: align,
+        justifyContent: justify,
+        flexGrow: grow ? 1 : void 0,
+        flexShrink: shrink ? 1 : void 0,
+        flexBasis: basis,
+        gap,
+        ...style
+      },
+      className: cn("flex", wrap && "flex-wrap", className),
+      ...dataSlot("flex"),
+      ...props,
+      children
+    }
+  );
+});
+const Grid = React.forwardRef(function Grid2({ cols, minChildWidth, gap = "ui", className, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: {
+        gridTemplateColumns: minChildWidth ? `repeat(auto-fit, minmax(min(${minChildWidth}, 100%), 1fr))` : cols ? `repeat(${cols}, minmax(0, 1fr))` : void 0,
+        ...style
+      },
+      className: cn("grid", gap === "ui" || gap === "section" || gap === "none" ? GAP[gap] : gap, className),
+      ...dataSlot("grid"),
+      ...props,
+      children
+    }
+  );
+});
+const CONTAINER_SIZES = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  full: "max-w-none"
+};
+const Container = React.forwardRef(function Container2({ size = "6xl", center = true, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(CONTAINER_SIZES[size], center && "mx-auto", "w-full px-4 md:px-6", className),
+      ...dataSlot("container"),
+      ...props,
+      children
+    }
+  );
+});
+const Spacer = React.forwardRef(function Spacer2({ size = "ui", grow = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn(grow ? "flex-1" : size === "ui" || size === "section" || size === "none" ? GAP[size] : size, className),
+      ...dataSlot("spacer"),
+      ...props
+    }
+  );
+});
+const Center = React.forwardRef(function Center2({ full = false, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center justify-center gap-3 text-center", full && "min-h-[60dvh]", className),
+      ...dataSlot("center"),
+      ...props,
+      children
+    }
+  );
+});
+const Divider = React.forwardRef(function Divider2({ orientation = "horizontal", label, className, ...props }, ref) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: cn("h-full w-px bg-line", className),
+        ...dataSlot("divider"),
+        ...props
+      }
+    );
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), ...dataSlot("divider", "labelled"), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-line" }),
+      /* @__PURE__ */ jsx("span", { className: "text-label font-medium uppercase tracking-widest text-fg-muted", children: label }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-line" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ref,
+      className: cn("h-px w-full border-0 bg-line", className),
+      ...dataSlot("divider"),
+      ...props
+    }
+  );
+});
+const AspectRatio = React.forwardRef(function AspectRatio2({ ratio = 16 / 9, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: { aspectRatio: String(ratio) },
+      className: cn("w-full overflow-hidden", className),
+      ...dataSlot("aspect-ratio"),
+      ...props,
+      children
+    }
+  );
+});
+const ScrollArea = React.forwardRef(function ScrollArea2({ orientation = "vertical", scrollStep, className, children, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation,
+      onWheel: scrollStep ? (event) => {
+        const node = event.currentTarget;
+        if (orientation === "vertical") node.scrollTop += event.deltaY * scrollStep;
+        else if (orientation === "horizontal") node.scrollLeft += event.deltaY * scrollStep;
+      } : void 0,
+      style: {
+        overflow: orientation === "both" ? "auto" : orientation === "horizontal" ? "auto hidden" : "hidden auto",
+        ...style
+      },
+      className: cn("min-h-0", className),
+      ...dataSlot("scroll-area"),
+      ...props,
+      children
+    }
+  );
+});
+export {
+  AspectRatio,
+  Box,
+  CONTAINER_SIZES,
+  Center,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  HStack,
+  ScrollArea,
+  Spacer,
+  Stack,
+  VStack
+};
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/layout/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot } from \"../internal\";\n\n/**\n * TEA UI — layout primitives.\n *\n * Product-agnostic structure, with no opinions about what a page *is*. Density\n * is not a prop here: `Stack` and friends read `--tea-gap` and\n * `--tea-section-gap`, so a compact table inside a comfortable page retunes\n * itself without either container knowing about the other. That is the whole\n * reason density is expressed in CSS rather than in props.\n */\n\nexport interface BoxProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean | undefined;\n  as?: React.ElementType | undefined;\n}\n\n/** The escape hatch. A `div` that contributes nothing but structure. */\nexport const Box = React.forwardRef<HTMLDivElement, BoxProps>(function Box(\n  { asChild = false, as, className, ...props },\n  ref,\n) {\n  const Component = (asChild ? Slot.Root : (as ?? \"div\")) as React.ElementType;\n  return <Component ref={ref} className={cn(className)} {...dataSlot(\"box\")} {...props} />;\n});\n\nexport interface StackProps extends React.ComponentProps<\"div\"> {\n  direction?: \"vertical\" | \"horizontal\" | undefined;\n  /**\n   * The gap step. `ui` reads the density variable; `section` uses the larger\n   * one; a Tailwind class is accepted for deliberate one-offs.\n   */\n  gap?: \"ui\" | \"section\" | \"none\" | string | undefined;\n  align?: React.CSSProperties[\"alignItems\"] | undefined;\n  justify?: React.CSSProperties[\"justifyContent\"] | undefined;\n  wrap?: boolean | undefined;\n  children: React.ReactNode;\n}\n\nconst GAP: Record<\"ui\" | \"section\" | \"none\", string> = {\n  ui: \"gap-ui\",\n  section: \"section-gap\",\n  none: \"gap-0\",\n};\n\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(function Stack(\n  { direction = \"vertical\", gap = \"ui\", align, justify, wrap = false, className, style, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      style={{ alignItems: align, justifyContent: justify, ...style }}\n      className={cn(\n        \"flex\",\n        direction === \"vertical\" ? \"flex-col\" : \"flex-row\",\n        wrap && \"flex-wrap\",\n        gap === \"ui\" || gap === \"section\" || gap === \"none\" ? GAP[gap] : gap,\n        className,\n      )}\n      {...dataSlot(\"stack\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const HStack = React.forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>(\n  function HStack(props, ref) {\n    return <Stack ref={ref} direction=\"horizontal\" {...props} />;\n  },\n);\n\nexport const VStack = React.forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>(\n  function VStack(props, ref) {\n    return <Stack ref={ref} direction=\"vertical\" {...props} />;\n  },\n);\n\nexport interface FlexProps extends React.ComponentProps<\"div\"> {\n  direction?: React.CSSProperties[\"flexDirection\"] | undefined;\n  align?: React.CSSProperties[\"alignItems\"] | undefined;\n  justify?: React.CSSProperties[\"justifyContent\"] | undefined;\n  wrap?: boolean | undefined;\n  grow?: boolean | undefined;\n  shrink?: boolean | undefined;\n  basis?: string | number | undefined;\n  gap?: string | number | undefined;\n  children: React.ReactNode;\n}\n\n/** Escape-hatch flexbox, for when a Stack's opinion is wrong. */\nexport const Flex = React.forwardRef<HTMLDivElement, FlexProps>(function Flex(\n  { direction, align, justify, wrap, grow, shrink, basis, gap, className, style, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      style={{\n        flexDirection: direction,\n        alignItems: align,\n        justifyContent: justify,\n        flexGrow: grow ? 1 : undefined,\n        flexShrink: shrink ? 1 : undefined,\n        flexBasis: basis,\n        gap,\n        ...style,\n      }}\n      className={cn(\"flex\", wrap && \"flex-wrap\", className)}\n      {...dataSlot(\"flex\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport interface GridProps extends React.ComponentProps<\"div\"> {\n  cols?: number | undefined;\n  /**\n   * Auto-fit columns that never fall below `minChildWidth`. This is the\n   * responsive default for card grids, and it is why a TEA card grid needs no\n   * per-breakpoint column counts.\n   */\n  minChildWidth?: string | undefined;\n  gap?: \"ui\" | \"section\" | \"none\" | string | undefined;\n  children: React.ReactNode;\n}\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(function Grid(\n  { cols, minChildWidth, gap = \"ui\", className, style, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      style={{\n        gridTemplateColumns: minChildWidth\n          ? `repeat(auto-fit, minmax(min(${minChildWidth}, 100%), 1fr))`\n          : cols\n            ? `repeat(${cols}, minmax(0, 1fr))`\n            : undefined,\n        ...style,\n      }}\n      className={cn(\"grid\", gap === \"ui\" || gap === \"section\" || gap === \"none\" ? GAP[gap] : gap, className)}\n      {...dataSlot(\"grid\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const CONTAINER_SIZES = {\n  xs: \"max-w-xs\",\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\n  \"2xl\": \"max-w-2xl\",\n  \"3xl\": \"max-w-3xl\",\n  \"4xl\": \"max-w-4xl\",\n  \"5xl\": \"max-w-5xl\",\n  \"6xl\": \"max-w-6xl\",\n  full: \"max-w-none\",\n} as const;\n\nexport interface ContainerProps extends React.ComponentProps<\"div\"> {\n  /** The measure. Admin panels are `full`; Public UI prose uses `lg`–`3xl`. */\n  size?: keyof typeof CONTAINER_SIZES | undefined;\n  /** Centre the container. Off for a container inside a grid cell. */\n  center?: boolean | undefined;\n  children: React.ReactNode;\n}\n\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  { size = \"6xl\", center = true, className, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(CONTAINER_SIZES[size], center && \"mx-auto\", \"w-full px-4 md:px-6\", className)}\n      {...dataSlot(\"container\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport interface SpacerProps extends React.ComponentProps<\"div\"> {\n  /** The gap step to insert. */\n  size?: \"ui\" | \"section\" | \"none\" | string | undefined;\n  /** Grow to fill the remaining space instead of a fixed gap. */\n  grow?: boolean | undefined;\n}\n\nexport const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spacer(\n  { size = \"ui\", grow = false, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(grow ? \"flex-1\" : size === \"ui\" || size === \"section\" || size === \"none\" ? GAP[size] : size, className)}\n      {...dataSlot(\"spacer\")}\n      {...props}\n    />\n  );\n});\n\nexport interface CenterProps extends React.ComponentProps<\"div\"> {\n  /** Restrict to a full-viewport centring, for empty routes and error pages. */\n  full?: boolean | undefined;\n  children: React.ReactNode;\n}\n\nexport const Center = React.forwardRef<HTMLDivElement, CenterProps>(function Center(\n  { full = false, className, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-col items-center justify-center gap-3 text-center\", full && \"min-h-[60dvh]\", className)}\n      {...dataSlot(\"center\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport interface DividerProps extends Omit<React.ComponentProps<\"hr\">, \"children\"> {\n  orientation?: \"horizontal\" | \"vertical\" | undefined;\n  /**\n   * A label rendered in a gap in the rule. A visible divider that separates\n   * nothing is decoration, and a labelled one is a section boundary worth\n   * announcing.\n   */\n  label?: React.ReactNode | undefined;\n}\n\n/**\n * A real `<hr>`. The audit found a divider rendering `role=\"none\"` by default,\n * which removed it from the accessibility tree entirely — so the structural\n * boundary a screen-reader user most needs was the one they could not perceive.\n */\nexport const Divider = React.forwardRef<HTMLHRElement, DividerProps>(function Divider(\n  { orientation = \"horizontal\", label, className, ...props },\n  ref,\n) {\n  if (orientation === \"vertical\") {\n    return (\n      <div\n        ref={ref as unknown as React.Ref<HTMLDivElement>}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\"h-full w-px bg-line\", className)}\n        {...dataSlot(\"divider\")}\n        {...(props as React.ComponentProps<\"div\">)}\n      />\n    );\n  }\n\n  if (label) {\n    return (\n      <div className={cn(\"flex items-center gap-3\", className)} {...dataSlot(\"divider\", \"labelled\")}>\n        <span aria-hidden=\"true\" className=\"h-px flex-1 bg-line\" />\n        <span className=\"text-label font-medium uppercase tracking-widest text-fg-muted\">{label}</span>\n        <span aria-hidden=\"true\" className=\"h-px flex-1 bg-line\" />\n      </div>\n    );\n  }\n\n  return (\n    <hr\n      ref={ref}\n      className={cn(\"h-px w-full border-0 bg-line\", className)}\n      {...dataSlot(\"divider\")}\n      {...props}\n    />\n  );\n});\n\nexport interface AspectRatioProps extends React.ComponentProps<\"div\"> {\n  ratio?: number | undefined;\n  children: React.ReactNode;\n}\n\n/** Reserves space before content arrives, so nothing reflows on load. */\nexport const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(function AspectRatio(\n  { ratio = 16 / 9, className, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      style={{ aspectRatio: String(ratio) }}\n      className={cn(\"w-full overflow-hidden\", className)}\n      {...dataSlot(\"aspect-ratio\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport interface ScrollAreaProps extends React.ComponentProps<\"div\"> {\n  orientation?: \"vertical\" | \"horizontal\" | \"both\" | undefined;\n  /** How far a wheel or trackpad gesture scrolls per event. */\n  scrollStep?: number | undefined;\n  children: React.ReactNode;\n}\n\n/**\n * A styled scroll container.\n *\n * This is *not* Radix's `ScrollArea`, on purpose: that primitive hides the\n * native scrollbar and reinvents a thumb, which costs a full extra layer of\n * layout and breaks native scroll chaining and momentum on touch. Here the\n * browser keeps its own scrollbar, and the token stylesheet styles it — with\n * the standards `scrollbar-color` first, so Firefox is not left on UA defaults\n * as both source projects were.\n */\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  { orientation = \"vertical\", scrollStep, className, children, style, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-orientation={orientation}\n      onWheel={\n        scrollStep\n          ? (event) => {\n              const node = event.currentTarget;\n              if (orientation === \"vertical\") node.scrollTop += event.deltaY * scrollStep;\n              else if (orientation === \"horizontal\") node.scrollLeft += event.deltaY * scrollStep;\n            }\n          : undefined\n      }\n      style={{\n        overflow: orientation === \"both\" ? \"auto\" : orientation === \"horizontal\" ? \"auto hidden\" : \"hidden auto\",\n        ...style,\n      }}\n      className={cn(\"min-h-0\", className)}\n      {...dataSlot(\"scroll-area\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":"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","names":["Box","Stack","HStack","VStack","Flex","Grid","Container","Spacer","Center","Divider","AspectRatio","ScrollArea"]}