@logicplanes/kaeso-ui 0.1.0

package/dist/types/components/empty/docs.d.ts

@@ -0,0 +1,12 @@
+export declare const docs: {
+    Empty: {
+        description: string;
+        props: {
+            actions: string;
+            children: string;
+            description: string;
+            size: string;
+            title: string;
+        };
+    };
+};

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

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export declare const KAESO_EMPTY_VARIANTS: {
+    readonly size: {
+        readonly lg: {
+            readonly classes: "py-80 gap-16";
+            readonly description: "Centered in a panel (default)";
+        };
+        readonly md: {
+            readonly classes: "py-48 gap-12";
+            readonly description: "Inside a section";
+        };
+        readonly compact: {
+            readonly classes: "py-32 gap-8";
+            readonly description: "Inside tables and lists";
+        };
+    };
+};
+export declare const KAESO_EMPTY_DEFAULT_VARIANTS: {
+    readonly size: "lg";
+};
+export interface EmptyProps {
+    title: ReactNode;
+    description?: ReactNode | undefined;
+    actions?: ReactNode | undefined;
+    size?: keyof typeof KAESO_EMPTY_VARIANTS.size | undefined;
+    children?: ReactNode | undefined;
+    className?: string | undefined;
+}
+export declare const Empty: import("react").ForwardRefExoticComponent<EmptyProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export * from "./empty.js";

package/dist/types/components/field/docs.d.ts

@@ -0,0 +1,20 @@
+export declare const docs: {
+    Field: {
+        description: string;
+        props: {
+            description: string;
+            error: string;
+            id: string;
+            invalid: string;
+            label: string;
+            required: string;
+        };
+    };
+    Fieldset: {
+        description: string;
+        props: {
+            description: string;
+            legend: string;
+        };
+    };
+};

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

@@ -0,0 +1,78 @@
+import { type FieldsetHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+export declare const KAESO_FIELD_VARIANTS: {
+    readonly layout: {
+        readonly vertical: {
+            readonly classes: "flex flex-col gap-8";
+            readonly description: "Label above the control (default)";
+        };
+        readonly horizontal: {
+            readonly classes: "grid grid-cols-1 gap-8 md:grid-cols-label md:gap-x-24";
+            readonly description: "Label in a 240px column on the left, from 768px";
+        };
+    };
+};
+export declare const KAESO_FIELD_DEFAULT_VARIANTS: {
+    readonly layout: "vertical";
+};
+export interface FieldContextValue {
+    controlId: string;
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    errorId: string | undefined;
+    invalid: boolean;
+    disabled: boolean;
+    required: boolean;
+    controlProps: {
+        id: string;
+        "aria-describedby"?: string | undefined;
+        "aria-invalid"?: true | undefined;
+        "aria-required"?: true | undefined;
+    };
+}
+export declare const useField: () => FieldContextValue | null;
+export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    label?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    invalid?: boolean | undefined;
+    error?: ReactNode | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    layout?: keyof typeof KAESO_FIELD_VARIANTS.layout | undefined;
+    id?: string | undefined;
+    children: ReactNode;
+}
+export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    legend: ReactNode;
+    description?: ReactNode | undefined;
+}
+export declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export declare function useFieldControl(props: {
+    label?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    error?: ReactNode | undefined;
+    invalid?: boolean | undefined;
+    required?: boolean | undefined;
+    id?: string | undefined;
+}): {
+    controlProps: Record<string, unknown>;
+    wrapId: undefined;
+} | {
+    controlProps: Record<string, unknown>;
+    wrapId: string;
+};
+export interface FieldWrapProps {
+    label?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    error?: ReactNode | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    layout?: keyof typeof KAESO_FIELD_VARIANTS.layout | undefined;
+}
+export declare function withField(props: FieldWrapProps & {
+    id?: string | undefined;
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    className?: string | undefined;
+}, control: ReactNode): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;

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

@@ -0,0 +1 @@
+export * from "./field.js";

package/dist/types/components/filter-chip/docs.d.ts

@@ -0,0 +1,19 @@
+export declare const docs: {
+    FilterChip: {
+        description: string;
+        props: {
+            defaultValuesOpen: string;
+            multiple: string;
+            onOperatorChange: string;
+            onRemove: string;
+            onSelectedChange: string;
+            operator: string;
+            operators: string;
+            property: string;
+            propertyIcon: string;
+            selected: string;
+            value: string;
+            values: string;
+        };
+    };
+};

