@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/card/Card.astro

@@ -1,182 +1,197 @@
----
-/**
- * @component Card
- * @title Card
- * @description UI container for grouping content with header, footer, etc.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=54-1310
- * @preview
- *
- * <Card class="w-full max-w-sm">
- *   <CardMedia>
- *     <img src="/mount-fuji.png" alt="Mount Fuji at sunset" width="374" height="250" loading="lazy" />
- *   </CardMedia>
- *   <CardHeader>
- *     <div class="flex items-center gap-2 justify-between">
- *       <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
- *         <Avatar>
- *           <AvatarImage>
- *             <img src="https://gradient.bejamas.com/presets/bejamas/marine.png" alt="grdient avatar" />
- *           </AvatarImage>
- *           <AvatarFallback>AW</AvatarFallback>
- *         </Avatar>
- *       </div>
- *       <Date date="2025-08-24T12:00:00Z" class="text-sm text-muted-foreground" />
- *     </div>
- *   </CardHeader>
- *   <CardContent>
- *     <div class="flex flex-col gap-6 group-data-[size=large]/card:gap-3">
- *       <CardTitle>Strong Foundations, Built to Scale</CardTitle>
- *       <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>
- *     </div>
- *     <Button variant="outline" as="a" href="#">Read more</Button>
- *   </CardContent>
- *   <Separator />
- *   <CardFooter>
- *     <p class="text-sm text-muted-foreground">Categories</p>
- *     <div class="flex items-center gap-1">
- *       <Badge variant="secondary" shape="sharp">Marketing</Badge>
- *       <Badge variant="secondary" shape="sharp">UI Design</Badge>
- *     </div>
- *   </CardFooter>
- * </Card>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';
- * import { Separator } from '@bejamas/ui/components/separator';
- * ---
- *
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Card Title</CardTitle>
- *     <CardDescription>Card Description</CardDescription>
- *   </CardHeader>
- *   <CardContent>
- *     Card content goes here.
- *   </CardContent>
- *   <Separator />
- *   <CardFooter>
- *     <button>OK</button>
- *   </CardFooter>
- * </Card>
- * ```
- *
- * @examples
- *
- * ### Sizes
- *
- * Use `size="default"` (compact, the default) or `size="large"` for more generous padding and larger title/description text.
- *
- * <Card size="large">...</Card>
- *
- * ### Ghost
- *
- * `variant="ghost"` removes the card's border, background, and shadow — useful for embedding a card's content inline without visual chrome. Ghost also supports `orientation="horizontal"` for a side-by-side media + content layout.
- *
- * <Card variant="ghost" orientation="horizontal">...</Card>
- *
- * ### Overlay
- *
- * `variant="overlay"` renders `<CardMedia>` as a full-bleed background behind the card's content — no separate prop is needed on `CardMedia` itself, `Card` handles the positioning. Pair with `text-primary-foreground` content since it always sits on a photo.
- *
- * <Card variant="overlay">...</Card>
- *
- * ### As a link
- *
- * Pass `as="a"` (with `href`) to render the whole card as a real, natively focusable anchor — this is how to make Figma's Focus state reachable via keyboard, since a plain `<div>` can't receive `:focus-visible`.
- *
- * <Card as="a" href="#">...</Card>
- */
-
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-type CardVariant = "default" | "ghost" | "overlay";
-type CardSize = "default" | "large";
-type CardOrientation = "vertical" | "horizontal";
-
-type CardAsDiv = {
-  as?: "div";
-} & HTMLAttributes<"div">;
-
-type CardAsAnchor = {
-  as: "a";
-} & HTMLAttributes<"a">;
-
-type CardOwnProps = {
-  variant?: CardVariant;
-  size?: CardSize;
-  orientation?: CardOrientation;
-};
-
-export type Props = (CardAsDiv | CardAsAnchor) & CardOwnProps;
-
-const {
-  as: Tag = "div",
-  class: className = "",
-  variant = "default",
-  size = "default",
-  orientation = "vertical",
-  ...rest
-} = Astro.props as Props;
-
-const cardVariants = cva(
-  "group/card relative flex overflow-clip rounded-lg text-sm text-card-foreground outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1",
-  {
-    variants: {
-      variant: {
-        default: "bg-card border border-border",
-        ghost: "",
-        overlay: "",
-      },
-      size: {
-        default: "",
-        large: "",
-      },
-      orientation: {
-        vertical: "flex-col",
-        horizontal: "flex-row items-start",
-      },
-    },
-    compoundVariants: [
-      { variant: "overlay", size: "default", class: "justify-between p-8 aspect-[360/260]" },
-      { variant: "overlay", size: "large", class: "justify-between p-8 aspect-[481/576]" },
-      { variant: "ghost", orientation: "horizontal", class: "gap-8 p-2" },
-    ],
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      orientation: "vertical",
-    },
-  },
-);
----
-
-{
-  /*
-  TS can't reconcile our discriminated union props with a dynamic intrinsic Tag.
-  The public Props type *is* strict (href only allowed when as="a"),
-  but JSX wants an intersection of button+anchor attributes here.
-  We deliberately suppress this internal error and rely on Props for caller safety.
-*/
-}
-<!-- @ts-expect-error – union Props + dynamic Tag confuse JSX typing (see comment above) -->
-<Tag
-  {...rest}
-  data-slot="card"
-  data-variant={variant}
-  data-size={size}
-  data-orientation={orientation}
-  class={cn(
-    cardVariants({ variant, size, orientation }),
-    "*:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
-    variant === "overlay" &&
-      "[&_[data-slot=card-media]]:absolute [&_[data-slot=card-media]]:inset-0 [&_[data-slot=card-media]]:z-0 [&_[data-slot=card-media]]:rounded-lg [&_[data-slot=card-media]]:p-0 [&_[data-slot=card-media]_img]:rounded-lg",
-    className,
-  )}
->
-  <slot />
-</Tag>
+---
+/**
+ * @component Card
+ * @title Card
+ * @description UI container for grouping content with header, footer, etc.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=54-1310
+ * @preview
+ *
+ * <Card class="w-full max-w-sm">
+ *   <CardMedia>
+ *     <img src="/mount-fuji.png" alt="Mount Fuji at sunset" width="374" height="250" loading="lazy" />
+ *   </CardMedia>
+ *   <CardHeader>
+ *     <div class="flex items-center gap-2 justify-between">
+ *       <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
+ *         <Avatar status="active">
+ *           <AvatarImage>
+ *             <img src="https://gradient.bejamas.com/presets/bejamas/marine.png" alt="grdient avatar" />
+ *           </AvatarImage>
+ *           <AvatarFallback>AW</AvatarFallback>
+ *         </Avatar>
+ *       </div>
+ *       <Date date="2025-08-24T12:00:00Z" class="text-sm font-semibold text-muted-foreground" />
+ *     </div>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <div class="flex flex-col gap-6 group-data-[size=large]/card:gap-3">
+ *       <CardTitle>Strong Foundations, Built to Scale</CardTitle>
+ *       <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>
+ *     </div>
+ *     <Button variant="outline" as="a" href="#">Read more</Button>
+ *   </CardContent>
+ *   <Separator />
+ *   <CardFooter>
+ *     <p class="text-sm font-semibold text-muted-foreground">31 steps · 10 min</p>
+ *     <div class="flex items-center gap-1">
+ *       <Badge variant="secondary">Marketing</Badge>
+ *       <Badge variant="secondary">UI Design</Badge>
+ *       <Badge variant="secondary">AI</Badge>
+ *     </div>
+ *   </CardFooter>
+ * </Card>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';
+ * import { Separator } from '@bejamas/ui/components/separator';
+ * ---
+ *
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *     <CardDescription>Card Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     Card content goes here.
+ *   </CardContent>
+ *   <Separator />
+ *   <CardFooter>
+ *     <button>OK</button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ *
+ * @examples
+ *
+ * ### Sizes
+ *
+ * Use `size="default"` (compact, the default) or `size="large"` for more generous padding and larger title/description text.
+ *
+ * <Card size="large">...</Card>
+ *
+ * ### Ghost
+ *
+ * `variant="ghost"` removes the card's border, background, and shadow — useful for embedding a card's content inline without visual chrome. Ghost also supports `orientation="horizontal"` for a side-by-side media + content layout.
+ *
+ * <Card variant="ghost" orientation="horizontal">...</Card>
+ *
+ * ### Overlay
+ *
+ * `variant="overlay"` renders `<CardMedia>` as a full-bleed background behind the card's content — no separate prop is needed on `CardMedia` itself, `Card` handles the positioning. Pair with `text-primary-foreground` content since it always sits on a photo.
+ *
+ * <Card variant="overlay">...</Card>
+ *
+ * ### Hover actions
+ *
+ * On `variant="default"`, hovering the card (or focusing anything inside it) fades a `card-hover` scrim over `<CardMedia>` and lifts the card with `shadow-card-light`. Place `<CardMediaSelect>` (top-left, e.g. `<Checkbox size="lg" />`) and/or `<CardMediaActions>` (top-right icon toolbar) inside `<CardMedia>` — both stay hidden until hover/focus-within, and are always visible on touch devices. Don't combine them with `as="a"`: interactive children inside an anchor are invalid HTML.
+ *
+ * <CardMedia>
+ *   <img ... />
+ *   <CardMediaSelect><Checkbox size="lg" aria-label="Select card" /></CardMediaSelect>
+ *   <CardMediaActions>
+ *     <button aria-label="Copy link"><Link /></button>
+ *     <button aria-label="More actions"><Ellipsis /></button>
+ *   </CardMediaActions>
+ * </CardMedia>
+ *
+ * ### As a link
+ *
+ * Pass `as="a"` (with `href`) to render the whole card as a real, natively focusable anchor — this is how to make Figma's Focus state reachable via keyboard, since a plain `<div>` can't receive `:focus-visible`.
+ *
+ * <Card as="a" href="#">...</Card>
+ */
+
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type CardVariant = "default" | "ghost" | "overlay";
+type CardSize = "default" | "large";
+type CardOrientation = "vertical" | "horizontal";
+
+type CardAsDiv = {
+  as?: "div";
+} & HTMLAttributes<"div">;
+
+type CardAsAnchor = {
+  as: "a";
+} & HTMLAttributes<"a">;
+
+type CardOwnProps = {
+  variant?: CardVariant;
+  size?: CardSize;
+  orientation?: CardOrientation;
+};
+
+export type Props = (CardAsDiv | CardAsAnchor) & CardOwnProps;
+
+const {
+  as: Tag = "div",
+  class: className = "",
+  variant = "default",
+  size = "default",
+  orientation = "vertical",
+  ...rest
+} = Astro.props as Props;
+
+const cardVariants = cva(
+  "group/card relative flex overflow-clip rounded-lg text-sm text-card-foreground outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-card border border-border transition-shadow hover:shadow-card-light focus-within:shadow-card-light",
+        ghost: "border border-transparent",
+        overlay: "border border-transparent",
+      },
+      size: {
+        default: "",
+        large: "",
+      },
+      orientation: {
+        vertical: "flex-col",
+        horizontal: "flex-row items-start",
+      },
+    },
+    compoundVariants: [
+      { variant: "overlay", size: "default", class: "justify-between p-8 aspect-[360/260]" },
+      { variant: "overlay", size: "large", class: "justify-between p-8 aspect-[481/576]" },
+      { variant: "ghost", orientation: "horizontal", class: "gap-8 p-2" },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      orientation: "vertical",
+    },
+  },
+);
+---
+
+{
+  /*
+  TS can't reconcile our discriminated union props with a dynamic intrinsic Tag.
+  The public Props type *is* strict (href only allowed when as="a"),
+  but JSX wants an intersection of button+anchor attributes here.
+  We deliberately suppress this internal error and rely on Props for caller safety.
+*/
+}
+<!-- @ts-expect-error – union Props + dynamic Tag confuse JSX typing (see comment above) -->
+<Tag
+  {...rest}
+  data-slot="card"
+  data-variant={variant}
+  data-size={size}
+  data-orientation={orientation}
+  class={cn(
+    cardVariants({ variant, size, orientation }),
+    "*:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
+    variant === "overlay" &&
+      "[&_[data-slot=card-media]]:absolute [&_[data-slot=card-media]]:inset-0 [&_[data-slot=card-media]]:z-0 [&_[data-slot=card-media]]:rounded-lg [&_[data-slot=card-media]]:p-0 [&_[data-slot=card-media]_img]:rounded-lg",
+    className,
+  )}
+>
+  <slot />
+</Tag>

