import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';

/** MD3 button color variants */
type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
/** High-chroma tertiary tone — for hero accents, CTAs, expressive moments. */
 | "tertiary"
/** Brand-stable primary fixed — same hue across light/dark, for badges/pills. */
 | "primary-fixed"
/** Brand-stable tertiary fixed — same hue across light/dark, for special states. */
 | "tertiary-fixed";
/** MD3 Expressive button sizes */
type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
/**
 * MD3 Expressive slot width ratio.
 * Used for icon buttons where width is independent from the size scale.
 * - `"narrow"` – compressed width for dense toolbars.
 * - `"default"` – 1:1 square/round aspect ratio.
 * - `"wide"` – extended width.
 */
type MD3SlotWidth = "narrow" | "default" | "wide";
/** MD3 shape families */
type MD3Shape = "round" | "square";
/** Helper: PolyMorphic component ref */
type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
/** Helper: Props cho polymorphic components */
type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
    as?: C;
    children?: ReactNode;
};

export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c, MD3SlotWidth as d };