package/dist/types/components/filter-chip/filter-chip.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import { type IconData } from "../icon/icon.js";
+export declare const KAESO_FILTER_CHIP_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "h-32 text-body";
+            readonly description: "32px: toolbars (default)";
+        };
+    };
+};
+export declare const KAESO_FILTER_CHIP_DEFAULT_VARIANTS: {
+    readonly size: "sm";
+};
+export interface FilterChipChoice {
+    value: string;
+    label: ReactNode;
+    icon?: IconData | undefined;
+    leading?: ReactNode | undefined;
+    textValue?: string | undefined;
+}
+export interface FilterChipProps {
+    property: ReactNode;
+    propertyIcon?: IconData | undefined;
+    operator: string;
+    operators?: string[] | undefined;
+    onOperatorChange?: ((operator: string) => void) | undefined;
+    value: ReactNode;
+    values?: FilterChipChoice[] | undefined;
+    selected?: string[] | undefined;
+    multiple?: boolean | undefined;
+    onSelectedChange?: ((selected: string[]) => void) | undefined;
+    onRemove?: (() => void) | undefined;
+    defaultValuesOpen?: boolean | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const FilterChip: import("react").ForwardRefExoticComponent<FilterChipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter-chip/index.d.ts

@@ -0,0 +1 @@
+export * from "./filter-chip.js";

package/dist/types/components/filter-row/docs.d.ts

@@ -0,0 +1,11 @@
+export declare const docs: {
+    FilterRow: {
+        description: string;
+        props: {
+            children: string;
+            filtersLabel: string;
+            size: string;
+            tabs: string;
+        };
+    };
+};

package/dist/types/components/filter-row/filter-row.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export declare const KAESO_FILTER_ROW_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "px-24 py-8";
+            readonly description: "Under a page header on an edge-to-edge page: 24px sides, 48px tall on one line like a toolbar";
+        };
+        readonly inset: {
+            readonly classes: "pt-16 pb-16";
+            readonly description: "In a settings column: 24px under the header (with the column's 8px), 16px above the list or table (chosen automatically)";
+        };
+    };
+};
+export declare const KAESO_FILTER_ROW_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface FilterRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    tabs?: ReactNode | undefined;
+    children?: ReactNode | undefined;
+    filtersLabel?: string | undefined;
+    size?: keyof typeof KAESO_FILTER_ROW_VARIANTS.size | undefined;
+}
+export declare const FilterRow: import("react").ForwardRefExoticComponent<FilterRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter-row/index.d.ts

@@ -0,0 +1 @@
+export * from "./filter-row.js";

package/dist/types/components/flow/docs.d.ts

@@ -0,0 +1,12 @@
+export declare const docs: {
+    Flow: {
+        description: string;
+        props: {
+            animated: string;
+            "aria-label": string;
+            columns: string;
+            edges: string;
+            node: string;
+        };
+    };
+};

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

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import { type IconData } from "../icon/icon.js";
+export declare const KAESO_FLOW_VARIANTS: {
+    readonly node: {
+        readonly pill: {
+            readonly classes: "h-36 rounded-pill px-14";
+            readonly description: "A raised pill (default)";
+        };
+        readonly box: {
+            readonly classes: "min-h-56 rounded-well px-16 py-10";
+            readonly description: "A rounded-14 box with a description line";
+        };
+    };
+};
+export declare const KAESO_FLOW_DEFAULT_VARIANTS: {
+    readonly node: "pill";
+};
+export interface FlowNode {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode | undefined;
+    icon?: IconData | undefined;
+    leading?: ReactNode | undefined;
+    emphasis?: boolean | undefined;
+}
+export interface FlowProps {
+    columns: FlowNode[][];
+    edges: [string, string][];
+    node?: keyof typeof KAESO_FLOW_VARIANTS.node | undefined;
+    animated?: boolean | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+}
+export declare const Flow: import("react").ForwardRefExoticComponent<FlowProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export * from "./flow.js";

package/dist/types/components/heading/docs.d.ts

