@logicplanes/kaeso-ui 0.1.0

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

@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+export declare const KAESO_AVATAR_VARIANTS: {
+    readonly size: {
+        readonly 20: {
+            readonly classes: "size-20 text-micro";
+            readonly description: "20px";
+        };
+        readonly 24: {
+            readonly classes: "size-24 text-micro";
+            readonly description: "24px: rows and the org switcher (default)";
+        };
+        readonly 28: {
+            readonly classes: "size-28 text-caption";
+            readonly description: "28px";
+        };
+        readonly 32: {
+            readonly classes: "size-32 text-caption";
+            readonly description: "32px";
+        };
+        readonly 40: {
+            readonly classes: "size-40 text-body";
+            readonly description: "40px: menus, profiles";
+        };
+    };
+    readonly kind: {
+        readonly person: {
+            readonly classes: "rounded-pill";
+            readonly description: "People are round";
+        };
+        readonly org: {
+            readonly classes: "rounded-org";
+            readonly description: "Organizations and projects: radius 8";
+        };
+    };
+};
+export declare const KAESO_AVATAR_DEFAULT_VARIANTS: {
+    readonly size: 24;
+    readonly kind: "person";
+};
+export declare function initials(name: string, max?: 1 | 2): string;
+export interface AvatarProps {
+    name: string;
+    src?: string | undefined;
+    size?: keyof typeof KAESO_AVATAR_VARIANTS.size | undefined;
+    kind?: keyof typeof KAESO_AVATAR_VARIANTS.kind | undefined;
+    decorative?: boolean | undefined;
+    className?: string | undefined;
+}
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps {
+    people: {
+        name: string;
+        src?: string | undefined;
+    }[];
+    size?: keyof typeof KAESO_AVATAR_VARIANTS.size | undefined;
+    max?: number | undefined;
+    className?: string | undefined;
+    children?: ReactNode | undefined;
+}
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+export declare const docs: {
+    Avatar: {
+        description: string;
+        props: {
+            decorative: string;
+            kind: string;
+            name: string;
+            size: string;
+            src: string;
+        };
+    };
+    AvatarGroup: {
+        description: string;
+        props: {
+            children: string;
+            max: string;
+            people: string;
+            size: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export declare const KAESO_BADGE_VARIANTS: {
+    readonly tone: {
+        readonly neutral: {
+            readonly classes: "bg-fill-2 text-fg-secondary";
+            readonly description: "Neutral (default)";
+        };
+        readonly success: {
+            readonly classes: "bg-success-tint text-success-text";
+            readonly description: "Success";
+        };
+        readonly warning: {
+            readonly classes: "bg-warning-tint text-warning-text";
+            readonly description: "Warning";
+        };
+        readonly danger: {
+            readonly classes: "bg-danger-tint text-danger-text";
+            readonly description: "Danger";
+        };
+        readonly info: {
+            readonly classes: "bg-info-tint text-info-text";
+            readonly description: "Information";
+        };
+        readonly outline: {
+            readonly classes: "bg-transparent text-fg-secondary shadow-ring";
+            readonly description: "A ring only";
+        };
+        readonly ink: {
+            readonly classes: "bg-ink text-on-ink";
+            readonly description: "Inverted, for the one thing that must stand out";
+        };
+    };
+};
+export declare const KAESO_BADGE_DEFAULT_VARIANTS: {
+    readonly tone: "neutral";
+};
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: keyof typeof KAESO_BADGE_VARIANTS.tone | undefined;
+    children: ReactNode;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,9 @@
+export declare const docs: {
+    Badge: {
+        description: string;
+        props: {
+            children: string;
+            tone: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { type IconData } from "../icon/icon.js";
+export declare const KAESO_BANNER_VARIANTS: {
+    readonly tone: {
+        readonly neutral: {
+            readonly classes: "bg-fill-1 text-fg";
+            readonly description: "A neutral notice (default)";
+        };
+        readonly info: {
+            readonly classes: "bg-info-tint text-fg";
+            readonly description: "Information";
+        };
+        readonly success: {
+            readonly classes: "bg-success-tint text-fg";
+            readonly description: "Something worked";
+        };
+        readonly warning: {
+            readonly classes: "bg-warning-tint text-fg";
+            readonly description: "Attention needed soon";
+        };
+        readonly danger: {
+            readonly classes: "bg-danger-tint text-fg";
+            readonly description: "Something failed or will fail";
+        };
+    };
+    readonly layout: {
+        readonly inline: {
+            readonly classes: "rounded-well px-16 py-12";
+            readonly description: "Inside content: radius 14 (default)";
+        };
+        readonly full: {
+            readonly classes: "rounded-none px-24 py-10";
+            readonly description: "Across the top of the panel for global notices";
+        };
+    };
+};
+export declare const KAESO_BANNER_DEFAULT_VARIANTS: {
+    readonly tone: "neutral";
+    readonly layout: "inline";
+};
+export interface BannerProps {
+    tone?: keyof typeof KAESO_BANNER_VARIANTS.tone | undefined;
+    layout?: keyof typeof KAESO_BANNER_VARIANTS.layout | undefined;
+    title?: ReactNode | undefined;
+    children?: ReactNode | undefined;
+    icon?: IconData | undefined;
+    actions?: ReactNode | undefined;
+    onDismiss?: (() => void) | undefined;
+    className?: string | undefined;
+}
+export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,14 @@
+export declare const docs: {
+    Banner: {
+        description: string;
+        props: {
+            actions: string;
+            children: string;
+            icon: string;
+            layout: string;
+            onDismiss: string;
+            title: string;
+            tone: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,116 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type IconData, type IconSize } from "../icon/icon.js";
+export declare const KAESO_BUTTON_VARIANTS: {
+    readonly variant: {
+        readonly primary: {
+            readonly classes: "material-primary";
+            readonly description: "Ink with a faint top light. Exactly one per view.";
+        };
+        readonly secondary: {
+            readonly classes: "material-secondary";
+            readonly description: "Raised, ring and a soft shadow. The default.";
+        };
+        readonly ghost: {
+            readonly classes: "material-ghost";
+            readonly description: "Transparent until hovered: toolbars, rows, quiet actions";
+        };
+        readonly quiet: {
+            readonly classes: "material-ghost text-fg-secondary hover:text-fg";
+            readonly description: "A ghost in secondary text that darkens on hover: actions inside a field (clear, reveal, copy)";
+        };
+        readonly soft: {
+            readonly classes: "material-soft";
+            readonly description: "A fill without a ring: the active pill tab";
+        };
+        readonly danger: {
+            readonly classes: "material-danger";
+            readonly description: "The destructive confirm, with the primary's material";
+        };
+        readonly "danger-secondary": {
+            readonly classes: "material-danger-secondary";
+            readonly description: "Raised with danger text; tints on hover. Destructive triggers.";
+        };
+        readonly link: {
+            readonly classes: "bg-transparent text-fg underline decoration-line-strong decoration-1 underline-offset-3 hover:decoration-current disabled:text-fg-disabled";
+            readonly description: "Text with an underline, for actions inside sentences";
+        };
+    };
+    readonly size: {
+        readonly xs: {
+            readonly classes: "h-24 px-10 gap-4 text-caption font-medium";
+            readonly description: "24px: chips inside rows and tables only";
+        };
+        readonly sm: {
+            readonly classes: "h-32 px-12 gap-6 text-body font-medium";
+            readonly description: "32px: toolbars, headers, settings rows";
+        };
+        readonly md: {
+            readonly classes: "h-36 px-16 gap-6 text-body font-medium";
+            readonly description: "36px: the default";
+        };
+        readonly lg: {
+            readonly classes: "h-40 px-18 gap-8 text-body font-medium";
+            readonly description: "40px: prominent actions";
+        };
+        readonly xl: {
+            readonly classes: "h-48 px-22 gap-8 text-body-lg font-medium";
+            readonly description: "48px: sign-in and setup forms, empty-state actions";
+        };
+    };
+    readonly shape: {
+        readonly pill: {
+            readonly classes: "rounded-pill";
+            readonly description: "Every button is a pill";
+        };
+        readonly circle: {
+            readonly classes: "rounded-pill p-0 justify-center";
+            readonly description: "Icon-only: a circle of the same height";
+        };
+    };
+};
+export declare const KAESO_BUTTON_DEFAULT_VARIANTS: {
+    readonly variant: "secondary";
+    readonly size: "md";
+    readonly shape: "pill";
+};
+export type ButtonVariant = keyof typeof KAESO_BUTTON_VARIANTS.variant;
+export type ButtonSize = keyof typeof KAESO_BUTTON_VARIANTS.size;
+export type ButtonShape = keyof typeof KAESO_BUTTON_VARIANTS.shape;
+export declare const BUTTON_ICON_SIZE: Record<ButtonSize, IconSize>;
+export declare function buttonClasses({ variant, size, shape, leading, trailing, fullWidth, }?: {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    shape?: ButtonShape | undefined;
+    leading?: boolean | undefined;
+    trailing?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+}): string;
+interface CommonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    loading?: boolean | undefined;
+    disabledReason?: string | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    fullWidth?: boolean | undefined;
+    "data-force"?: string | undefined;
+}
+export interface PillButtonProps extends CommonProps {
+    shape?: "pill" | undefined;
+    children: ReactNode;
+    leadingIcon?: IconData | undefined;
+    trailingIcon?: IconData | undefined;
+    shortcut?: string[] | string[][] | undefined;
+    count?: number | undefined;
+    reserveLabels?: ReactNode[] | undefined;
+}
+export interface CircleButtonProps extends CommonProps {
+    shape: "circle";
+    icon: IconData;
+    "aria-label": string;
+    children?: never | undefined;
+}
+export type ButtonProps = PillButtonProps | CircleButtonProps;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,23 @@
+export declare const docs: {
+    Button: {
+        description: string;
+        props: {
+            children: string;
+            count: string;
+            disabledReason: string;
+            fullWidth: string;
+            href: string;
+            icon: string;
+            leadingIcon: string;
+            loading: string;
+            rel: string;
+            reserveLabels: string;
+            shape: string;
+            shortcut: string;
+            size: string;
+            target: string;
+            trailingIcon: string;
+            variant: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,55 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { type IconData } from "../icon/icon.js";
+import { type ButtonSize } from "../button/button.js";
+export declare const KAESO_BUTTON_GROUP_VARIANTS: {
+    readonly attached: {
+        readonly true: {
+            readonly classes: "inline-flex rounded-pill bg-raised ring-over isolate";
+            readonly description: "Connected: one outer pill with inner hairline dividers (default)";
+        };
+        readonly false: {
+            readonly classes: "inline-flex gap-8";
+            readonly description: "Spaced: separate pills 8px apart";
+        };
+    };
+    readonly size: {
+        readonly xs: {
+            readonly classes: "";
+            readonly description: "24px";
+        };
+        readonly sm: {
+            readonly classes: "";
+            readonly description: "32px";
+        };
+        readonly md: {
+            readonly classes: "";
+            readonly description: "36px (default)";
+        };
+        readonly lg: {
+            readonly classes: "";
+            readonly description: "40px";
+        };
+    };
+};
+export declare const KAESO_BUTTON_GROUP_DEFAULT_VARIANTS: {
+    readonly attached: "true";
+    readonly size: "md";
+};
+type GroupSize = Exclude<ButtonSize, "xl">;
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    size?: GroupSize | undefined;
+    attached?: boolean | undefined;
+    "aria-label"?: string | undefined;
+    children: ReactNode;
+}
+export interface ButtonGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    children?: ReactNode | undefined;
+    icon?: IconData | undefined;
+    "aria-label"?: string | undefined;
+    pressed?: boolean | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<ButtonGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

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

@@ -0,0 +1,11 @@
+export declare const docs: {
+    ButtonGroup: {
+        description: string;
+        props: {
+            "aria-label": string;
+            attached: string;
+            children: string;
+            size: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,32 @@
+import { type DateRange } from "react-day-picker";
+export declare const KAESO_CALENDAR_VARIANTS: {
+    readonly mode: {
+        readonly single: {
+            readonly classes: "";
+            readonly description: "One date (default)";
+        };
+        readonly range: {
+            readonly classes: "";
+            readonly description: "A range: a continuous strip between ink ends";
+        };
+    };
+};
+export declare const KAESO_CALENDAR_DEFAULT_VARIANTS: {
+    readonly mode: "single";
+};
+export interface CalendarProps {
+    mode?: keyof typeof KAESO_CALENDAR_VARIANTS.mode | undefined;
+    selected?: Date | DateRange | undefined;
+    onSelect?: ((value: Date | DateRange | undefined) => void) | undefined;
+    month?: Date | undefined;
+    defaultMonth?: Date | undefined;
+    onMonthChange?: ((month: Date) => void) | undefined;
+    numberOfMonths?: number | undefined;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    disabled?: ((date: Date) => boolean) | undefined;
+    className?: string | undefined;
+}
+export declare function Calendar({ mode, selected, onSelect, month, defaultMonth, onMonthChange, numberOfMonths, weekStartsOn, disabled, className, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Calendar {
+    var displayName: string;
+}

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

@@ -0,0 +1,16 @@
+export declare const docs: {
+    Calendar: {
+        description: string;
+        props: {
+            defaultMonth: string;
+            disabled: string;
+            mode: string;
+            month: string;
+            numberOfMonths: string;
+            onMonthChange: string;
+            onSelect: string;
+            selected: string;
+            weekStartsOn: string;
+        };
+    };
+};

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

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

package/dist/types/components/charts/bar.d.ts

@@ -0,0 +1,39 @@
+import { type AxisDate, type ChartState } from "./core.js";
+export declare const KAESO_BAR_CHART_VARIANTS: {
+    readonly layout: {
+        readonly grouped: {
+            readonly classes: "";
+            readonly description: "Bars side by side per category (default)";
+        };
+        readonly stacked: {
+            readonly classes: "";
+            readonly description: "Bars stacked per category";
+        };
+        readonly horizontal: {
+            readonly classes: "";
+            readonly description: "Horizontal bars for rankings";
+        };
+    };
+};
+export declare const KAESO_BAR_CHART_DEFAULT_VARIANTS: {
+    readonly layout: "grouped";
+};
+export interface BarSeries {
+    id: string;
+    label: string;
+    values: number[];
+    color?: string | undefined;
+}
+export interface BarChartProps extends ChartState {
+    categories: string[];
+    series: BarSeries[];
+    layout?: keyof typeof KAESO_BAR_CHART_VARIANTS.layout | undefined;
+    height?: number | undefined;
+    formatValue?: ((v: number) => string) | undefined;
+    highlight?: number | undefined;
+    axisLabels?: string[] | undefined;
+    dates?: readonly AxisDate[] | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+}
+export declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<HTMLDivElement>>;