@sewadah/selaras 0.1.1

package/dist/runtime/theme/avatar.d.ts

@@ -0,0 +1,206 @@
+export declare const avatarTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    statusColor: {
+        primary: {
+            status: string;
+        };
+        neutral: {
+            status: string;
+        };
+        secondary: {
+            status: string;
+        };
+        success: {
+            status: string;
+        };
+        danger: {
+            status: string;
+        };
+        info: {
+            status: string;
+        };
+        warning: {
+            status: string;
+        };
+    };
+    size: {
+        sm: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+        md: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+        lg: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            base: string;
+        };
+        rounded: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    image: string;
+    fallback: string;
+    icon: string;
+    status: string;
+}, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    statusColor: {
+        primary: {
+            status: string;
+        };
+        neutral: {
+            status: string;
+        };
+        secondary: {
+            status: string;
+        };
+        success: {
+            status: string;
+        };
+        danger: {
+            status: string;
+        };
+        info: {
+            status: string;
+        };
+        warning: {
+            status: string;
+        };
+    };
+    size: {
+        sm: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+        md: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+        lg: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            base: string;
+        };
+        rounded: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    image: string;
+    fallback: string;
+    icon: string;
+    status: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    statusColor: {
+        primary: {
+            status: string;
+        };
+        neutral: {
+            status: string;
+        };
+        secondary: {
+            status: string;
+        };
+        success: {
+            status: string;
+        };
+        danger: {
+            status: string;
+        };
+        info: {
+            status: string;
+        };
+        warning: {
+            status: string;
+        };
+    };
+    size: {
+        sm: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+        md: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+        lg: {
+            base: string;
+            fallback: string;
+            icon: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            base: string;
+        };
+        rounded: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    image: string;
+    fallback: string;
+    icon: string;
+    status: string;
+}>>;
+export type AvatarThemeSlots = keyof (typeof avatarTheme)['slots'];

package/dist/runtime/theme/avatar.js

@@ -0,0 +1,67 @@
+import { tv } from "tailwind-variants";
+export const avatarTheme = tv({
+  slots: {
+    // `relative` anchors the absolutely-positioned status dot to the corner.
+    base: "relative inline-flex shrink-0 select-none items-center justify-center align-middle",
+    // `content` wraps image + fallback with overflow-hidden so text/images
+    // can't escape the avatar bounds, while the status dot (a sibling, not
+    // a child) stays unclipped outside this wrapper. items-center/
+    // justify-center - AvatarFallback (Reka's own primitive) doesn't
+    // stretch to fill this flex container on its own, so without these the
+    // fallback icon/text sits flush at the start corner instead of centered.
+    content: "flex size-full items-center justify-center overflow-hidden",
+    image: "h-full w-full object-cover",
+    fallback: "flex h-full w-full items-center justify-center",
+    icon: "shrink-0",
+    // The ring separates the dot from the avatar itself, using the page
+    // background so it reads as a clean offset indicator at any size.
+    status: "absolute bottom-0 end-0 rounded-full ring-2 ring-[var(--ui-bg)]"
+  },
+  variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
+    // The status dot's color is independent of `color` - presence semantics
+    // (online, offline, ...) rarely match the avatar's own identity color, so
+    // it gets its own variant rather than tracking the avatar's.
+    statusColor: {
+      primary: { status: "bg-[var(--ui-primary)]" },
+      neutral: { status: "bg-[var(--ui-text-muted)]" },
+      secondary: { status: "bg-[var(--ui-secondary)]" },
+      success: { status: "bg-[var(--ui-success)]" },
+      danger: { status: "bg-[var(--ui-danger)]" },
+      info: { status: "bg-[var(--ui-info)]" },
+      warning: { status: "bg-[var(--ui-warning)]" }
+    },
+    size: {
+      sm: { base: "size-6", fallback: "text-[10px]", icon: "size-3", status: "size-1.5" },
+      md: { base: "size-8", fallback: "text-xs", icon: "size-4", status: "size-2" },
+      lg: { base: "size-10", fallback: "text-sm", icon: "size-5", status: "size-2.5" }
+    },
+    shape: {
+      circle: { base: "rounded-full" },
+      rounded: { base: "rounded-[var(--ui-radius-md)]" }
+    }
+  },
+  compoundVariants: [
+    { color: "primary", class: { base: "bg-[var(--ui-primary-soft)]", fallback: "text-[var(--ui-primary)]" } },
+    { color: "neutral", class: { base: "bg-[var(--ui-neutral-soft)]", fallback: "text-[var(--ui-text-muted)]" } },
+    { color: "secondary", class: { base: "bg-[var(--ui-secondary-soft)]", fallback: "text-[var(--ui-secondary)]" } },
+    { color: "success", class: { base: "bg-[var(--ui-success-soft)]", fallback: "text-[var(--ui-success)]" } },
+    { color: "danger", class: { base: "bg-[var(--ui-danger-soft)]", fallback: "text-[var(--ui-danger)]" } },
+    { color: "info", class: { base: "bg-[var(--ui-info-soft)]", fallback: "text-[var(--ui-info)]" } },
+    { color: "warning", class: { base: "bg-[var(--ui-warning-soft)]", fallback: "text-[var(--ui-warning)]" } }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    statusColor: "neutral",
+    size: "md",
+    shape: "circle"
+  }
+});

