@cl-light-ds/ui 0.1.0 → 0.3.0

package/src/components/organisms/lightning-sidebar-nav/SidebarNavUsage.astro

@@ -0,0 +1,78 @@
+---
+/**
+ * @component SidebarNavUsage
+ * @title Sidebar Nav Usage
+ * @description Plan usage rows (label … used / limit) and an optional full-width upgrade CTA, pinned to the bottom of the sidebar.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7514-198
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * <SidebarNavUsage
+ *   usage={[{ id: "recordings", label: "Recordings created", used: 5, limit: 5 }]}
+ *   upgrade={{ label: "Upgrade to Pro", href: "/billing" }}
+ * />
+ * ```
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Button } from "../../button";
+import { Separator } from "../../separator";
+import type { SidebarNavUpgrade, SidebarNavUsageMetric } from "./types";
+
+interface Props {
+  usage?: SidebarNavUsageMetric[];
+  upgrade?: SidebarNavUpgrade | null;
+  class?: string;
+}
+
+const {
+  usage = [],
+  upgrade = null,
+  class: className = "",
+} = Astro.props as Props;
+
+const formatValue = ({ used, limit }: SidebarNavUsageMetric) =>
+  limit === null ? `${used} / Unlimited` : `${used} / ${limit}`;
+---
+
+{
+  (usage.length > 0 || upgrade) && (
+    <div
+      data-slot="sidebar-nav-usage"
+      class={cn("flex flex-col gap-3", className)}
+    >
+      <Separator class="my-2" />
+      {usage.length > 0 && (
+        <dl class="flex flex-col gap-2 text-xs leading-4">
+          {usage.map((metric) => (
+            <div
+              data-slot="sidebar-nav-usage-metric"
+              data-at-limit={
+                metric.limit !== null && metric.used >= metric.limit
+                  ? ""
+                  : undefined
+              }
+              class="flex items-baseline justify-between gap-2"
+            >
+              <dt class="text-muted-foreground truncate">{metric.label}</dt>
+              <dd class="text-foreground shrink-0 font-semibold whitespace-nowrap">
+                {formatValue(metric)}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      )}
+      {upgrade && (
+        <Button
+          as="a"
+          href={upgrade.href}
+          size="sm"
+          class="w-full font-semibold"
+        >
+          {upgrade.label}
+        </Button>
+      )}
+    </div>
+  )
+}

package/src/components/organisms/lightning-sidebar-nav/SidebarNavWorkspaceAvatar.astro

@@ -0,0 +1,46 @@
+---
+/**
+ * @component SidebarNavWorkspaceAvatar
+ * @description 24px workspace avatar: image when `avatarUrl` is set, else initials, else the user-round icon on primary.
+ */
+
+import { UserRound } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../../avatar";
+import type { SidebarNavWorkspace } from "./types";
+
+interface Props {
+  workspace: SidebarNavWorkspace;
+  class?: string;
+  slot?: string;
+}
+
+const { workspace, class: className = "", ...rest } = Astro.props as Props;
+
+const variant = workspace.avatarUrl
+  ? "image"
+  : workspace.initials
+    ? "initials"
+    : "icon";
+---
+
+<Avatar
+  {...rest}
+  size="sm"
+  variant={variant}
+  icon={variant === "icon" ? UserRound : undefined}
+  class={cn(
+    variant === "icon" &&
+      "bg-primary [&_[data-slot=avatar-icon]]:text-primary-foreground",
+    className,
+  )}
+>
+  {workspace.avatarUrl && <AvatarImage src={workspace.avatarUrl} alt="" />}
+  {
+    !workspace.avatarUrl && workspace.initials && (
+      <AvatarFallback class="bg-primary text-primary-foreground">
+        {workspace.initials}
+      </AvatarFallback>
+    )
+  }
+</Avatar>

package/src/components/organisms/lightning-sidebar-nav/SidebarNavWorkspaceSwitcher.astro

