@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/avatar/Avatar.astro

@@ -1,197 +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>
+---
+/**
+ * @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

@@ -1,44 +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>
+---
+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

@@ -1,26 +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>
+---
+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

@@ -1,26 +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>
+---
+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

@@ -1,30 +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>
+---
+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>