@tempots/beatui 0.0.2

package/dist/types/components/form/input/nullable-date-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const NullableDateInput: (options: InputOptions<Date | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-date-time-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const NullableDateTimeInput: (options: InputOptions<Date | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-text-area.d.ts

@@ -0,0 +1,7 @@
+import { Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { Merge } from '@tempots/std';
+export type NullableTextAreaOptions = Merge<InputOptions<null | string>, {
+    rows?: Value<number>;
+}>;
+export declare const NullableTextArea: (options: NullableTextAreaOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-text-input.d.ts

@@ -0,0 +1,4 @@
+import { InputOptions } from './input-options';
+export declare const emptyToNull: (value: string | null) => string | null;
+export declare const nullToEmpty: (value: null | string) => string;
+export declare const NullableTextInput: (options: InputOptions<null | string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/number-input.d.ts

@@ -0,0 +1,9 @@
+import { Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { Merge } from '@tempots/std';
+export type NumberInputOptions = Merge<InputOptions<number>, {
+    step?: Value<number>;
+    min?: Value<number>;
+    max?: Value<number>;
+}>;
+export declare const NumberInput: (options: NumberInputOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/password-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const PasswordInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/tags-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const TagsInput: (options: InputOptions<string[]>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/text-area.d.ts

@@ -0,0 +1,7 @@
+import { Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { Merge } from '@tempots/std';
+export type TextAreaOptions = Merge<InputOptions<string>, {
+    rows?: Value<number>;
+}>;
+export declare const TextArea: (options: TextAreaOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/text-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const TextInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/schema/index.d.ts

@@ -0,0 +1,2 @@
+export * from './schema-utils';
+export * from './standard-schema-v1';

package/dist/types/components/form/schema/schema-utils.d.ts

@@ -0,0 +1,4 @@
+import { InvalidDependencies } from '../controller/validation-result';
+import { StandardSchemaV1 } from './standard-schema-v1';
+export declare function convertStandardSchemaPathToPath(path: ReadonlyArray<PropertyKey | StandardSchemaV1.PathSegment>): (string | number)[];
+export declare function convertStandardSchemaIssues(issues: readonly StandardSchemaV1.Issue[]): InvalidDependencies;

package/dist/types/components/form/schema/standard-schema-v1.d.ts

@@ -0,0 +1,55 @@
+/** The Standard Schema interface. */
+export interface StandardSchemaV1<Input = unknown, Output = Input> {
+    /** The Standard Schema properties. */
+    readonly '~standard': StandardSchemaV1.Props<Input, Output>;
+}
+export declare namespace StandardSchemaV1 {
+    /** The Standard Schema properties interface. */
+    interface Props<Input = unknown, Output = Input> {
+        /** The version number of the standard. */
+        readonly version: 1;
+        /** The vendor name of the schema library. */
+        readonly vendor: string;
+        /** Validates unknown input values. */
+        readonly validate: (value: unknown) => Result<Output> | Promise<Result<Output>>;
+        /** Inferred types associated with the schema. */
+        readonly types?: Types<Input, Output> | undefined;
+    }
+    /** The result interface of the validate function. */
+    type Result<Output> = SuccessResult<Output> | FailureResult;
+    /** The result interface if validation succeeds. */
+    interface SuccessResult<Output> {
+        /** The typed output value. */
+        readonly value: Output;
+        /** The non-existent issues. */
+        readonly issues?: undefined;
+    }
+    /** The result interface if validation fails. */
+    interface FailureResult {
+        /** The issues of failed validation. */
+        readonly issues: ReadonlyArray<Issue>;
+    }
+    /** The issue interface of the failure output. */
+    interface Issue {
+        /** The error message of the issue. */
+        readonly message: string;
+        /** The path of the issue, if any. */
+        readonly path?: ReadonlyArray<PropertyKey | PathSegment> | undefined;
+    }
+    /** The path segment interface of the issue. */
+    interface PathSegment {
+        /** The key representing a path segment. */
+        readonly key: PropertyKey;
+    }
+    /** The Standard Schema types interface. */
+    interface Types<Input = unknown, Output = Input> {
+        /** The input type of the schema. */
+        readonly input: Input;
+        /** The output type of the schema. */
+        readonly output: Output;
+    }
+    /** Infers the input type of a Standard Schema. */
+    type InferInput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['input'];
+    /** Infers the output type of a Standard Schema. */
+    type InferOutput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['output'];
+}

package/dist/types/components/form/use-form.d.ts

@@ -0,0 +1,14 @@
+import { StandardSchemaV1 } from './schema/standard-schema-v1';
+import { FormController, ValueController } from './controller';
+export interface UseFormOptions<In, Out = In> {
+    schema: StandardSchemaV1<In, Out>;
+    defaultValue?: In;
+}
+export declare function connectCommonAttributes<T>(value: ValueController<T>): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+export declare function connectStringInput(value: ValueController<string>, { triggerOn, }?: {
+    triggerOn?: 'change' | 'input';
+}): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+export declare function connectNumberInput(value: ValueController<number>, { triggerOn, }?: {
+    triggerOn?: 'change' | 'input';
+}): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+export declare function useForm<In extends Record<string, any>, Out = In>({ defaultValue, schema, }: UseFormOptions<In, Out>): FormController<In>;

package/dist/types/components/layout/app-shell.d.ts

@@ -0,0 +1,42 @@
+import { TNode } from '@tempots/dom';
+import { TWBreakpoint } from './with-breakpoint';
+import { PanelColor, PanelShadow } from '../theme';
+export interface AppShellBreakpointOptions {
+    zero: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+}
+export type AppShellBreakpointOptionalOptions = Partial<AppShellBreakpointOptions>;
+export interface AppShellHorizontalOptions {
+    content: TNode;
+    height?: number | AppShellBreakpointOptionalOptions;
+    color?: PanelColor;
+    shadow?: PanelShadow;
+}
+export interface AppShellVerticalOptions {
+    content: TNode;
+    width?: number | AppShellBreakpointOptionalOptions;
+    color?: PanelColor;
+    shadow?: PanelShadow;
+}
+export interface AppShellMainOptions {
+    content: TNode;
+    color?: PanelColor;
+    shadow?: PanelShadow;
+}
+export interface AppShellOptions {
+    banner?: AppShellHorizontalOptions;
+    header?: AppShellHorizontalOptions;
+    footer?: AppShellHorizontalOptions;
+    menu?: AppShellVerticalOptions;
+    aside?: AppShellVerticalOptions;
+    main: AppShellMainOptions;
+    mainHeader?: AppShellHorizontalOptions;
+    mainFooter?: AppShellHorizontalOptions;
+    mediumBreakpoint?: TWBreakpoint;
+    smallBreakpoint?: TWBreakpoint;
+}
+export declare function AppShell({ smallBreakpoint, mediumBreakpoint, ...options }: AppShellOptions): import("@tempots/dom").Renderable;

package/dist/types/components/layout/card.d.ts

@@ -0,0 +1,9 @@
+import { TNode, Value } from '@tempots/dom';
+import { CardVariant, ControlSize } from '../theme';
+import { RadiusName } from '@/tokens/radius';
+export interface CardOptions {
+    variant?: Value<CardVariant>;
+    size?: Value<ControlSize>;
+    roundedness?: Value<RadiusName>;
+}
+export declare function Card({ variant, size, roundedness }?: CardOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/center.d.ts

@@ -0,0 +1,7 @@
+import { TNode, Value } from '@tempots/dom';
+import { CenterGap } from '../theme';
+export interface CenterOptions {
+    gap?: Value<CenterGap>;
+}
+export declare function CenterH(...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function Center({ gap }?: CenterOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/group.d.ts

@@ -0,0 +1,2 @@
+import { TNode } from '@tempots/dom';
+export declare function Group(...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/index.d.ts

@@ -0,0 +1,7 @@
+export * from './app-shell';
+export * from './card';
+export * from './center';
+export * from './group';
+export * from './sink';
+export * from './stack';
+export * from './with-breakpoint';

package/dist/types/components/layout/sink.d.ts

@@ -0,0 +1,9 @@
+import { TNode, Value } from '@tempots/dom';
+import { SinkVariant, ControlSize } from '../theme';
+import { RadiusName } from '@/tokens/radius';
+export interface SinkOptions {
+    variant?: Value<SinkVariant>;
+    size?: Value<ControlSize>;
+    roundedness?: Value<RadiusName>;
+}
+export declare function Sink({ variant, size, roundedness }?: SinkOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/stack.d.ts

@@ -0,0 +1,2 @@
+import { TNode } from '@tempots/dom';
+export declare function Stack(...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/with-breakpoint.d.ts

@@ -0,0 +1,48 @@
+import { Signal, TNode } from '@tempots/dom';
+export type Breakpoints = {
+    [_ in string]: number;
+};
+export interface BreakpointInfo<T extends Breakpoints, K extends keyof T = keyof T & string> {
+    value: Signal<{
+        width: number;
+        breakpoint: K;
+    }>;
+    breakpoints: T;
+    asList: [number, K][];
+    is: <K extends string & keyof T>(value: BreakPointComparison<K>, width: number) => boolean;
+}
+export type Operator = '!=' | '<=' | '>=' | '<' | '>' | '=';
+export type BreakPointComparison<K extends string> = K | `${Operator}${K}`;
+export declare function compareBreakpoint<T extends Breakpoints, K extends string & keyof T = keyof T & string>(sortedList: [number, keyof T][], value: BreakPointComparison<K>, width: number): boolean;
+export declare function findBreakpoint<T extends Breakpoints>(sortedList: [number, keyof T][], width: number): keyof T;
+export interface WithBreakpointOptions<T extends Breakpoints> {
+    breakpoints: T;
+    mode?: 'element' | 'viewport';
+}
+export declare function WithBreakpoint<T extends Breakpoints>(fn: (info: BreakpointInfo<T>) => TNode, { breakpoints, mode }: WithBreakpointOptions<T>): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+export type TWBreakpoints = {
+    zero: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export type TWBreakpoint = keyof TWBreakpoints;
+export declare function WithTWBreakpoint(fn: (info: BreakpointInfo<TWBreakpoints>) => TNode): import("@tempots/dom").Renderable;
+export type TWElementBreakpoints = {
+    zero: number;
+    '3xs': number;
+    '2xs': number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    '5xl': number;
+    '6xl': number;
+};
+export declare function WithTWElementBreakpoint(fn: (info: BreakpointInfo<TWElementBreakpoints>) => TNode): import("@tempots/dom").Renderable;

package/dist/types/components/misc/expando.d.ts

@@ -0,0 +1,4 @@
+import { Renderable, Value } from '@tempots/dom';
+export declare const Expando: <T>(name: string, value: Value<T>) => Renderable;
+export declare const emitExpando: <T>(name: string, fn: (text: T) => void) => (event: Event) => void;
+export declare const emitOptionExpando: <T>(name: string, fn: (text: T) => void) => (event: Event) => void;

package/dist/types/components/misc/index.d.ts

@@ -0,0 +1 @@
+export * from './expando';

package/dist/types/components/overlay/index.d.ts

@@ -0,0 +1 @@
+export * from './overlay';

package/dist/types/components/overlay/overlay.d.ts

@@ -0,0 +1,14 @@
+import { BrowserContext, TNode } from '@tempots/dom';
+import { OverlayEffect } from '../theme/types';
+export type OverlayOptions = {
+    effect?: OverlayEffect;
+    mode: 'capturing';
+    onClickOutside?: () => void;
+    onEscape?: () => void;
+} | {
+    effect?: OverlayEffect;
+    mode: 'non-capturing';
+};
+export declare function makeOverlay(ctx: BrowserContext): ({ effect, ...rest }: OverlayOptions, fnNode: (close: () => void) => TNode) => () => void;
+export declare function OverlayElement(options: OverlayOptions, fn: (open: (renderFn: (close: () => void) => TNode) => void) => TNode): TNode;
+export declare function OverlayBody(options: OverlayOptions, fn: (open: (renderFn: (close: () => void) => TNode) => void) => TNode): TNode;

package/dist/types/components/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './theme';

package/dist/types/components/theme/theme.d.ts

@@ -0,0 +1,5 @@
+import { Provider } from '@tempots/dom';
+import '../../styles/index.css';
+import { ThemeValue } from './types';
+export declare const Theme: Provider<ThemeValue, object>;
+export declare const ThemeAppeareance: () => import("@tempots/dom").Renderable;

package/dist/types/components/theme/types.d.ts

@@ -0,0 +1,110 @@
+import { BackgroundColorName, ThemeColorName } from '@/tokens';
+import { RadiusName } from '@/tokens/radius';
+import { Signal } from '@tempots/dom';
+export type ButtonVariant = 'filled' | 'light' | 'outline' | 'default' | 'text';
+export type ControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type OverlayEffect = 'transparent' | 'visible';
+export type OverlayMode = 'capturing' | 'non-capturing';
+export type FadeTranstionState = 'initial' | 'entering' | 'entered' | 'exiting' | 'exited';
+export type Side = 'left' | 'right' | 'top' | 'bottom' | 'none' | 'all' | ('left' | 'right' | 'top' | 'bottom')[];
+export type PanelColor = BackgroundColorName | ThemeColorName | 'white' | 'black' | 'transparent';
+export type PanelShadow = 'none' | 'sm' | 'md' | 'lg';
+export type LabelType = 'emphasis' | 'default' | 'muted' | 'error';
+export type JustifyContent = 'flex-start' | 'flex-end' | 'safe flex-end' | 'center' | 'safe center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'normal';
+export type JustifyItems = 'start' | 'end' | 'safe end' | 'center' | 'safe center' | 'stretch' | 'normal';
+export type JustifySelf = 'auto' | 'start' | 'center' | 'safe center' | 'end' | 'safe end' | 'stretch';
+export type AlignContent = 'normal' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch';
+export type AlignItems = 'flex-start' | 'flex-end' | 'safe flex-end' | 'center' | 'safe-center' | 'baseline' | 'last-baseline' | 'stretch';
+export type AlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'safe flex-end' | 'center' | 'safe center' | 'stretch' | 'baseline' | 'last baseline';
+export type ButtonStyleOptions = {
+    variant: ButtonVariant;
+    size: ControlSize;
+    color: string;
+    roundedness: RadiusName;
+};
+export type OverlayStyleOptions = {
+    effect: OverlayEffect;
+    mode: OverlayMode;
+};
+export type PanelStyleOptions = {
+    side: Side;
+    color: PanelColor;
+    shadow: PanelShadow;
+};
+export type LabelStyleOptions = {
+    type: LabelType;
+};
+export type IconStyleOptions = {
+    size: IconSize;
+    color?: string;
+};
+export type InputContainerStyleOptions = {
+    disabled?: boolean;
+    hasError?: boolean;
+};
+export type ControlInputWrapperStyleOptions = {
+    hasError?: boolean;
+    disabled?: boolean;
+};
+export type TagStyleOptions = {
+    disabled?: boolean;
+    color?: string;
+};
+export type CheckboxInputStyleOptions = {
+    disabled?: boolean;
+};
+export type EditableTextStyleOptions = {
+    isEditing?: boolean;
+};
+export type NumberInputStyleOptions = {
+    disabled?: boolean;
+};
+export type FadeInOutStyleOptions = {
+    state: FadeTranstionState;
+};
+export type CardVariant = 'default' | 'elevated' | 'flat' | 'outlined';
+export type CardStyleOptions = {
+    variant?: CardVariant;
+    size?: ControlSize;
+    roundedness?: RadiusName;
+};
+export type CenterGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CenterStyleOptions = {
+    gap?: CenterGap;
+};
+export type SinkVariant = 'default' | 'deep' | 'shallow' | 'flat';
+export type SinkStyleOptions = {
+    variant?: SinkVariant;
+    size?: ControlSize;
+    roundedness?: RadiusName;
+};
+export type SegmentedControlStyleOptions = {
+    size?: ControlSize;
+};
+export interface ThemeDefinition {
+    button: (options: ButtonStyleOptions) => string;
+    overlay: (options: OverlayStyleOptions) => string;
+    icon: (options: IconStyleOptions) => string;
+    panel: (options: PanelStyleOptions) => string;
+    label: (options: LabelStyleOptions) => string;
+    inputContainer: (options: InputContainerStyleOptions) => string;
+    controlInputWrapper: (options: ControlInputWrapperStyleOptions) => string;
+    controlInputWrapperLabelText: (options: ControlInputWrapperStyleOptions) => string;
+    tag: (options: TagStyleOptions) => string;
+    checkboxInput: (options: CheckboxInputStyleOptions) => string;
+    editableText: (options: EditableTextStyleOptions) => string;
+    numberInput: (options: NumberInputStyleOptions) => string;
+    card: (options: CardStyleOptions) => string;
+    center: (options: CenterStyleOptions) => string;
+    sink: (options: SinkStyleOptions) => string;
+    segmentedControl: (options: SegmentedControlStyleOptions) => string;
+}
+export type AppearancePreference = 'light' | 'dark' | 'system';
+export type Appearance = 'light' | 'dark';
+export interface ThemeValue {
+    setAppearancePreference: (appearance: AppearancePreference) => void;
+    appearancePreference: Signal<AppearancePreference>;
+    appearance: Signal<Appearance>;
+    theme: ThemeDefinition;
+}

package/dist/types/components/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './label';

package/dist/types/components/typography/label.d.ts

@@ -0,0 +1,5 @@
+import { TNode } from '@tempots/dom';
+export declare const EmphasisLabel: (...children: TNode[]) => import("@tempots/dom").Renderable;
+export declare const Label: (...children: TNode[]) => import("@tempots/dom").Renderable;
+export declare const MutedLabel: (...children: TNode[]) => import("@tempots/dom").Renderable;
+export declare const ErrorLabel: (...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/index.d.ts

@@ -0,0 +1,9 @@
+export { Use } from '@tempots/dom';
+export * from './components/button';
+export * from './components/data';
+export * from './components/form';
+export * from './components/layout';
+export * from './components/misc';
+export * from './components/overlay';
+export * from './components/theme';
+export * from './components/typography';

package/dist/types/theme/beatui-theme.d.ts

@@ -0,0 +1,19 @@
+import { ButtonStyleOptions, CardStyleOptions, CenterStyleOptions, CheckboxInputStyleOptions, ControlInputWrapperStyleOptions, EditableTextStyleOptions, IconStyleOptions, InputContainerStyleOptions, LabelStyleOptions, NumberInputStyleOptions, OverlayStyleOptions, PanelStyleOptions, SegmentedControlStyleOptions, SinkStyleOptions, TagStyleOptions, ThemeDefinition } from '@/components/theme';
+export declare class BeatUITheme implements ThemeDefinition {
+    button({ variant, size, color, roundedness }: ButtonStyleOptions): string;
+    overlay({ effect, mode }: OverlayStyleOptions): string;
+    icon({ size, color }: IconStyleOptions): string;
+    panel({ side, color, shadow }: PanelStyleOptions): string;
+    label(options: LabelStyleOptions): string;
+    inputContainer({ disabled, hasError }: InputContainerStyleOptions): string;
+    controlInputWrapper(_options?: ControlInputWrapperStyleOptions): string;
+    controlInputWrapperLabelText({ hasError, disabled, }: ControlInputWrapperStyleOptions): string;
+    tag({ disabled, color }: TagStyleOptions): string;
+    checkboxInput(_options: CheckboxInputStyleOptions): string;
+    editableText(_options: EditableTextStyleOptions): string;
+    numberInput(_options: NumberInputStyleOptions): string;
+    card({ variant, size, roundedness, }: CardStyleOptions): string;
+    center({ gap }: CenterStyleOptions): string;
+    sink({ variant, size, roundedness, }: SinkStyleOptions): string;
+    segmentedControl({ size }: SegmentedControlStyleOptions): string;
+}