svelte-ux
Version:
A large collection of Svelte components, actions, stores and utils to simplify creating highly interactive and visual applications. Built using Tailwind with extensibility and customization in mind.
104 lines (103 loc) • 3.57 kB
TypeScript
import type { ComponentProps, SvelteComponent } from 'svelte';
import type * as Components from './index.js';
import type { ButtonColor, ButtonRounded, ButtonSize, ButtonVariant, LabelPlacement, TransitionParams } from '../types/index.js';
import type { TransitionConfig } from 'svelte/transition';
export type ComponentName = keyof typeof Components;
type ClassesProp<T> = T extends {
prototype: infer PR extends SvelteComponent;
} ? ComponentProps<PR> extends {
classes?: any;
} ? ComponentProps<PR>['classes'] : ComponentProps<PR> extends {
class?: string;
} ? {
root?: string;
} : never : never;
interface ComponentDefaultProps {
Button?: {
variant?: ButtonVariant;
color?: ButtonColor;
size?: ButtonSize;
rounded?: ButtonRounded;
};
ButtonGroup?: {
variant?: ButtonVariant;
color?: ButtonColor;
size?: ButtonSize;
rounded?: ButtonRounded;
};
CopyButton?: {
variant?: ButtonVariant;
color?: ButtonColor;
size?: ButtonSize;
rounded?: ButtonRounded;
};
DateButton?: {
variant?: ButtonVariant;
};
DateField?: {
labelPlacement?: LabelPlacement;
};
DatePickerField?: {
labelPlacement?: LabelPlacement;
};
DateRangeField?: {
labelPlacement?: LabelPlacement;
};
Field?: {
labelPlacement?: LabelPlacement;
};
MenuButton?: {
variant?: ButtonVariant;
color?: ButtonColor;
size?: ButtonSize;
rounded?: ButtonRounded;
};
Menu?: {
transition?: (node: HTMLElement, params: TransitionParams) => TransitionConfig;
transitionParams?: TransitionParams;
};
MenuField?: {
labelPlacement?: LabelPlacement;
};
MultiSelectField?: {
labelPlacement?: LabelPlacement;
};
RangeField?: {
labelPlacement?: LabelPlacement;
};
SelectField?: {
labelPlacement?: LabelPlacement;
};
TextField?: {
labelPlacement?: LabelPlacement;
};
ToggleButton?: {
variant?: ButtonVariant;
color?: ButtonColor;
size?: ButtonSize;
rounded?: ButtonRounded;
};
}
export type ResolvedComponentClasses = {
[key in ComponentName]: ResolvedComponentClassesProp<key>;
};
export type ResolvedComponentClassesProp<NAME extends ComponentName> = ClassesProp<(typeof Components)[NAME]> extends never ? {} : NonNullable<ClassesProp<(typeof Components)[NAME]>>;
export type ResolvedDefaultProps<NAME extends ComponentName> = NAME extends keyof ComponentDefaultProps ? NonNullable<ComponentDefaultProps[NAME]> : {};
export interface ResolvedComponentSettings<NAME extends ComponentName> {
defaults: ResolvedDefaultProps<NAME>;
classes: ResolvedComponentClassesProp<NAME>;
}
export type ComponentSettings = {
[key in ComponentName]?: {
classes?: ClassesProp<(typeof Components)[key]> | string;
} & (key extends keyof ComponentDefaultProps ? ComponentDefaultProps[key] : {});
};
export declare function getComponents(): ComponentSettings;
export declare function resolveComponentClasses<NAME extends ComponentName>(theme: ClassesProp<(typeof Components)[NAME]>): ResolvedComponentClassesProp<NAME>;
/**
* Returns default component classes for a given component. See {@link resolveComponentSettings}
* to get both default props and classes.
* @param name component name
*/
export declare function getComponentClasses<NAME extends ComponentName>(name: NAME): ResolvedComponentClasses[NAME];
export {};