@wow-two-beta/ui 0.0.4 → 0.0.5

package/dist/display/index.d.ts

@@ -1,2 +1,806 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 
-export {  }
+declare const headingVariants: tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, "font-semibold tracking-tight text-neutral-900", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, "font-semibold tracking-tight text-neutral-900", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}>, unknown, unknown, undefined>>;
+type HeadingVariants = VariantProps<typeof headingVariants>;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends Omit<ComponentPropsWithoutRef<'h2'>, 'size'>, HeadingVariants {
+    /** Semantic heading level (1–6). Default 2. Visual size is independent — set via `size`. */
+    level?: HeadingLevel;
+}
+/**
+ * Semantic heading. `level` controls the rendered tag (`h1`–`h6`); `size`
+ * controls the visual scale independently — so a visually-large heading
+ * can still be the right outline level.
+ */
+declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLHeadingElement>>;
+
+declare const textVariants: tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    color: {
+        default: string;
+        muted: string;
+        subtle: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        justify: string;
+    };
+    truncate: {
+        true: string;
+    };
+}, undefined, "", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    color: {
+        default: string;
+        muted: string;
+        subtle: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        justify: string;
+    };
+    truncate: {
+        true: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    color: {
+        default: string;
+        muted: string;
+        subtle: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        justify: string;
+    };
+    truncate: {
+        true: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    color: {
+        default: string;
+        muted: string;
+        subtle: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        justify: string;
+    };
+    truncate: {
+        true: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    color: {
+        default: string;
+        muted: string;
+        subtle: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        justify: string;
+    };
+    truncate: {
+        true: string;
+    };
+}, undefined, "", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    color: {
+        default: string;
+        muted: string;
+        subtle: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        justify: string;
+    };
+    truncate: {
+        true: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    color: {
+        default: string;
+        muted: string;
+        subtle: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        justify: string;
+    };
+    truncate: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+type TextVariants = VariantProps<typeof textVariants>;
+
+interface TextProps extends Omit<ComponentPropsWithoutRef<'p'>, 'as' | 'color'>, TextVariants {
+    as?: ElementType;
+}
+/**
+ * Body text. Renders as `<p>` by default; pass `as="span"` (or any element)
+ * to keep semantics consistent with the surrounding markup.
+ */
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
+
+declare const codeVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        inline: string;
+        block: string;
+    };
+}, undefined, "font-mono text-sm", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        inline: string;
+        block: string;
+    };
+}, {
+    variant: {
+        inline: string;
+        block: string;
+    };
+}>, {
+    variant: {
+        inline: string;
+        block: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        inline: string;
+        block: string;
+    };
+}, undefined, "font-mono text-sm", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        inline: string;
+        block: string;
+    };
+}, {
+    variant: {
+        inline: string;
+        block: string;
+    };
+}>, unknown, unknown, undefined>>;
+type CodeVariants = VariantProps<typeof codeVariants>;
+
+interface CodeProps extends ComponentPropsWithoutRef<'code'>, CodeVariants {
+}
+/**
+ * Inline or block code. For block, wrap children in a `<pre>` if you need
+ * pre-wrap whitespace; this atom only styles. Syntax highlighting is L5.
+ */
+declare const Code: react.ForwardRefExoticComponent<CodeProps & react.RefAttributes<HTMLElement>>;
+
+type KbdProps = ComponentPropsWithoutRef<'kbd'>;
+/**
+ * Keyboard key affordance — `<kbd>` styled with subtle border and inset
+ * shadow. Single key per `<Kbd>`; chain via `<Kbd>⌘</Kbd> + <Kbd>K</Kbd>`.
+ */
+declare const Kbd: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+
+interface ImageProps extends ComponentPropsWithoutRef<'img'> {
+    /** Element rendered when the image fails to load. */
+    fallback?: ReactNode;
+}
+/**
+ * Image with built-in error fallback. The fallback element replaces the
+ * `<img>` on error (broken `src`, network failure). For aspect-locked
+ * images, wrap in `AspectRatio`.
+ */
+declare const Image: react.ForwardRefExoticComponent<ImageProps & react.RefAttributes<HTMLImageElement>>;
+
+declare const avatarVariants: tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, undefined, "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-neutral-200 text-neutral-700 font-medium", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, undefined, "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-neutral-200 text-neutral-700 font-medium", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>;
+type AvatarVariants = VariantProps<typeof avatarVariants>;
+
+interface AvatarProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'>, AvatarVariants {
+    /** Image source. Falls back to `name` initials or `fallback` on error. */
+    src?: string;
+    /** Person/entity name — used to derive initials when no image. */
+    name?: string;
+    /** Custom fallback (overrides initials). */
+    fallback?: ReactNode;
+    /** Alt text for the underlying `<img>`. Defaults to `name`. */
+    alt?: string;
+}
+/**
+ * Image avatar with initials fallback. Strict atom — fallback is rendered
+ * inline (raw text), not via the `Text` atom, to keep this self-contained.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const badgeVariants: tailwind_variants.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", tailwind_variants_dist_config_js.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, tailwind_variants.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", tailwind_variants_dist_config_js.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>>;
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+interface BadgeProps extends ComponentPropsWithoutRef<'span'>, BadgeVariants {
+}
+/**
+ * Pill-shaped status / category indicator. Non-interactive — for clickable
+ * use `Tag`. For severity-tinted callouts at message scale, use `Alert*`.
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const tagVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-md border border-neutral-200 bg-white px-2 py-0.5 text-xs font-medium text-neutral-800", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, {
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}>, {
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-md border border-neutral-200 bg-white px-2 py-0.5 text-xs font-medium text-neutral-800", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, {
+    variant: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}>, unknown, unknown, undefined>>;
+type TagVariants = VariantProps<typeof tagVariants>;
+
+interface TagProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'>, TagVariants {
+    children?: ReactNode;
+    /** Show a close (×) button. Pass a handler to receive the click. */
+    onClose?: () => void;
+    /** Accessible label for the close button. Default `"Remove"`. */
+    closeLabel?: string;
+}
+/**
+ * Pill with an optional close button. The close button is a raw `<button>`
+ * (not `IconButton`) so this stays a strict atom.
+ */
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface SeparatorProps extends ComponentPropsWithoutRef<'div'> {
+    orientation?: 'horizontal' | 'vertical';
+    /** When `true`, the separator is purely decorative — `role="none"` and
+     *  unannounced. Default `true`. Set `false` when meaningful in context. */
+    decorative?: boolean;
+}
+/**
+ * Visual divider. Defaults to a horizontal hairline; pass `orientation="vertical"`
+ * for column dividers (use inside a flex/grid with explicit height).
+ */
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+type MarkProps = ComponentPropsWithoutRef<'mark'>;
+/**
+ * Highlighted text — semantic `<mark>` with a yellow tint. Use for search
+ * matches and "you mentioned this" affordances.
+ */
+declare const Mark: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+
+type QuoteProps = ComponentPropsWithoutRef<'blockquote'>;
+/**
+ * Block quote with subtle left border and italic body text.
+ */
+declare const Quote: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & react.RefAttributes<HTMLQuoteElement>>;
+
+export { Avatar, type AvatarProps, type AvatarVariants, Badge, type BadgeProps, type BadgeVariants, Code, type CodeProps, type CodeVariants, Heading, type HeadingProps, type HeadingVariants, Image, type ImageProps, Kbd, type KbdProps, Mark, type MarkProps, Quote, type QuoteProps, Separator, type SeparatorProps, Tag, type TagProps, type TagVariants, Text, type TextProps, type TextVariants, avatarVariants, badgeVariants, codeVariants, headingVariants, tagVariants, textVariants };