
import { ComponentConfig } from "./ComponentConfig.js";

//#region ../automated-config/dist/types/ComponentStyles.d.ts
//#region src/types/ComponentStyles.d.ts
/**
 * For each variant in `config.variants`, for each option in `variant.options`,
 * produce a string `.uds-{lowercase(label)}-{variantKey}-{optionValue}`.
 */
/**
 * The union of all possible selectors for a given config,
 * e.g. ".uds-avatar" | ".uds-avatar-size-xs" | ".uds-avatar-size-sm" ...
 */
type AllSelectors<C extends ComponentConfig> = BaseSelector<C>;
/**
 * A generic "Tailwind style object":
 *   - Keys are CSS selectors (like ".uds-avatar-size-sm")
 *   - Values are style declarations (like { [varName]: "1rem", display: "inline-block", ... })
 *
 * You can refine these Declarations to be more typed if you want
 * (e.g. only allow certain var names, only allow CSS property keys, etc.).
 */
type CssStyleObject<C extends ComponentConfig> = { [Selector in AllSelectors<C>]?: Record<string, string> };
/**
 * Base class is just `.uds-{label}`
 */
type BaseSelector<C extends ComponentConfig> = `uds-${Lowercase<C['label']>}`;
/**
 * Represents a selector for a parent variant in the component configuration.
 * For each variant in `config.variants`, it produces a string in the format:
 * `.uds-{lowercase(label)}-{variantKey}`.
 */
type ParentVariantSelector<C extends ComponentConfig> = { [K in keyof C['variants']]: `uds-${Lowercase<C['label']>}-${string & K}` }[keyof C['variants']]; //#endregion
//#endregion
export { AllSelectors, BaseSelector, CssStyleObject, ParentVariantSelector };