@tenphi/tasty 2.0.3 → 2.1.0

package/dist/index-ZRxZWzlj.d.ts

@@ -0,0 +1,1602 @@
+import { Dt as StyleInjectorConfig, I as StyleValue, L as StyleValueStateMap, b as Styles, bt as KeyframesResult, ct as CacheMetrics, dt as FontFaceDescriptors, ft as FontFaceInput, gt as InjectResult, ht as GlobalInjectResult, it as StyleDetails, lt as CounterStyleDescriptors, mt as GCOptions, n as StyleResult, st as CSSProperties$1, x as StylesInterface, xt as KeyframesSteps } from "./index-dUtwpOux.js";
+import { b as StyleInjector, h as TastyPluginFactory } from "./config-vuCRkBWX.js";
+import { t as ServerStyleCollector } from "./collector-LuU1vZ68.js";
+import * as _$react from "react";
+import { AllHTMLAttributes, CSSProperties, ComponentType, ElementType, ForwardRefExoticComponent, JSX, PropsWithoutRef, RefAttributes } from "react";
+
+//#region src/plugins/okhsl-plugin.d.ts
+/**
+ * The okhsl function handler for tasty parser.
+ * Receives parsed style groups and returns an RGB color string.
+ */
+declare const okhslFunc: (groups: StyleDetails[]) => string;
+/**
+ * OKHSL Plugin for Tasty.
+ *
+ * Adds support for the `okhsl()` color function in tasty styles.
+ *
+ * @example
+ * ```ts
+ * import { configure } from '@tenphi/tasty';
+ * import { okhslPlugin } from '@tenphi/tasty';
+ *
+ * configure({
+ *   plugins: [okhslPlugin()],
+ * });
+ *
+ * // Now you can use okhsl in styles:
+ * const Box = tasty({
+ *   styles: {
+ *     fill: 'okhsl(240 50% 50%)',
+ *   },
+ * });
+ * ```
+ */
+declare const okhslPlugin: TastyPluginFactory;
+//#endregion
+//#region src/chunks/definitions.d.ts
+declare const CHUNK_NAMES: {
+  /** Special chunk for styles that cannot be split */readonly COMBINED: "combined";
+  readonly SUBCOMPONENTS: "subcomponents";
+  readonly APPEARANCE: "appearance";
+  readonly FONT: "font";
+  readonly DIMENSION: "dimension";
+  readonly DISPLAY: "display";
+  readonly LAYOUT: "layout";
+  readonly POSITION: "position";
+  readonly MISC: "misc";
+};
+type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];
+/**
+ * Pre-computed map for O(1) style-to-chunk lookup.
+ * Built once at module load time.
+ */
+declare const STYLE_TO_CHUNK: Map<string, ChunkName>;
+interface ChunkInfo$1 {
+  /** Name of the chunk */
+  name: ChunkName | string;
+  /** Style keys belonging to this chunk */
+  styleKeys: string[];
+}
+/**
+ * Categorize style keys into chunks.
+ *
+ * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless
+ * of the order of keys in the input styles object.
+ *
+ * @param styles - The styles object to categorize
+ * @returns Map of chunk name to array of style keys in that chunk (in priority order)
+ */
+declare function categorizeStyleKeys(styles: Record<string, unknown>): Map<string, string[]>;
+//#endregion
+//#region src/styles/list.d.ts
+declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition"];
+declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin"];
+declare const BLOCK_INNER_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
+declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "outline"];
+declare const BLOCK_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline"];
+declare const COLOR_STYLES: readonly ["color", "fill", "fade", "image"];
+declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
+declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
+declare const FLOW_STYLES: readonly ["flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
+declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+//#endregion
+//#region src/types.d.ts
+interface GlobalStyledProps {
+  breakpoints?: number[];
+}
+/**
+ * Extensible interface for theme names.
+ * Augment this interface to register project-specific theme names for autocomplete.
+ *
+ * @example
+ * ```typescript
+ * declare module '@tenphi/tasty' {
+ *   interface TastyThemeNames {
+ *     danger: true;
+ *     success: true;
+ *   }
+ * }
+ * ```
+ */
+interface TastyThemeNames {}
+type ThemeNameKey = Extract<keyof TastyThemeNames, string>;
+type ThemeName = [ThemeNameKey] extends [never] ? string : ThemeNameKey;
+/** Allowed mod value types */
+type ModValue = boolean | string | number | undefined | null;
+/**
+ * Type for element modifiers (mods prop).
+ * Can be used as a generic to define known modifiers with autocomplete:
+ * @example
+ * type ButtonMods = Mods<{
+ *   loading?: boolean;
+ *   selected?: boolean;
+ * }>;
+ */
+type Mods<T extends Record<string, ModValue> = Record<string, ModValue>> = T & Record<string, ModValue>;
+/**
+ * Token value: string or number (processed), boolean for special handling, undefined/null (skipped).
+ * For color tokens (#name), boolean `true` is converted to `transparent`.
+ * For non-color tokens ($name), boolean `true` results in an empty string value.
+ * Boolean `false` results in no CSS output (token is skipped).
+ */
+type TokenValue = string | number | boolean | undefined | null;
+/**
+ * Tokens definition for inline CSS custom properties.
+ * - `$name` keys become `--name` CSS properties
+ * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` CSS properties
+ */
+type Tokens = Record<`$${string}` | `#${string}`, TokenValue>;
+type Caps = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+interface BasePropsWithoutChildren<K extends TagName = TagName> extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
+  /** The HTML tag or React component to render as */
+  as?: K | ComponentType<any>;
+  /** QA ID for e2e testing. An alias for `data-qa` attribute. */
+  qa?: string;
+  /** QA value for e2e testing. An alias for `data-qaval` attribute. */
+  qaVal?: string | number;
+  /** Inner element name */
+  element?: `${Caps}${string}`;
+  /** The style map */
+  styles?: Styles;
+  /** The list of responsive points in pixels */
+  breakpoints?: number[];
+  /** Whether the element has the block layout outside */
+  block?: boolean;
+  /** Whether the element has the inline layout outside */
+  inline?: boolean;
+  /** The list of element modifiers **/
+  mods?: Mods;
+  /** Whether the element is hidden (`hidden` attribute is set) */
+  isHidden?: boolean;
+  /** Whether the element is disabled (`disabled` attribute is set) */
+  isDisabled?: boolean;
+  /** Plain css for the element */
+  css?: string;
+  /** The CSS style map */
+  style?: CSSProperties$1 | (CSSProperties$1 & Record<string, string | number | null | undefined>);
+  /** User-defined theme for the element. Mapped to `data-theme` attribute. Augment `TastyThemeNames` to register project-specific themes for autocomplete. */
+  theme?: ThemeName | (string & {});
+  /** CSS custom property tokens rendered as inline styles */
+  tokens?: Tokens;
+}
+interface BaseProps<K extends TagName = TagName> extends BasePropsWithoutChildren<K>, Pick<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'children'> {}
+interface AllBaseProps<K extends TagName = TagName> extends BaseProps<K>, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style' | 'disabled' | 'hidden' | 'css' | 'content' | 'translate' | 'as' | 'form' | 'bgcolor' | 'background' | 'align' | 'border' | 'color' | 'height' | 'size' | 'width' | 'prefix'> {}
+type BaseStyleProps = Pick<Styles, (typeof BASE_STYLES)[number]>;
+type PositionStyleProps = Pick<Styles, (typeof POSITION_STYLES)[number]>;
+type BlockStyleProps = Pick<Styles, (typeof BLOCK_STYLES)[number]>;
+type BlockInnerStyleProps = Pick<Styles, (typeof BLOCK_INNER_STYLES)[number]>;
+type BlockOuterStyleProps = Pick<Styles, (typeof BLOCK_OUTER_STYLES)[number]>;
+type ColorStyleProps = Pick<Styles, (typeof COLOR_STYLES)[number]>;
+type TextStyleProps = Pick<Styles, (typeof TEXT_STYLES)[number]>;
+type DimensionStyleProps = Pick<Styles, (typeof DIMENSION_STYLES)[number]>;
+type FlowStyleProps = Pick<Styles, (typeof FLOW_STYLES)[number]>;
+type ContainerStyleProps = Pick<Styles, (typeof CONTAINER_STYLES)[number]>;
+type OuterStyleProps = Pick<Styles, (typeof OUTER_STYLES)[number]>;
+type InnerStyleProps = Pick<Styles, (typeof INNER_STYLES)[number]>;
+interface ShortGridStyles {
+  template?: Styles['gridTemplate'];
+  columns?: Styles['gridColumns'];
+  rows?: Styles['gridRows'];
+  areas?: Styles['gridAreas'];
+}
+type Props = Record<string, any>;
+type TagName = keyof HTMLElementTagNameMap;
+/**
+ * Configuration type for tasty.config.ts files.
+ * Used by the Tasty VSCode extension for validation and autocomplete.
+ *
+ * @example
+ * ```typescript
+ * import type { TastyExtensionConfig } from '@tenphi/tasty';
+ *
+ * const config: TastyExtensionConfig = {
+ *   tokens: ['#primary', '#danger', '$spacing'],
+ *   units: ['x', 'r', 'bw'],
+ *   states: ['@mobile', '@tablet', '@dark'],
+ *   presets: ['h1', 'h2', 't1', 't2'],
+ * };
+ *
+ * export default config;
+ * ```
+ */
+interface TastyExtensionConfig {
+  /**
+   * Extend another config file. Path is relative to this config file.
+   * The extended config is merged first, then this config's values are added.
+   * @example '../tasty.config.ts'
+   */
+  extends?: string;
+  /**
+   * Valid token names for validation and autocomplete.
+   * Use # prefix for colors, $ prefix for custom properties.
+   * Set to `false` to disable token validation (overrides parent).
+   * @example ['#primary', '#danger', '$spacing', '$gap']
+   */
+  tokens?: false | string[];
+  /**
+   * Valid custom unit names.
+   * Set to `false` to disable unit validation (overrides parent).
+   * @example ['x', 'r', 'bw', 'cols']
+   */
+  units?: false | string[];
+  /**
+   * Valid custom function names.
+   * Set to `false` to disable function validation (overrides parent).
+   * @example ['clamp', 'double']
+   */
+  funcs?: false | string[];
+  /**
+   * State alias names for autocomplete.
+   * Must start with @ prefix.
+   * @example ['@mobile', '@tablet', '@dark']
+   */
+  states?: string[];
+  /**
+   * Valid preset names for the `preset` style property.
+   * Tasty has no built-in presets - they are project-specific.
+   * @example ['h1', 'h2', 'h3', 't1', 't2', 't3', 'tag']
+   */
+  presets?: string[];
+  /**
+   * Custom style property names added via configure({ handlers }).
+   * Suppresses "unknown property" warnings for these names.
+   * @example ['myGradient', 'customLayout', 'brandBorder']
+   */
+  styles?: string[];
+  /**
+   * Descriptions for presets, shown on hover in the extension.
+   * Maps preset names to human-readable descriptions.
+   * @example { h1: 'Heading 1 (36px/44px, semibold)', t1: 'Text large (18px/24px)' }
+   */
+  presetDescriptions?: Record<string, string>;
+  /**
+   * Descriptions for state aliases, shown on hover in the extension.
+   * Maps state names to human-readable descriptions.
+   * @example { '@mobile': 'Mobile viewport (width < 768px)' }
+   */
+  stateDescriptions?: Record<string, string>;
+}
+//#endregion
+//#region src/tasty.d.ts
+type StyleList = readonly (keyof { [key in keyof StylesInterface]: StylesInterface[key] })[];
+/** Type descriptor for a single mod prop: a JS constructor or an enum array. */
+type ModPropDef = BooleanConstructor | StringConstructor | NumberConstructor | readonly string[];
+/** Array form: list of mod key names (types default to ModValue). */
+type ModPropsList = readonly string[];
+/** Object form: map of mod key names to type descriptors. */
+type ModPropsMap = Readonly<Record<string, ModPropDef>>;
+/** Either array or object form accepted by `modProps` option. */
+type ModPropsInput = ModPropsList | ModPropsMap;
+/** Resolve a single ModPropDef to its TypeScript type. */
+type ResolveModPropDef<T> = T extends BooleanConstructor ? boolean : T extends StringConstructor ? string : T extends NumberConstructor ? number : T extends readonly (infer U)[] ? U : ModValue;
+/** Resolve an entire `modProps` definition to the component prop types it adds. */
+type ResolveModProps<M extends ModPropsInput> = M extends readonly (infer K)[] ? Partial<Record<K & string, ModValue>> : M extends Record<string, ModPropDef> ? { [key in keyof M & string]?: ResolveModPropDef<M[key]> } : {};
+/** A token key with `$` or `#` prefix. */
+type TokenPropKey = `$${string}` | `#${string}`;
+/** Array form: list of prop names. Names ending in `Color` map to `#` color tokens. */
+type TokenPropsList = readonly string[];
+/** Object form: prop name -> token key with explicit `$`/`#` prefix. */
+type TokenPropsMap = Readonly<Record<string, TokenPropKey>>;
+/** Either array or object form accepted by `tokenProps` option. */
+type TokenPropsInput = TokenPropsList | TokenPropsMap;
+/** Resolve a `tokenProps` definition to the component prop types it adds. */
+type ResolveTokenProps<TP extends TokenPropsInput> = TP extends readonly (infer K)[] ? Partial<Record<K & string, TokenValue>> : TP extends Record<string, TokenPropKey> ? Partial<Record<keyof TP & string, TokenValue>> : {};
+type PropsWithStyles = {
+  styles?: Styles;
+} & Omit<Props, 'styles'>;
+type VariantMap = Record<string, Styles>;
+interface WithVariant<V extends VariantMap> {
+  variant?: keyof V;
+}
+/**
+ * Definition for a sub-element. Can be either:
+ * - A tag name string (e.g., 'div', 'span')
+ * - An object with configuration options
+ */
+type SubElementDefinition<Tag extends keyof JSX.IntrinsicElements = 'div'> = Tag | {
+  as?: Tag;
+  qa?: string;
+  qaVal?: string | number;
+};
+/**
+ * Map of sub-element definitions.
+ * Keys become the sub-component names (e.g., { Icon: 'span' } -> Component.Icon)
+ */
+type ElementsDefinition = Record<string, SubElementDefinition<keyof JSX.IntrinsicElements>>;
+/**
+ * Resolves the tag from a SubElementDefinition
+ */
+type ResolveElementTag<T extends SubElementDefinition<any>> = T extends string ? T : T extends {
+  as?: infer Tag;
+} ? Tag extends keyof JSX.IntrinsicElements ? Tag : 'div' : 'div';
+/**
+ * Props for sub-element components.
+ * Combines HTML attributes with tasty-specific props (qa, qaVal, mods, tokens, isDisabled, etc.)
+ */
+type SubElementProps<Tag extends keyof JSX.IntrinsicElements = 'div'> = Omit<JSX.IntrinsicElements[Tag], 'ref' | 'color' | 'content' | 'translate'> & {
+  qa?: string;
+  qaVal?: string | number;
+  mods?: Mods;
+  tokens?: Tokens;
+  isDisabled?: boolean;
+  isHidden?: boolean;
+  isChecked?: boolean;
+};
+/**
+ * Generates the sub-element component types from an ElementsDefinition
+ */
+type SubElementComponents<E extends ElementsDefinition> = { [K in keyof E]: ForwardRefExoticComponent<PropsWithoutRef<SubElementProps<ResolveElementTag<E[K]>>> & RefAttributes<ResolveElementTag<E[K]> extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[ResolveElementTag<E[K]>] : Element$1>> };
+/**
+ * Base type containing common properties shared between TastyProps and TastyElementOptions.
+ * Separated to avoid code duplication while allowing different type constraints.
+ */
+type TastyBaseProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = {
+  /** Default styles of the element. */styles?: Styles; /** The list of styles that can be provided by props */
+  styleProps?: K; /** Modifier keys exposed as top-level component props (array or typed object form). */
+  modProps?: M; /** Token keys exposed as top-level component props (array or typed object form). */
+  tokenProps?: TP;
+  element?: BaseProps['element'];
+  variants?: V; /** Default tokens for inline CSS custom properties */
+  tokens?: Tokens; /** Sub-element definitions for compound components */
+  elements?: E;
+} & Pick<BaseProps, 'qa' | 'qaVal'> & WithVariant<V>;
+type TastyProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, DefaultProps = Props, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
+  /** The tag name of the element or a React component. */as?: string | ComponentType<any>;
+} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'modProps' | 'tokenProps' | 'tokens'>>;
+/**
+ * TastyElementOptions is used for the element-creation overload of tasty().
+ * It includes a Tag generic that allows TypeScript to infer the correct
+ * HTML element type from the `as` prop.
+ *
+ * Note: Uses a separate index signature with `unknown` instead of inheriting
+ * from Props (which has `any`) to ensure strict type checking for styles.
+ */
+type TastyElementOptions<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
+  /** The tag name of the element or a React component. */as?: Tag | ComponentType<any>;
+} & Record<string, unknown>;
+type AllBasePropsWithMods<K extends StyleList, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = AllBaseProps & { [key in K[number]]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> } & BaseStyleProps & ResolveModProps<M> & ResolveTokenProps<TP>;
+/**
+ * Keys from BasePropsWithoutChildren that should be omitted from HTML attributes.
+ * This excludes event handlers so they can be properly typed from JSX.IntrinsicElements.
+ */
+type TastySpecificKeys = 'as' | 'qa' | 'qaVal' | 'element' | 'styles' | 'breakpoints' | 'block' | 'inline' | 'mods' | 'isHidden' | 'isDisabled' | 'css' | 'style' | 'theme' | 'tokens' | 'ref' | 'color';
+/** Extract prop key names from a ModPropsInput (array elements or object keys). */
+type ModPropsKeys<M extends ModPropsInput> = M extends readonly (infer K)[] ? K & string : keyof M & string;
+/** Extract prop key names from a TokenPropsInput (array elements or object keys). */
+type TokenPropsKeys<TP extends TokenPropsInput> = TP extends readonly (infer K)[] ? K & string : keyof TP & string;
+/**
+ * Props type for tasty elements that combines:
+ * - AllBasePropsWithMods for style props with strict tokens type
+ * - HTML attributes for flexibility (properly typed based on tag)
+ * - Variant support
+ *
+ * AllBasePropsWithMods carries generic AllHTMLAttributes which can conflict
+ * with tag-specific types from JSX.IntrinsicElements (e.g. `src` is `string`
+ * in AllHTMLAttributes but `string | Blob` in ImgHTMLAttributes). To avoid
+ * intersection-narrowing, we Omit tag-specific keys from AllBasePropsWithMods
+ * (keeping TastySpecificKeys, style props, mod props, and token props) and let
+ * JSX.IntrinsicElements supply the authoritative HTML attribute types.
+ */
+type TastyElementProps<K extends StyleList, V extends VariantMap, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = Omit<AllBasePropsWithMods<K, M, TP>, Exclude<keyof JSX.IntrinsicElements[Tag], TastySpecificKeys | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>>> & WithVariant<V> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof JSX.IntrinsicElements[Tag]> & JSX.IntrinsicElements[Tag], TastySpecificKeys | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>>;
+type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : { [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key] } & { [key in keyof Omit<Props, keyof DefaultProps>]: Props[key] };
+declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]>(options: TastyElementOptions<K, V, E, Tag, M, TP>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag, M, TP>> & RefAttributes<unknown>> & SubElementComponents<E>;
+declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Record<string, never>, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
+declare const Element$1: ForwardRefExoticComponent<Omit<AllBasePropsWithMods<StyleList, readonly never[], readonly never[]>, "slot" | "title" | "children" | "className" | "role" | "id" | "hidden" | "prefix" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "key"> & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof _$react.ClassAttributes<HTMLDivElement> | keyof _$react.HTMLAttributes<HTMLDivElement>> & _$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement>, "style" | "clipPath" | "filter" | "image" | "marker" | "mask" | "fill" | "display" | "font" | "preset" | "hide" | "whiteSpace" | "opacity" | "transition" | "gridArea" | "order" | "gridColumn" | "gridRow" | "placeSelf" | "alignSelf" | "justifySelf" | "zIndex" | "margin" | "inset" | "position" | "scrollMargin" | "padding" | "paddingInline" | "paddingBlock" | "overflow" | "scrollbar" | "textAlign" | "border" | "radius" | "shadow" | "outline" | "color" | "fade" | "textTransform" | "fontWeight" | "fontStyle" | "width" | "height" | "flexBasis" | "flexGrow" | "flexShrink" | "flex" | "flow" | "place" | "placeItems" | "placeContent" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "align" | "justify" | "gap" | "columnGap" | "rowGap" | "gridColumns" | "gridRows" | "gridTemplate" | "gridAreas" | "top" | "right" | "bottom" | "left" | "mods" | "css" | "content" | "translate" | "as" | "background" | "all" | "page" | "qa" | "qaVal" | "scrollMarginTop" | "scrollMarginRight" | "scrollMarginBottom" | "scrollMarginLeft" | "scrollMarginBlock" | "scrollMarginInline" | "accentColor" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "flexDirection" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zoom" | "animation" | "animationRange" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "grid" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "maskBorder" | "motion" | "offset" | "overscrollBehavior" | "positionTry" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "svgFill" | "boldFontWeight" | "@keyframes" | "@properties" | "@fontFace" | "@counterStyle" | "recipe" | "element" | "styles" | "breakpoints" | "block" | "inline" | "isHidden" | "isDisabled" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
+//#endregion
+//#region src/hooks/useStyles.d.ts
+/**
+ * Tasty styles object to generate CSS classes for.
+ * Can be undefined or empty object for no styles.
+ */
+type UseStylesOptions = Styles | undefined;
+interface UseStylesResult {
+  /**
+   * Generated className(s) to apply to the element.
+   * Can be empty string if no styles are provided.
+   * With chunking enabled, may contain multiple space-separated class names.
+   */
+  className: string;
+}
+/**
+ * Hook to generate CSS classes from Tasty styles.
+ * Thin wrapper around `computeStyles()` that adds React context-based
+ * SSR collector discovery for backward compatibility with TastyRegistry.
+ *
+ * For hook-free usage (e.g. in server components), use `computeStyles()` directly.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { className } = useStyles({
+ *     padding: '2x',
+ *     fill: '#purple',
+ *     radius: '1r',
+ *   });
+ *
+ *   return <div className={className}>Styled content</div>;
+ * }
+ * ```
+ */
+declare function useStyles(styles: UseStylesOptions, options?: {
+  root?: Document | ShadowRoot;
+}): UseStylesResult;
+//#endregion
+//#region src/hooks/useGlobalStyles.d.ts
+interface UseGlobalStylesOptions {
+  /**
+   * Stable identifier for update tracking (client-only). When provided,
+   * changing the styles will dispose the previous injection and inject the
+   * new one. Without an id, the selector is used as the slot key.
+   * In RSC mode, renders are single-pass so update tracking does not apply.
+   */
+  id?: string;
+  /** Shadow root or document to inject into (client only). */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject global styles for a given selector.
+ * Useful for styling elements by selector without generating classNames.
+ *
+ * SSR-aware: when a ServerStyleCollector is available, CSS is collected
+ * during the render phase instead of being injected into the DOM.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * Injected styles are permanent — they are not cleaned up on component unmount.
+ * Use the `id` option for update tracking when styles change over the
+ * component lifecycle.
+ *
+ * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
+ * @param styles - Tasty styles object
+ * @param options - Optional settings including `id` for update tracking
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   useGlobalStyles('.card', {
+ *     padding: '2x',
+ *     radius: '1r',
+ *     fill: '#white',
+ *   });
+ *
+ *   return <div className="card">Content</div>;
+ * }
+ * ```
+ */
+declare function useGlobalStyles(selector: string, styles?: Styles, options?: UseGlobalStylesOptions): void;
+//#endregion
+//#region src/hooks/useRawCSS.d.ts
+interface UseRawCSSOptions {
+  /**
+   * Shadow root or document to inject into.
+   * Note: `root` is not part of the update-tracking comparison — changing
+   * only the root for the same id/content will not re-inject.
+   */
+  root?: Document | ShadowRoot;
+  /**
+   * Stable identifier for update tracking (client-only). When provided,
+   * changing the CSS content will dispose the previous injection and inject
+   * the new one. Without an id, deduplication is purely content-based (same
+   * CSS is injected only once). In RSC mode, renders are single-pass so
+   * update tracking does not apply.
+   */
+  id?: string;
+}
+declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
+declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
+//#endregion
+//#region src/hooks/useKeyframes.d.ts
+interface UseKeyframesOptions {
+  name?: string;
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject CSS @keyframes and return the generated animation name.
+ * Deduplicates by content — identical steps always return the same name.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @example Basic usage - steps object is the dependency
+ * ```tsx
+ * function MyComponent() {
+ *   const bounce = useKeyframes({
+ *     '0%': { transform: 'scale(1)' },
+ *     '50%': { transform: 'scale(1.1)' },
+ *     '100%': { transform: 'scale(1)' },
+ *   });
+ *
+ *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;
+ * }
+ * ```
+ *
+ * @example With custom name
+ * ```tsx
+ * function MyComponent() {
+ *   const fadeIn = useKeyframes(
+ *     { from: { opacity: 0 }, to: { opacity: 1 } },
+ *     { name: 'fadeIn' }
+ *   );
+ *
+ *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;
+ * }
+ * ```
+ *
+ * @example Factory function with dependencies
+ * ```tsx
+ * function MyComponent({ scale }: { scale: number }) {
+ *   const pulse = useKeyframes(
+ *     () => ({
+ *       '0%': { transform: 'scale(1)' },
+ *       '100%': { transform: `scale(${scale})` },
+ *     }),
+ *     [scale]
+ *   );
+ *
+ *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;
+ * }
+ * ```
+ */
+declare function useKeyframes(steps: KeyframesSteps, options?: UseKeyframesOptions): string;
+declare function useKeyframes(factory: () => KeyframesSteps, deps: readonly unknown[], options?: UseKeyframesOptions): string;
+//#endregion
+//#region src/hooks/useProperty.d.ts
+interface UsePropertyOptions {
+  /**
+   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').
+   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
+   */
+  syntax?: string;
+  /**
+   * Whether the property inherits from parent elements
+   * @default true
+   */
+  inherits?: boolean;
+  /**
+   * Initial value for the property.
+   * For color tokens (#name), this defaults to 'transparent' if not specified.
+   */
+  initialValue?: string | number;
+  /**
+   * Shadow root or document to inject into
+   */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Register a CSS @property custom property.
+ * This enables advanced features like animating custom properties.
+ *
+ * Note: @property rules are global and persistent once defined.
+ * The function ensures the property is only registered once per root.
+ *
+ * Accepts tasty token syntax for the property name:
+ * - `$name` → defines `--name`
+ * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
+ * - `--name` → defines `--name` (legacy format)
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @param name - The property token ($name, #name) or CSS property name (--name)
+ * @param options - Property configuration
+ *
+ * @example Basic property with token syntax
+ * ```tsx
+ * function Spinner() {
+ *   useProperty('$rotation', {
+ *     syntax: '<angle>',
+ *     inherits: false,
+ *     initialValue: '0deg',
+ *   });
+ *
+ *   return <div className="spinner" />;
+ * }
+ * ```
+ *
+ * @example Color property with token syntax (auto-sets syntax)
+ * ```tsx
+ * function MyComponent() {
+ *   useProperty('#theme', {
+ *     initialValue: 'red', // syntax: '<color>' is auto-set
+ *   });
+ *
+ *   // Now --theme-color can be animated with CSS transitions
+ *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
+ * }
+ * ```
+ *
+ * @example Legacy format (still supported)
+ * ```tsx
+ * function ResizableBox() {
+ *   useProperty('--box-size', {
+ *     syntax: '<length>',
+ *     initialValue: '100px',
+ *   });
+ *
+ *   return <div style={{ width: 'var(--box-size)' }} />;
+ * }
+ * ```
+ */
+declare function useProperty(name: string, options?: UsePropertyOptions): void;
+//#endregion
+//#region src/hooks/useFontFace.d.ts
+interface UseFontFaceOptions {
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject CSS @font-face rules.
+ * Permanent — no cleanup on unmount. Deduplicates by content hash.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @param family - The font-family name
+ * @param input - Single descriptor object or array of descriptors (for multiple weights/styles)
+ * @param options - Optional settings (e.g. Shadow DOM root)
+ *
+ * @example Single weight
+ * ```tsx
+ * function App() {
+ *   useFontFace('Brand Sans', {
+ *     src: 'url("/fonts/brand-sans.woff2") format("woff2")',
+ *     fontWeight: '400 700',
+ *     fontDisplay: 'swap',
+ *   });
+ *
+ *   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+ * }
+ * ```
+ *
+ * @example Multiple weights
+ * ```tsx
+ * function App() {
+ *   useFontFace('Brand Sans', [
+ *     { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+ *     { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+ *   ]);
+ *
+ *   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+ * }
+ * ```
+ */
+declare function useFontFace(family: string, input: FontFaceInput, options?: UseFontFaceOptions): void;
+//#endregion
+//#region src/hooks/useCounterStyle.d.ts
+interface UseCounterStyleOptions {
+  name?: string;
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject a CSS @counter-style rule and return the generated name.
+ * Permanent — no cleanup on unmount. Deduplicates by name.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function EmojiList() {
+ *   const styleName = useCounterStyle({
+ *     system: 'cyclic',
+ *     symbols: '"👍"',
+ *     suffix: '" "',
+ *   }, { name: 'thumbs' });
+ *
+ *   return (
+ *     <ol style={{ listStyleType: styleName }}>
+ *       <li>First</li>
+ *       <li>Second</li>
+ *     </ol>
+ *   );
+ * }
+ * ```
+ *
+ */
+declare function useCounterStyle(descriptors: CounterStyleDescriptors, options?: UseCounterStyleOptions): string;
+//#endregion
+//#region src/utils/get-display-name.d.ts
+declare function getDisplayName<T>(Component: ElementType<T>, fallbackName?: string): string;
+//#endregion
+//#region src/index.d.ts
+declare module './utils/css-types' {
+  interface CSSProperties extends CSSProperties {}
+}
+//#endregion
+//#region src/styles/border.d.ts
+/**
+ * Border style handler with multi-group support.
+ *
+ * Single group (backward compatible):
+ * - `border="1bw solid #red"` - all sides
+ * - `border="1bw solid #red top left"` - only top and left
+ *
+ * Multi-group (new):
+ * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
+ * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
+ *
+ * Later groups override earlier groups for conflicting directions.
+ */
+declare function borderStyle({
+  border
+}: {
+  border?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace borderStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/color.d.ts
+declare function colorStyle({
+  color
+}: {
+  color?: string | boolean;
+}): {
+  color: string;
+} | null;
+declare namespace colorStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/display.d.ts
+interface DisplayStyleProps {
+  display?: string;
+  hide?: boolean;
+  textOverflow?: string | boolean;
+  overflow?: string;
+  whiteSpace?: string;
+}
+/**
+ * Handles display, hide, textOverflow, overflow, and whiteSpace styles.
+ *
+ * Priority:
+ * 1. `hide` takes precedence (display: none)
+ * 2. Multi-line `textOverflow` forces display: -webkit-box
+ * 3. Single-line `textOverflow` defaults white-space to nowrap
+ * 4. Explicit `whiteSpace` overrides the default from `textOverflow`
+ */
+declare function displayStyle({
+  display,
+  hide,
+  textOverflow,
+  overflow,
+  whiteSpace
+}: DisplayStyleProps): Record<string, string | number> | null;
+declare namespace displayStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/fade.d.ts
+declare function fadeStyle({
+  fade
+}: {
+  fade?: string;
+}): {
+  mask: string;
+  'mask-composite': string;
+} | null;
+declare namespace fadeStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/fill.d.ts
+declare function fillStyle({
+  fill,
+  backgroundColor,
+  image,
+  backgroundImage,
+  backgroundPosition,
+  backgroundSize,
+  backgroundRepeat,
+  backgroundAttachment,
+  backgroundOrigin,
+  backgroundClip,
+  background
+}: {
+  fill?: string;
+  backgroundColor?: string;
+  image?: string;
+  backgroundImage?: string;
+  backgroundPosition?: string;
+  backgroundSize?: string;
+  backgroundRepeat?: string;
+  backgroundAttachment?: string;
+  backgroundOrigin?: string;
+  backgroundClip?: string;
+  background?: string;
+}): Record<string, string> | null;
+declare namespace fillStyle {
+  var __lookupStyles: string[];
+}
+declare function svgFillStyle({
+  svgFill
+}: {
+  svgFill?: string;
+}): {
+  fill: string;
+} | null;
+declare namespace svgFillStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/flow.d.ts
+declare function flowStyle({
+  display,
+  flow
+}: {
+  display?: string;
+  flow?: string;
+}): {
+  [x: string]: string | undefined;
+} | null;
+declare namespace flowStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/gap.d.ts
+declare function gapStyle({
+  display,
+  flow,
+  gap
+}: {
+  display?: string;
+  flow?: string;
+  gap?: string | number | boolean;
+}): {
+  gap: string;
+  $?: undefined;
+} | ({
+  'margin-right': string;
+  'margin-bottom': string;
+  $?: undefined;
+} | {
+  $: string;
+  'margin-right': string;
+  'margin-bottom': string;
+})[] | {
+  [x: string]: string;
+  $: string;
+  gap?: undefined;
+} | null;
+declare namespace gapStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/height.d.ts
+interface HeightStyleProps {
+  height?: string | number | boolean;
+  minHeight?: string | number | boolean;
+  maxHeight?: string | number | boolean;
+}
+declare function heightStyle({
+  height,
+  minHeight,
+  maxHeight
+}: HeightStyleProps): Record<string, string | string[]> | null;
+declare namespace heightStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/inset.d.ts
+declare function insetStyle({
+  inset,
+  insetBlock,
+  insetInline,
+  top,
+  right,
+  bottom,
+  left
+}: {
+  inset?: string | number | boolean;
+  insetBlock?: string | number | boolean;
+  insetInline?: string | number | boolean;
+  top?: string | number | boolean;
+  right?: string | number | boolean;
+  bottom?: string | number | boolean;
+  left?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace insetStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/margin.d.ts
+declare function marginStyle({
+  margin,
+  marginBlock,
+  marginInline,
+  marginTop,
+  marginRight,
+  marginBottom,
+  marginLeft
+}: {
+  margin?: string | number | boolean;
+  marginBlock?: string | number | boolean;
+  marginInline?: string | number | boolean;
+  marginTop?: string | number | boolean;
+  marginRight?: string | number | boolean;
+  marginBottom?: string | number | boolean;
+  marginLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace marginStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/outline.d.ts
+interface OutlineStyleProps {
+  outline?: string | boolean | number;
+  outlineOffset?: string | number;
+}
+/**
+ * Generates CSS for outline property with optional offset.
+ *
+ * Syntax:
+ * - `outline="2px solid #red"` - outline only
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
+ * - `outline="2px / 4px"` - width with offset (simpler form)
+ * - `outline={true}` - default 1ow solid outline
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
+ *
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
+ *
+ * @return CSS properties for outline and optionally outline-offset
+ */
+declare function outlineStyle({
+  outline,
+  outlineOffset
+}: OutlineStyleProps): Record<string, string> | null;
+declare namespace outlineStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/padding.d.ts
+declare function paddingStyle({
+  padding,
+  paddingBlock,
+  paddingInline,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft
+}: {
+  padding?: string | number | boolean;
+  paddingBlock?: string | number | boolean;
+  paddingInline?: string | number | boolean;
+  paddingTop?: string | number | boolean;
+  paddingRight?: string | number | boolean;
+  paddingBottom?: string | number | boolean;
+  paddingLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace paddingStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/placement.d.ts
+interface PlacementStyleProps {
+  place?: string | boolean;
+  placeItems?: string | boolean;
+  placeContent?: string | boolean;
+  align?: string | boolean;
+  justify?: string | boolean;
+  alignItems?: string | boolean;
+  alignContent?: string | boolean;
+  justifyItems?: string | boolean;
+  justifyContent?: string | boolean;
+}
+/**
+ * Unified placement handler replacing align, justify, and place.
+ *
+ * Priority (later overrides earlier):
+ * 1. place (lowest) — sets all 4 longhands
+ * 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands
+ * 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand
+ */
+declare function placementStyle({
+  place,
+  placeItems,
+  placeContent,
+  align,
+  justify,
+  alignItems,
+  alignContent,
+  justifyItems,
+  justifyContent
+}: PlacementStyleProps): Record<string, string> | null;
+declare namespace placementStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/preset.d.ts
+interface PresetStyleProps {
+  preset?: string | boolean;
+  fontSize?: string | number;
+  lineHeight?: string | number;
+  textTransform?: string;
+  letterSpacing?: string | number;
+  fontWeight?: string | number;
+  fontStyle?: string | boolean;
+  fontFamily?: string;
+  /** Alias for fontFamily with special handling for 'monospace' and boolean */
+  font?: string | boolean;
+}
+/**
+ * Handles typography preset and individual font properties.
+ *
+ * Preset syntax uses `/` to separate name from modifier:
+ * - `preset="h1"` — name only
+ * - `preset="h2 / strong"` — name + modifier
+ * - `preset="bold"` — modifier-only shorthand (name defaults to `inherit`)
+ *
+ * When `preset` is defined, it sets up CSS custom properties for typography.
+ * Individual font props can be used with or without `preset`:
+ * - With `preset`: overrides the preset value for that property
+ * - Without `preset`: outputs the CSS directly
+ *
+ * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
+ * fontWeight accepts numbers directly (e.g., 400, 700).
+ *
+ * font vs fontFamily:
+ * - `font` is the recommended prop with special handling (monospace, boolean, fallback)
+ * - `fontFamily` is a direct value without special handling
+ */
+declare function presetStyle({
+  preset,
+  fontSize,
+  lineHeight,
+  textTransform,
+  letterSpacing,
+  fontWeight,
+  fontStyle,
+  fontFamily,
+  font
+}: PresetStyleProps): Styles | null;
+declare namespace presetStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/radius.d.ts
+declare function radiusStyle({
+  radius
+}: {
+  radius?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace radiusStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/scrollMargin.d.ts
+declare function scrollMarginStyle({
+  scrollMargin,
+  scrollMarginBlock,
+  scrollMarginInline,
+  scrollMarginTop,
+  scrollMarginRight,
+  scrollMarginBottom,
+  scrollMarginLeft
+}: {
+  scrollMargin?: string | number | boolean;
+  scrollMarginBlock?: string | number | boolean;
+  scrollMarginInline?: string | number | boolean;
+  scrollMarginTop?: string | number | boolean;
+  scrollMarginRight?: string | number | boolean;
+  scrollMarginBottom?: string | number | boolean;
+  scrollMarginLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace scrollMarginStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/scrollbar.d.ts
+interface ScrollbarStyleProps {
+  scrollbar?: string | boolean;
+  overflow?: string;
+}
+/**
+ * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,
+ * and `scrollbar-gutter`.
+ *
+ * Width values: `thin` (default), `auto`, `none`
+ * Modifiers: `stable`, `both-edges`, `always`
+ *
+ * Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands
+ * in `values` rather than `mods`. Both locations are checked for robustness.
+ */
+declare function scrollbarStyle({
+  scrollbar,
+  overflow
+}: ScrollbarStyleProps): Record<string, string> | null;
+declare namespace scrollbarStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/shadow.d.ts
+declare function shadowStyle({
+  shadow
+}: {
+  shadow?: string | boolean;
+}): {
+  'box-shadow': string;
+} | null;
+declare namespace shadowStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/transition.d.ts
+declare function transitionStyle({
+  transition
+}: {
+  transition?: string;
+}): {
+  transition: string;
+} | null;
+declare namespace transitionStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/width.d.ts
+interface WidthStyleProps {
+  width?: string | number | boolean;
+  minWidth?: string | number | boolean;
+  maxWidth?: string | number | boolean;
+}
+declare function widthStyle({
+  width,
+  minWidth,
+  maxWidth
+}: WidthStyleProps): Record<string, string | string[]> | null;
+declare namespace widthStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/predefined.d.ts
+/**
+ * Exported object containing wrapped predefined style handlers.
+ * Users can import and call these to extend or delegate to built-in behavior.
+ *
+ * Internal handlers use *Style suffix for searchability.
+ * External API uses short names for convenience.
+ *
+ * @example
+ * ```ts
+ * import { styleHandlers, configure } from '@tenphi/tasty';
+ *
+ * configure({
+ *   handlers: {
+ *     fill: ({ fill }) => {
+ *       if (fill?.startsWith('gradient:')) {
+ *         return { background: fill.slice(9) };
+ *       }
+ *       return styleHandlers.fill({ fill });
+ *     },
+ *   },
+ * });
+ * ```
+ */
+declare const styleHandlers: {
+  readonly border: typeof borderStyle;
+  readonly color: typeof colorStyle;
+  readonly display: typeof displayStyle;
+  readonly fade: typeof fadeStyle;
+  readonly fill: typeof fillStyle;
+  readonly svgFill: typeof svgFillStyle;
+  readonly flow: typeof flowStyle;
+  readonly gap: typeof gapStyle;
+  readonly height: typeof heightStyle;
+  readonly inset: typeof insetStyle;
+  readonly margin: typeof marginStyle;
+  readonly outline: typeof outlineStyle;
+  readonly padding: typeof paddingStyle;
+  readonly placement: typeof placementStyle;
+  readonly preset: typeof presetStyle;
+  readonly radius: typeof radiusStyle;
+  readonly scrollMargin: typeof scrollMarginStyle;
+  readonly scrollbar: typeof scrollbarStyle;
+  readonly shadow: typeof shadowStyle;
+  readonly transition: typeof transitionStyle;
+  readonly width: typeof widthStyle;
+};
+//#endregion
+//#region src/compute-styles.d.ts
+interface ComputeStylesResult {
+  className: string;
+  /** CSS text to emit as an inline <style> tag (RSC mode only). */
+  css?: string;
+}
+interface ComputeStylesOptions {
+  ssrCollector?: ServerStyleCollector | null;
+  /** Target root for style injection (client only). Defaults to `document`. */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Synchronous, hook-free style computation.
+ *
+ * Resolves recipes, categorizes style keys into chunks, renders CSS rules,
+ * allocates class names, and injects / collects / returns the CSS.
+ *
+ * Three code paths:
+ * 1. SSR collector — discovered via ALS or passed explicitly; CSS collected
+ * 2. RSC inline — no collector and no `document`; CSS returned as `result.css`
+ *    for the caller to emit as an inline `<style>` tag
+ * 3. Client inject — CSS injected synchronously into the DOM (idempotent)
+ *
+ * @param styles - Tasty styles object (or undefined for no styles)
+ * @param options - Optional SSR collector override
+ */
+declare function computeStyles(styles: Styles | undefined, options?: ComputeStylesOptions): ComputeStylesResult;
+//#endregion
+//#region src/injector/chunk-sheet-registry.d.ts
+/**
+ * Global registry mapping CSS content hashes to shared constructable
+ * CSSStyleSheet objects with reference counting.
+ *
+ * Multiple shadow roots adopting the same chunk share a single underlying
+ * stylesheet object — parse once, adopt everywhere.
+ */
+declare class ChunkSheetRegistry {
+  private sheets;
+  private sheetToHash;
+  /**
+   * Get or create a CSSStyleSheet for the given CSS text.
+   * Increments refCount. Uses content hash as the dedup key.
+   */
+  acquire(cssText: string): CSSStyleSheet;
+  /**
+   * Decrement refCount for a sheet. When refCount reaches 0,
+   * the sheet is removed from the registry.
+   */
+  release(sheet: CSSStyleSheet): void;
+  /**
+   * Bulk acquire — returns an array of CSSStyleSheet in the same order.
+   */
+  acquireAll(cssTexts: string[]): CSSStyleSheet[];
+  /**
+   * Bulk release — decrements refCount for each sheet.
+   */
+  releaseAll(sheets: CSSStyleSheet[]): void;
+  /** Number of unique sheets currently held. */
+  get size(): number;
+}
+/** Module-level singleton shared across the entire application. */
+declare const chunkSheetRegistry: ChunkSheetRegistry;
+//#endregion
+//#region src/injector/index.d.ts
+/**
+ * Inject styles and return className with dispose function
+ */
+declare function inject(rules: StyleResult[], options?: {
+  root?: Document | ShadowRoot;
+  cacheKey?: string;
+}): InjectResult;
+/**
+ * Inject global rules that should not reserve tasty class names
+ */
+declare function injectGlobal(rules: StyleResult[], options?: {
+  root?: Document | ShadowRoot;
+}): GlobalInjectResult;
+/**
+ * Inject raw CSS text directly without parsing
+ * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
+ * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
+ *
+ * @example
+ * ```tsx
+ * // Inject raw CSS
+ * const { dispose } = injectRawCSS(`
+ *   body { margin: 0; padding: 0; }
+ *   .my-class { color: red; }
+ * `);
+ *
+ * // Later, remove the injected CSS
+ * dispose();
+ * ```
+ */
+declare function injectRawCSS(css: string, options?: {
+  root?: Document | ShadowRoot;
+}): {
+  dispose: () => void;
+};
+/**
+ * Get raw CSS text for SSR
+ */
+declare function getRawCSSText(options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Inject keyframes and return object with toString() and dispose()
+ */
+declare function keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
+  root?: Document | ShadowRoot;
+  name?: string;
+}): KeyframesResult;
+interface PropertyOptions {
+  /**
+   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
+   */
+  syntax?: string;
+  /**
+   * Whether the property inherits from parent elements
+   * @default true
+   */
+  inherits?: boolean;
+  /**
+   * Initial value for the property
+   */
+  initialValue?: string | number;
+  /**
+   * Shadow root or document to inject into
+   */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Define a CSS @property custom property.
+ * This enables advanced features like animating custom properties.
+ *
+ * Note: @property rules are global and persistent once defined.
+ * Re-registering the same property name is a no-op.
+ *
+ * @param name - The custom property name (must start with --)
+ * @param options - Property configuration
+ *
+ * @example
+ * ```ts
+ * // Define a color property that can be animated
+ * property('--my-color', {
+ *   syntax: '<color>',
+ *   initialValue: 'red',
+ * });
+ *
+ * // Define an angle property
+ * property('--rotation', {
+ *   syntax: '<angle>',
+ *   inherits: false,
+ *   initialValue: '0deg',
+ * });
+ * ```
+ */
+declare function property$1(name: string, options?: PropertyOptions): void;
+/**
+ * Check if a CSS @property has already been defined
+ *
+ * @param name - The custom property name to check
+ * @param options - Options including root
+ */
+declare function isPropertyDefined(name: string, options?: {
+  root?: Document | ShadowRoot;
+}): boolean;
+/**
+ * Inject a CSS @font-face rule.
+ *
+ * Permanent and global — no dispose or ref-counting.
+ * Deduplicates by content hash (family + descriptors).
+ */
+declare function fontFace(family: string, descriptors: FontFaceDescriptors, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Inject a CSS @counter-style rule.
+ *
+ * Permanent and global — no dispose or ref-counting.
+ * Deduplicates by name (first definition wins).
+ */
+declare function counterStyle(name: string, descriptors: CounterStyleDescriptors, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Get CSS text from all sheets (for SSR)
+ */
+declare function getCssText(options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Collect only CSS used by a rendered subtree (like jest-styled-components).
+ * Pass the container returned by render(...).
+ */
+declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment, options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Force cleanup of unused rules
+ */
+declare function cleanup(root?: Document | ShadowRoot): void;
+/**
+ * Record a render-time usage hit for one or more classNames.
+ * Used internally by computeStyles and tasty() to track usage for GC.
+ * When the global touch counter reaches `touchInterval`, schedules GC.
+ */
+declare function touch(className: string, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Synchronous garbage collection of unused styles.
+ * Evicts the oldest unused styles when usageMap exceeds capacity.
+ * With `{ force: true }`, removes ALL unused styles regardless of capacity.
+ *
+ * @returns Number of styles evicted.
+ */
+declare function gc(options?: GCOptions): number;
+/**
+ * Check if we're currently running in a test environment
+ */
+declare function getIsTestEnvironment(): boolean;
+/**
+ * Get the global injector instance for debugging
+ */
+declare const injector: {
+  readonly instance: StyleInjector;
+};
+/**
+ * Destroy all resources and clean up
+ */
+declare function destroy(root?: Document | ShadowRoot): void;
+/**
+ * Create a new isolated injector instance
+ */
+declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
+//#endregion
+//#region src/utils/filter-base-props.d.ts
+interface PropsFilterOptions {
+  labelable?: boolean;
+  propNames?: Set<string>;
+  eventProps?: boolean;
+}
+/**
+ * Filters out all props that aren't valid DOM props or defined via override prop obj.
+ * @param props - The component props to be filtered.
+ * @param opts - Props to override.
+ */
+declare function filterBaseProps<T extends object>(props: T, opts?: PropsFilterOptions): Partial<T>;
+//#endregion
+//#region src/utils/colors.d.ts
+declare function color$1(name: string, opacity?: number): string;
+//#endregion
+//#region src/utils/mod-attrs.d.ts
+declare const _modAttrs: (firstArg: Record<string, ModValue> | undefined, secondArg?: unknown) => Record<string, string> | null;
+//#endregion
+//#region src/utils/dotize.d.ts
+declare const dotize: {
+  valTypes: {
+    none: string;
+    primitive: string;
+    object: string;
+    array: string;
+  };
+  getValType: (val: any) => string | undefined;
+  getPathType: (arrPath: any) => string[];
+  isUndefined: (obj: any) => obj is undefined;
+  isNumber: (f: any) => boolean;
+  isEmptyObj: (obj: any) => boolean;
+  isPlainObject: (obj: any) => boolean;
+  isNotObject: (obj: any) => boolean;
+  isEmptyArray: (arr: any) => boolean;
+  isNotArray: (arr: any) => boolean;
+  removeEmptyArrayItem: (arr: any) => any;
+  getFieldName: (field: any, prefix: any, isRoot: any, isArrayItem: any, isArray: any) => string;
+  startsWith: (val: any, valToSearch: any) => boolean;
+  convert: (obj: any, prefix?: string) => any;
+  backward: (obj: any, prefix: any) => any;
+};
+//#endregion
+//#region src/utils/resolve-recipes.d.ts
+/**
+ * Resolve all `recipe` style properties in a styles object.
+ *
+ * Handles both top-level and sub-element recipe references.
+ * Returns the same object reference if no recipes are present anywhere
+ * (zero overhead for the common case).
+ *
+ * @param styles - The styles object potentially containing `recipe` keys
+ * @returns Resolved styles with recipe values merged in, or the original object if unchanged
+ */
+declare function resolveRecipes(styles: Styles): Styles;
+//#endregion
+//#region src/utils/warnings.d.ts
+declare function warn(...args: unknown[]): void;
+declare function deprecationWarning(condition: unknown, {
+  property,
+  name,
+  betterAlternative,
+  reason
+}: {
+  property: string;
+  name: string;
+  betterAlternative: (() => string) | string;
+  reason?: (() => string) | string;
+}): void;
+//#endregion
+//#region src/utils/process-tokens.d.ts
+/**
+ * Process tokens object into inline style properties.
+ * - $name -> --name with parsed value
+ * - #name -> --name-color AND --name-color-{colorSpace} with parsed values
+ *
+ * @param tokens - The tokens object to process
+ * @returns CSSProperties object or undefined if no tokens to process
+ */
+declare function processTokens(tokens: Tokens | undefined): CSSProperties$1 | undefined;
+//#endregion
+//#region src/debug.d.ts
+declare global {
+  interface Window {
+    tastyDebug?: typeof tastyDebug;
+  }
+}
+type CSSTarget = 'all' | 'global' | 'active' | 'unused' | 'page' | string | string[] | Element;
+interface DebugOptions {
+  root?: Document | ShadowRoot;
+  /** Suppress console logging and return data only (default: false) */
+  raw?: boolean;
+}
+interface CssOptions extends DebugOptions {
+  prettify?: boolean;
+  /** Read from stored source CSS (dev-mode only) instead of live CSSOM */
+  source?: boolean;
+}
+interface ChunkInfo {
+  className: string;
+  chunkName: string | null;
+}
+interface InspectResult {
+  element?: Element | null;
+  classes: string[];
+  chunks: ChunkInfo[];
+  css: string;
+  size: number;
+  rules: number;
+}
+interface CacheStatus {
+  classes: {
+    active: string[];
+    unused: string[];
+    all: string[];
+  };
+  metrics: CacheMetrics | null;
+}
+interface ChunkBreakdown {
+  byChunk: Record<string, {
+    classes: string[];
+    cssSize: number;
+    ruleCount: number;
+  }>;
+  totalChunkTypes: number;
+  totalClasses: number;
+}
+interface Summary {
+  activeClasses: string[];
+  unusedClasses: string[];
+  totalStyledClasses: string[];
+  activeCSSSize: number;
+  unusedCSSSize: number;
+  globalCSSSize: number;
+  rawCSSSize: number;
+  keyframesCSSSize: number;
+  propertyCSSSize: number;
+  totalCSSSize: number;
+  activeRuleCount: number;
+  unusedRuleCount: number;
+  globalRuleCount: number;
+  rawRuleCount: number;
+  keyframesRuleCount: number;
+  propertyRuleCount: number;
+  totalRuleCount: number;
+  metrics: CacheMetrics | null;
+  definedProperties: string[];
+  definedKeyframes: {
+    name: string;
+    refCount: number;
+  }[];
+  chunkBreakdown: ChunkBreakdown;
+}
+declare const tastyDebug: {
+  css(target: CSSTarget, opts?: CssOptions): string;
+  inspect(target: string | Element, opts?: DebugOptions): InspectResult;
+  summary(opts?: DebugOptions): Summary;
+  chunks(opts?: DebugOptions): ChunkBreakdown;
+  cache(opts?: DebugOptions): CacheStatus;
+  cleanup(opts?: {
+    root?: Document | ShadowRoot;
+  }): void;
+  help(): void;
+  install(): void;
+};
+//#endregion
+export { ResolveTokenProps as $, chunkSheetRegistry as A, TastyThemeNames as At, useKeyframes as B, DIMENSION_STYLES as Bt, injectRawCSS as C, Mods as Ct, property$1 as D, ShortGridStyles as Dt, keyframes as E, Props as Et, getDisplayName as F, BLOCK_INNER_STYLES as Ft, useStyles as G, TEXT_STYLES as Gt, useGlobalStyles as H, INNER_STYLES as Ht, useCounterStyle as I, BLOCK_OUTER_STYLES as It, ElementsDefinition as J, ChunkName as Jt, AllBasePropsWithMods as K, CHUNK_NAMES as Kt, useFontFace as L, BLOCK_STYLES as Lt, ComputeStylesResult as M, TokenValue as Mt, computeStyles as N, Tokens as Nt, touch as O, TagName as Ot, styleHandlers as P, BASE_STYLES as Pt, ResolveModProps as Q, okhslPlugin as Qt, UsePropertyOptions as R, COLOR_STYLES as Rt, injectGlobal as S, ModValue as St, isPropertyDefined as T, PositionStyleProps as Tt, UseStylesOptions as U, OUTER_STYLES as Ut, useRawCSS as V, FLOW_STYLES as Vt, UseStylesResult as W, POSITION_STYLES as Wt, ModPropsInput as X, categorizeStyleKeys as Xt, ModPropDef as Y, STYLE_TO_CHUNK as Yt, ResolveModPropDef as Z, okhslFunc as Zt, getCssText as _, ContainerStyleProps as _t, resolveRecipes as a, TokenPropsInput as at, getRawCSSText as b, GlobalStyledProps as bt, color$1 as c, tasty as ct, cleanup as d, BasePropsWithoutChildren as dt, SubElementDefinition as et, counterStyle as f, BaseStyleProps as ft, gc as g, ColorStyleProps as gt, fontFace as h, BlockStyleProps as ht, warn as i, TastyProps as it, ComputeStylesOptions as j, TextStyleProps as jt, ChunkSheetRegistry as k, TastyExtensionConfig as kt, filterBaseProps as l, AllBaseProps as lt, destroy as m, BlockOuterStyleProps as mt, processTokens as n, TastyElementOptions as nt, dotize as o, VariantMap as ot, createInjector as p, BlockInnerStyleProps as pt, Element$1 as q, ChunkInfo$1 as qt, deprecationWarning as r, TastyElementProps as rt, _modAttrs as s, WithVariant as st, tastyDebug as t, SubElementProps as tt, PropertyOptions as u, BaseProps as ut, getCssTextForNode as v, DimensionStyleProps as vt, injector as w, OuterStyleProps as wt, inject as x, InnerStyleProps as xt, getIsTestEnvironment as y, FlowStyleProps as yt, useProperty as z, CONTAINER_STYLES as zt };
+//# sourceMappingURL=index-ZRxZWzlj.d.ts.map