@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/dialog/Dialog.astro

@@ -1,196 +1,196 @@
----
-/**
- * @component Dialog
- * @title Dialog
- * @description An accessible modal window for focused content or user actions with customizable open/close behavior.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=141-6002
- *
- * @preview
- *
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Manage Cookies</Button>
- *   </DialogTrigger>
- *
- *   <DialogContent class="sm:max-w-lg">
- *     <DialogHeader>
- *       <DialogTitle>Manage Cookies</DialogTitle>
- *       <DialogDescription>
- *         Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <div class="mt-3">
- *       <div class="flex items-center gap-3">
- *         <Checkbox id="cookies-necessary" name="cookies-necessary" disabled checked />
- *         <Label for="cookies-necessary">Strictly Necessary Cookies (always active)</Label>
- *       </div>
- *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies are essential for the site to function and cannot be toggled off. They assist with security, user authentication, customer support, etc.</p>
- *     </div>
- *     <div class="mt-3">
- *       <div class="flex items-center gap-3">
- *         <Checkbox id="cookies-analytics" name="cookies-analytics" />
- *         <Label for="cookies-analytics">Analytics Cookies</Label>
- *       </div>
- *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us understand how visitors interact with our site. They allow us to measure traffic and improve site performance.</p>
- *     </div>
- *     <div class="mt-3">
- *       <div class="flex items-center gap-3">
- *         <Checkbox id="cookies-marketing-performance" name="cookies-marketing-performance" />
- *         <Label for="cookies-marketing-performance">Marketing Performance Cookies</Label>
- *       </div>
- *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us measure the effectiveness of our marketing campaigns.</p>
- *     </div>
- *     <DialogFooter>
- *       <Button data-slot="dialog-close" class="mt-4" variant="outline">Close</Button>
- *       <Button data-dialog-close class="mt-4">Save changes</Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Dialog, DialogTitle, DialogDescription, DialogContent, DialogFooter, DialogClose } from '@bejamas/ui/components/dialog';
- * import { Button } from '@bejamas/ui/components/button';
- * ---
- *
- *
- * <Dialog id="myDialog">
- *   <DialogTrigger>Open Dialog</DialogTrigger>
- *   <DialogContent>
- *     <DialogTitle>Dialog Title</DialogTitle>
- *     <DialogDescription>Dialog description.</DialogDescription>
- *     Content here
- *     <DialogFooter>
- *       <DialogClose>Close</DialogClose>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- * ```
- *
- * @api
- *
- * ### Events
- *
- * The dialog emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `dialog:change` | `{ open: boolean }` | Fired when the open state changes |
- *
- * ```astro nocollapse
- * <Dialog id="my-dialog">
- *   <DialogTrigger>Open Dialog</DialogTrigger>
- *   <DialogContent>
- *     <DialogTitle>Title</DialogTitle>
- *     <DialogDescription>Description</DialogDescription>
- *   </DialogContent>
- * </Dialog>
- * ```
- *
- * ```js nocollapse
- *   const dialog = document.getElementById('my-dialog');
- *
- *   dialog.addEventListener('dialog:change', (e) => {
- *     console.log('Is open:', e.detail.open);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can control the dialog programmatically by dispatching a `dialog:set` event:
- *
- * ```js nocollapse
- * const dialog = document.getElementById('my-dialog');
- *
- * // Open the dialog
- * dialog.dispatchEvent(new CustomEvent('dialog:set', {
- *   detail: { open: true }
- * }));
- *
- * // Close the dialog
- * dialog.dispatchEvent(new CustomEvent('dialog:set', {
- *   detail: { open: false }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * The dialog sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-state` | dialog | Current state (`open` or `closed`) |
- *
- * @examples
- *
- * ### Nested Dialogs
- *
- * <Dialog>
- *   <Button data-slot="dialog-trigger" class="">Open Nested Dialog</Button>
- *   <DialogContent class="sm:max-w-lg">
- *     <DialogHeader>
- *       <DialogTitle>Nested Dialog</DialogTitle>
- *       <DialogDescription>
- *         Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <DialogFooter>
- *       <Button data-slot="dialog-close" class="mt-4" variant="outline">Close</Button>
- *       <Dialog>
- *         <Button data-slot="dialog-trigger" class="mt-4">Open Nested Dialog</Button>
- *         <DialogContent class="sm:max-w-md">
- *           <DialogHeader>
- *             <DialogTitle>Nested Dialog</DialogTitle>
- *             <DialogDescription>
- *               Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
- *             </DialogDescription>
- *           </DialogHeader>
- *         </DialogContent>
- *       </Dialog>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- *
- */
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  defaultOpen?: boolean;
-  class?: string;
-  closeOnClickOutside?: boolean;
-  closeOnEscape?: boolean;
-  lockScroll?: boolean;
-}
-
-const {
-  class: className = "",
-  defaultOpen = false,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  lockScroll = true,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  data-slot="dialog"
-  data-default-open={defaultOpen}
-  data-close-on-click-outside={closeOnClickOutside}
-  data-close-on-escape={closeOnEscape}
-  data-lock-scroll={lockScroll}
-  class={cn("", className)}
-  {...rest}
->
-  <slot />
-</div>
-
-<script>
-  import { createDialog } from "@data-slot/dialog";
-
-  document
-    .querySelectorAll<HTMLElement>('[data-slot="dialog"]')
-    .forEach((el) => createDialog(el));
-</script>
+---
+/**
+ * @component Dialog
+ * @title Dialog
+ * @description An accessible modal window for focused content or user actions with customizable open/close behavior.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=141-6002
+ *
+ * @preview
+ *
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button>Manage Cookies</Button>
+ *   </DialogTrigger>
+ *
+ *   <DialogContent class="sm:max-w-lg">
+ *     <DialogHeader>
+ *       <DialogTitle>Manage Cookies</DialogTitle>
+ *       <DialogDescription>
+ *         Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
+ *       </DialogDescription>
+ *     </DialogHeader>
+ *     <div class="mt-3">
+ *       <div class="flex items-center gap-3">
+ *         <Checkbox id="cookies-necessary" name="cookies-necessary" disabled checked />
+ *         <Label for="cookies-necessary">Strictly Necessary Cookies (always active)</Label>
+ *       </div>
+ *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies are essential for the site to function and cannot be toggled off. They assist with security, user authentication, customer support, etc.</p>
+ *     </div>
+ *     <div class="mt-3">
+ *       <div class="flex items-center gap-3">
+ *         <Checkbox id="cookies-analytics" name="cookies-analytics" />
+ *         <Label for="cookies-analytics">Analytics Cookies</Label>
+ *       </div>
+ *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us understand how visitors interact with our site. They allow us to measure traffic and improve site performance.</p>
+ *     </div>
+ *     <div class="mt-3">
+ *       <div class="flex items-center gap-3">
+ *         <Checkbox id="cookies-marketing-performance" name="cookies-marketing-performance" />
+ *         <Label for="cookies-marketing-performance">Marketing Performance Cookies</Label>
+ *       </div>
+ *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us measure the effectiveness of our marketing campaigns.</p>
+ *     </div>
+ *     <DialogFooter>
+ *       <Button data-slot="dialog-close" class="mt-4" variant="outline">Close</Button>
+ *       <Button data-dialog-close class="mt-4">Save changes</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Dialog, DialogTitle, DialogDescription, DialogContent, DialogFooter, DialogClose } from '@bejamas/ui/components/dialog';
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ *
+ * <Dialog id="myDialog">
+ *   <DialogTrigger>Open Dialog</DialogTrigger>
+ *   <DialogContent>
+ *     <DialogTitle>Dialog Title</DialogTitle>
+ *     <DialogDescription>Dialog description.</DialogDescription>
+ *     Content here
+ *     <DialogFooter>
+ *       <DialogClose>Close</DialogClose>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The dialog emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `dialog:change` | `{ open: boolean }` | Fired when the open state changes |
+ *
+ * ```astro nocollapse
+ * <Dialog id="my-dialog">
+ *   <DialogTrigger>Open Dialog</DialogTrigger>
+ *   <DialogContent>
+ *     <DialogTitle>Title</DialogTitle>
+ *     <DialogDescription>Description</DialogDescription>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ *
+ * ```js nocollapse
+ *   const dialog = document.getElementById('my-dialog');
+ *
+ *   dialog.addEventListener('dialog:change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the dialog programmatically by dispatching a `dialog:set` event:
+ *
+ * ```js nocollapse
+ * const dialog = document.getElementById('my-dialog');
+ *
+ * // Open the dialog
+ * dialog.dispatchEvent(new CustomEvent('dialog:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Close the dialog
+ * dialog.dispatchEvent(new CustomEvent('dialog:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The dialog sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | dialog | Current state (`open` or `closed`) |
+ *
+ * @examples
+ *
+ * ### Nested Dialogs
+ *
+ * <Dialog>
+ *   <Button data-slot="dialog-trigger" class="">Open Nested Dialog</Button>
+ *   <DialogContent class="sm:max-w-lg">
+ *     <DialogHeader>
+ *       <DialogTitle>Nested Dialog</DialogTitle>
+ *       <DialogDescription>
+ *         Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
+ *       </DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <Button data-slot="dialog-close" class="mt-4" variant="outline">Close</Button>
+ *       <Dialog>
+ *         <Button data-slot="dialog-trigger" class="mt-4">Open Nested Dialog</Button>
+ *         <DialogContent class="sm:max-w-md">
+ *           <DialogHeader>
+ *             <DialogTitle>Nested Dialog</DialogTitle>
+ *             <DialogDescription>
+ *               Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
+ *             </DialogDescription>
+ *           </DialogHeader>
+ *         </DialogContent>
+ *       </Dialog>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ *
+ */
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  defaultOpen?: boolean;
+  class?: string;
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+  lockScroll?: boolean;
+}
+
+const {
+  class: className = "",
+  defaultOpen = false,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  data-slot="dialog"
+  data-default-open={defaultOpen}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  data-lock-scroll={lockScroll}
+  class={cn("", className)}
+  {...rest}
+>
+  <slot />
+</div>
+
+<script>
+  import { createDialog } from "@data-slot/dialog";
+
+  document
+    .querySelectorAll<HTMLElement>('[data-slot="dialog"]')
+    .forEach((el) => createDialog(el));
+</script>

package/src/components/dialog/DialogClose.astro

@@ -1,23 +1,23 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-import Button from "../button/Button.astro";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<Button
-  {...rest}
-  data-slot="dialog-close"
-  data-dialog-close
-  variant="ghost"
-  size="icon-sm"
-  class={cn("absolute top-2 right-2", className)}
->
-  <slot />
-  {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
-</Button>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import Button from "../button/Button.astro";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<Button
+  {...rest}
+  data-slot="dialog-close"
+  data-dialog-close
+  variant="ghost"
+  size="icon-sm"
+  class={cn("absolute top-2 right-2", className)}
+>
+  <slot />
+  {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
+</Button>

package/src/components/dialog/DialogContent.astro

@@ -1,42 +1,42 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-import DialogClose from "./DialogClose.astro";
-import DialogOverlay from "./DialogOverlay.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  showCloseButton?: boolean;
-}
-
-const {
-  showCloseButton = true,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div data-slot="dialog-portal" class="z-50 isolate absolute">
-  <DialogOverlay />
-  <div
-    data-slot="dialog-content"
-    hidden
-    class={cn(
-      "bg-card border-border data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 max-w-[calc(100%-2rem)] rounded-lg border shadow-lg duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-      className,
-    )}
-    {...rest}
-  >
-    <div class="grid gap-6 p-6 text-sm">
-      <slot />
-    </div>
-    {
-      showCloseButton && (
-        <DialogClose>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      )
-    }
-  </div>
-</div>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+import DialogClose from "./DialogClose.astro";
+import DialogOverlay from "./DialogOverlay.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  showCloseButton?: boolean;
+}
+
+const {
+  showCloseButton = true,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="dialog-portal" class="z-50 isolate absolute">
+  <DialogOverlay />
+  <div
+    data-slot="dialog-content"
+    hidden
+    class={cn(
+      "bg-card border-border data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 max-w-[calc(100%-2rem)] rounded-lg border shadow-lg duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+      className,
+    )}
+    {...rest}
+  >
+    <div class="grid gap-6 p-6 text-sm">
+      <slot />
+    </div>
+    {
+      showCloseButton && (
+        <DialogClose>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      )
+    }
+  </div>
+</div>

package/src/components/dialog/DialogDescription.astro

@@ -1,18 +1,18 @@
----
-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="dialog-description"
-  class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", 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="dialog-description"
+  class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+>
+  <slot />
+</div>

package/src/components/dialog/DialogFooter.astro

@@ -1,18 +1,18 @@
----
-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="dialog-footer"
-  class={cn("flex justify-end gap-2", 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="dialog-footer"
+  class={cn("flex justify-end gap-2", className)}
+>
+  <slot />
+</div>

package/src/components/dialog/DialogHeader.astro

@@ -1,18 +1,18 @@
----
-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
-  data-slot="dialog-header"
-  class={cn("gap-2 flex flex-col", className)}
-  {...rest}
->
-  <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
+  data-slot="dialog-header"
+  class={cn("gap-2 flex flex-col", className)}
+  {...rest}
+>
+  <slot />
+</div>