@@ -0,0 +1,130 @@
+---
+/**
+ * @component SidebarNavWorkspaceSwitcher
+ * @title Sidebar Nav Workspace Switcher
+ * @description Current workspace (avatar + name) at the top of the sidebar. With `workspaces`, it opens a DropdownMenu to switch.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7514-183
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * <SidebarNavWorkspaceSwitcher
+ *   workspace={{ id: "nw", name: "Northwind Group" }}
+ *   workspaces={[{ id: "nw", name: "Northwind Group" }, { id: "ct", name: "Contoso", href: "/w/ct" }]}
+ * />
+ * ```
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `sidebar-nav:workspace-change` | `{ id: string }` | Bubbles, cancelable. Fired when a workspace is picked. If the workspace has an `href` and the event isn't cancelled, the browser navigates there. |
+ */
+
+import { ChevronsUpDown } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../../dropdown-menu";
+import { Separator } from "../../separator";
+import type { SidebarNavWorkspace } from "./types";
+import SidebarNavWorkspaceAvatar from "./SidebarNavWorkspaceAvatar.astro";
+
+interface Props {
+  workspace: SidebarNavWorkspace;
+  /** Options in the switcher menu. Empty = static display, no menu. */
+  workspaces?: SidebarNavWorkspace[];
+  /** Heading shown at the top of the menu. */
+  menuLabel?: string;
+  class?: string;
+}
+
+const {
+  workspace,
+  workspaces = [],
+  menuLabel = "Workspaces",
+  class: className = "",
+} = Astro.props as Props;
+
+const hasMenu = workspaces.length > 0;
+const rowClass =
+  "flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm leading-5 font-medium text-foreground";
+---
+
+<div data-slot="sidebar-nav-workspace" class={cn("flex flex-col", className)}>
+  {
+    hasMenu ? (
+      <DropdownMenu
+        class="block w-full"
+        defaultValue={workspace.id}
+        highlightItemOnHover
+      >
+        <DropdownMenuTrigger asChild class="flex w-full">
+          <button
+            type="button"
+            aria-label={`Switch workspace, current: ${workspace.name}`}
+            class={cn(
+              rowClass,
+              "outline-none transition-colors hover:bg-muted focus-visible:ring-1 focus-visible:ring-sidebar-ring focus-visible:ring-inset",
+            )}
+          >
+            <SidebarNavWorkspaceAvatar workspace={workspace} />
+            <span class="min-w-0 flex-1 truncate">{workspace.name}</span>
+            <ChevronsUpDown
+              aria-hidden="true"
+              class="text-foreground size-4 shrink-0"
+            />
+          </button>
+        </DropdownMenuTrigger>
+        {/* --anchor-width isn't set by the runtime; match the 238px inner width of the 270px shell. */}
+        <DropdownMenuContent align="start" class="w-[238px]">
+          <DropdownMenuLabel>{menuLabel}</DropdownMenuLabel>
+          <DropdownMenuRadioGroup>
+            {workspaces.map((option) => (
+              <DropdownMenuRadioItem
+                value={option.id}
+                data-href={option.href}
+                avatar
+              >
+                <SidebarNavWorkspaceAvatar slot="avatar" workspace={option} />
+                {option.name}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ) : (
+      <div class={rowClass}>
+        <SidebarNavWorkspaceAvatar workspace={workspace} />
+        <span class="min-w-0 flex-1 truncate">{workspace.name}</span>
+      </div>
+    )
+  }
+  <Separator class="my-2" />
+</div>
+
+<script>
+  document
+    .querySelectorAll<HTMLElement>('[data-slot="sidebar-nav-workspace"]')
+    .forEach((root) => {
+      root.addEventListener("dropdown-menu:select", (event) => {
+        const { value, item } = (
+          event as CustomEvent<{ value: string; item: HTMLElement | null }>
+        ).detail;
+        const href = item?.dataset.href;
+        const proceed = root.dispatchEvent(
+          new CustomEvent("sidebar-nav:workspace-change", {
+            bubbles: true,
+            cancelable: true,
+            detail: { id: value },
+          }),
+        );
+        if (proceed && href) window.location.assign(href);
+      });
+    });
+</script>

package/src/components/organisms/lightning-sidebar-nav/icons.ts

@@ -0,0 +1,46 @@
+import {
+  BookOpen,
+  ChartColumn,
+  CircleHelp,
+  FileText,
+  Folder,
+  House,
+  Library,
+  Palette,
+  Settings,
+  Trash2,
+  UserRound,
+  Users,
+  Video,
+  type AstroComponent,
+} from "@lucide/astro";
+
+/**
+ * String → Lucide icon registry, so backend data can name icons without
+ * importing components. Extend this map when a new destination needs an icon.
+ */
+export const sidebarNavIcons = {
+  "book-open": BookOpen,
+  "chart-column": ChartColumn,
+  "circle-help": CircleHelp,
+  "file-text": FileText,
+  folder: Folder,
+  house: House,
+  library: Library,
+  palette: Palette,
+  settings: Settings,
+  "trash-2": Trash2,
+  "user-round": UserRound,
+  users: Users,
+  video: Video,
+} satisfies Record<string, AstroComponent>;
+
+export type SidebarNavIconName = keyof typeof sidebarNavIcons;
+
+export const resolveSidebarNavIcon = (
+  icon: SidebarNavIconName | AstroComponent | undefined,
+): AstroComponent | undefined => {
+  if (!icon) return undefined;
+  if (typeof icon === "string") return sidebarNavIcons[icon];
+  return icon;
+};

package/src/components/organisms/lightning-sidebar-nav/index.ts

@@ -0,0 +1,18 @@
+export { default as LightningSidebarNav } from "./LightningSidebarNav.astro";
+export { default as SidebarNav } from "./SidebarNav.astro";
+export { default as SidebarNavGroup } from "./SidebarNavGroup.astro";
+export { default as SidebarNavItem } from "./SidebarNavItem.astro";
+export { sidebarNavItemVariants } from "./SidebarNavItem.astro";
+export { default as SidebarNavProBadge } from "./SidebarNavProBadge.astro";
+export { default as SidebarNavSection } from "./SidebarNavSection.astro";
+export { default as SidebarNavSkeleton } from "./SidebarNavSkeleton.astro";
+export { default as SidebarNavSubItem } from "./SidebarNavSubItem.astro";
+export { default as SidebarNavUsage } from "./SidebarNavUsage.astro";
+export { default as SidebarNavWorkspaceAvatar } from "./SidebarNavWorkspaceAvatar.astro";
+export { default as SidebarNavWorkspaceSwitcher } from "./SidebarNavWorkspaceSwitcher.astro";
+export {
+  resolveSidebarNavIcon,
+  sidebarNavIcons,
+  type SidebarNavIconName,
+} from "./icons";
+export * from "./types";

package/src/components/organisms/lightning-sidebar-nav/types.ts

@@ -0,0 +1,77 @@
+import type { AstroComponent } from "@lucide/astro";
+import type { SidebarNavIconName } from "./icons";
+
+/**
+ * Backend contract for the Lightning Sidebar Nav.
+ * Everything except `AstroComponent` icons is JSON-serialisable, so a page can
+ * pass an API response straight into `<LightningSidebarNav />`.
+ */
+
+/** Registry key (from backend data) or a Lucide component (hand-authored markup). */
+export type SidebarNavIcon = SidebarNavIconName | AstroComponent;
+
+/** A top-level destination (Figma: Group Item / Variant=Default). */
+export interface SidebarNavLink {
+  id: string;
+  label: string;
+  href: string;
+  icon?: SidebarNavIcon;
+  /** Shows the Accent/Small "Pro" badge. The link still navigates. */
+  pro?: boolean;
+  disabled?: boolean;
+}
+
+/** A destination nested under a group (Figma: Group item / .Nav Item). */
+export interface SidebarNavSubLink {
+  id: string;
+  label: string;
+  href: string;
+  pro?: boolean;
+}
+
+/** An expandable parent (Figma: Group Item / Variant=Collapsed | Expanded). */
+export interface SidebarNavGroup {
+  id: string;
+  label: string;
+  icon?: SidebarNavIcon;
+  pro?: boolean;
+  children: SidebarNavSubLink[];
+  /** Force the initial open state. Groups with an active child open automatically. */
+  defaultOpen?: boolean;
+}
+
+export type SidebarNavEntry = SidebarNavLink | SidebarNavGroup;
+
+/** A block of entries, optionally headed by a category label (Figma: Variant=Category). */
+export interface SidebarNavSectionData {
+  id: string;
+  label?: string;
+  items: SidebarNavEntry[];
+}
+
+export interface SidebarNavWorkspace {
+  id: string;
+  name: string;
+  avatarUrl?: string;
+  initials?: string;
+  /** When set, choosing this workspace navigates here. Otherwise `sidebar-nav:workspace-change` fires. */
+  href?: string;
+}
+
+export interface SidebarNavUsageMetric {
+  id: string;
+  label: string;
+  used: number;
+  /** `null` means unlimited. */
+  limit: number | null;
+}
+
+export interface SidebarNavUpgrade {
+  label: string;
+  href: string;
+}
+
+export const isSidebarNavGroup = (
+  entry: SidebarNavEntry,
+): entry is SidebarNavGroup =>
+  Array.isArray((entry as SidebarNavGroup).children);

package/src/components/popover/CHANGELOG.md

@@ -1,5 +1,20 @@
-# Changelog
-
-All notable changes to the `Popover` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Popover` component family (`Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription`, `PopoverClose`) are documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5548-11795`)
+
+Figma documents Popover across two pages: Items (the trigger button's Default/Hover/Pressed/Focus/Disabled states) and the expanded popover (12 Side × Alignment combinations, all sharing the same panel styling).
+
+### Fixed
+
+- Added the missing `@figmaUrl` (this component never had one).
+- `PopoverContent`: replaced the `ring-1 ring-foreground/10` border approximation with a real `border border-border`, and `shadow-md` → `shadow-lg` — matching Figma's tokens (`border` = `#e4e4e7`, a named `shadow-lg`), same category of fix already made to `DialogContent`/`HoverCardContent`.
+- `PopoverContent`: removed a dead, redundant raw class string duplicating most of `contentVariants()` — same class of bug already fixed on `HoverCardContent`. It also carried two genuinely dead selectors, `data-[side=inline-start]:...`/`data-[side=inline-end]:...`, which the underlying `@data-slot/popover` behavior library never actually sets (confirmed by checking its source — it only ever sets physical `top`/`bottom`/`left`/`right`, matching the component's own `side` prop type). Also removed the dead `rounded-md` (a later `rounded-lg` always won anyway) and a `duration-100`/`duration-150` conflict (150ms was already winning).
+- `PopoverHeader`: `gap-1` (4px) → `gap-0.5` (2px) between `PopoverTitle`/`PopoverDescription`, matching Figma's measured 2px gap.
+- `PopoverTrigger`: now defaults to `variant="outline"` instead of inheriting `Button`'s own `default` (solid primary) variant — Figma's Default trigger state is a bordered/light button, matching outline exactly, and every existing usage example already passed `variant="outline"` explicitly. Visually a no-op for existing usages; makes new usages match the documented default without needing to repeat the prop.
+
+### Notes
+
+- The trigger's Hover/Pressed/Focus/Disabled states are entirely `Button`'s own responsibility (`PopoverTrigger` just renders a `Button`) — already verified correct in earlier passes, no changes needed here.
+- `bg-popover`/`text-popover-foreground`, `p-4`, and `rounded-lg` already matched Figma's tokens exactly.

package/src/components/popover/Popover.astro

@@ -3,6 +3,7 @@
  * @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>

package/src/components/popover/PopoverContent.astro

@@ -21,11 +21,16 @@ const {
 } = 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]",
 ]);
 ---
@@ -39,11 +44,7 @@ const contentVariants = cva([
   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,
-  )}
+  class={cn(contentVariants(), className)}
 >
   <slot />
 </div>

package/src/components/popover/PopoverHeader.astro

@@ -12,7 +12,7 @@ const { class: className = "", ...rest } = Astro.props as Props;
 <div
   {...rest}
   data-slot="popover-header"
-  class={cn("flex flex-col gap-1 text-sm", className)}
+  class={cn("flex flex-col gap-0.5 text-sm", className)}
 >
   <slot />
 </div>

package/src/components/popover/PopoverTrigger.astro

@@ -9,7 +9,12 @@ type Props = ButtonProps & {
   asChild?: boolean;
 };
 
-const { class: className = "", asChild = false, ...rest } = Astro.props as Props;
+const {
+  class: className = "",
+  asChild = false,
+  variant = "outline",
+  ...rest
+} = Astro.props as Props;
 ---
 
 {
@@ -20,6 +25,7 @@ const { class: className = "", asChild = false, ...rest } = Astro.props as Props
   ) : (
     <Button
       data-slot="popover-trigger"
+      variant={variant}
       class={cn("", "inline-flex items-center", className)}
       {...rest as any}
     >

package/src/components/popover/index.ts

@@ -1,7 +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";
+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

@@ -1,9 +1,31 @@
-# 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.
+# Changelog
+
+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

@@ -3,7 +3,7 @@
  * @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
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=50-3604
  *
  * @preview
  *

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

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"span"> {
   value: string;
+  size?: "default" | "lg";
   class?: string;
   disabled?: boolean;
   id?: string;
@@ -14,6 +15,7 @@ const {
   class: className = "",
   id = "",
   value,
+  size = "default",
   disabled = false,
   "aria-invalid": ariaInvalid,
   ...rest
@@ -25,18 +27,25 @@ const {
   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 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",
+    "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="flex size-4 items-center justify-center data-unchecked:hidden"
+    class={cn("flex items-center justify-center data-unchecked:hidden", size === "lg" ? "size-5" : "size-4")}
   >
-    <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
+      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>

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

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