@wow-two-beta/ui-vue 0.0.2

package/dist/presentation/display/avatar/Avatar.variants.d.ts

@@ -0,0 +1,312 @@
+import { VariantProps } from '../../../foundation/utils';
+import { TVReturnType } from 'tailwind-variants';
+import { TVConfig } from 'tailwind-variants/dist/config.js';
+/** Defines the Avatar silhouette. */
+export declare const AvatarShape: {
+    /** Refers to a circular avatar. */
+    readonly Circle: "circle";
+    /** Refers to a rounded-square avatar. */
+    readonly Square: "square";
+};
+export type AvatarShape = (typeof AvatarShape)[keyof typeof AvatarShape];
+/** Defines the Avatar tone palette (`none` cedes color to autoColor). */
+export declare const AvatarTone: {
+    /** Refers to no tone — autoColor takes over the cascade. */
+    readonly None: "none";
+    /** Refers to the neutral / default palette. */
+    readonly Neutral: "neutral";
+    /** Refers to the primary brand palette. */
+    readonly Primary: "primary";
+    /** Refers to the destructive / error palette. */
+    readonly Danger: "danger";
+    /** Refers to the positive / confirmation palette. */
+    readonly Success: "success";
+    /** Refers to the caution palette. */
+    readonly Warning: "warning";
+};
+export type AvatarTone = (typeof AvatarTone)[keyof typeof AvatarTone];
+/** Defines the Avatar background fill style. */
+export declare const AvatarBackground: {
+    /** Refers to a flat, solid fill. */
+    readonly Solid: "solid";
+    /** Refers to a tone-gradient fill. */
+    readonly Gradient: "gradient";
+};
+export type AvatarBackground = (typeof AvatarBackground)[keyof typeof AvatarBackground];
+/** Defines the Avatar focus/emphasis ring tone. */
+export declare const AvatarRing: {
+    /** Refers to no ring. */
+    readonly None: "none";
+    /** Refers to a neutral border ring. */
+    readonly Neutral: "neutral";
+    /** Refers to a primary-toned ring. */
+    readonly Primary: "primary";
+    /** Refers to a destructive-toned ring. */
+    readonly Danger: "danger";
+    /** Refers to a success-toned ring. */
+    readonly Success: "success";
+    /** Refers to a caution-toned ring. */
+    readonly Warning: "warning";
+};
+export type AvatarRing = (typeof AvatarRing)[keyof typeof AvatarRing];
+export declare const avatarVariants: TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    tone: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    bgStyle: {
+        solid: string;
+        gradient: string;
+    };
+    ring: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-medium", TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    tone: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    bgStyle: {
+        solid: string;
+        gradient: string;
+    };
+    ring: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    tone: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    bgStyle: {
+        solid: string;
+        gradient: string;
+    };
+    ring: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    tone: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    bgStyle: {
+        solid: string;
+        gradient: string;
+    };
+    ring: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    tone: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    bgStyle: {
+        solid: string;
+        gradient: string;
+    };
+    ring: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-medium", TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    tone: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    bgStyle: {
+        solid: string;
+        gradient: string;
+    };
+    ring: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    tone: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    bgStyle: {
+        solid: string;
+        gradient: string;
+    };
+    ring: {
+        none: string;
+        neutral: string;
+        primary: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type AvatarVariants = VariantProps<typeof avatarVariants>;

package/dist/presentation/display/avatar/Avatar.vue.d.ts

@@ -0,0 +1,49 @@
+import { SizePreset, SizeUnion } from '../../../foundation/utils';
+import { AvatarBackground, AvatarRing, AvatarShape, AvatarTone } from './Avatar.variants';
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type AvatarSizePreset = SizePreset;
+/**
+ * The size union — preset (`xs|sm|md|lg|xl|2xl`) · raw number/string (square inline dims) ·
+ * object (explicit dims). Named here so `AvatarGroup` can reuse it.
+ */
+export type AvatarSize = SizeUnion<AvatarSizePreset>;
+export interface AvatarProps {
+    /** The silhouette. */
+    shape?: AvatarShape;
+    /** The tone palette (`none` cedes color to autoColor). */
+    tone?: AvatarTone;
+    /** The background fill style. */
+    bgStyle?: AvatarBackground;
+    /** The focus/emphasis ring tone. */
+    ring?: AvatarRing;
+    /** The skeleton state — pulses the tile and hides its content. */
+    isLoading?: boolean;
+    /** The image source; falls back to `name` initials or `fallback` on error. */
+    src?: string;
+    /** The person/entity name — used to derive initials when no image. */
+    name?: string;
+    /** The custom fallback (overrides initials). Rich content goes through the `fallback` slot. */
+    fallback?: string | number;
+    /** The alt text for the underlying `<img>` (defaults to `name`). */
+    alt?: string;
+    /** The auto-color flag — when true (and no explicit non-neutral `tone` / non-solid `bgStyle`), derives a deterministic soft-color tint from `name` hash → 17-color palette. */
+    canAutoColor?: boolean;
+    /** The size — preset (`xs|sm|md|lg|xl|2xl`) → variant class · raw number/string → square inline · object → explicit dims. See `AvatarSize`. */
+    size?: AvatarSize;
+}
+declare const _default: __VLS_WithSlots< DefineComponent<AvatarProps, {
+    el: Readonly< ShallowRef<HTMLSpanElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+    name: string;
+    isLoading: boolean;
+    canAutoColor: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    /** The custom fallback content — wins over the `fallback` prop and the derived initials. */
+    fallback?(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar, type AvatarProps, type AvatarSize } from './Avatar.vue';
+export { avatarVariants, AvatarShape, AvatarTone, AvatarBackground, AvatarRing, type AvatarVariants, } from './Avatar.variants';

package/dist/presentation/display/avatarGroup/AvatarGroup.vue.d.ts

@@ -0,0 +1,25 @@
+import { AvatarSize } from '../avatar/Avatar.vue';
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export interface AvatarGroupProps {
+    /** The maximum avatars to render. Excess is shown as a "+N" tile. */
+    max?: number;
+    /** The avatar size applied to all children. Default `md`. */
+    size?: AvatarSize;
+    /** The negative-margin overlap class applied between avatars. Default `-ml-2`. */
+    overlap?: string;
+}
+declare const _default: __VLS_WithSlots< DefineComponent<AvatarGroupProps, {
+    el: Readonly< ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
+    size: AvatarSize;
+    max: number;
+    overlap: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/avatarGroup/index.d.ts

@@ -0,0 +1 @@
+export { default as AvatarGroup, type AvatarGroupProps } from './AvatarGroup.vue';

package/dist/presentation/display/badge/Badge.variants.d.ts

@@ -0,0 +1,128 @@
+import { VariantProps } from '../../../foundation/utils';
+import { TVReturnType } from 'tailwind-variants';
+import { TVConfig } from 'tailwind-variants/dist/config.js';
+/** Defines the Badge color treatment. */
+export declare const BadgeVariant: {
+    /** Refers to the neutral grey fill. */
+    readonly Neutral: "neutral";
+    /** Refers to the primary brand tint. */
+    readonly Brand: "brand";
+    /** Refers to the positive / confirmation tint. */
+    readonly Success: "success";
+    /** Refers to the caution tint. */
+    readonly Warning: "warning";
+    /** Refers to the destructive / error tint. */
+    readonly Danger: "danger";
+    /** Refers to the informational tint. */
+    readonly Info: "info";
+    /** Refers to a bordered, transparent fill. */
+    readonly Outline: "outline";
+};
+export type BadgeVariant = (typeof BadgeVariant)[keyof typeof BadgeVariant];
+export declare const badgeVariants: TVReturnType<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex items-center rounded-full font-medium", TVConfig<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, TVReturnType<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex items-center rounded-full font-medium", TVConfig<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/presentation/display/badge/Badge.vue.d.ts

@@ -0,0 +1,20 @@
+import { Size } from '../../../foundation/utils';
+import { BadgeVariant } from './Badge.variants';
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export interface BadgeProps {
+    /** The color treatment. */
+    variant?: BadgeVariant;
+    /** The size step. */
+    size?: Size;
+}
+declare const _default: __VLS_WithSlots< DefineComponent<BadgeProps, {
+    el: Readonly< ShallowRef<HTMLSpanElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge, type BadgeProps } from './Badge.vue';
+export { badgeVariants, BadgeVariant, type BadgeVariants } from './Badge.variants';

package/dist/presentation/display/badgeOverlay/BadgeOverlay.vue.d.ts

@@ -0,0 +1,24 @@
+import { CornerPosition } from '../../../foundation/utils';
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export interface BadgeOverlayProps {
+    /** The position of the badge relative to the wrapper. Default `top-right`. */
+    position?: CornerPosition;
+    /** The hidden state — hides the badge when truthy (e.g. when count is 0). */
+    isHidden?: boolean;
+}
+declare const _default: __VLS_WithSlots< DefineComponent<BadgeOverlayProps, {
+    el: Readonly< ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BadgeOverlayProps> & Readonly<{}>, {
+    position: CornerPosition;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    /** The element to overlay on (avatar, button, image). */
+    default(): unknown;
+    /** The badge content (count, dot, icon). */
+    badge(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/badgeOverlay/index.d.ts

@@ -0,0 +1 @@
+export { default as BadgeOverlay, type BadgeOverlayProps } from './BadgeOverlay.vue';

package/dist/presentation/display/card/Card.vue.d.ts

@@ -0,0 +1,32 @@
+import { SurfaceElevation, SurfacePadding, SurfaceRadius, SurfaceTone, SurfaceVariant } from '../../../foundation/utils';
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+/**
+ * Represents the prop surface of `Card`.
+ *
+ * React declared these by `extends SurfaceVariants`; spelled out here because
+ * `defineProps<T>()` needs a type the SFC compiler can resolve to a runtime
+ * declaration, and `VariantProps<typeof surfaceVariants>` is opaque to it.
+ */
+export interface CardProps {
+    /** The visual recipe — solid · soft · surface · outline · glass · elevated · flat · subtle. */
+    variant?: SurfaceVariant;
+    /** The color tone the recipe is tinted with. */
+    tone?: SurfaceTone;
+    /** The corner rounding. */
+    radius?: SurfaceRadius;
+    /** The inner spacing step. */
+    padding?: SurfacePadding;
+    /** The shadow depth. */
+    elevation?: SurfaceElevation;
+}
+declare const _default: __VLS_WithSlots< DefineComponent<CardProps, {
+    el: Readonly< ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/card/CardBody.vue.d.ts

@@ -0,0 +1,12 @@
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: __VLS_WithSlots< DefineComponent<{}, {
+    el: Readonly< ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/card/CardDescription.vue.d.ts

@@ -0,0 +1,12 @@
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: __VLS_WithSlots< DefineComponent<{}, {
+    el: Readonly< ShallowRef<HTMLParagraphElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/card/CardFooter.vue.d.ts

@@ -0,0 +1,12 @@
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: __VLS_WithSlots< DefineComponent<{}, {
+    el: Readonly< ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/card/CardHeader.vue.d.ts

@@ -0,0 +1,12 @@
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: __VLS_WithSlots< DefineComponent<{}, {
+    el: Readonly< ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/card/CardTitle.vue.d.ts

@@ -0,0 +1,12 @@
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: __VLS_WithSlots< DefineComponent<{}, {
+    el: Readonly< ShallowRef<HTMLHeadingElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/presentation/display/card/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Card, type CardProps } from './Card.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardBody } from './CardBody.vue';
+export { default as CardFooter } from './CardFooter.vue';