@@ -0,0 +1,10 @@
+export declare const docs: {
+    Heading: {
+        description: string;
+        props: {
+            balance: string;
+            level: string;
+            size: string;
+        };
+    };
+};

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

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from "react";
+export declare const KAESO_HEADING_VARIANTS: {
+    readonly size: {
+        readonly "title-sm": {
+            readonly classes: "text-title-sm font-semibold";
+            readonly description: "17/24: section, dialog and sheet titles";
+        };
+        readonly title: {
+            readonly classes: "text-title font-semibold";
+            readonly description: "20/28: empty states, compact page titles";
+        };
+        readonly "title-lg": {
+            readonly classes: "text-title-lg font-semibold";
+            readonly description: "28/34: settings page titles, auth screens";
+        };
+        readonly display: {
+            readonly classes: "text-display font-semibold";
+            readonly description: "40/44: showcase headings, the setup screen";
+        };
+    };
+};
+export declare const KAESO_HEADING_DEFAULT_VARIANTS: {
+    readonly size: "title-sm";
+};
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    size?: keyof typeof KAESO_HEADING_VARIANTS.size | undefined;
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    balance?: boolean | undefined;
+}
+export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;

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

@@ -0,0 +1 @@
+export * from "./heading.js";

package/dist/types/components/icon/docs.d.ts

@@ -0,0 +1,10 @@
+export declare const docs: {
+    Icon: {
+        description: string;
+        props: {
+            icon: string;
+            label: string;
+            size: string;
+        };
+    };
+};

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

@@ -0,0 +1,37 @@
+import { type SVGAttributes } from "react";
+import { type IconSvgElement } from "@hugeicons/react";
+export type IconData = IconSvgElement;
+export declare const KAESO_ICON_VARIANTS: {
+    readonly size: {
+        readonly xs: {
+            readonly classes: "size-14";
+            readonly description: "14px, 1.75 stroke: chips, xs controls, inline hints";
+        };
+        readonly sm: {
+            readonly classes: "size-16";
+            readonly description: "16px, 1.5 stroke: the default in controls and menus";
+        };
+        readonly md: {
+            readonly classes: "size-18";
+            readonly description: "18px, 1.5 stroke: sidebar items, lg controls";
+        };
+        readonly lg: {
+            readonly classes: "size-20";
+            readonly description: "20px, 1.5 stroke: xl controls, empty states";
+        };
+        readonly xl: {
+            readonly classes: "size-24";
+            readonly description: "24px, 1.5 stroke: rare, large moments";
+        };
+    };
+};
+export declare const KAESO_ICON_DEFAULT_VARIANTS: {
+    readonly size: "sm";
+};
+export type IconSize = keyof typeof KAESO_ICON_VARIANTS.size;
+export interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, "children" | "strokeWidth" | "color"> {
+    icon: IconData;
+    size?: IconSize | undefined;
+    label?: string | undefined;
+}
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./icon.js";
+export { icons, type IconName } from "../../icons/vocabulary.js";

package/dist/types/components/icon-button/docs.d.ts

@@ -0,0 +1,17 @@
+export declare const docs: {
+    IconButton: {
+        description: string;
+        props: {
+            "aria-label": string;
+            disabledReason: string;
+            href: string;
+            icon: string;
+            loading: string;
+            shortcut: string;
+            size: string;
+            tooltip: string;
+            tooltipSide: string;
+            variant: string;
+        };
+    };
+};

package/dist/types/components/icon-button/icon-button.d.ts

@@ -0,0 +1,75 @@
+import type * as React from "react";
+import { type ButtonSize, type ButtonVariant } from "../button/button.js";
+import type { IconData } from "../icon/icon.js";
+export declare const KAESO_ICON_BUTTON_VARIANTS: {
+    readonly variant: {
+        readonly ghost: {
+            readonly classes: "material-ghost";
+            readonly description: "Toolbar and row actions (default)";
+        };
+        readonly quiet: {
+            readonly classes: "material-ghost text-fg-secondary hover:text-fg";
+            readonly description: "Secondary text that darkens on hover: inside fields";
+        };
+        readonly secondary: {
+            readonly classes: "material-secondary";
+            readonly description: "Raised circles with a ring: page-header buttons";
+        };
+        readonly soft: {
+            readonly classes: "material-soft";
+            readonly description: "A filled circle";
+        };
+        readonly primary: {
+            readonly classes: "material-primary";
+            readonly description: "The view's one primary action, as an icon";
+        };
+        readonly danger: {
+            readonly classes: "material-danger";
+            readonly description: "Destructive";
+        };
+        readonly "danger-secondary": {
+            readonly classes: "material-danger-secondary";
+            readonly description: "Destructive, quieter";
+        };
+    };
+    readonly size: {
+        readonly xs: {
+            readonly classes: "size-24";
+            readonly description: "24px circle: inside rows and chips";
+        };
+        readonly sm: {
+            readonly classes: "size-32";
+            readonly description: "32px circle: toolbars and headers (default)";
+        };
+        readonly md: {
+            readonly classes: "size-36";
+            readonly description: "36px circle: beside md controls";
+        };
+        readonly lg: {
+            readonly classes: "size-40";
+            readonly description: "40px circle";
+        };
+        readonly xl: {
+            readonly classes: "size-48";
+            readonly description: "48px circle";
+        };
+    };
+};
+export declare const KAESO_ICON_BUTTON_DEFAULT_VARIANTS: {
+    readonly variant: "ghost";
+    readonly size: "sm";
+};
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    icon: IconData;
+    "aria-label": string;
+    variant?: Exclude<ButtonVariant, "link"> | undefined;
+    size?: ButtonSize | undefined;
+    shortcut?: string[] | string[][] | undefined;
+    tooltip?: boolean | undefined;
+    tooltipSide?: "top" | "bottom" | "left" | "right" | undefined;
+    loading?: boolean | undefined;
+    disabledReason?: string | undefined;
+    href?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/icon-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./icon-button.js";

