@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/dropdown-menu/DropdownMenuRadioItem.astro

@@ -1,101 +1,101 @@
----
-/**
- * @component DropdownMenuRadioItem
- * @title Dropdown Menu Radio Item
- * @description A real, interactive `menuitemradio` row — selected state is tracked by the DropdownMenu runtime, not by this component.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { DropdownMenuRadioItem } from '@bejamas/ui/components/dropdown-menu';
- * ---
- *
- * <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
- * ```
- *
- * For a purely decorative radio glyph on a plain, non-interactive row, use `DropdownMenuItem`'s
- * own `showRadio`/`checked` props instead — this component is for real, runtime-managed selection.
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { itemVariants } from "./dropdown-menu-item-variants";
-import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  disabled?: boolean;
-  inset?: boolean;
-  value: string;
-  defaultChecked?: boolean;
-  leadingIcon?: boolean;
-  avatar?: boolean;
-  showBadge?: boolean;
-  showSubmenuIcon?: boolean;
-  supportiveText?: boolean;
-  class?: string;
-}
-
-const hasLeadingIconSlot = Astro.slots.has("leading-icon");
-const hasAvatarSlot = Astro.slots.has("avatar");
-const hasBadgeSlot = Astro.slots.has("badge");
-const hasSupportiveTextSlot = Astro.slots.has("supportive-text");
-
-const {
-  disabled = false,
-  inset = false,
-  value,
-  defaultChecked = false,
-  leadingIcon = hasLeadingIconSlot,
-  avatar = hasAvatarSlot,
-  showBadge = hasBadgeSlot,
-  showSubmenuIcon = false,
-  supportiveText = hasSupportiveTextSlot,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="menuitemradio"
-  tabindex={disabled ? -1 : 0}
-  data-slot="dropdown-menu-radio-item"
-  data-value={value}
-  data-disabled={disabled ? "" : undefined}
-  data-inset={inset ? "" : undefined}
-  data-default-checked={defaultChecked ? "" : undefined}
-  class={cn(itemVariants({ variant: "default" }), className)}
->
-  <DropdownMenuItemContent
-    hasLeadingControl
-    leadingIcon={leadingIcon}
-    avatar={avatar}
-    showBadge={showBadge}
-    showSubmenuIcon={showSubmenuIcon}
-    supportiveText={supportiveText}
-  >
-    <span
-      slot="leading-control"
-      data-slot="dropdown-menu-radio-item-indicator"
-      class="border-input group-data-checked/dropdown-menu-item:border-primary group-data-checked/dropdown-menu-item:bg-primary relative flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors"
-      aria-hidden="true"
-    >
-      <span class="bg-primary-foreground size-2 rounded-full opacity-0 transition-opacity group-data-checked/dropdown-menu-item:opacity-100" />
-    </span>
-    <slot />
-    <Fragment slot="supportive-text">
-      <slot name="supportive-text" />
-    </Fragment>
-    <Fragment slot="leading-icon">
-      <slot name="leading-icon" />
-    </Fragment>
-    <Fragment slot="avatar">
-      <slot name="avatar" />
-    </Fragment>
-    <Fragment slot="badge">
-      <slot name="badge" />
-    </Fragment>
-  </DropdownMenuItemContent>
-</div>
+---
+/**
+ * @component DropdownMenuRadioItem
+ * @title Dropdown Menu Radio Item
+ * @description A real, interactive `menuitemradio` row — selected state is tracked by the DropdownMenu runtime, not by this component.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { DropdownMenuRadioItem } from '@bejamas/ui/components/dropdown-menu';
+ * ---
+ *
+ * <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
+ * ```
+ *
+ * For a purely decorative radio glyph on a plain, non-interactive row, use `DropdownMenuItem`'s
+ * own `showRadio`/`checked` props instead — this component is for real, runtime-managed selection.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { itemVariants } from "./dropdown-menu-item-variants";
+import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  disabled?: boolean;
+  inset?: boolean;
+  value: string;
+  defaultChecked?: boolean;
+  leadingIcon?: boolean;
+  avatar?: boolean;
+  showBadge?: boolean;
+  showSubmenuIcon?: boolean;
+  supportiveText?: boolean;
+  class?: string;
+}
+
+const hasLeadingIconSlot = Astro.slots.has("leading-icon");
+const hasAvatarSlot = Astro.slots.has("avatar");
+const hasBadgeSlot = Astro.slots.has("badge");
+const hasSupportiveTextSlot = Astro.slots.has("supportive-text");
+
+const {
+  disabled = false,
+  inset = false,
+  value,
+  defaultChecked = false,
+  leadingIcon = hasLeadingIconSlot,
+  avatar = hasAvatarSlot,
+  showBadge = hasBadgeSlot,
+  showSubmenuIcon = false,
+  supportiveText = hasSupportiveTextSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="menuitemradio"
+  tabindex={disabled ? -1 : 0}
+  data-slot="dropdown-menu-radio-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  data-inset={inset ? "" : undefined}
+  data-default-checked={defaultChecked ? "" : undefined}
+  class={cn(itemVariants({ variant: "default" }), className)}
+>
+  <DropdownMenuItemContent
+    hasLeadingControl
+    leadingIcon={leadingIcon}
+    avatar={avatar}
+    showBadge={showBadge}
+    showSubmenuIcon={showSubmenuIcon}
+    supportiveText={supportiveText}
+  >
+    <span
+      slot="leading-control"
+      data-slot="dropdown-menu-radio-item-indicator"
+      class="border-input group-data-checked/dropdown-menu-item:border-primary group-data-checked/dropdown-menu-item:bg-primary relative flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors"
+      aria-hidden="true"
+    >
+      <span class="bg-primary-foreground size-2 rounded-full opacity-0 transition-opacity group-data-checked/dropdown-menu-item:opacity-100" />
+    </span>
+    <slot />
+    <Fragment slot="supportive-text">
+      <slot name="supportive-text" />
+    </Fragment>
+    <Fragment slot="leading-icon">
+      <slot name="leading-icon" />
+    </Fragment>
+    <Fragment slot="avatar">
+      <slot name="avatar" />
+    </Fragment>
+    <Fragment slot="badge">
+      <slot name="badge" />
+    </Fragment>
+  </DropdownMenuItemContent>
+</div>

package/src/components/dropdown-menu/DropdownMenuSeparator.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}
-  role="separator"
-  data-slot="dropdown-menu-separator"
-  class={cn("bg-border -mx-1 my-1 h-px", className)}
->
-</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}
+  role="separator"
+  data-slot="dropdown-menu-separator"
+  class={cn("bg-border -mx-1 my-1 h-px", className)}
+>
+</div>

package/src/components/dropdown-menu/DropdownMenuShortcut.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"span"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<span
-  {...rest}
-  data-slot="dropdown-menu-shortcut"
-  class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-foreground ml-auto text-xs tracking-widest", className)}
->
-  <slot />
-</span>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  data-slot="dropdown-menu-shortcut"
+  class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-foreground ml-auto text-xs tracking-widest", className)}
+>
+  <slot />
+</span>

package/src/components/dropdown-menu/DropdownMenuTrigger.astro

@@ -1,49 +1,49 @@
----
-import { ChevronDown } from "@lucide/astro";
-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 hasTailIconSlot = Astro.slots.has("tail-icon");
-
-const {
-  class: className = "",
-  asChild = false,
-  variant = "outline",
-  tailIcon = true,
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  asChild ? (
-    <div data-slot="dropdown-menu-trigger" data-as-child class={cn("", "inline-flex items-center", className)}>
-      <slot />
-    </div>
-  ) : (
-    <Button
-      data-slot="dropdown-menu-trigger"
-      class={cn("", "inline-flex items-center", className)}
-      variant={variant}
-      tailIcon={tailIcon}
-      {...rest as any}
-    >
-      <slot />
-      {tailIcon &&
-        (hasTailIconSlot ? (
-          <slot name="tail-icon" slot="tail-icon" />
-        ) : (
-          <ChevronDown
-            slot="tail-icon"
-            class="transition-transform group-data-[state=open]/dropdown-menu:rotate-180"
-          />
-        ))}
-    </Button>
-  )
-}
+---
+import { ChevronDown } from "@lucide/astro";
+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 hasTailIconSlot = Astro.slots.has("tail-icon");
+
+const {
+  class: className = "",
+  asChild = false,
+  variant = "outline",
+  tailIcon = true,
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div data-slot="dropdown-menu-trigger" data-as-child class={cn("", "inline-flex items-center", className)}>
+      <slot />
+    </div>
+  ) : (
+    <Button
+      data-slot="dropdown-menu-trigger"
+      class={cn("", "inline-flex items-center", className)}
+      variant={variant}
+      tailIcon={tailIcon}
+      {...rest as any}
+    >
+      <slot />
+      {tailIcon &&
+        (hasTailIconSlot ? (
+          <slot name="tail-icon" slot="tail-icon" />
+        ) : (
+          <ChevronDown
+            slot="tail-icon"
+            class="transition-transform group-data-[state=open]/dropdown-menu:rotate-180"
+          />
+        ))}
+    </Button>
+  )
+}