package/dist/runtime/theme/badge.d.ts

@@ -0,0 +1,140 @@
+export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        solid: "";
+        soft: "";
+        outline: "";
+    };
+    size: {
+        sm: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    label: string;
+    trailingIcon: string;
+    dot: string;
+}, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        solid: "";
+        soft: "";
+        outline: "";
+    };
+    size: {
+        sm: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    label: string;
+    trailingIcon: string;
+    dot: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        solid: "";
+        soft: "";
+        outline: "";
+    };
+    size: {
+        sm: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            dot: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    label: string;
+    trailingIcon: string;
+    dot: string;
+}>>;
+export type BadgeThemeSlots = keyof (typeof badgeTheme)['slots'];

package/dist/runtime/theme/badge.js

@@ -0,0 +1,90 @@
+import { tv } from "tailwind-variants";
+export const badgeTheme = tv({
+  slots: {
+    // justify-center is a no-op for the normal multi-child pill (content
+    // already defines the width, no slack to distribute) but is required
+    // once iconOnly gives the root a fixed width wider than its one child -
+    // without it the icon sits flush left, all the slack pushed right.
+    base: "inline-flex items-center justify-center gap-1 font-medium rounded-[var(--ui-radius-sm)] whitespace-nowrap",
+    leadingIcon: "shrink-0",
+    label: "truncate",
+    trailingIcon: "shrink-0",
+    // Always the color's solid background, regardless of `variant` - a
+    // pale "soft" dot barely reads as a status indicator at this size.
+    // Used both inline (next to a label) and standalone (dot-only, no
+    // padded base around it at all - see Badge.vue's dotOnly branch).
+    dot: "shrink-0 rounded-full"
+  },
+  variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
+    variant: {
+      solid: "",
+      soft: "",
+      outline: ""
+    },
+    size: {
+      sm: { base: "h-4 px-1 text-xs", leadingIcon: "size-2.5", trailingIcon: "size-2.5", dot: "size-1.5" },
+      md: { base: "h-5 px-1.5 text-xs", leadingIcon: "size-3", trailingIcon: "size-3", dot: "size-2" },
+      lg: { base: "h-6 px-2 text-sm", leadingIcon: "size-3.5", trailingIcon: "size-3.5", dot: "size-2.5" }
+    },
+    // No label - just an icon (or nothing but a dot, handled separately in
+    // Badge.vue) - reads better as a circle than a flat pill, doubling as
+    // an avatar-adjacent status/count indicator. Chip stays a pill even
+    // icon-only; that's a deliberately different shape convention for a
+    // deliberately different role.
+    iconOnly: {
+      true: { base: "rounded-full px-0" }
+    }
+  },
+  compoundVariants: [
+    { color: "primary", variant: "solid", class: { base: "bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)]" } },
+    { color: "primary", variant: "soft", class: { base: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]" } },
+    { color: "primary", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-primary)] text-[var(--ui-primary)]" } },
+    { color: "neutral", variant: "solid", class: { base: "bg-[var(--ui-neutral)] text-[var(--ui-neutral-foreground)]" } },
+    { color: "neutral", variant: "soft", class: { base: "bg-[var(--ui-neutral-soft)] text-[var(--ui-text)]" } },
+    { color: "neutral", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-border)] text-[var(--ui-text)]" } },
+    { color: "secondary", variant: "solid", class: { base: "bg-[var(--ui-secondary)] text-[var(--ui-secondary-foreground)]" } },
+    { color: "secondary", variant: "soft", class: { base: "bg-[var(--ui-secondary-soft)] text-[var(--ui-secondary)]" } },
+    { color: "secondary", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-secondary)] text-[var(--ui-secondary)]" } },
+    { color: "success", variant: "solid", class: { base: "bg-[var(--ui-success)] text-[var(--ui-success-foreground)]" } },
+    { color: "success", variant: "soft", class: { base: "bg-[var(--ui-success-soft)] text-[var(--ui-success)]" } },
+    { color: "success", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-success)] text-[var(--ui-success)]" } },
+    { color: "danger", variant: "solid", class: { base: "bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)]" } },
+    { color: "danger", variant: "soft", class: { base: "bg-[var(--ui-danger-soft)] text-[var(--ui-danger)]" } },
+    { color: "danger", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-danger)] text-[var(--ui-danger)]" } },
+    { color: "info", variant: "solid", class: { base: "bg-[var(--ui-info)] text-[var(--ui-info-foreground)]" } },
+    { color: "info", variant: "soft", class: { base: "bg-[var(--ui-info-soft)] text-[var(--ui-info)]" } },
+    { color: "info", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-info)] text-[var(--ui-info)]" } },
+    { color: "warning", variant: "solid", class: { base: "bg-[var(--ui-warning)] text-[var(--ui-warning-foreground)]" } },
+    { color: "warning", variant: "soft", class: { base: "bg-[var(--ui-warning-soft)] text-[var(--ui-warning)]" } },
+    { color: "warning", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-warning)] text-[var(--ui-warning)]" } },
+    // The dot's own background always tracks the color's solid token,
+    // independent of `variant` - see the `dot` slot comment above.
+    { color: "primary", class: { dot: "bg-[var(--ui-primary)]" } },
+    { color: "neutral", class: { dot: "bg-[var(--ui-text-muted)]" } },
+    { color: "secondary", class: { dot: "bg-[var(--ui-secondary)]" } },
+    { color: "success", class: { dot: "bg-[var(--ui-success)]" } },
+    { color: "danger", class: { dot: "bg-[var(--ui-danger)]" } },
+    { color: "info", class: { dot: "bg-[var(--ui-info)]" } },
+    { color: "warning", class: { dot: "bg-[var(--ui-warning)]" } },
+    // iconOnly needs an equal width/height square-that-reads-as-a-circle -
+    // same trick Button's own square variant uses: swap the size's
+    // horizontal padding for a matching width instead.
+    { size: "sm", iconOnly: true, class: { base: "w-4" } },
+    { size: "md", iconOnly: true, class: { base: "w-5" } },
+    { size: "lg", iconOnly: true, class: { base: "w-6" } }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    variant: "soft",
+    size: "md"
+  }
+});

