@sewadah/selaras 0.1.1

package/dist/runtime/internal/TimeStepper.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from "vue";
+import Button from "../components/Button.vue";
+import InputNumber from "../components/InputNumber.vue";
+import { useLocale } from "../composables/use-locale";
+const props = defineProps({
+  hour: { type: Number, required: true },
+  minute: { type: Number, required: false },
+  granularity: { type: String, required: true },
+  hourCycle: { type: Number, required: false },
+  minuteStep: { type: Number, required: false, default: 1 },
+  locale: { type: String, required: false },
+  size: { type: String, required: false },
+  hourId: { type: String, required: false },
+  minuteId: { type: String, required: false }
+});
+const emit = defineEmits(["update:hour", "update:minute"]);
+const effectiveLocale = computed(() => props.locale ?? useLocale().value);
+const resolvedIs12Hour = computed(() => {
+  if (props.hourCycle === 12)
+    return true;
+  if (props.hourCycle === 24)
+    return false;
+  const resolved = new Intl.DateTimeFormat(effectiveLocale.value, { hour: "numeric" }).resolvedOptions().hourCycle;
+  return resolved === "h11" || resolved === "h12";
+});
+const isPM = computed(() => props.hour >= 12);
+const meridiemText = computed(() => {
+  const parts = new Intl.DateTimeFormat(effectiveLocale.value, { hour: "numeric", hour12: true }).formatToParts(new Date(2020, 0, 1, isPM.value ? 13 : 1));
+  return parts.find((part) => part.type === "dayPeriod")?.value ?? (isPM.value ? "PM" : "AM");
+});
+function to12Hour(hour24) {
+  const hour = hour24 % 12;
+  return hour === 0 ? 12 : hour;
+}
+function from12Hour(hour12, pm) {
+  const hour = hour12 % 12;
+  return pm ? hour + 12 : hour;
+}
+const displayHour = computed(() => resolvedIs12Hour.value ? to12Hour(props.hour) : props.hour);
+function setHour(value) {
+  if (value === void 0)
+    return;
+  if (!resolvedIs12Hour.value) {
+    emit("update:hour", value);
+    return;
+  }
+  const crossesBoundary = displayHour.value === 11 && value === 12 || displayHour.value === 12 && value === 11;
+  const pm = crossesBoundary ? !isPM.value : isPM.value;
+  emit("update:hour", from12Hour(value, pm));
+}
+function setMinute(value) {
+  if (value === void 0)
+    return;
+  emit("update:minute", value);
+}
+function toggleMeridiem() {
+  emit("update:hour", isPM.value ? props.hour - 12 : props.hour + 12);
+}
+const twoDigitFormat = { minimumIntegerDigits: 2 };
+const effectiveSize = computed(() => props.size ?? "sm");
+</script>
+
+<template>
+  <InputNumber
+    :id="hourId"
+    :model-value="displayHour"
+    :min="resolvedIs12Hour ? 1 : 0"
+    :max="resolvedIs12Hour ? 12 : 23"
+    wrap
+    :format-options="twoDigitFormat"
+    :size="effectiveSize"
+    class="w-28"
+    @update:model-value="setHour"
+  />
+  <span v-if="granularity === 'minute'" class="text-[var(--ui-text-muted)]">:</span>
+  <InputNumber
+    v-if="granularity === 'minute'"
+    :id="minuteId"
+    :model-value="minute"
+    :min="0"
+    :max="59"
+    :step="minuteStep"
+    wrap
+    :format-options="twoDigitFormat"
+    :size="effectiveSize"
+    class="w-28"
+    @update:model-value="setMinute"
+  />
+  <Button
+    v-if="resolvedIs12Hour"
+    variant="outline"
+    color="neutral"
+    :size="effectiveSize"
+    @click="toggleMeridiem"
+  >
+    {{ meridiemText }}
+  </Button>
+</template>

package/dist/runtime/internal/TimeStepper.vue.d.ts

