@cl-light-ds/ui 0.1.0

package/src/components/popover/Popover.astro

@@ -0,0 +1,210 @@
+---
+/**
+ * @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>

package/src/components/popover/PopoverClose.astro

@@ -0,0 +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>

package/src/components/popover/PopoverContent.astro

@@ -0,0 +1,49 @@
+---
+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>

package/src/components/popover/PopoverDescription.astro

@@ -0,0 +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>

package/src/components/popover/PopoverHeader.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="popover-header"
+  class={cn("flex flex-col gap-1 text-sm", className)}
+>
+  <slot />
+</div>

package/src/components/popover/PopoverTitle.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="popover-title"
+  class={cn("font-medium", className)}
+>
+  <slot />
+</div>

package/src/components/popover/PopoverTrigger.astro

@@ -0,0 +1,29 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Button } from "../button";
+import type { Props as ButtonProps } from "../button/Button.astro";
+
+type Props = ButtonProps & {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+};
+
+const { class: className = "", asChild = false, ...rest } = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div data-slot="popover-trigger" data-as-child class={cn("", "inline-flex items-center", className)}>
+      <slot />
+    </div>
+  ) : (
+    <Button
+      data-slot="popover-trigger"
+      class={cn("", "inline-flex items-center", className)}
+      {...rest as any}
+    >
+      <slot />
+    </Button>
+  )
+}

package/src/components/popover/index.ts

@@ -0,0 +1,7 @@
+export { default as Popover } from "./Popover.astro";
+export { default as PopoverClose } from "./PopoverClose.astro";
+export { default as PopoverContent } from "./PopoverContent.astro";
+export { default as PopoverDescription } from "./PopoverDescription.astro";
+export { default as PopoverHeader } from "./PopoverHeader.astro";
+export { default as PopoverTitle } from "./PopoverTitle.astro";
+export { default as PopoverTrigger } from "./PopoverTrigger.astro";

package/src/components/radio-group/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+All notable changes to the `RadioGroup` component will be documented in this file.
+
+## Unreleased
+
+### Fixed
+
+- Restored interactivity: `@data-slot/radio-group` (already the correct import in `RadioGroup.astro`) was never added as a dependency and was aliased to a no-op stub so builds wouldn't crash, leaving RadioGroup fully static. Added the real package as a dependency and removed the stub alias.

package/src/components/radio-group/RadioGroup.astro

@@ -0,0 +1,81 @@
+---
+/**
+ * @component RadioGroup
+ * @title Radio Group
+ * @description A group of options where users can select exactly one choice.
+ * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-18817&t=YFStJ3V8fXEO8QD8-4
+ *
+ * @preview
+ *
+ * <RadioGroup name="plan" defaultValue="free">
+ *   <div class="flex items-center gap-2">
+ *     <RadioGroupItem value="free" id="free" />
+ *     <Label for="free">Free</Label>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <RadioGroupItem value="pro" id="pro" />
+ *     <Label for="pro">Pro</Label>
+ *   </div>
+ * </RadioGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <RadioGroup name="plan" defaultValue="free">
+ *   <div class="flex items-center gap-2">
+ *     <RadioGroupItem value="free" id="free" />
+ *     <Label for="free">Free</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  defaultValue?: string;
+  name?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+const {
+  class: className = "",
+  defaultValue,
+  name,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="radio-group"
+  data-default-value={defaultValue}
+  data-name={name}
+  data-disabled={disabled ? "true" : undefined}
+  data-read-only={readOnly ? "true" : undefined}
+  data-required={required ? "true" : undefined}
+  class={cn("grid gap-3", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createRadioGroup } from "@data-slot/radio-group";
+
+  document
+    .querySelectorAll('[data-slot="radio-group"]')
+    .forEach((el) => createRadioGroup(el));
+</script>

package/src/components/radio-group/RadioGroupItem.astro

@@ -0,0 +1,42 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {
+  value: string;
+  class?: string;
+  disabled?: boolean;
+  id?: string;
+  "aria-invalid"?: boolean | "true" | "false";
+}
+
+const {
+  class: className = "",
+  id = "",
+  value,
+  disabled = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  id={id}
+  data-slot="radio-group-item"
+  data-value={value}
+  data-disabled={disabled ? "true" : undefined}
+  aria-invalid={ariaInvalid}
+  class={cn(
+    "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+    className,
+  )}
+>
+  <span
+    aria-hidden="true"
+    data-slot="radio-group-indicator"
+    class="flex size-4 items-center justify-center data-unchecked:hidden"
+  >
+    <span class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"></span>
+  </span>
+</span>

package/src/components/radio-group/index.ts

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from "./RadioGroup.astro";
+export { default as RadioGroupItem } from "./RadioGroupItem.astro";
+

package/src/components/select/CHANGELOG.md

@@ -0,0 +1,39 @@
+# Changelog
+
+All notable changes to the `Select` component will be documented in this file.
+
+## Date 14th Sep 2026
+## Figma alignment (node 2329-7946) + props audit
+
+### Fixed
+
+- `SelectTrigger`: vertical padding was `py-2` (8px); Figma specifies `py-1` (4px) on all sizes.
+- `SelectTrigger`: `size="lg"` had no explicit height at all (`h-9`/`h-8` were defined, `h-10` for `lg` was missing) — the Large variant silently fell back to whatever height its padding produced instead of Figma's 40px. Added `data-[size=lg]:h-10`.
+- `SelectTrigger`: focus-visible style used the plain-form-field pattern (`ring-ring/50`, opacity-blended). Figma's focus state is a solid `border-ring` + 2px `chart-1` shadow — the same "interactive control" pattern already used by `Button`, `Card`, and `DropdownMenuItem`. Switched to `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1`.
+- `SelectTrigger`: disabled state relied only on `opacity-50`. Figma shows an explicit muted background/text. Added `disabled:bg-muted disabled:text-muted-foreground`, matching `Input`'s existing disabled convention.
+- `SelectTrigger`: removed a stray `-mr-0.75` negative margin on the chevron icon (not present in Figma) and dropped a few classes that `cn()`/tailwind-merge were already silently overriding (`rounded-md`, `pr-2`, `pl-2.5`).
+- `SelectItem`: `rounded-sm` → `rounded-lg` and `text-xs` → `text-sm`, matching Figma's 8px item radius and 14px item text — `ComboboxItem` already used the correct values, `SelectItem` had drifted from it.
+- `SelectContent`: the viewport had no padding at all unless items were wrapped in a `SelectGroup` (which carries its own `p-1`). A plain, ungrouped item list — the common case — sat flush against the popover's rounded corners. Added `p-1 gap-1` to the viewport so grouped and ungrouped content both get consistent spacing.
+
+### Changed
+
+- **`size` now actually propagates.** `Select`, `SelectTrigger`, and `SelectContent` each declared an independent `size` prop, but nothing ever synced them — `data-size` on the `Select` wrapper was purely decorative (confirmed by tracing `@data-slot/select`'s compiled runtime, which syncs `disabled` and `defaultValue` from the wrapper but never touched `size`). Setting `size="lg"` only on `<Select>` — the one place a consumer would naturally expect to control it — had zero visual effect. `Select`'s mount script now mirrors its `data-size` onto its `SelectTrigger` descendant at runtime, so `size` set on `<Select>` is authoritative; `SelectTrigger`'s own `size` prop is still available for standalone use outside a `Select` wrapper.
+- Removed the unused `size` prop from `SelectContent` — nothing in its class list ever branched on it, and Figma doesn't vary dropdown-item sizing by Select size either. A prop with no effect is worse than no prop for a team that needs to know which controls actually do something.
+
+### Added
+
+- `Select`'s JSDoc now documents every sub-component's props in an `@api` table (mirroring `Field`'s format), and calls out which state is auto-synced from `<Select>` (`disabled`, `defaultValue`, and now `size`) versus what must be set per sub-component.
+- Added a "With Label" example to `Select`'s JSDoc and to its Storybook page. `Select` has no label prop by design — label pairing stays composition-only via `Label`/`FieldLabel`, the same convention `Input` already uses (also already documented as the recommended pairing in `Field`'s own docs).
+
+### Not changed (checked, no gap found)
+
+- `border-input` resolves to the same `zinc-200` as `--border` — already matches Figma.
+- The trigger's Hover state is visually identical to Default in light mode in Figma — matches the component's existing dark-mode-only hover classes.
+- Figma renders item hover text as `accent-foreground`; the code uses `foreground`. Left as-is since `ComboboxItem` makes the same choice — a consistent system-wide simplification, not a `Select`-specific bug.
+- `disabled` on `<Select>` already correctly disables `SelectTrigger` at runtime (unlike `size`) — no fix needed, just now documented explicitly.
+
+## Unreleased
+
+### Fixed
+
+- Restored interactivity: the component's `<script>` was importing its runtime behavior from `@repo/lib/select`, a module that never existed in this repo — it was aliased to a no-op stub so builds wouldn't crash, leaving Select fully static. Fixed the import to point at `@data-slot/select` (the real published package the component's API already matched) and added it as a dependency. Select now opens/closes, supports keyboard navigation, and fires `select:change` / `select:open-change` as designed.