package/dist/runtime/theme/breadcrumb.d.ts

@@ -0,0 +1,86 @@
+export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            disabled?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            current?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            separatorIcon?: import("tailwind-variants").ClassValue;
+            ellipsis?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            disabled?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            current?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            separatorIcon?: import("tailwind-variants").ClassValue;
+            ellipsis?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    current: string;
+    disabled: string;
+    icon: string;
+    label: string;
+    separator: string;
+    separatorIcon: string;
+    ellipsis: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            disabled?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            current?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            separatorIcon?: import("tailwind-variants").ClassValue;
+            ellipsis?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    current: string;
+    disabled: string;
+    icon: string;
+    label: string;
+    separator: string;
+    separatorIcon: string;
+    ellipsis: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    current: string;
+    disabled: string;
+    icon: string;
+    label: string;
+    separator: string;
+    separatorIcon: string;
+    ellipsis: string;
+}>>;
+export type BreadcrumbThemeSlots = keyof (typeof breadcrumbTheme)['slots'];

package/dist/runtime/theme/breadcrumb.js

@@ -0,0 +1,22 @@
+import { tv } from "tailwind-variants";
+export const breadcrumbTheme = tv({
+  slots: {
+    root: "",
+    list: "flex items-center gap-1.5 text-sm",
+    item: "flex items-center",
+    link: "flex items-center gap-1 text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
+    // The trail's last item - "you are here", visually emphasized
+    // rather than muted like the earlier, clickable steps.
+    current: "flex items-center gap-1 font-medium text-[var(--ui-text)]",
+    // An earlier item with neither `to` nor `disabled` unset - nothing
+    // to link to, so it renders like `link` but inert.
+    disabled: "flex items-center gap-1 text-[var(--ui-text-muted)] opacity-50",
+    icon: "size-4 shrink-0",
+    // `block` (not `inline`) so an inline-max-width set by the
+    // `truncate` prop actually applies.
+    label: "block truncate",
+    separator: "flex items-center text-[var(--ui-text-muted)]",
+    separatorIcon: "size-4 shrink-0 rtl:rotate-180",
+    ellipsis: "flex items-center text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)]"
+  }
+});

