@cl-light-ds/ui 0.1.0 → 0.2.0

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

package/src/components/popover/PopoverTrigger.astro

@@ -1,29 +1,35 @@
----
-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>
-  )
-}
+---
+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,
+  variant = "outline",
+  ...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"
+      variant={variant}
+      class={cn("", "inline-flex items-center", className)}
+      {...rest as any}
+    >
+      <slot />
+    </Button>
+  )
+}

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

@@ -1,9 +1,31 @@
 # Changelog
 
-All notable changes to the `RadioGroup` component will be documented in this file.
+All notable changes to the `RadioGroup` component family (`RadioGroup`, `RadioGroupItem`) are 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.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `50-3604`)
+
+Figma documents Radio across four pages: Variants (Default, Checked), States (Default, Hover, Focus, Disabled), Sizes (Small 16px, Large 20px), and Contents (Clean, Label, Label and Caption).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- **Checked-state color was backwards** — the real, visually significant bug here. The code filled the whole circle with `bg-primary` + a white (`bg-primary-foreground`) center dot when checked. Figma shows the opposite: the circle stays white (`card`) with a `border-primary` ring, and only the small center dot is `bg-primary` — a standard bordered radio with a colored dot, not a filled disc. Fixed by removing `data-checked:bg-primary`/`data-checked:text-primary-foreground` and changing the indicator dot from `bg-primary-foreground` to `bg-primary`.
+- Background: added an explicit, unconditional `bg-card` — previously the root only had `dark:bg-input/30` with nothing for light mode, same category of fix already made to `Input`/`InputGroup`/`DialogContent`.
+- Added `size?: "default" | "lg"` to `RadioGroupItem` (16px / 20px, matching Figma's Small/Large) — previously hard-coded to `size-4` (16px) only. The indicator dot scales proportionally (8px / 10px, matching Figma's exact 0.5 dot-to-circle ratio at both sizes measured directly from the Figma node).
+
+### Added
+
+- Storybook examples for Sizes, "Label and caption" (via `Field`/`FieldLabel`/`FieldDescription`, matching Figma's third content variant — `RadioGroupItem` already carries the `data-slot="radio-group-item"` marker that `Field`'s alignment selector targets, from the earlier Checkbox alignment work, so no additional alignment fix was needed here), and Disabled — none of these were previously demonstrated.
+
+### Notes
+
+- Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`) and error/`aria-invalid` styling already matched Figma's tokens exactly (`ring` = `#5f9de6`) — no changes needed.
+- Hover isn't implemented, per the standing project direction to skip hover states.
+- Disabled's exact color treatment in Figma is ambiguous from the extracted tokens (bound to what look like incidental, non-muted swatch names at reduced opacity rather than a clear flat color swap like Checkbox/Input had) — left as the existing `disabled:opacity-50` fade rather than guessing a specific flat-color replacement.
+- "Clean" and "Label" content variants were already fully supported (a bare `RadioGroupItem`, or paired with a sibling `Label`) — no changes needed.

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

@@ -1,81 +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>
+---
+/**
+ * @component RadioGroup
+ * @title Radio Group
+ * @description A group of options where users can select exactly one choice.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=50-3604
+ *
+ * @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

@@ -1,42 +1,51 @@
----
-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>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {
+  value: string;
+  size?: "default" | "lg";
+  class?: string;
+  disabled?: boolean;
+  id?: string;
+  "aria-invalid"?: boolean | "true" | "false";
+}
+
+const {
+  class: className = "",
+  id = "",
+  value,
+  size = "default",
+  disabled = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  id={id}
+  data-slot="radio-group-item"
+  data-value={value}
+  data-size={size}
+  data-disabled={disabled ? "true" : undefined}
+  aria-invalid={ariaInvalid}
+  class={cn(
+    "border-input bg-card 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 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",
+    size === "lg" ? "size-5" : "size-4",
+    className,
+  )}
+>
+  <span
+    aria-hidden="true"
+    data-slot="radio-group-indicator"
+    class={cn("flex items-center justify-center data-unchecked:hidden", size === "lg" ? "size-5" : "size-4")}
+  >
+    <span
+      class={cn(
+        "bg-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+        size === "lg" ? "size-2.5" : "size-2",
+      )}
+    ></span>
+  </span>
+</span>