@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/date/Date.astro

@@ -1,137 +1,137 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-/**
- * @component Date
- * @description Formats and displays dates and times in human-readable styles.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-6519
- *
- * @preview
- *
- * <div class="grid grid-cols-2 gap-4">
- *   <div class="text-foreground text-sm font-medium">Default:</div> <Date date="2025-06-13T12:00:00Z" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Short:</div> <Date date="2025-06-13T12:00:00Z" format="short" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Time:</div> <Date date="2025-06-13T12:00:00Z" format="time" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Full:</div> <Date date="2025-06-13T12:00:00Z" format="full" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Long:</div> <Date date="2025-06-13T12:00:00Z" format="long" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Long with time:</div> <Date date="2025-06-13T12:00:00Z" format="long" includeTime />
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Date } from '@bejamas/ui/components/date';
- * ---
- *
- * <Date date="2025-06-24T12:00:00Z" />
- * ```
- *
- * @examples
- *
- * ### Custom locale
- *
- * <div class="flex gap-2 flex-col">
- *   <Date date="2025-06-24T12:00:00Z" locale="fr-FR" />
- *   <Date date="2025-06-24T12:00:00Z" locale="de-DE" />
- *   <Date date="2025-06-24T12:00:00Z" locale="es-ES" />
- *   <Date date="2025-06-24T12:00:00Z" locale="pl-PL" />
- * </div>
- */
-const {
-  date,
-  format = "long",
-  includeTime = false,
-  locale = "en-US",
-  class: className = "",
-  ...props
-} = Astro.props;
-
-// Helper: parse date input
-function parseDate(input: string | globalThis.Date | null | undefined) {
-  if (!input) return null;
-  if (input instanceof globalThis.Date) return input;
-  // Try to parse string
-  const d = new globalThis.Date(input);
-  return isNaN(d.getTime()) ? null : d;
-}
-
-const parsedDate = parseDate(date);
-
-// Precompute separate date and time strings to support custom rendering via slot
-let dateText = "";
-let timeText = "";
-let formatted = "";
-let html = "";
-if (parsedDate) {
-  let dateOptions: Intl.DateTimeFormatOptions | undefined;
-  switch (format) {
-    case "short":
-      dateOptions = { dateStyle: "short" };
-      break;
-    case "full":
-      dateOptions = { dateStyle: "full" };
-      break;
-    case "time":
-      dateOptions = undefined;
-      break;
-    case "long":
-    default:
-      dateOptions = { dateStyle: "long" };
-      break;
-  }
-  if (dateOptions) {
-    dateText = new Intl.DateTimeFormat(locale, dateOptions).format(parsedDate);
-  }
-  if (includeTime || format === "time") {
-    timeText = new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(
-      parsedDate,
-    );
-  }
-  formatted =
-    format === "time"
-      ? timeText
-      : includeTime && timeText
-        ? `${dateText}, ${timeText}`
-        : dateText;
-
-  if (Astro.slots.has("default")) {
-    html = await Astro.slots.render("default", [
-      {
-        date: dateText,
-        time: timeText,
-        formatted,
-        iso: parsedDate.toISOString(),
-        dateObj: parsedDate,
-      },
-    ]);
-  }
-}
----
-
-{
-  parsedDate ? (
-    Astro.slots.has("default") ? (
-      <Fragment set:html={html} />
-    ) : (
-      <time
-        datetime={parsedDate.toISOString()}
-        class={cn("text-foreground text-sm", className)}
-        {...props}
-      >
-        {formatted}
-      </time>
-    )
-  ) : (
-    <span
-      class={cn("text-destructive", className)}
-      {...props}
-    >
-      Invalid date
-    </span>
-  )
-}
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+/**
+ * @component Date
+ * @description Formats and displays dates and times in human-readable styles.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-6519
+ *
+ * @preview
+ *
+ * <div class="grid grid-cols-2 gap-4">
+ *   <div class="text-foreground text-sm font-medium">Default:</div> <Date date="2025-06-13T12:00:00Z" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Short:</div> <Date date="2025-06-13T12:00:00Z" format="short" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Time:</div> <Date date="2025-06-13T12:00:00Z" format="time" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Full:</div> <Date date="2025-06-13T12:00:00Z" format="full" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Long:</div> <Date date="2025-06-13T12:00:00Z" format="long" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Long with time:</div> <Date date="2025-06-13T12:00:00Z" format="long" includeTime />
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Date } from '@bejamas/ui/components/date';
+ * ---
+ *
+ * <Date date="2025-06-24T12:00:00Z" />
+ * ```
+ *
+ * @examples
+ *
+ * ### Custom locale
+ *
+ * <div class="flex gap-2 flex-col">
+ *   <Date date="2025-06-24T12:00:00Z" locale="fr-FR" />
+ *   <Date date="2025-06-24T12:00:00Z" locale="de-DE" />
+ *   <Date date="2025-06-24T12:00:00Z" locale="es-ES" />
+ *   <Date date="2025-06-24T12:00:00Z" locale="pl-PL" />
+ * </div>
+ */
+const {
+  date,
+  format = "long",
+  includeTime = false,
+  locale = "en-US",
+  class: className = "",
+  ...props
+} = Astro.props;
+
+// Helper: parse date input
+function parseDate(input: string | globalThis.Date | null | undefined) {
+  if (!input) return null;
+  if (input instanceof globalThis.Date) return input;
+  // Try to parse string
+  const d = new globalThis.Date(input);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+const parsedDate = parseDate(date);
+
+// Precompute separate date and time strings to support custom rendering via slot
+let dateText = "";
+let timeText = "";
+let formatted = "";
+let html = "";
+if (parsedDate) {
+  let dateOptions: Intl.DateTimeFormatOptions | undefined;
+  switch (format) {
+    case "short":
+      dateOptions = { dateStyle: "short" };
+      break;
+    case "full":
+      dateOptions = { dateStyle: "full" };
+      break;
+    case "time":
+      dateOptions = undefined;
+      break;
+    case "long":
+    default:
+      dateOptions = { dateStyle: "long" };
+      break;
+  }
+  if (dateOptions) {
+    dateText = new Intl.DateTimeFormat(locale, dateOptions).format(parsedDate);
+  }
+  if (includeTime || format === "time") {
+    timeText = new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(
+      parsedDate,
+    );
+  }
+  formatted =
+    format === "time"
+      ? timeText
+      : includeTime && timeText
+        ? `${dateText}, ${timeText}`
+        : dateText;
+
+  if (Astro.slots.has("default")) {
+    html = await Astro.slots.render("default", [
+      {
+        date: dateText,
+        time: timeText,
+        formatted,
+        iso: parsedDate.toISOString(),
+        dateObj: parsedDate,
+      },
+    ]);
+  }
+}
+---
+
+{
+  parsedDate ? (
+    Astro.slots.has("default") ? (
+      <Fragment set:html={html} />
+    ) : (
+      <time
+        datetime={parsedDate.toISOString()}
+        class={cn("text-foreground text-sm", className)}
+        {...props}
+      >
+        {formatted}
+      </time>
+    )
+  ) : (
+    <span
+      class={cn("text-destructive", className)}
+      {...props}
+    >
+      Invalid date
+    </span>
+  )
+}

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>