@cl-light-ds/ui 0.1.0

package/src/components/alert/Alert.astro

@@ -0,0 +1,167 @@
+---
+/**
+ * @component Alert
+ * @title Alert
+ * @description A prominent message that draws user attention to important information.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=133-10053
+ *
+ * @preview
+ *
+ * <div class="grid w-full max-w-xl items-start gap-4">
+ *   <Alert icon={Info}>
+ *     <AlertTitle>Success! Your changes have been saved</AlertTitle>
+ *   </Alert>
+ *
+ *   <Alert variant="destructive" size="large" icon={CircleAlertIcon}>
+ *     <AlertTitle>Unable to process your payment.</AlertTitle>
+ *     <AlertDescription>Please verify your billing information and try again.</AlertDescription>
+ *     <Fragment slot="actions">
+ *       <Button size="sm">Primary</Button>
+ *       <Button size="sm" variant="outline">Outline</Button>
+ *     </Fragment>
+ *   </Alert>
+ *
+ *   <Alert variant="success" icon={CircleCheckIcon}>
+ *     <AlertTitle>Payment successful.</AlertTitle>
+ *   </Alert>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Alert, AlertTitle, AlertDescription } from '@bejamas/ui/components/alert';
+ * import { InfoIcon } from '@lucide/astro';
+ * ---
+ * <Alert variant="default" icon={InfoIcon}>
+ *   <AlertTitle>Heads up!</AlertTitle>
+ *   <AlertDescription>Something happened successfully.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+import { cva } from "class-variance-authority";
+import { X as XIcon } from "@lucide/astro";
+import type { AstroComponent } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type AlertVariant = "default" | "destructive" | "success";
+type AlertSize = "default" | "large";
+
+interface Props extends HTMLAttributes<"div"> {
+  variant?: AlertVariant;
+  size?: AlertSize;
+  icon?: AstroComponent;
+  dismissible?: boolean;
+  class?: string;
+}
+
+const {
+  class: className = "",
+  variant = "default",
+  size = "default",
+  icon,
+  dismissible = true,
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon;
+const hasIcon = Boolean(Icon);
+const hasActions = Astro.slots.has("actions");
+
+const alertVariants = cva(
+  "group/alert relative flex w-full rounded-lg border border-border",
+  {
+    variants: {
+      variant: {
+        default: "bg-popover",
+        destructive: "bg-card",
+        success: "bg-card",
+      },
+      size: {
+        default: "items-center gap-2 p-2",
+        large: "items-start gap-4 p-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const iconVariants = cva(
+  "flex size-6 shrink-0 items-center justify-center rounded-full [&>svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted text-foreground",
+        destructive: "bg-destructive text-destructive-foreground",
+        success: "bg-success text-success-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const contentVariants = cva("flex flex-1 text-sm", {
+  variants: {
+    size: {
+      default: "items-center py-0.5 pl-2",
+      large: "flex-col gap-8 pt-0.5",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+---
+
+<div
+  {...rest}
+  data-slot="alert"
+  data-variant={variant}
+  data-size={size}
+  role="alert"
+  class={cn(alertVariants({ variant, size }), className)}
+>
+  {
+    hasIcon && (
+      <div data-slot="alert-icon" class={iconVariants({ variant })}>
+        <Icon />
+      </div>
+    )
+  }
+  <div data-slot="alert-content" class={contentVariants({ size })}>
+    {
+      size === "large" ? (
+        <div class="flex flex-col gap-2">
+          <slot />
+        </div>
+      ) : (
+        <slot />
+      )
+    }
+    {
+      size === "large" && hasActions && (
+        <div data-slot="alert-actions" class="flex w-full items-center gap-2">
+          <slot name="actions" />
+        </div>
+      )
+    }
+  </div>
+  {
+    dismissible && (
+      <button
+        type="button"
+        data-slot="alert-dismiss"
+        class="flex shrink-0 items-center justify-center gap-0.5 rounded-lg bg-background p-2 [&>svg]:size-4"
+      >
+        <XIcon />
+        <span class="sr-only">Dismiss</span>
+      </button>
+    )
+  }
+</div>

package/src/components/alert/AlertDescription.astro

@@ -0,0 +1,24 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="alert-description"
+  class={cn(
+    "text-sm text-muted-foreground [&_p:not(:last-child)]:mb-1 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/alert/AlertTitle.astro

@@ -0,0 +1,24 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="alert-title"
+  class={cn(
+    "text-sm font-semibold text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground/80",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/alert/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to the `Alert` component will be documented in this file.
+
+## Unreleased

package/src/components/alert/index.ts

@@ -0,0 +1,4 @@
+export { default as Alert } from "./Alert.astro";
+export { default as AlertTitle } from "./AlertTitle.astro";
+export { default as AlertDescription } from "./AlertDescription.astro";
+

package/src/components/avatar/Avatar.astro

@@ -0,0 +1,197 @@
+---
+/**
+ * @component Avatar
+ * @title Avatar
+ * @description An image, initials, or icon representing a user or entity, with an optional online/offline status badge.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=113-1145
+ *
+ * @preview
+ * <div class="flex flex-wrap items-center gap-4">
+ *   <Avatar status="active">
+ *     <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
+ *     <AvatarFallback>TK</AvatarFallback>
+ *   </Avatar>
+ *   <AvatarGroup>
+ *     <Avatar>
+ *       <AvatarImage src="https://github.com/withastro.png" alt="@withastro" />
+ *       <AvatarFallback>WA</AvatarFallback>
+ *     </Avatar>
+ *     <Avatar>
+ *       <AvatarImage src="https://github.com/bejamas.png" alt="@bejamas" />
+ *       <AvatarFallback>BJ</AvatarFallback>
+ *     </Avatar>
+ *     <AvatarGroupCount>+2</AvatarGroupCount>
+ *   </AvatarGroup>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   Avatar,
+ *   AvatarImage,
+ *   AvatarFallback,
+ *   AvatarGroup,
+ *   AvatarGroupCount,
+ * } from '@bejamas/ui/components/avatar';
+ * ---
+ *
+ * <Avatar size="lg" status="active">
+ *   <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
+ *   <AvatarFallback>TK</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @examples
+ *
+ * ### Sizes
+ *
+ * <div class="flex items-center gap-4">
+ *   <Avatar size="sm">
+ *     <AvatarImage src="https://github.com/bejamas.png" alt="small" />
+ *     <AvatarFallback>SM</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar>
+ *     <AvatarImage src="https://github.com/bejamas.png" alt="default" />
+ *     <AvatarFallback>MD</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar size="lg">
+ *     <AvatarImage src="https://github.com/bejamas.png" alt="large" />
+ *     <AvatarFallback>LG</AvatarFallback>
+ *   </Avatar>
+ * </div>
+ *
+ * ### Variants
+ *
+ * <div class="flex items-center gap-4">
+ *   <Avatar variant="image">
+ *     <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
+ *   </Avatar>
+ *   <Avatar variant="initials">
+ *     <AvatarFallback>AB</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar variant="icon" icon={User} />
+ * </div>
+ *
+ * ### Status
+ *
+ * <div class="flex items-center gap-4">
+ *   <Avatar status="active">
+ *     <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
+ *     <AvatarFallback>TK</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar status="inactive">
+ *     <AvatarImage src="https://github.com/bejamas.png" alt="@bejamas" />
+ *     <AvatarFallback>BJ</AvatarFallback>
+ *   </Avatar>
+ * </div>
+ *
+ * ### Group
+ *
+ * <AvatarGroup>
+ *   <Avatar>
+ *     <AvatarImage src="https://github.com/withastro.png" alt="@withastro" />
+ *     <AvatarFallback>WA</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar>
+ *     <AvatarImage src="https://github.com/bejamas.png" alt="@bejamas" />
+ *     <AvatarFallback>BJ</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar>
+ *     <AvatarFallback>FS</AvatarFallback>
+ *   </Avatar>
+ *   <AvatarGroupCount>+3</AvatarGroupCount>
+ * </AvatarGroup>
+ *
+ * ### With `astro:assets` Image
+ *
+ * ```astro nopreview nocollapse
+ * ---
+ * import { Image } from "astro:assets";
+ * import profile from "@repo/assets/profile.jpg";
+ * import { Avatar, AvatarImage, AvatarFallback } from "@bejamas/ui/components/avatar";
+ * ---
+ *
+ * <Avatar>
+ *   <AvatarImage>
+ *     <Image src={profile} alt="Profile photo" />
+ *   </AvatarImage>
+ *   <AvatarFallback>PR</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { AstroComponent } from "@lucide/astro";
+import type { HTMLAttributes } from "astro/types";
+import AvatarBadge from "./AvatarBadge.astro";
+
+type AvatarVariant = "image" | "initials" | "icon";
+type AvatarStatus = "active" | "inactive";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+  size?: "default" | "sm" | "lg";
+  variant?: AvatarVariant;
+  icon?: AstroComponent;
+  status?: AvatarStatus;
+}
+
+const {
+  class: className = "",
+  size = "default",
+  variant = "image",
+  icon,
+  status,
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon;
+const hasIcon = variant === "icon" && Boolean(Icon);
+
+const avatarVariants = cva(
+  "group/avatar relative z-1 flex shrink-0 select-none rounded-full border border-border after:absolute after:inset-0 after:rounded-full",
+  {
+    variants: {
+      size: {
+        default: "size-8 border-[1.5px]",
+        sm: "size-6 border",
+        lg: "size-10 border-2",
+      },
+      variant: {
+        image: "",
+        initials: "",
+        icon: "bg-primary-foreground",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "image",
+    },
+  },
+);
+---
+
+<span
+  {...rest}
+  data-slot="avatar"
+  data-size={size}
+  data-variant={variant}
+  data-status={status}
+  class={cn(avatarVariants({ size, variant }), className)}
+>
+  <slot />
+  {
+    hasIcon && (
+      <span
+        data-slot="avatar-icon"
+        class="text-foreground pointer-events-none absolute top-1/2 left-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center [&>svg]:size-3.5 group-data-[size=default]/avatar:[&>svg]:size-4 group-data-[size=lg]/avatar:[&>svg]:size-5"
+      >
+        <Icon />
+      </span>
+    )
+  }
+  {status && <AvatarBadge status={status} />}
+</span>

package/src/components/avatar/AvatarBadge.astro

@@ -0,0 +1,44 @@
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+  status?: "active" | "inactive";
+}
+
+const {
+  class: className = "",
+  status = "active",
+  ...rest
+} = Astro.props as Props;
+
+const badgeVariants = cva(
+  "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center select-none rounded-full border-primary-foreground",
+  {
+    variants: {
+      status: {
+        active: "bg-success",
+        inactive: "bg-destructive",
+      },
+    },
+    defaultVariants: {
+      status: "active",
+    },
+  },
+);
+---
+
+<span
+  {...rest}
+  data-slot="avatar-badge"
+  data-status={status}
+  class={cn(
+    badgeVariants({ status }),
+    "size-1.5 border group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:border-[1.5px] group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:border-2",
+    className,
+  )}
+>
+  <slot />
+</span>

package/src/components/avatar/AvatarFallback.astro

@@ -0,0 +1,26 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="avatar-fallback"
+  class={cn(
+    "bg-primary-foreground text-foreground rounded-full font-semibold",
+    "absolute inset-0 flex size-full items-center justify-center",
+    "text-xs group-data-[size=lg]/avatar:text-sm",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/avatar/AvatarGroup.astro

@@ -0,0 +1,26 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes, HTMLTag } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  as?: HTMLTag;
+  class?: string;
+}
+
+const {
+  as: Tag = "div",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<Tag
+  {...rest}
+  data-slot="avatar-group"
+  class={cn("", 
+    "group/avatar-group flex -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background",
+    className,
+  )}
+>
+  <slot />
+</Tag>

package/src/components/avatar/AvatarGroupCount.astro

@@ -0,0 +1,30 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes, HTMLTag } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  as?: HTMLTag;
+  class?: string;
+}
+
+const {
+  as: Tag = "div",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<Tag
+  {...rest}
+  data-slot="avatar-group-count"
+  class={cn(
+    "bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+    "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2",
+    "[&>svg]:size-4",
+    "group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+    "group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5",
+    className,
+  )}
+>
+  <slot />
+</Tag>

package/src/components/avatar/AvatarImage.astro

@@ -0,0 +1,46 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"img"> {
+  class?: string;
+  src?: string;
+  alt?: string;
+}
+
+const {
+  class: className = "",
+  src,
+  alt = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  src ? (
+    <img
+      {...rest}
+      data-slot="avatar-image"
+      src={src}
+      alt={alt}
+      class={cn(
+        "rounded-full",
+        "relative z-10 aspect-square size-full object-cover",
+        className,
+      )}
+    />
+  ) : (
+    <div
+      {...rest}
+      data-slot="avatar-image"
+      class={cn(
+        "rounded-full",
+        "relative z-10 aspect-square size-full overflow-hidden",
+        "[&_img]:size-full [&_img]:object-cover",
+        className,
+      )}
+    >
+      <slot />
+    </div>
+  )
+}

package/src/components/avatar/CHANGELOG.md

@@ -0,0 +1,44 @@
+# Changelog Avatar
+
+All notable changes to the `Avatar` component will be documented in this file.
+
+
+## New props
+
+| Prop | Type | Default | Purpose |
+| :--- | :--- | :--- | :--- |
+| `variant` | `"image" &#124; "initials" &#124; "icon"` | `"image"` | Sets `data-variant`; gates the new inline icon rendering. Image/Initials still render via whichever child (`<AvatarImage>`/`<AvatarFallback>`) you slot in — this doesn't replace that. |
+| `icon` | `AstroComponent` (from `@lucide/astro`) | — | Icon to render when `variant="icon"`, same pattern as `Alert`'s icon prop. |
+| `status` | `"active" &#124; "inactive"` | `undefined` (no badge) | Renders an internal status dot — green for active/online, red for inactive/offline. |
+
+## Styling
+
+- Migrated the root class string to `cva` (size × variant), matching the pattern `Alert.astro` already uses, instead of the old chained `data-[size=...]:` selectors.
+- Added a border to the circle at every size, bound to the `border-border` token: 1px (sm), 1.5px (default), 2px (lg) — previously there was no border at all.
+- `variant="icon"` adds `bg-primary-foreground` (white fill) since there's no child component supplying it.
+
+## Markup
+
+- Added `data-variant` and `data-status` attributes alongside the existing `data-slot`/`data-size`.
+- Icon is rendered inline (centered, sized 14/16/20px per size) when `variant="icon"` — no new subcomponent file needed.
+- Status badge is now rendered internally via `<AvatarBadge status={status} />` when status is set, instead of requiring the consumer to manually slot `<AvatarBadge />`.
+
+## Docs (JSDoc block)
+
+- `@figmaUrl` corrected — it was pointing at the old generic BejamasUI template file; now points at your ClickLearn Lightning node (`node-id=113-1145`).
+- `@description` updated to mention initials/icon/status.
+- Replaced the old "Badge" example with a "Variants" example (image/initials/icon) and a "Status" example (active/inactive).
+- `@preview` / `@usage` updated to use `status="active"` instead of a bare `<AvatarBadge />` child.
+
+## Sibling files (part of the same alignment)
+
+- `AvatarBadge.astro` — added `status?: "active" | "inactive"` (default `"active"`, keeps old bare `<AvatarBadge />` usage looking the same); color now `bg-success`/`bg-destructive` by status; size now scales 6/10/12px per avatar size; swapped `ring-background` for an explicit `border-primary-foreground` to match Figma's literal token.
+- `AvatarFallback.astro` (the Initials variant) — recolored from `bg-muted`/`text-muted-foreground` to `bg-primary-foreground`/`text-foreground`/`font-semibold`; text size now scales with avatar size.
+- `Avatar.stories.ts` / `AvatarStory.astro` — added Initials, Icon, StatusActive, StatusInactive stories.
+- `apps/web/.../_sections/avatar.astro` — props table updated with variant/icon/status; added "Variants" and "Status" preview sections.
+
+## Not changed
+
+- `AvatarImage.astro`, `AvatarGroup.astro`, `AvatarGroupCount.astro` — diameters were already correct, and group-stacking behavior was verified visually to still look right after the border change.
+
+## Unreleased

package/src/components/avatar/index.ts

@@ -0,0 +1,6 @@
+export { default as Avatar } from "./Avatar.astro";
+export { default as AvatarImage } from "./AvatarImage.astro";
+export { default as AvatarFallback } from "./AvatarFallback.astro";
+export { default as AvatarBadge } from "./AvatarBadge.astro";
+export { default as AvatarGroup } from "./AvatarGroup.astro";
+export { default as AvatarGroupCount } from "./AvatarGroupCount.astro";