@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/card/CardHeader.astro

@@ -1,30 +1,30 @@
----
-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 headerVariants = cva(
-  "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-data-[slot=card-action]:grid-cols-[1fr_auto]",
-);
----
-
-<div
-  {...rest}
-  data-slot="card-header"
-  class={cn(
-    "gap-1.5 px-6 pt-6 pb-0 group-data-[size=large]/card:pt-8 group-data-[variant=overlay]/card:relative group-data-[variant=overlay]/card:z-10 group-data-[variant=overlay]/card:px-0 group-data-[variant=overlay]/card:pt-0 group-data-[variant=overlay]/card:pb-0",
-    headerVariants(),
-    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 headerVariants = cva(
+  "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+);
+---
+
+<div
+  {...rest}
+  data-slot="card-header"
+  class={cn(
+    "gap-1.5 px-6 pt-6 pb-0 group-data-[size=large]/card:pt-8 group-data-[variant=overlay]/card:relative group-data-[variant=overlay]/card:z-10 group-data-[variant=overlay]/card:px-0 group-data-[variant=overlay]/card:pt-0 group-data-[variant=overlay]/card:pb-0",
+    headerVariants(),
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/card/CardMedia.astro

@@ -1,27 +1,27 @@
----
-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 mediaVariants = cva(
-  "relative z-0 overflow-hidden pt-2 px-2 [&_img]:size-full [&_img]:rounded-md [&_img]:object-cover group-data-[orientation=horizontal]/card:w-2/5 group-data-[orientation=horizontal]/card:self-stretch group-data-[orientation=horizontal]/card:p-0",
-);
----
-
-<div
-  {...rest}
-  data-slot="card-media"
-  class={cn("", mediaVariants(), 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 mediaVariants = cva(
+  "relative z-0 overflow-hidden pt-2 px-2 [&_img]:size-full [&_img]:rounded-md [&_img]:object-cover group-data-[orientation=horizontal]/card:w-2/5 group-data-[orientation=horizontal]/card:self-stretch group-data-[orientation=horizontal]/card:p-0 group-data-[variant=default]/card:after:pointer-events-none group-data-[variant=default]/card:after:absolute group-data-[variant=default]/card:after:inset-x-2 group-data-[variant=default]/card:after:top-2 group-data-[variant=default]/card:after:bottom-0 group-data-[variant=default]/card:after:rounded-md group-data-[variant=default]/card:after:bg-card-hover group-data-[variant=default]/card:after:opacity-0 group-data-[variant=default]/card:after:transition-opacity group-data-[variant=default]/card:after:duration-200 group-data-[variant=default]/card:group-hover/card:after:opacity-100 group-data-[variant=default]/card:group-focus-within/card:after:opacity-100",
+);
+---
+
+<div
+  {...rest}
+  data-slot="card-media"
+  class={cn("", mediaVariants(), className)}
+>
+  <slot />
+</div>
+

package/src/components/card/CardMediaActions.astro

@@ -0,0 +1,21 @@
+---
+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="card-media-actions"
+  class={cn(
+    "absolute top-5 right-5 z-10 flex items-center gap-4 rounded-md border border-slider-background-disabled bg-card-hover py-1 pr-1.5 pl-2.5 text-primary-foreground opacity-0 transition-opacity duration-200 group-hover/card:opacity-100 group-focus-within/card:opacity-100 [@media(hover:none)]:opacity-100 [&_svg]:size-5",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/card/CardMediaSelect.astro

@@ -0,0 +1,21 @@
+---
+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="card-media-select"
+  class={cn(
+    "absolute top-5 left-5 z-10 flex opacity-0 transition-opacity duration-200 group-hover/card:opacity-100 group-focus-within/card:opacity-100 [@media(hover:none)]:opacity-100",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/card/CardOverlay.astro

@@ -1,32 +1,32 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-type CardOverlayVariant = "default" | "glass";
-
-interface Props extends HTMLAttributes<"div"> {
-  variant?: CardOverlayVariant;
-  class?: string;
-}
-
-const {
-  class: className = "",
-  variant = "default",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="card-overlay"
-  class={cn("", 
-    "inset-0 absolute z-10 opacity-0 p-6 group-hover/card:opacity-100 transition-opacity duration-300 ease-out",
-    variant === "glass"
-      ? "bg-primary/70 backdrop-blur-sm text-primary-foreground"
-      : "bg-primary text-primary-foreground",
-    className,
-  )}
->
-  <slot />
-</div>
-
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type CardOverlayVariant = "default" | "glass";
+
+interface Props extends HTMLAttributes<"div"> {
+  variant?: CardOverlayVariant;
+  class?: string;
+}
+
+const {
+  class: className = "",
+  variant = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="card-overlay"
+  class={cn("", 
+    "inset-0 absolute z-10 opacity-0 p-6 group-hover/card:opacity-100 transition-opacity duration-300 ease-out",
+    variant === "glass"
+      ? "bg-primary/70 backdrop-blur-sm text-primary-foreground"
+      : "bg-primary text-primary-foreground",
+    className,
+  )}
+>
+  <slot />
+</div>
+

package/src/components/card/CardTitle.astro

@@ -1,21 +1,21 @@
----
-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 titleVariants = cva("font-heading text-balance");
----
-
-<div
-  {...rest}
-  data-slot="card-title"
-  class={cn("text-xl leading-6 font-semibold group-data-[orientation=horizontal]/card:text-base", titleVariants(), 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 titleVariants = cva("font-heading text-balance");
+---
+
+<div
+  {...rest}
+  data-slot="card-title"
+  class={cn("text-xl leading-6 font-semibold group-data-[orientation=horizontal]/card:text-base", titleVariants(), className)}
+>
+  <slot />
+</div>

package/src/components/card/index.ts

@@ -1,10 +1,12 @@
-export { default as Card } from "./Card.astro";
-export { default as CardMedia } from "./CardMedia.astro";
-export { default as CardHeader } from "./CardHeader.astro";
-export { default as CardTitle } from "./CardTitle.astro";
-export { default as CardDescription } from "./CardDescription.astro";
-export { default as CardAction } from "./CardAction.astro";
-export { default as CardContent } from "./CardContent.astro";
-export { default as CardFooter } from "./CardFooter.astro";
-export { default as CardOverlay } from "./CardOverlay.astro";
-
+export { default as Card } from "./Card.astro";
+export { default as CardMedia } from "./CardMedia.astro";
+export { default as CardMediaSelect } from "./CardMediaSelect.astro";
+export { default as CardMediaActions } from "./CardMediaActions.astro";
+export { default as CardHeader } from "./CardHeader.astro";
+export { default as CardTitle } from "./CardTitle.astro";
+export { default as CardDescription } from "./CardDescription.astro";
+export { default as CardAction } from "./CardAction.astro";
+export { default as CardContent } from "./CardContent.astro";
+export { default as CardFooter } from "./CardFooter.astro";
+export { default as CardOverlay } from "./CardOverlay.astro";
+

package/src/components/carousel/CHANGELOG.md

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

package/src/components/carousel/Carousel.astro

@@ -1,106 +1,106 @@
----
-/**
- * @component Carousel
- * @title Carousel
- * @description A CSS scroll-snap carousel using only Tailwind classes (no JS).
- *
- * @preview
- *
- * <!-- Horizontal images with center snapping -->
- * <Carousel class="gap-4 p-2" align="center">
- *   <CarouselSlide><img src="https://images.unsplash.com/photo-1759332978018-a6efdacf4d11?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1290" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
- *   <CarouselSlide><img src="https://plus.unsplash.com/premium_photo-1760541740387-e0af5182d805?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1335" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
- *   <CarouselSlide><img src="https://images.unsplash.com/photo-1760659391924-86d657118008?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2340" alt="Example" class="w-120 h-96 object-cover rounded-lg" /></CarouselSlide>
- * </Carousel>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Carousel, CarouselSlide } from '@bejamas/ui/components/carousel';
- * ---
- *
- * <Carousel>
- *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 1</div></CarouselSlide>
- *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 2</div></CarouselSlide>
- *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 3</div></CarouselSlide>
- * </Carousel>
- * ```
- *
- * @props
- * - axis?: "x" | "y" — Scroll direction. Default: "x".
- * - snapType?: "mandatory" | "proximity" — Scroll-snap behavior. Default: "mandatory".
- * - align?: "start" | "center" | "end" — Child snap alignment. Default: "start".
- * - fade?: boolean — Add edge fade via CSS mask on the scroll axis. Default: false.
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-type Axis = "x" | "y";
-type SnapType = "mandatory" | "proximity";
-type Align = "start" | "center" | "end";
-
-interface Props extends HTMLAttributes<"div"> {
-  axis?: Axis;
-  snapType?: SnapType;
-  align?: Align;
-  fade?: boolean;
-  class?: string;
-}
-
-const {
-  axis = "x",
-  snapType = "mandatory",
-  align = "start",
-  fade = false,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const carouselVariants = cva(
-  "relative w-full overflow-auto scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-  {
-    variants: {
-      axis: {
-        x: "flex flex-row snap-x",
-        y: "flex flex-col snap-y",
-      },
-      snapType: {
-        mandatory: "snap-mandatory",
-        proximity: "snap-proximity",
-      },
-      align: {
-        start:
-          "[&>[data-slot=carousel-slide]]:snap-start [&>[data-slot=carousel-slide]]:shrink-0",
-        center:
-          "[&>[data-slot=carousel-slide]]:snap-center [&>[data-slot=carousel-slide]]:shrink-0",
-        end: "[&>[data-slot=carousel-slide]]:snap-end [&>[data-slot=carousel-slide]]:shrink-0",
-      },
-    },
-    defaultVariants: {
-      axis: "x",
-      snapType: "mandatory",
-      align: "start",
-    },
-  },
-);
-
-const defaultFadeX = "mask-x-from-80% mask-x-to-95%";
-const defaultFadeY = "mask-y-from-80% mask-y-to-95%";
----
-
-<div
-  {...rest}
-  data-slot="carousel"
-  class={cn("", 
-    carouselVariants({ axis, snapType, align }),
-    fade && axis === "x" && defaultFadeX,
-    fade && axis === "y" && defaultFadeY,
-    className,
-  )}
->
-  <slot />
-</div>
-
+---
+/**
+ * @component Carousel
+ * @title Carousel
+ * @description A CSS scroll-snap carousel using only Tailwind classes (no JS).
+ *
+ * @preview
+ *
+ * <!-- Horizontal images with center snapping -->
+ * <Carousel class="gap-4 p-2" align="center">
+ *   <CarouselSlide><img src="https://images.unsplash.com/photo-1759332978018-a6efdacf4d11?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1290" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
+ *   <CarouselSlide><img src="https://plus.unsplash.com/premium_photo-1760541740387-e0af5182d805?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1335" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
+ *   <CarouselSlide><img src="https://images.unsplash.com/photo-1760659391924-86d657118008?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2340" alt="Example" class="w-120 h-96 object-cover rounded-lg" /></CarouselSlide>
+ * </Carousel>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Carousel, CarouselSlide } from '@bejamas/ui/components/carousel';
+ * ---
+ *
+ * <Carousel>
+ *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 1</div></CarouselSlide>
+ *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 2</div></CarouselSlide>
+ *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 3</div></CarouselSlide>
+ * </Carousel>
+ * ```
+ *
+ * @props
+ * - axis?: "x" | "y" — Scroll direction. Default: "x".
+ * - snapType?: "mandatory" | "proximity" — Scroll-snap behavior. Default: "mandatory".
+ * - align?: "start" | "center" | "end" — Child snap alignment. Default: "start".
+ * - fade?: boolean — Add edge fade via CSS mask on the scroll axis. Default: false.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type Axis = "x" | "y";
+type SnapType = "mandatory" | "proximity";
+type Align = "start" | "center" | "end";
+
+interface Props extends HTMLAttributes<"div"> {
+  axis?: Axis;
+  snapType?: SnapType;
+  align?: Align;
+  fade?: boolean;
+  class?: string;
+}
+
+const {
+  axis = "x",
+  snapType = "mandatory",
+  align = "start",
+  fade = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const carouselVariants = cva(
+  "relative w-full overflow-auto scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+  {
+    variants: {
+      axis: {
+        x: "flex flex-row snap-x",
+        y: "flex flex-col snap-y",
+      },
+      snapType: {
+        mandatory: "snap-mandatory",
+        proximity: "snap-proximity",
+      },
+      align: {
+        start:
+          "[&>[data-slot=carousel-slide]]:snap-start [&>[data-slot=carousel-slide]]:shrink-0",
+        center:
+          "[&>[data-slot=carousel-slide]]:snap-center [&>[data-slot=carousel-slide]]:shrink-0",
+        end: "[&>[data-slot=carousel-slide]]:snap-end [&>[data-slot=carousel-slide]]:shrink-0",
+      },
+    },
+    defaultVariants: {
+      axis: "x",
+      snapType: "mandatory",
+      align: "start",
+    },
+  },
+);
+
+const defaultFadeX = "mask-x-from-80% mask-x-to-95%";
+const defaultFadeY = "mask-y-from-80% mask-y-to-95%";
+---
+
+<div
+  {...rest}
+  data-slot="carousel"
+  class={cn("", 
+    carouselVariants({ axis, snapType, align }),
+    fade && axis === "x" && defaultFadeX,
+    fade && axis === "y" && defaultFadeY,
+    className,
+  )}
+>
+  <slot />
+</div>
+

package/src/components/carousel/CarouselSlide.astro

@@ -1,22 +1,22 @@
----
-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="carousel-slide"
-  class={cn("", "shrink-0", 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="carousel-slide"
+  class={cn("", "shrink-0", className)}
+>
+  <slot />
+</div>
+

package/src/components/carousel/index.ts

@@ -1,3 +1,3 @@
-export { default as Carousel } from "./Carousel.astro";
-export { default as CarouselSlide } from "./CarouselSlide.astro";
-
+export { default as Carousel } from "./Carousel.astro";
+export { default as CarouselSlide } from "./CarouselSlide.astro";
+