API reference#

import { /* components, types, theme API */ } from '@sigx/lynx-daisyui';
import { daisyuiPreset } from '@sigx/lynx-daisyui/preset';
import '@sigx/lynx-daisyui/styles';

const Button: Component<ButtonProps>;

const Card: Compound<Component<CardProps>, {
    Body: Component<CardBodyProps>;
    Title: Component<CardTitleProps>;
    Actions: Component<CardActionsProps>;
}>;

const Divider: Component<DividerProps>;

const Input: Component<InputProps>;

const Toggle: Component<ToggleProps>;

const Checkbox: Component<CheckboxProps>;

const Select: Component<SelectProps>;

const Radio: Compound<Component<RadioGroupProps>, {
    Item: Component<RadioItemProps>;
}>;

const Textarea: Component<TextareaProps>;

const FormField: Component<FormFieldProps>;

const Badge: Component<BadgeProps>;

const Alert: Component<AlertProps>;

const Loading: Component<LoadingProps>;

const Progress: Component<ProgressProps>;

const Modal: Compound<Component<ModalProps>, {
    Header: Component<ModalHeaderProps>;
    Body: Component<ModalBodyProps>;
    Actions: Component<ModalActionsProps>;
}>;

const Skeleton: Component<SkeletonProps>;

const Steps: Compound<Component<StepsProps>, {
    Step: Component<StepProps>;
}>;

const Tabs: Compound<Component<TabsProps>, {
    Tab: Component<TabProps>;
}>;

const NavTabBar: Component<NavTabBarProps>;

const NavHeader: Component<NavHeaderProps>;

const NavDrawer: Component<NavDrawerProps>;

const SwiperIndicator: Component<SwiperIndicatorProps>;

const ThemeProvider: Component<ThemeProviderProps>;

const StatusBarSync: Component<StatusBarSyncProps>;

const Avatar: Component<AvatarProps>;

const Text: Component<TextProps>;

const Heading: Component<HeadingProps>;

const EditorToolbar: Component<EditorToolbarProps>;

const EmojiPickerSheet: Component<EmojiPickerSheetProps>;

const Row: Component<RowProps>;

const Col: Component<ColProps>;

const Center: Component<CenterProps>;

const Spacer: Component<SpacerProps>;

const ScrollView: Component<ScrollViewProps>;

function useTheme(): ThemeController;

const themeController: ThemeController;

function listThemes(): readonly Theme[];

function registerTheme(theme: ThemeInput): void;

function extendTheme(base: string, patch: {
    name: string;
    variant?: ThemeVariant;
    pair?: string;
    colors?: Partial<ThemePalette>;
    radius?: ThemeRadius;
    sizes?: ThemeSizes;
    softMix?: number;
}): Theme;

function pickThemeFor(scheme: ThemeVariant): string;

function pairOf(name: string): string;

function variantOf(name: string | undefined): ThemeVariant | undefined;

function colorsOf(name: string | undefined): ThemePalette | undefined;

function radiusOf(name: string | undefined): ThemeRadius | undefined;

function sizesOf(name: string | undefined): ThemeSizes | undefined;

function resolveColorToken(value: string): string;

function resolveDaisyColor(value: string): string;

function useMarkdownEditorTheme(): MarkdownEditorThemeColors;

const markdownComponents: MarkdownComponents;

const daisyToolbarItem: ToolbarRenderItem; // (item, active, run) => JSX

const emojiClasses: EmojiSlotClasses;

// from '@sigx/lynx-daisyui/preset'
const DaisyLynxPreset: Partial<Config>;

// from '@sigx/lynx-daisyui/preset'
const daisyuiPreset: Partial<Config>;

type ButtonProps =
    & Define.Prop<'color', ButtonColor, false>
    & Define.Prop<'variant', ButtonVariant, false>
    & Define.Prop<'size', ButtonSize, false>
    & Define.Prop<'wide', boolean, false>
    & Define.Prop<'disabled', boolean, false>
    & Define.Prop<'loading', boolean, false>
    & Define.Prop<'block', boolean, false>
    & Define.Prop<'circle', boolean, false>
    & Define.Prop<'square', boolean, false>
    & Define.Prop<'active', boolean, false>
    & Define.Prop<'class', string, false>
    & WithAccessibility
    & Define.Slot<'default'>
    & Define.Event<'press', void>;

type ButtonColor = ColorVariant;

type ButtonVariant = 'outline' | 'soft' | 'ghost' | 'link';

type ButtonSize = SizeScale;