package/dist/runtime/theme/button-group.d.ts

@@ -0,0 +1,53 @@
+export declare const buttonGroupTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    /**
+     * Squares off each button's inner corner and overlaps adjacent 1px
+     * rings/borders by -1px so the shared edge doesn't render double-thick.
+     * The hover/focus z-index bump keeps a hovered or focused button's own
+     * edge drawn on top of its neighbor's, instead of being clipped by it.
+     */
+    root: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    /**
+     * Squares off each button's inner corner and overlaps adjacent 1px
+     * rings/borders by -1px so the shared edge doesn't render double-thick.
+     * The hover/focus z-index bump keeps a hovered or focused button's own
+     * edge drawn on top of its neighbor's, instead of being clipped by it.
+     */
+    root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    /**
+     * Squares off each button's inner corner and overlaps adjacent 1px
+     * rings/borders by -1px so the shared edge doesn't render double-thick.
+     * The hover/focus z-index bump keeps a hovered or focused button's own
+     * edge drawn on top of its neighbor's, instead of being clipped by it.
+     */
+    root: string;
+}>>;
+export type ButtonGroupThemeSlots = keyof (typeof buttonGroupTheme)['slots'];

package/dist/runtime/theme/button-group.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+export const buttonGroupTheme = tv({
+  slots: {
+    /**
+     * Squares off each button's inner corner and overlaps adjacent 1px
+     * rings/borders by -1px so the shared edge doesn't render double-thick.
+     * The hover/focus z-index bump keeps a hovered or focused button's own
+     * edge drawn on top of its neighbor's, instead of being clipped by it.
+     */
+    root: "[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10"
+  },
+  variants: {
+    orientation: {
+      horizontal: { root: "inline-flex [&>*:not(:first-child)]:-ms-px [&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none" },
+      vertical: { root: "inline-flex flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none" }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});