package/dist/types/components/input/decimal.d.ts

@@ -0,0 +1,11 @@
+export declare function isDecimal(v: string): boolean;
+export declare function addDecimal(a: string, b: string): string;
+export declare function compareDecimal(a: string, b: string): number;
+export interface DecimalSeparators {
+    group: string;
+    decimal: string;
+}
+export declare function decimalSeparators(locale: string): DecimalSeparators;
+export declare function groupDecimal(v: string, seps?: DecimalSeparators): string;
+export declare function localizeDecimal(v: string, seps?: DecimalSeparators): string;
+export declare function ungroup(v: string, seps?: DecimalSeparators): string;

package/dist/types/components/input/docs.d.ts

@@ -0,0 +1,149 @@
+export declare const docs: {
+    Input: {
+        description: string;
+        props: {
+            align: string;
+            description: string;
+            invalid: string;
+            label: string;
+            layout: string;
+            leadingIcon: string;
+            optional: string;
+            prefix: string;
+            size: string;
+            suffix: string;
+            trailing: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    InputGroup: {
+        description: string;
+        props: {
+            disabled: string;
+            invalid: string;
+            leadingIcon: string;
+            readOnly: string;
+            size: string;
+            trailingButton: string;
+        };
+    };
+    NumberInput: {
+        description: string;
+        props: {
+            align: string;
+            defaultValue: string;
+            description: string;
+            hideStepper: string;
+            invalid: string;
+            label: string;
+            layout: string;
+            leadingIcon: string;
+            max: string;
+            min: string;
+            onValueChange: string;
+            optional: string;
+            prefix: string;
+            size: string;
+            step: string;
+            suffix: string;
+            trailing: string;
+            unit: string;
+            value: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    OTPInput: {
+        description: string;
+        props: {
+            defaultValue: string;
+            invalid: string;
+            length: string;
+            onComplete: string;
+            onValueChange: string;
+            size: string;
+            value: string;
+        };
+    };
+    SearchInput: {
+        description: string;
+        props: {
+            align: string;
+            description: string;
+            invalid: string;
+            label: string;
+            layout: string;
+            onClear: string;
+            optional: string;
+            placeholder: string;
+            shortcut: string;
+            size: string;
+            trailing: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    SensitiveInput: {
+        description: string;
+        props: {
+            align: string;
+            defaultRevealed: string;
+            description: string;
+            invalid: string;
+            kind: string;
+            label: string;
+            layout: string;
+            leadingIcon: string;
+            optional: string;
+            prefix: string;
+            size: string;
+            suffix: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    TagInput: {
+        description: string;
+        props: {
+            "aria-label": string;
+            defaultValue: string;
+            description: string;
+            disabled: string;
+            id: string;
+            label: string;
+            layout: string;
+            name: string;
+            onValueChange: string;
+            optional: string;
+            placeholder: string;
+            required: string;
+            separators: string;
+            validate: string;
+            value: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    Textarea: {
+        description: string;
+        props: {
+            description: string;
+            invalid: string;
+            label: string;
+            layout: string;
+            maxRows: string;
+            mono: string;
+            optional: string;
+            resize: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+};

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

@@ -0,0 +1,8 @@
+export * from "./input.js";
+export * from "./input-group.js";
+export * from "./sensitive-input.js";
+export * from "./number-input.js";
+export * from "./textarea.js";
+export * from "./otp-input.js";
+export * from "./tag-input.js";
+export { addDecimal, compareDecimal, groupDecimal } from "./decimal.js";