@cl-light-ds/ui 0.1.0

package/src/components/select/Select.astro

@@ -0,0 +1,373 @@
+---
+/**
+ * @component Select
+ * @title Select
+ * @description A dropdown control that lets users pick one option from a list with full keyboard navigation and accessibility support.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-7946
+ *
+ * @preview
+ * <Select defaultValue="apple" class="w-[200px]">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select a fruit" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *     <SelectItem value="cherry">Cherry</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   Select,
+ *   SelectTrigger,
+ *   SelectValue,
+ *   SelectContent,
+ *   SelectItem,
+ *   SelectGroup,
+ *   SelectLabel,
+ *   SelectSeparator
+ * } from '@bejamas/ui/components/select';
+ * ---
+ *
+ * <Select name="fruit" defaultValue="apple">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select a fruit" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @api
+ *
+ * ### Props
+ *
+ * #### Select
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `name` | `string` | - | Rendered as `data-name`; read by form submission helpers. |
+ * | `defaultValue` | `string` | - | Initial selected value. |
+ * | `placeholder` | `string` | - | Forwarded as `data-placeholder`; pair with `SelectValue`'s own `placeholder`. |
+ * | `disabled` | `boolean` | `false` | Auto-synced to `SelectTrigger` at runtime — do not also pass `disabled` to `SelectTrigger`. |
+ * | `required` | `boolean` | `false` | - |
+ * | `size` | `"sm" \| "default" \| "lg"` | `"default"` | Auto-synced to `SelectTrigger` at runtime — set it here, not on `SelectTrigger`, unless you're using `SelectTrigger` standalone outside a `Select` wrapper. |
+ *
+ * #### SelectTrigger
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `size` | `"sm" \| "default" \| "lg"` | `"default"` | Controls trigger height (32/36/40px). Overridden by the parent `Select`'s `size` once mounted. |
+ * | `class` | `string` | - | - |
+ *
+ * #### SelectValue
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `placeholder` | `string` | `""` | Text shown while no value is selected. |
+ *
+ * #### SelectContent
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `position` | `"item-aligned" \| "popper"` | `"item-aligned"` | See Position Modes below. |
+ * | `align` | `"start" \| "center" \| "end"` | `"center"` | Popper mode only. |
+ * | `alignOffset` | `number` | `0` | Popper mode only. |
+ * | `side` | `"top" \| "bottom"` | `"bottom"` | Popper mode only. |
+ * | `sideOffset` | `number` | `4` | Popper mode only. |
+ *
+ * #### SelectItem
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `value` | `string` | required | - |
+ * | `disabled` | `boolean` | `false` | - |
+ *
+ * #### SelectGroup / SelectLabel / SelectSeparator
+ *
+ * Layout-only wrappers — each accepts just `class` plus native `div` attributes.
+ *
+ * ### Events
+ *
+ * The select emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `select:change` | `{ value: string }` | Fired when a new value is selected |
+ * | `select:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |
+ *
+ * ```astro nocollapse console
+ * <Select id="my-select">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Choose..." />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">Option 1</SelectItem>
+ *     <SelectItem value="option2">Option 2</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * ```js nocollapse
+ *   const select = document.getElementById('my-select');
+ *
+ *   select.addEventListener('select:change', (e) => {
+ *     console.log('Selected value:', e.detail.value);
+ *   });
+ *
+ *   select.addEventListener('select:open-change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the select programmatically by dispatching a `select:set` event:
+ *
+ * ```js nocollapse
+ * const select = document.getElementById('my-select');
+ *
+ * // Set a specific value
+ * select.dispatchEvent(new CustomEvent('select:set', {
+ *   detail: { value: 'option2' }
+ * }));
+ *
+ * // Open the select dropdown
+ * select.dispatchEvent(new CustomEvent('select:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Close the select dropdown
+ * select.dispatchEvent(new CustomEvent('select:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The select sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | select, select-trigger, select-content | Current state (`open` or `closed`) |
+ * | `data-open` / `data-closed` | select, select-trigger, select-content | Presence attributes for style-driven open/close animations |
+ * | `data-value` | select | Currently selected value |
+ * | `data-selected` | select-item | Present when item is selected |
+ * | `data-highlighted` | select-item | Present when item is focused/highlighted |
+ * | `data-disabled` | select, select-trigger, select-item | Present when disabled |
+ * | `data-placeholder` | select-trigger | Present when showing placeholder (no value selected) |
+ * | `data-align-trigger` | select-content | Present when item-aligned positioning is active |
+ * | `data-position` | select-content, select-viewport | Positioning mode (`item-aligned` or `popper`) |
+ *
+ * ### Position Modes
+ *
+ * The `position` prop on `SelectContent` controls how the dropdown is positioned:
+ *
+ * - **`item-aligned`** (default): The dropdown aligns with the selected item, similar to native select behavior
+ * - **`popper`**: Uses floating UI positioning with configurable placement options on `SelectContent`
+ *
+ * ```astro nocollapse nopreview
+ * <!-- Item-aligned (default) -->
+ * <Select>
+ *   <SelectContent>...</SelectContent>
+ * </Select>
+ *
+ * <!-- Popper mode -->
+ * <Select>
+ *   <SelectContent position="popper">...</SelectContent>
+ * </Select>
+ *
+ * <!-- Custom positioning on content -->
+ * <Select>
+ *   <SelectContent position="popper" side="bottom" align="start" sideOffset={8}>
+ *     ...
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @examples
+ *
+ * ### With Label
+ *
+ * Pair `Select` with `FieldLabel` (or a bare `Label`) the same way you would with `Input` — `Select` itself has no label prop.
+ *
+ * <Field class="w-[200px]">
+ *   <FieldLabel for="fruit-select">Fruit</FieldLabel>
+ *   <Select>
+ *     <SelectTrigger id="fruit-select">
+ *       <SelectValue placeholder="Select a fruit" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ * </Field>
+ *
+ * ### With Groups
+ *
+ * <Select class="w-[200px]">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select food" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectGroup>
+ *       <SelectLabel>Fruits</SelectLabel>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *     </SelectGroup>
+ *     <SelectSeparator />
+ *     <SelectGroup>
+ *       <SelectLabel>Vegetables</SelectLabel>
+ *       <SelectItem value="carrot">Carrot</SelectItem>
+ *       <SelectItem value="broccoli">Broccoli</SelectItem>
+ *     </SelectGroup>
+ *   </SelectContent>
+ * </Select>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col items-start gap-4 sm:flex-row" >
+ *   <Select class="w-[180px]" size="sm">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Small (h-8)" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *       <SelectItem value="cherry">Cherry</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *   <Select class="w-[180px]" size="default">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Default (h-9)" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *       <SelectItem value="cherry">Cherry</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *   <Select class="w-[180px]" size="lg">
+ *     <SelectTrigger size="lg">
+ *       <SelectValue placeholder="Large (h-10)" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *       <SelectItem value="cherry">Cherry</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ * </div>
+ *
+ * ### Disabled
+ *
+ * <Select disabled class="w-[200px]">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Disabled" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *     <SelectItem value="cherry">Cherry</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ *
+ * ### With Disabled Items
+ *
+ * <Select class="w-[200px]" placeholder="Choose...">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Choose..." />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="available">Available</SelectItem>
+ *     <SelectItem value="unavailable" disabled>Unavailable</SelectItem>
+ *     <SelectItem value="another">Another option</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ *
+ * ### Popper Mode
+ *
+ * <div class="flex flex-wrap items-start gap-4">
+ *   <Select class="w-[160px]">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Bottom" />
+ *     </SelectTrigger>
+ *     <SelectContent position="popper" side="bottom">
+ *       <SelectItem value="option1">Option 1</SelectItem>
+ *       <SelectItem value="option2">Option 2</SelectItem>
+ *       <SelectItem value="option3">Option 3</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *   <Select class="w-[160px]">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Top" />
+ *     </SelectTrigger>
+ *     <SelectContent position="popper" side="top">
+ *       <SelectItem value="option1">Option 1</SelectItem>
+ *       <SelectItem value="option2">Option 2</SelectItem>
+ *       <SelectItem value="option3">Option 3</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ * </div>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  name?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  size?: "sm" | "default" | "lg";
+}
+
+const {
+  class: className = "",
+  name,
+  defaultValue,
+  placeholder,
+  disabled = false,
+  required = false,
+  size = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="select"
+  data-name={name}
+  data-default-value={defaultValue}
+  data-placeholder={placeholder}
+  data-disabled={disabled ? "" : undefined}
+  data-required={required ? "" : undefined}
+  data-size={size}
+  class={cn("", "group/select relative inline-block", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createSelect } from "@data-slot/select";
+
+  document.querySelectorAll('[data-slot="select"]').forEach((el) => {
+    createSelect(el);
+
+    const size = (el as HTMLElement).dataset.size;
+    if (size) {
+      el.querySelectorAll('[data-slot="select-trigger"]').forEach((trigger) => {
+        (trigger as HTMLElement).dataset.size = size;
+      });
+    }
+  });
+</script>

package/src/components/select/SelectContent.astro

@@ -0,0 +1,91 @@
+---
+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"> {
+  class?: string;
+  position?: "item-aligned" | "popper";
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  position = "item-aligned",
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...rest
+} = Astro.props as Props;
+
+const contentVariants = cva(
+  [
+    "group/select-content relative isolate z-50",
+    "origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
+  ],
+  {
+    variants: {
+      position: {
+        "item-aligned": "",
+        popper: "",
+      },
+      side: {
+        top: "",
+        bottom: "",
+      },
+    },
+    defaultVariants: {
+      position: "item-aligned",
+      side: "bottom",
+    },
+  },
+);
+---
+
+<div
+  {...rest}
+  hidden
+  data-slot="select-content"
+  data-position={position}
+  data-align-trigger={position === "item-aligned"}
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  class={cn(
+    "bg-popover text-popover-foreground ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 rounded-lg",
+    contentVariants({ position, side }),
+    "max-h-(--available-height) w-(--anchor-width)",
+    className,
+  )}
+>
+  <div
+    data-slot="select-scroll-up-button"
+    class="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full"
+    hidden
+  >
+    <slot name="scroll-up"
+      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m18 15l-6-6l-6 6"/></svg></slot
+    >
+  </div>
+  <div
+    data-slot="select-viewport"
+    data-position={position}
+    class="max-h-[var(--select-content-available-height,300px)] flex flex-col gap-1 overflow-x-hidden overflow-y-auto p-1"
+  >
+    <slot />
+  </div>
+  <div
+    data-slot="select-scroll-down-button"
+    class="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full"
+    hidden
+  >
+    <slot name="scroll-down"
+      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg></slot
+    >
+  </div>
+</div>

package/src/components/select/SelectGroup.astro

@@ -0,0 +1,19 @@
+---
+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}
+  role="group"
+  data-slot="select-group"
+  class={cn("scroll-my-1 p-1", className)}
+>
+  <slot />
+</div>

package/src/components/select/SelectItem.astro

@@ -0,0 +1,48 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  value,
+  disabled = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="option"
+  tabindex={disabled ? -1 : 0}
+  data-slot="select-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  class={cn(
+    "focus:bg-background-hover focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+    "group/item relative flex w-full cursor-default items-center outline-hidden select-none",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+>
+  <span
+    data-slot="select-item-text"
+    class="flex flex-1 gap-2 shrink-0 whitespace-nowrap"
+    ><slot /></span
+  >
+
+  <span
+    data-slot="select-item-indicator"
+    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+  >
+    <span class="hidden items-center justify-center group-data-[selected]/item:inline-flex">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/></svg>
+    </span>
+  </span>
+</div>

package/src/components/select/SelectLabel.astro

@@ -0,0 +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="select-label"
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+>
+  <slot />
+</div>

package/src/components/select/SelectSeparator.astro

@@ -0,0 +1,17 @@
+---
+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}
+  role="separator"
+  data-slot="select-separator"
+  class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
+/>

package/src/components/select/SelectTrigger.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  size?: "sm" | "default" | "lg";
+}
+
+const {
+  class: className = "",
+  size = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  type="button"
+  data-slot="select-trigger"
+  data-size={size}
+  class={cn(
+    "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-1 px-3 text-xs font-semibold shadow-xs transition-[color,box-shadow] aria-invalid:ring-3 data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4",
+    "flex w-fit items-center justify-between whitespace-nowrap outline-none",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted disabled:text-muted-foreground",
+    "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+>
+  <slot />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground size-4 pointer-events-none"
+    data-slot="select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+</button>

package/src/components/select/SelectValue.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+  placeholder?: string;
+}
+
+const {
+  class: className = "",
+  placeholder = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  data-slot="select-value"
+  data-placeholder={placeholder}
+  class={cn("flex flex-1 text-left", className)}
+>{placeholder}</span>

package/src/components/select/index.ts

@@ -0,0 +1,8 @@
+export { default as Select } from "./Select.astro";
+export { default as SelectTrigger } from "./SelectTrigger.astro";
+export { default as SelectValue } from "./SelectValue.astro";
+export { default as SelectContent } from "./SelectContent.astro";
+export { default as SelectItem } from "./SelectItem.astro";
+export { default as SelectGroup } from "./SelectGroup.astro";
+export { default as SelectLabel } from "./SelectLabel.astro";
+export { default as SelectSeparator } from "./SelectSeparator.astro";

package/src/components/separator/CHANGELOG.md

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