@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/popover/Popover.astro

@@ -1,210 +1,211 @@
----
-/**
- * @component Popover
- * @title Popover
- * @description A floating panel that appears on trigger click, useful for displaying rich content like forms or additional information.
- *
- * @preview
- * <Popover>
- *   <PopoverTrigger variant="outline">Open popover</PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeader>
- *       <PopoverTitle>Dimensions</PopoverTitle>
- *       <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
- *     </PopoverHeader>
- *     <div class="grid gap-2">
- *       <div class="grid grid-cols-3 items-center gap-4">
- *         <Label>Width</Label>
- *         <Input class="col-span-2 h-8" value="100%" />
- *       </div>
- *       <div class="grid grid-cols-3 items-center gap-4">
- *         <Label>Height</Label>
- *         <Input class="col-span-2 h-8" value="25px" />
- *       </div>
- *     </div>
- *   </PopoverContent>
- * </Popover>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription } from '@bejamas/ui/components/popover';
- * ---
- *
- * <Popover>
- *   <PopoverTrigger variant="outline">Open</PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeader>
- *       <PopoverTitle>Title</PopoverTitle>
- *       <PopoverDescription>Description text.</PopoverDescription>
- *     </PopoverHeader>
- *     <p>Popover body content.</p>
- *   </PopoverContent>
- * </Popover>
- * ```
- *
- * @api
- *
- * ### Events
- *
- * The popover emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `popover:change` | `{ open: boolean }` | Fired when the popover opens or closes |
- *
- * ```astro nocollapse console
- * <Popover id="my-popover">
- *   <PopoverTrigger variant="outline">Open</PopoverTrigger>
- *   <PopoverContent>
- *     <p>Content</p>
- *   </PopoverContent>
- * </Popover>
- * ```
- *
- * ```js nocollapse
- *   const popover = document.getElementById('my-popover');
- *
- *   popover.addEventListener('popover:change', (e) => {
- *     console.log('Is open:', e.detail.open);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can control the popover programmatically by dispatching a `popover:set` event:
- *
- * ```js nocollapse
- * const popover = document.getElementById('my-popover');
- *
- * // Open the popover
- * popover.dispatchEvent(new CustomEvent('popover:set', {
- *   detail: { open: true }
- * }));
- *
- * // Close the popover
- * popover.dispatchEvent(new CustomEvent('popover:set', {
- *   detail: { open: false }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * The popover sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-state` | popover, popover-content | Current state (`open` or `closed`) |
- * | `data-side` | popover, popover-content | Position relative to trigger (`top`, `bottom`, `left`, `right`) |
- * | `data-align` | popover, popover-content | Alignment (`start`, `center`, or `end`) |
- *
- * @examples
- *
- * ### Basic
- *
- * <Popover>
- *   <PopoverTrigger variant="outline">Open popover</PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeader>
- *       <PopoverTitle>Popover Title</PopoverTitle>
- *       <PopoverDescription>This is a simple popover.</PopoverDescription>
- *     </PopoverHeader>
- *   </PopoverContent>
- * </Popover>
- *
- * ### Side Variants
- *
- * <div class="flex gap-4 items-center justify-center py-8">
- *   <Popover>
- *     <PopoverTrigger variant="outline">Left</PopoverTrigger>
- *     <PopoverContent side="left">
- *       <p>Popover on the left</p>
- *     </PopoverContent>
- *   </Popover>
- *   <Popover>
- *     <PopoverTrigger variant="outline">Top</PopoverTrigger>
- *     <PopoverContent side="top">
- *       <p>Popover on top</p>
- *     </PopoverContent>
- *   </Popover>
- *   <Popover>
- *     <PopoverTrigger variant="outline">Bottom</PopoverTrigger>
- *     <PopoverContent side="bottom">
- *       <p>Popover on bottom</p>
- *     </PopoverContent>
- *   </Popover>
- *   <Popover>
- *     <PopoverTrigger variant="outline">Right</PopoverTrigger>
- *     <PopoverContent side="right">
- *       <p>Popover on the right</p>
- *     </PopoverContent>
- *   </Popover>
- * </div>
- *
- * ### Alignment Variants
- *
- * <div class="flex gap-8">
- *   <Popover>
- *     <PopoverTrigger variant="outline">Start</PopoverTrigger>
- *     <PopoverContent side="bottom" align="start">
- *       <p>Start-aligned content</p>
- *     </PopoverContent>
- *   </Popover>
- *   <Popover>
- *     <PopoverTrigger variant="outline">Center</PopoverTrigger>
- *     <PopoverContent side="bottom" align="center">
- *       <p>Center-aligned content</p>
- *     </PopoverContent>
- *   </Popover>
- *   <Popover>
- *     <PopoverTrigger variant="outline">End</PopoverTrigger>
- *     <PopoverContent side="bottom" align="end">
- *       <p>End-aligned content</p>
- *     </PopoverContent>
- *   </Popover>
- * </div>
- *
- * ### With Form
- *
- * <Popover>
- *   <PopoverTrigger variant="outline">Open form</PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeader>
- *       <PopoverTitle>Dimensions</PopoverTitle>
- *       <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
- *     </PopoverHeader>
- *     <div class="grid gap-2">
- *       <div class="grid grid-cols-3 items-center gap-4">
- *         <Label>Width</Label>
- *         <Input class="col-span-2 h-8" value="100%" />
- *       </div>
- *       <div class="grid grid-cols-3 items-center gap-4">
- *         <Label>Height</Label>
- *         <Input class="col-span-2 h-8" value="25px" />
- *       </div>
- *     </div>
- *   </PopoverContent>
- * </Popover>
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div {...rest} data-slot="popover" class={cn("", "inline-block", className)}>
-  <slot />
-</div>
-
-<script>
-  import { createPopover } from "@data-slot/popover";
-  document
-    .querySelectorAll('[data-slot="popover"]')
-    .forEach((el) => createPopover(el));
-</script>
+---
+/**
+ * @component Popover
+ * @title Popover
+ * @description A floating panel that appears on trigger click, useful for displaying rich content like forms or additional information.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5548-11795
+ *
+ * @preview
+ * <Popover>
+ *   <PopoverTrigger variant="outline">Open popover</PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeader>
+ *       <PopoverTitle>Dimensions</PopoverTitle>
+ *       <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
+ *     </PopoverHeader>
+ *     <div class="grid gap-2">
+ *       <div class="grid grid-cols-3 items-center gap-4">
+ *         <Label>Width</Label>
+ *         <Input class="col-span-2 h-8" value="100%" />
+ *       </div>
+ *       <div class="grid grid-cols-3 items-center gap-4">
+ *         <Label>Height</Label>
+ *         <Input class="col-span-2 h-8" value="25px" />
+ *       </div>
+ *     </div>
+ *   </PopoverContent>
+ * </Popover>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription } from '@bejamas/ui/components/popover';
+ * ---
+ *
+ * <Popover>
+ *   <PopoverTrigger variant="outline">Open</PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeader>
+ *       <PopoverTitle>Title</PopoverTitle>
+ *       <PopoverDescription>Description text.</PopoverDescription>
+ *     </PopoverHeader>
+ *     <p>Popover body content.</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The popover emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `popover:change` | `{ open: boolean }` | Fired when the popover opens or closes |
+ *
+ * ```astro nocollapse console
+ * <Popover id="my-popover">
+ *   <PopoverTrigger variant="outline">Open</PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>Content</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * ```js nocollapse
+ *   const popover = document.getElementById('my-popover');
+ *
+ *   popover.addEventListener('popover:change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the popover programmatically by dispatching a `popover:set` event:
+ *
+ * ```js nocollapse
+ * const popover = document.getElementById('my-popover');
+ *
+ * // Open the popover
+ * popover.dispatchEvent(new CustomEvent('popover:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Close the popover
+ * popover.dispatchEvent(new CustomEvent('popover:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The popover sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | popover, popover-content | Current state (`open` or `closed`) |
+ * | `data-side` | popover, popover-content | Position relative to trigger (`top`, `bottom`, `left`, `right`) |
+ * | `data-align` | popover, popover-content | Alignment (`start`, `center`, or `end`) |
+ *
+ * @examples
+ *
+ * ### Basic
+ *
+ * <Popover>
+ *   <PopoverTrigger variant="outline">Open popover</PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeader>
+ *       <PopoverTitle>Popover Title</PopoverTitle>
+ *       <PopoverDescription>This is a simple popover.</PopoverDescription>
+ *     </PopoverHeader>
+ *   </PopoverContent>
+ * </Popover>
+ *
+ * ### Side Variants
+ *
+ * <div class="flex gap-4 items-center justify-center py-8">
+ *   <Popover>
+ *     <PopoverTrigger variant="outline">Left</PopoverTrigger>
+ *     <PopoverContent side="left">
+ *       <p>Popover on the left</p>
+ *     </PopoverContent>
+ *   </Popover>
+ *   <Popover>
+ *     <PopoverTrigger variant="outline">Top</PopoverTrigger>
+ *     <PopoverContent side="top">
+ *       <p>Popover on top</p>
+ *     </PopoverContent>
+ *   </Popover>
+ *   <Popover>
+ *     <PopoverTrigger variant="outline">Bottom</PopoverTrigger>
+ *     <PopoverContent side="bottom">
+ *       <p>Popover on bottom</p>
+ *     </PopoverContent>
+ *   </Popover>
+ *   <Popover>
+ *     <PopoverTrigger variant="outline">Right</PopoverTrigger>
+ *     <PopoverContent side="right">
+ *       <p>Popover on the right</p>
+ *     </PopoverContent>
+ *   </Popover>
+ * </div>
+ *
+ * ### Alignment Variants
+ *
+ * <div class="flex gap-8">
+ *   <Popover>
+ *     <PopoverTrigger variant="outline">Start</PopoverTrigger>
+ *     <PopoverContent side="bottom" align="start">
+ *       <p>Start-aligned content</p>
+ *     </PopoverContent>
+ *   </Popover>
+ *   <Popover>
+ *     <PopoverTrigger variant="outline">Center</PopoverTrigger>
+ *     <PopoverContent side="bottom" align="center">
+ *       <p>Center-aligned content</p>
+ *     </PopoverContent>
+ *   </Popover>
+ *   <Popover>
+ *     <PopoverTrigger variant="outline">End</PopoverTrigger>
+ *     <PopoverContent side="bottom" align="end">
+ *       <p>End-aligned content</p>
+ *     </PopoverContent>
+ *   </Popover>
+ * </div>
+ *
+ * ### With Form
+ *
+ * <Popover>
+ *   <PopoverTrigger variant="outline">Open form</PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeader>
+ *       <PopoverTitle>Dimensions</PopoverTitle>
+ *       <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
+ *     </PopoverHeader>
+ *     <div class="grid gap-2">
+ *       <div class="grid grid-cols-3 items-center gap-4">
+ *         <Label>Width</Label>
+ *         <Input class="col-span-2 h-8" value="100%" />
+ *       </div>
+ *       <div class="grid grid-cols-3 items-center gap-4">
+ *         <Label>Height</Label>
+ *         <Input class="col-span-2 h-8" value="25px" />
+ *       </div>
+ *     </div>
+ *   </PopoverContent>
+ * </Popover>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div {...rest} data-slot="popover" class={cn("", "inline-block", className)}>
+  <slot />
+</div>
+
+<script>
+  import { createPopover } from "@data-slot/popover";
+  document
+    .querySelectorAll('[data-slot="popover"]')
+    .forEach((el) => createPopover(el));
+</script>

package/src/components/popover/PopoverClose.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<button
-  {...rest}
-  data-slot="popover-close"
-  class={cn("", className)}
->
-  <slot />
-</button>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  data-slot="popover-close"
+  class={cn("", className)}
+>
+  <slot />
+</button>

package/src/components/popover/PopoverContent.astro

@@ -1,49 +1,50 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { cva } from "class-variance-authority";
-
-interface Props extends HTMLAttributes<"div"> {
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  sideOffset?: number;
-  class?: string;
-}
-
-const {
-  side = "bottom",
-  align = "center",
-  sideOffset = 6,
-  alignOffset = 0,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const contentVariants = cva([
-  "z-50 duration-150 ease transition-discrete outline-hidden flex flex-col",
-  "data-[state=open]:animate-in data-[state=closed]:animate-out",
-  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-  "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-  "origin-(--transform-origin) [--tw-animation-fill-mode:both]",
-]);
----
-
-<div
-  {...rest}
-  hidden
-  data-slot="popover-content"
-  data-align={align}
-  data-align-offset={alignOffset}
-  data-side={side}
-  data-side-offset={sideOffset}
-  style={`--side-offset: ${sideOffset}px`}
-  class={cn(
-    "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 rounded-lg data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2",
-    contentVariants(),
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva } from "class-variance-authority";
+
+interface Props extends HTMLAttributes<"div"> {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  sideOffset?: number;
+  class?: string;
+}
+
+const {
+  side = "bottom",
+  align = "center",
+  sideOffset = 6,
+  alignOffset = 0,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const contentVariants = cva([
+  // visibility
+  "z-50 duration-150 ease transition-discrete outline-hidden flex flex-col",
+  // animations
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+  // styles
+  "bg-popover text-popover-foreground gap-4 rounded-lg border border-border p-4 text-sm shadow-lg",
+  // origin from positioner
+  "origin-(--transform-origin) [--tw-animation-fill-mode:both]",
+]);
+---
+
+<div
+  {...rest}
+  hidden
+  data-slot="popover-content"
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  style={`--side-offset: ${sideOffset}px`}
+  class={cn(contentVariants(), className)}
+>
+  <slot />
+</div>

package/src/components/popover/PopoverDescription.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"p"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<p
-  {...rest}
-  data-slot="popover-description"
-  class={cn("text-muted-foreground", className)}
->
-  <slot />
-</p>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"p"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<p
+  {...rest}
+  data-slot="popover-description"
+  class={cn("text-muted-foreground", className)}
+>
+  <slot />
+</p>

package/src/components/popover/PopoverHeader.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="popover-header"
-  class={cn("flex flex-col gap-1 text-sm", className)}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="popover-header"
+  class={cn("flex flex-col gap-0.5 text-sm", className)}
+>
+  <slot />
+</div>