type CardProps =
    & Define.Prop<'bordered', boolean, false>
    & Define.Prop<'shadow', boolean | 'sm' | 'md' | 'lg', false>
    & Define.Prop<'compact', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type DividerProps =
    & Define.Prop<'vertical', boolean, false>
    & Define.Prop<'color', string, false>
    & Define.Prop<'margin', number, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type InputProps =
    & Define.Prop<'placeholder', string, false>
    & Define.Prop<'size', InputSize, false>
    & Define.Prop<'variant', InputVariant, false>
    & Define.Prop<'color', InputColor, false>
    & Define.Prop<'disabled', boolean, false>
    & Define.Prop<'type', 'text' | 'number' | 'password', false>
    & Define.Prop<'class', string, false>
    & Define.Model<string>;

type InputSize = 'xs' | 'sm' | 'md' | 'lg';

type InputVariant = 'bordered' | 'ghost';

type InputColor = Exclude<ColorVariant, 'neutral'>;

type ToggleProps =
    & Define.Prop<'checked', boolean, false>
    & Define.Prop<'color', ToggleColor, false>
    & Define.Prop<'size', ToggleSize, false>
    & Define.Prop<'disabled', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Event<'change', boolean>;

type ToggleColor = Exclude<ColorVariant, 'neutral'>;

type ToggleSize = 'xs' | 'sm' | 'md' | 'lg';

type CheckboxProps =
    & Define.Prop<'checked', boolean, false>
    & Define.Prop<'color', CheckboxColor, false>
    & Define.Prop<'size', CheckboxSize, false>
    & Define.Prop<'disabled', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Event<'change', boolean>;

type CheckboxColor = Exclude<ColorVariant, 'neutral'>;

type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';

type SelectProps =
    & Define.Prop<'options', SelectOption[], false>
    & Define.Prop<'value', string, false>
    & Define.Prop<'placeholder', string, false>
    & Define.Prop<'size', SelectSize, false>
    & Define.Prop<'variant', SelectVariant, false>
    & Define.Prop<'color', SelectColor, false>
    & Define.Prop<'disabled', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Event<'change', string>;

interface SelectOption {
    label: string;
    value: string;
}

type SelectSize = 'xs' | 'sm' | 'md' | 'lg';

type SelectVariant = 'bordered' | 'ghost';

type SelectColor = Exclude<ColorVariant, 'neutral'>;

type RadioGroupProps =
    & Define.Prop<'value', string, false>
    & Define.Prop<'color', RadioColor, false>
    & Define.Prop<'size', RadioSize, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>
    & Define.Event<'change', string>;

type RadioItemProps =
    & Define.Prop<'value', string, false>
    & Define.Prop<'label', string, false>
    & Define.Prop<'disabled', boolean, false>
    & Define.Prop<'checked', boolean, false>
    & Define.Prop<'color', RadioColor, false>
    & Define.Prop<'size', RadioSize, false>
    & Define.Prop<'class', string, false>
    & Define.Event<'select', string>;

type RadioColor = Exclude<ColorVariant, 'neutral'>;

type RadioSize = 'xs' | 'sm' | 'md' | 'lg';

type TextareaProps =
    & Define.Prop<'placeholder', string, false>
    & Define.Prop<'rows', number, false>
    & Define.Prop<'size', TextareaSize, false>
    & Define.Prop<'variant', TextareaVariant, false>
    & Define.Prop<'color', TextareaColor, false>
    & Define.Prop<'disabled', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Model<string>;

type TextareaSize = 'xs' | 'sm' | 'md' | 'lg';

type TextareaVariant = 'bordered' | 'ghost';

type TextareaColor = Exclude<ColorVariant, 'neutral'>;

type FormFieldProps =
    & Define.Prop<'label', string, false>
    & Define.Prop<'error', string, false>
    & Define.Prop<'required', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type BadgeProps =
    & Define.Prop<'color', BadgeColor, false>
    & Define.Prop<'variant', BadgeVariant, false>
    & Define.Prop<'size', BadgeSize, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type BadgeColor = ColorVariant;

type BadgeVariant = 'outline' | 'ghost';

type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';

type AlertProps =
    & Define.Prop<'color', AlertColor, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type AlertColor = Extract<ColorVariant, 'info' | 'success' | 'warning' | 'error'>;

type LoadingProps =
    & Define.Prop<'type', LoadingType, false>
    & Define.Prop<'size', LoadingSize, false>
    & Define.Prop<'color', LoadingColor, false>
    & Define.Prop<'class', string, false>;

type LoadingType = 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';

type LoadingSize = 'xs' | 'sm' | 'md' | 'lg';

type LoadingColor = Exclude<ColorVariant, 'neutral'>;