package/src/components/card/CardAction.astro

@@ -1,26 +1,26 @@
----
-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<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const actionVariants = cva(
-  "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-);
----
-
-<div
-  {...rest}
-  data-slot="card-action"
-  class={cn("", actionVariants(), className)}
->
-  <slot />
-</div>
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const actionVariants = cva(
+  "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+);
+---
+
+<div
+  {...rest}
+  data-slot="card-action"
+  class={cn("", actionVariants(), className)}
+>
+  <slot />
+</div>

package/src/components/card/CardContent.astro

@@ -1,28 +1,28 @@
----
-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<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const contentVariants = cva("");
----
-
-<div
-  {...rest}
-  data-slot="card-content"
-  class={cn(
-    "flex flex-col gap-8 px-6 pt-8 pb-6 group-data-[orientation=horizontal]/card:flex-1 group-data-[orientation=horizontal]/card:justify-between group-data-[orientation=horizontal]/card:self-stretch group-data-[orientation=horizontal]/card:px-0 group-data-[orientation=horizontal]/card:py-3 group-data-[variant=overlay]/card:relative group-data-[variant=overlay]/card:z-10 group-data-[variant=overlay]/card:flex-row group-data-[variant=overlay]/card:items-end group-data-[variant=overlay]/card:justify-between group-data-[variant=overlay]/card:px-0 group-data-[variant=overlay]/card:pt-0 group-data-[variant=overlay]/card:pb-0 group-data-[variant=overlay]/card:text-primary-foreground",
-    contentVariants(),
-    className,
-  )}
->
-  <slot />
-</div>
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const contentVariants = cva("");
+---
+
+<div
+  {...rest}
+  data-slot="card-content"
+  class={cn(
+    "flex flex-col gap-8 px-6 pt-8 pb-6 group-data-[orientation=horizontal]/card:flex-1 group-data-[orientation=horizontal]/card:justify-between group-data-[orientation=horizontal]/card:self-stretch group-data-[orientation=horizontal]/card:px-0 group-data-[orientation=horizontal]/card:py-3 group-data-[variant=overlay]/card:relative group-data-[variant=overlay]/card:z-10 group-data-[variant=overlay]/card:flex-row group-data-[variant=overlay]/card:items-end group-data-[variant=overlay]/card:justify-between group-data-[variant=overlay]/card:px-0 group-data-[variant=overlay]/card:pt-0 group-data-[variant=overlay]/card:pb-0 group-data-[variant=overlay]/card:text-primary-foreground group-data-[variant=overlay]/card:group-data-[size=large]/card:gap-10",
+    contentVariants(),
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/card/CardDescription.astro

@@ -1,28 +1,28 @@
----
-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<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const descriptionVariants = cva("");
----
-
-<div
-  {...rest}
-  data-slot="card-description"
-  class={cn(
-    "text-muted-foreground text-sm group-data-[size=large]/card:group-data-[orientation=vertical]/card:text-base group-data-[variant=overlay]/card:text-primary-foreground",
-    descriptionVariants(),
-    className,
-  )}
->
-  <slot />
-</div>
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const descriptionVariants = cva("");
+---
+
+<div
+  {...rest}
+  data-slot="card-description"
+  class={cn(
+    "text-muted-foreground text-sm group-data-[size=large]/card:group-data-[orientation=vertical]/card:not-in-data-[variant=overlay]:text-base group-data-[variant=overlay]/card:text-primary-foreground",
+    descriptionVariants(),
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/card/CardFooter.astro

@@ -1,24 +1,24 @@
----
-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<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const footerVariants = cva("flex items-center justify-between");
----
-
-<div
-  {...rest}
-  data-slot="card-footer"
-  class={cn("gap-6 p-6 group-data-[orientation=horizontal]/card:hidden", footerVariants(), className)}
->
-  <slot />
-</div>
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const footerVariants = cva("flex items-center justify-between");
+---
+
+<div
+  {...rest}
+  data-slot="card-footer"
+  class={cn("gap-6 p-6 group-data-[orientation=horizontal]/card:hidden", footerVariants(), className)}
+>
+  <slot />
+</div>