import { ComponentPropsWithRef, ElementType } from 'react'; /** * A class list can be a string of space-separated classes or an array of * class strings. */ export type ClassList = string | string[]; /** * An object mapping option keys to their class lists. */ export type VariantOptions = Record; /** * An object mapping variant names to their options. */ export type Variants = Record; /** * Helper to map literal 'true' | 'false' string keys back to boolean types. * We also allow `boolean` for the base widespread `string` evaluation, so * generic `` configurations satisfy the constraints. */ export type UnwrapBoolean = T extends 'true' | 'false' ? boolean | T : string extends T ? boolean | T : T; /** * All variants resolved to a concrete selection. */ export type FullVariantSelection = { [K in keyof T]: UnwrapBoolean; }; /** * Partial variant selection — used for component props. */ export type VariantSelection = Partial>; /** * Input accepted by {@link StylesDef.render}. * Variant selections to be applied. */ export type RenderInput = VariantSelection & { /** * Extra classes merged after all variant classes. * Typically passed from the component's `className` prop */ className?: string; }; /** * A composable, renderable style definition. * * Created via `styles({...})`. Extended via `.extend({...})`. */ export type StylesDef = { /** * Render the final class string for the given variant selection. * Returns an object with a single `className` property. * * @param input Variant selections (merged with defaults). * @param options Additional render options (future-use) * @returns Object containing the computed `className` */ render(input?: RenderInput): { className: string; }; /** * Default variant selections defined in this style definition. * Access individual defaults: `buttonStyles.defaults.size`, * `buttonStyles.defaults.color` * Useful for component signatures: * `function Button({ size = buttonStyles.defaults.size, ... })` */ defaults: Partial>; /** * Create a new StylesDef that inherits all variants, defaults, and rules * from this definition and merges in the provided config. * * @example * const buttonStyles = baseStyles.extend({ * variants: { fill: { solid: '', outline: 'bg-transparent border' } }, * defaults: { fill: 'solid' }, * }); */ extend(config: StylesExtendConfig): StylesDef; }; /** * Rule function used in the composed rules array. */ export type RuleFn = (opts: VariantSelection) => ClassList | undefined; /** * Shared behavior config used by both `styles()` and `.extend()`. */ export interface StyleBehaviorConfig { /** * Classes applied unconditionally. */ base?: ClassList; /** * Default option for each variant when none is provided. */ defaults?: VariantSelection; /** * Programmatic rule callback for cross-variant logic. * Receives the resolved selection (defaults are applied; * unspecified keys may be absent). * Return a ClassList to append, or undefined to skip. */ rules?: RuleFn; } export type EmptyObject = {}; /** * Config accepted by the top-level `styles()` factory. */ export interface StylesConfig extends StyleBehaviorConfig { /** * Variant definitions. */ variants?: TVariants; } /** * Config accepted by `.extend()`. */ export interface StylesExtendConfig extends StyleBehaviorConfig { /** * New or overriding variant definitions. */ variants?: TNew; } /** * Extract the variant map type from a StylesDef instance. */ export type StyleVariants> = T extends StylesDef ? TVariants : Variants; /** * Variant props inferred from a StylesDef instance. * * @example * type ButtonVariantProps = StyleProps; */ export type StyleProps> = VariantSelection>; /** * A strict polymorphic utility for React 19. * Extracts the correct native attributes and explicitly infers the `ref` prop * without requiring `forwardRef`. */ export type PolymorphicProps> = Omit, 'as' | keyof P> & P & { as?: E; }; /** * Coerce a ClassList to a string[]. */ export declare function asArray(value: ClassList): string[]; /** * Create a StylesDef from a config object. * * @example * const alertStyles = styles({ * base: 'rounded-md p-4', * variants: { color: colorStyles }, * defaults: { color: 'info' }, * }); * * // Extend for a child component: * const toastStyles = alertStyles.extend({ * variants: { position: { top: 'top-4', bottom: 'bottom-4' } }, * }); * * // In a component: * alertStyles.render({ color, className }) */ export declare function styles(config?: StylesConfig): StylesDef;