type ProgressProps =
    & Define.Prop<'value', number, false>
    & Define.Prop<'max', number, false>
    & Define.Prop<'color', ProgressColor, false>
    & Define.Prop<'class', string, false>;

type ProgressColor = Exclude<ColorVariant, 'neutral'>;

type ModalProps =
    & Define.Prop<'open', boolean, false>
    & Define.Prop<'onClose', () => void, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type SkeletonProps =
    & Define.Prop<'width', number | string, false>
    & Define.Prop<'height', number | string, false>
    & Define.Prop<'circle', boolean, false>
    & Define.Prop<'class', string, false>;

type StepsProps =
    & Define.Prop<'vertical', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type StepProps =
    & Define.Prop<'color', StepColor, false>
    & Define.Prop<'content', string, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type StepColor = ColorVariant;

type TabsProps =
    & Define.Prop<'activeTab', string, false>
    & Define.Prop<'onChange', (value: string) => void, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type TabProps =
    & Define.Prop<'value', string, true>
    & Define.Prop<'active', boolean, false>
    & Define.Prop<'label', string, false>
    & Define.Prop<'onPress', () => void, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type NavTabBarProps =
    & Define.Prop<'position', NavTabBarPosition, false>
    & Define.Prop<'background', NavTabBarBackground, false>
    & Define.Prop<'bordered', boolean, false>
    & Define.Prop<'renderTab', (info: TabInfo, ctx: NavTabRenderContext) => JSXElement, false>
    & Define.Prop<'items', ReadonlyArray<TabInfo>, false>
    & Define.Prop<'activeId', string, false>
    & Define.Event<'select', string>;

type NavTabBarPosition = 'top' | 'bottom';

type NavTabBarBackground = 'base-100' | 'base-200' | 'base-300' | 'transparent';

interface NavTabRenderContext {
    readonly active: boolean;
    onPress(): void;
}

type NavHeaderProps =
    & Define.Prop<'background', NavHeaderBackground, false>
    & Define.Prop<'bordered', boolean, false>
    & Define.Prop<'backIcon', IconSpec, false>
    & Define.Prop<'renderBack', (ctx: { pop: () => void }) => JSXElement, false>;

type NavHeaderBackground = 'base-100' | 'base-200' | 'base-300' | 'transparent';

type NavDrawerProps =
    & Define.Prop<'side', NavDrawerSide, false>
    & Define.Prop<'background', BackgroundValue, false>
    & Define.Prop<'bordered', boolean, false>
    & Define.Prop<'backdrop', boolean, false>
    & Define.Prop<'width', number, false>
    & Define.Prop<'initialOpen', boolean, false>
    & Define.Slot<'sidebar'>
    & Define.Slot<'default'>;

type NavDrawerSide = 'left' | 'right';

type SwiperIndicatorProps =
    & Define.Prop<'variant', SwiperIndicatorVariant, false>
    & Define.Prop<'offset', SharedValue<number>, false>
    & Define.Prop<'pageWidth', number, false>
    & Define.Prop<'count', number, true>
    & Define.Prop<'index', PrimitiveSignal<number>, false>
    & Define.Prop<'color', ColorToken, false>
    & Define.Prop<'inactiveColor', ColorToken, false>
    & Define.Prop<'size', SwiperIndicatorSize, false>
    & Define.Prop<'onDotPress', (index: number) => void, false>
    & Define.Prop<'class', string, false>
    & Define.Prop<'style', Record<string, string | number>, false>;

type SwiperIndicatorVariant = 'dots' | 'bar' | 'pill' | 'numbered' | 'scale-pulse';

type SwiperIndicatorSize = 'xs' | 'sm' | 'md' | 'lg';

type ThemeProviderProps =
    & Define.Prop<'initial', DaisyTheme, false>
    & Define.Prop<'light', DaisyTheme, false>
    & Define.Prop<'dark', DaisyTheme, false>
    & Define.Prop<'fontScale', number, false>
    & Define.Prop<'class', string, false>
    & Define.Prop<'style', Record<string, string | number>, false>
    & Define.Slot<'default'>;

type StatusBarSyncProps = Define.Prop<'matchBackground', boolean, false>;

type DaisyTheme =
    | 'daisy-light' | 'daisy-dark' | 'daisy-cupcake'
    | 'daisy-emerald' | 'daisy-synthwave' | 'daisy-dracula'
    | (string & {});

type AvatarProps =
    & Define.Prop<'src', string, false>
    & Define.Prop<'size', AvatarSize, false>
    & Define.Prop<'rounded', boolean | 'full', false>
    & Define.Prop<'placeholder', string, false>
    & Define.Prop<'online', boolean, false>
    & Define.Prop<'offline', boolean, false>
    & Define.Prop<'class', string, false>;