@@ -0,0 +1,28 @@
+export interface TimeStepperProps {
+    /** Always 24-hour (0-23), regardless of what's displayed. */
+    hour: number;
+    /** Only read/rendered when granularity is 'minute'. */
+    minute?: number;
+    granularity: 'hour' | 'minute';
+    /** Forces 12-hour or 24-hour display; defaults to whatever `locale` itself resolves to. */
+    hourCycle?: 12 | 24;
+    minuteStep?: number;
+    locale?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Ids for the caller's own paired <label for> elements - neither SInputNumber nor SInput forward a bare aria-label to their inner <input>, so callers pair a real sr-only label instead. */
+    hourId?: string;
+    minuteId?: string;
+}
+export interface TimeStepperEmits {
+    'update:hour': [value: number];
+    'update:minute': [value: number];
+}
+declare const __VLS_export: import("vue").DefineComponent<TimeStepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:hour": (value: number) => any;
+    "update:minute": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<TimeStepperProps> & Readonly<{
+    "onUpdate:hour"?: ((value: number) => any) | undefined;
+    "onUpdate:minute"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/prose.css

@@ -0,0 +1 @@
+@layer base, selaras-prose, utilities;@layer selaras-prose{:root{--selaras-prose-font-body:inherit;--selaras-prose-font-heading:inherit;--selaras-prose-font-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace)}.selaras-prose{color:var(--ui-text);font-family:var(--selaras-prose-font-body);font-size:1rem;line-height:1.75;overflow-wrap:break-word}.selaras-prose :where(.not-prose){line-height:1.5}.selaras-prose>:where(*+*){margin-block-start:1.25em}.selaras-prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--ui-text);font-family:var(--selaras-prose-font-heading);font-weight:600;letter-spacing:-.025em;margin-block-start:2em;scroll-margin-top:5rem}.selaras-prose :where(h1):not(:where(.not-prose,.not-prose *)){font-size:1.875rem;line-height:2.25rem}.selaras-prose :where(h2):not(:where(.not-prose,.not-prose *)){font-size:1.5rem;line-height:2rem}.selaras-prose :where(h3):not(:where(.not-prose,.not-prose *)){font-size:1.25rem;line-height:1.75rem}.selaras-prose :where(h4):not(:where(.not-prose,.not-prose *)){font-size:1.125rem;line-height:1.75rem}.selaras-prose :where(h5,h6):not(:where(.not-prose,.not-prose *)){font-size:1rem;line-height:1.5rem}.selaras-prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--ui-primary);font-weight:500;text-decoration-line:underline;text-underline-offset:4px}.selaras-prose :where(a:hover):not(:where(.not-prose,.not-prose *)){color:var(--ui-primary-hover)}.selaras-prose :where(h1,h2,h3,h4,h5,h6) :where(a):not(:where(.not-prose,.not-prose *)){color:inherit;font-weight:inherit}.selaras-prose :where(strong):not(:where(.not-prose,.not-prose *)){color:var(--ui-text);font-weight:600}.selaras-prose :where(em):not(:where(.not-prose,.not-prose *)){font-style:italic}.selaras-prose :where(blockquote):not(:where(.not-prose,.not-prose *)){border-inline-start:2px solid var(--ui-border);color:var(--ui-text-muted);font-style:italic;padding-inline-start:1rem}.selaras-prose :where(hr):not(:where(.not-prose,.not-prose *)){border-color:var(--ui-border)}.selaras-prose :where(img):not(:where(.not-prose,.not-prose *)){border-radius:var(--ui-radius-md);max-width:100%}.selaras-prose :where(ul,ol):not(:where(.not-prose,.not-prose *)){color:var(--ui-text);padding-inline-start:1.5rem}.selaras-prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc}.selaras-prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal}.selaras-prose :where(li+li):not(:where(.not-prose,.not-prose *)){margin-block-start:.25em}.selaras-prose :where(code):not(:where(.not-prose,.not-prose *)){background-color:var(--ui-bg-elevated);border-radius:var(--ui-radius-sm);color:var(--ui-text);font-family:var(--selaras-prose-font-mono);font-size:.875em;padding-block:.125rem;padding-inline:.375rem}.selaras-prose :where(pre):not(:where(.not-prose,.not-prose *)){background-color:var(--ui-bg-elevated);border-radius:var(--ui-radius-md);font-family:var(--selaras-prose-font-mono);font-size:.875rem;line-height:1.625;overflow-x:auto;padding:1rem}.selaras-prose :where(pre code):not(:where(.not-prose,.not-prose *)){background-color:transparent;border-radius:0;font-size:1em;padding:0}.selaras-prose :where(table):not(:where(.not-prose,.not-prose *)){border-collapse:collapse;display:block;font-size:.875rem;overflow-x:auto;width:100%}.selaras-prose :where(thead):not(:where(.not-prose,.not-prose *)){background-color:var(--ui-bg-elevated)}.selaras-prose :where(th):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--ui-border);color:var(--ui-text-muted);font-weight:500;padding-block:.5rem;padding-inline:.75rem;text-align:start}.selaras-prose :where(td):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--ui-border-muted);color:var(--ui-text);padding-block:.5rem;padding-inline:.75rem}}

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

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