type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

type TextProps =
    & Define.Prop<'size', TextSize, false>
    & Define.Prop<'weight', TextWeight, false>
    & Define.Prop<'color', TextColor, false>
    & Define.Prop<'class', string, false>
    & Define.Prop<'selectable', boolean, false>
    & Define.Prop<'customSelection', boolean, false>
    & Define.Prop<'autoSize', boolean | TextAutoSize, false>
    & Define.Slot<'default'>;

type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';

type TextWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';

type TextColor = 'base-content' | Exclude<ColorVariant, 'neutral'>;

interface TextAutoSize {
    min?: string;
    max?: string;
    step?: string;
    presets?: readonly string[];
    lineRanges?: readonly TextAutoSizeLineRange[];
}

interface TextAutoSizeLineRange {
    lines: number | readonly [number, 'infinity'];
    min: string;
    max?: string;
}

type HeadingProps =
    & Define.Prop<'level', HeadingLevel, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

type EditorToolbarProps =
    & Define.Prop<'controller', MarkdownEditorController | null, false>
    & Define.Prop<'selection', SelectionState | null, false>
    & Define.Prop<'items', ToolbarItem[], false>
    & Define.Prop<'class', string, false>;

type EmojiPickerSheetProps =
    & Define.Prop<'open', boolean, true>
    & Define.Prop<'onClose', () => void, false>
    & Define.Prop<'data', EmojiData, false>
    & Define.Prop<'height', number, false>
    & Define.Prop<'columns', number, false>
    & Define.Prop<'classes', EmojiSlotClasses, false>
    & Define.Event<'pick', EmojiPickEvent>;

interface MarkdownEditorThemeColors {
    readonly textColor: string;
    readonly accentColor: string;
    readonly placeholderColor: string;
}

interface ThemeController {
    readonly name: ThemeName;
    readonly followingSystem: boolean;
    set(name: ThemeName): void;
    toggle(): void;
    followSystem(): void;
    readonly fontScale: number;
    setFontScale(scale: number): void;
}

interface Theme extends Omit<ThemeInput, 'colors'> {
    colors: ThemePalette;
}

type ThemePalette = Record<ColorToken, string>;

interface ThemeRadius {
    selector?: string;
    field?: string;
    box?: string;
}

interface ThemeSizes {
    selector?: string;
    field?: string;
}

type ThemeVariant = 'light' | 'dark';

type ColorVariant =
    | 'primary' | 'secondary' | 'accent' | 'neutral'
    | 'info' | 'success' | 'warning' | 'error';

type ColorToken = CoreColorToken | SoftColorToken;
// = ColorVariant | `${ColorVariant}-content`
//   | 'base-100' | 'base-200' | 'base-300' | 'base-content'
//   | `${ColorVariant}-soft`

type DaisyColor = ColorToken;

type SizeScale = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

type BackgroundValue = ColorToken | (string & {});

type SpacingValue =
    | number
    | { x?: number; y?: number; top?: number; right?: number; bottom?: number; left?: number };

interface BoxProps {
    width?: number | string;
    height?: number | string;
    flex?: number;
    background?: BackgroundValue;
    borderRadius?: number;
    padding?: SpacingValue;
    margin?: SpacingValue;
}

type RowProps =
    & Define.Prop<'gap', number, false>
    & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false>
    & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false>
    & Define.Prop<'wrap', boolean, false>
    & Define.Prop<'padding', SpacingValue, false>
    & Define.Prop<'margin', SpacingValue, false>
    & Define.Prop<'width', number | string, false>
    & Define.Prop<'height', number | string, false>
    & Define.Prop<'flex', number, false>
    & Define.Prop<'background', BackgroundValue, false>
    & Define.Prop<'borderRadius', number, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type ColProps = /* identical shape to RowProps */;

type CenterProps =
    & Define.Prop<'width', number | string, false>
    & Define.Prop<'height', number | string, false>
    & Define.Prop<'flex', number, false>
    & Define.Prop<'background', BackgroundValue, false>
    & Define.Prop<'borderRadius', number, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;

type SpacerProps =
    & Define.Prop<'size', number, false>
    & Define.Prop<'class', string, false>;

type ScrollViewProps =
    & Define.Prop<'direction', 'vertical' | 'horizontal', false>
    & Define.Prop<'height', number | string, false>
    & Define.Prop<'width', number | string, false>
    & Define.Prop<'flex', number, false>
    & Define.Prop<'showScrollbar', boolean, false>
    & Define.Prop<'bounces', boolean, false>
    & Define.Prop<'class', string, false>
    & Define.Slot<'default'>;