@@ -0,0 +1,131 @@
+export declare const accordionTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    chevronPosition: {
+        end: {
+            trigger: string;
+        };
+        start: {
+            trigger: string;
+        };
+    };
+    variant: {
+        list: {
+            item: string;
+        };
+        pill: {
+            root: string;
+            item: string;
+            trigger: string;
+            contentInner: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    label: string;
+    chevron: string;
+    content: string;
+    contentInner: string;
+}, undefined, {
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    chevronPosition: {
+        end: {
+            trigger: string;
+        };
+        start: {
+            trigger: string;
+        };
+    };
+    variant: {
+        list: {
+            item: string;
+        };
+        pill: {
+            root: string;
+            item: string;
+            trigger: string;
+            contentInner: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    label: string;
+    chevron: string;
+    content: string;
+    contentInner: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    chevronPosition: {
+        end: {
+            trigger: string;
+        };
+        start: {
+            trigger: string;
+        };
+    };
+    variant: {
+        list: {
+            item: string;
+        };
+        pill: {
+            root: string;
+            item: string;
+            trigger: string;
+            contentInner: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    label: string;
+    chevron: string;
+    content: string;
+    contentInner: string;
+}>>;
+export type AccordionThemeSlots = keyof (typeof accordionTheme)['slots'];

package/dist/runtime/theme/accordion.js

@@ -0,0 +1,60 @@
+import { tv } from "tailwind-variants";
+export const accordionTheme = tv({
+  slots: {
+    // w-full - without an explicit width, the root shrinks to fit
+    // whichever child happens to be widest at that moment (a closed
+    // item's own title vs an open item's own content), so the whole
+    // accordion visibly resized itself as items opened/closed.
+    root: "w-full flex flex-col",
+    item: "",
+    header: "",
+    trigger: "group flex w-full items-center gap-2 text-start font-medium text-[var(--ui-text)] transition-colors hover:text-[var(--ui-primary)] disabled:opacity-50 disabled:pointer-events-none",
+    label: "",
+    chevron: "size-4 shrink-0 text-[var(--ui-text-muted)] transition-transform group-data-[state=open]:rotate-180",
+    // overflow-hidden clips the panel to its own animated height (without
+    // it, content would visibly spill out mid-animation); the two
+    // data-state keyframes interpolate between 0 and Reka's own measured
+    // --reka-accordion-content-height, so this never hardcodes a height.
+    content: "overflow-hidden text-[var(--ui-text-muted)] data-[state=open]:animate-[selaras-accordion-down_200ms_ease-out] data-[state=closed]:animate-[selaras-accordion-up_200ms_ease-out]",
+    // A separate slot (not `content` itself) for the padding that used to
+    // live on `content` directly - the padding must NOT be part of the
+    // height being animated (animating a 0-to-N height with vertical
+    // padding baked in either clips the last few pixels of padding at 0,
+    // or overshoots the real content height), so it moves one level in.
+    contentInner: "pb-3"
+  },
+  variants: {
+    size: {
+      sm: { trigger: "py-2 text-sm", content: "text-sm" },
+      md: { trigger: "py-3 text-sm", content: "text-sm" },
+      lg: { trigger: "py-4 text-base", content: "text-base" }
+    },
+    // Lives on `trigger` (not baked into its base string) so a consumer's
+    // own :ui.trigger override doesn't have to fight a hardcoded
+    // justify-between/justify-start to move the chevron.
+    chevronPosition: {
+      end: { trigger: "justify-between" },
+      start: { trigger: "justify-start" }
+    },
+    // list: the original flat look - a single shared divider between
+    // items, no per-item shape of its own.
+    // pill: each item becomes its own bordered, rounded card (same visual
+    // language as Card's own `outline` variant) with a gap between items
+    // instead of a shared divider - overflow-hidden on `item` clips the
+    // content panel's corners to match, the same way Card's root does.
+    variant: {
+      list: { item: "border-b border-[var(--ui-border)] last:border-b-0" },
+      pill: {
+        root: "gap-2",
+        item: "rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] ring-1 ring-[var(--ui-border)] overflow-hidden",
+        trigger: "px-3 hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)]",
+        contentInner: "px-3"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "list",
+    chevronPosition: "end"
+  }
+});

package/dist/runtime/theme/alert-dialog.d.ts

@@ -0,0 +1,50 @@
+export declare const alertDialogTheme: import("tailwind-variants").TVReturnType<{
+    transition: {
+        true: {
+            overlay: string;
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    transition: {
+        true: {
+            overlay: string;
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    transition: {
+        true: {
+            overlay: string;
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}>>;
+export type AlertDialogThemeSlots = keyof (typeof alertDialogTheme)['slots'];

package/dist/runtime/theme/alert-dialog.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+export const alertDialogTheme = tv({
+  slots: {
+    // Same layer as Modal's own overlay/content - an alert dialog is the
+    // same kind of centered, blocking surface, just a distinct semantic
+    // (Reka's AlertDialogContent unconditionally blocks outside-click
+    // dismissal itself, so there's no need for a second z-index tier).
+    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50",
+    content: "fixed left-1/2 top-1/2 z-[var(--ui-z-modal)] flex max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg)] p-6 shadow-[var(--ui-shadow-lg)] focus:outline-none",
+    header: "flex flex-col gap-1",
+    title: "text-base font-semibold text-[var(--ui-text)]",
+    description: "text-sm text-[var(--ui-text-muted)]",
+    body: "text-sm text-[var(--ui-text-muted)]",
+    footer: "flex items-center justify-end gap-2"
+  },
+  variants: {
+    // See Modal's own theme for why the animation classes live entirely
+    // inside this variant rather than the base slot strings.
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+        content: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    transition: true
+  }
+});

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

@@ -0,0 +1,62 @@
+export declare const alertTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        success: {};
+        danger: {};
+        warning: {};
+        info: {};
+    };
+    variant: {
+        solid: {};
+        soft: {};
+        outline: {};
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    actions: string;
+    close: string;
+}, undefined, {
+    color: {
+        success: {};
+        danger: {};
+        warning: {};
+        info: {};
+    };
+    variant: {
+        solid: {};
+        soft: {};
+        outline: {};
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    actions: string;
+    close: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        success: {};
+        danger: {};
+        warning: {};
+        info: {};
+    };
+    variant: {
+        solid: {};
+        soft: {};
+        outline: {};
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    actions: string;
+    close: string;
+}>>;
+export type AlertThemeSlots = keyof (typeof alertTheme)['slots'];

package/dist/runtime/theme/alert.js

@@ -0,0 +1,52 @@
+import { tv } from "tailwind-variants";
+export const alertTheme = tv({
+  slots: {
+    root: "relative flex items-start gap-3 rounded-[var(--ui-radius-md)] p-4",
+    icon: "size-5 shrink-0",
+    content: "min-w-0 flex-1",
+    title: "text-sm font-medium text-[var(--ui-text)]",
+    description: "mt-1 text-sm text-[var(--ui-text-muted)]",
+    actions: "mt-3 flex items-center gap-2",
+    // Rendered as an <SButton> (ghost/neutral) - matches Toast's own
+    // close slot exactly (theme/toast.ts).
+    close: "shrink-0 rounded-full"
+  },
+  variants: {
+    color: {
+      success: {},
+      danger: {},
+      warning: {},
+      info: {}
+    },
+    variant: {
+      solid: {},
+      soft: {},
+      outline: {}
+    }
+  },
+  compoundVariants: [
+    // soft/outline keep title/description neutral - only the icon (and,
+    // for outline, the ring) pick up color, matching Toast's own split
+    // (theme/toast.ts) where the message text never recolors. solid is
+    // the one exception: the background itself becomes the solid color,
+    // so title/description have to flip to that color's own
+    // `-foreground` token to stay legible, the same pairing Button's
+    // own solid variant already uses.
+    { color: "success", variant: "soft", class: { root: "bg-[var(--ui-success-soft)]", icon: "text-[var(--ui-success)]" } },
+    { color: "success", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-success)]", icon: "text-[var(--ui-success)]" } },
+    { color: "success", variant: "solid", class: { root: "bg-[var(--ui-success)]", icon: "text-[var(--ui-success-foreground)]", title: "text-[var(--ui-success-foreground)]", description: "text-[var(--ui-success-foreground)] opacity-80" } },
+    { color: "danger", variant: "soft", class: { root: "bg-[var(--ui-danger-soft)]", icon: "text-[var(--ui-danger)]" } },
+    { color: "danger", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-danger)]", icon: "text-[var(--ui-danger)]" } },
+    { color: "danger", variant: "solid", class: { root: "bg-[var(--ui-danger)]", icon: "text-[var(--ui-danger-foreground)]", title: "text-[var(--ui-danger-foreground)]", description: "text-[var(--ui-danger-foreground)] opacity-80" } },
+    { color: "warning", variant: "soft", class: { root: "bg-[var(--ui-warning-soft)]", icon: "text-[var(--ui-warning)]" } },
+    { color: "warning", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-warning)]", icon: "text-[var(--ui-warning)]" } },
+    { color: "warning", variant: "solid", class: { root: "bg-[var(--ui-warning)]", icon: "text-[var(--ui-warning-foreground)]", title: "text-[var(--ui-warning-foreground)]", description: "text-[var(--ui-warning-foreground)] opacity-80" } },
+    { color: "info", variant: "soft", class: { root: "bg-[var(--ui-info-soft)]", icon: "text-[var(--ui-info)]" } },
+    { color: "info", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-info)]", icon: "text-[var(--ui-info)]" } },
+    { color: "info", variant: "solid", class: { root: "bg-[var(--ui-info)]", icon: "text-[var(--ui-info-foreground)]", title: "text-[var(--ui-info-foreground)]", description: "text-[var(--ui-info-foreground)] opacity-80" } }
+  ],
+  defaultVariants: {
+    color: "info",
+    variant: "soft"
+  }
+});

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

@@ -0,0 +1,59 @@
+export declare const avatarGroupTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+            count: string;
+        };
+        md: {
+            item: string;
+            count: string;
+        };
+        lg: {
+            item: string;
+            count: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    count: string;
+}, undefined, {
+    size: {
+        sm: {
+            item: string;
+            count: string;
+        };
+        md: {
+            item: string;
+            count: string;
+        };
+        lg: {
+            item: string;
+            count: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    count: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            item: string;
+            count: string;
+        };
+        md: {
+            item: string;
+            count: string;
+        };
+        lg: {
+            item: string;
+            count: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    count: string;
+}>>;
+export type AvatarGroupThemeSlots = keyof (typeof avatarGroupTheme)['slots'];

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

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+export const avatarGroupTheme = tv({
+  slots: {
+    root: "inline-flex flex-row-reverse justify-end",
+    item: "relative rounded-full ring-[var(--ui-bg)]",
+    count: "relative rounded-full bg-[var(--ui-bg-elevated)] text-[var(--ui-text-muted)] font-medium flex items-center justify-center"
+  },
+  variants: {
+    size: {
+      sm: { item: "ring-1 -me-1", count: "ring-1 -me-1 size-6 text-[10px]" },
+      md: { item: "ring-2 -me-1.5", count: "ring-2 -me-1.5 size-8 text-xs" },
+      lg: { item: "ring-2 -me-2", count: "ring-2 -me-2 size-10 text-sm" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});