@cl-light-ds/ui 0.1.0 → 0.2.0

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

@@ -1,220 +1,220 @@
----
-/**
- * @component DropdownMenuItem
- * @title Dropdown Menu Item
- * @description A selectable row inside a DropdownMenuContent, with optional leading icon/avatar/checkbox/radio and trailing badge/submenu affordance.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
- *
- * @preview
- *
- * <DropdownMenu defaultOpen>
- *   <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
- *   <DropdownMenuContent class="static block" align="start">
- *     <DropdownMenuItem leadingIcon>
- *       <UserIcon slot="leading-icon" />
- *       Profile
- *     </DropdownMenuItem>
- *     <DropdownMenuItem supportiveText>
- *       Export
- *       <span slot="supportive-text">as CSV</span>
- *     </DropdownMenuItem>
- *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { DropdownMenuItem } from '@bejamas/ui/components/dropdown-menu';
- * ---
- *
- * <DropdownMenuItem>Edit</DropdownMenuItem>
- * ```
- *
- * @examples
- *
- * ### With leading icon
- *
- * <DropdownMenuItem leadingIcon>
- *   <UserIcon slot="leading-icon" />
- *   Profile
- * </DropdownMenuItem>
- *
- * ### With avatar
- *
- * Pass an `<Avatar size="sm">` (24px) into the `avatar` slot — it already matches Figma's item avatar size, no extra sizing needed.
- *
- * <DropdownMenuItem avatar>
- *   <Avatar size="sm" slot="avatar">
- *     <AvatarImage src="https://github.com/thomkrupa.png" alt="Thom Krupa" />
- *     <AvatarFallback>TK</AvatarFallback>
- *   </Avatar>
- *   Thom Krupa
- * </DropdownMenuItem>
- *
- * ### With supportive text
- *
- * <DropdownMenuItem supportiveText>
- *   Export
- *   <span slot="supportive-text">as CSV</span>
- * </DropdownMenuItem>
- *
- * ### With badge
- *
- * Pass a `<Badge size="sm">` into the `badge` slot.
- *
- * <DropdownMenuItem showBadge>
- *   Notifications
- *   <Badge size="sm" slot="badge">3</Badge>
- * </DropdownMenuItem>
- *
- * ### With checkbox / radio (presentational only)
- *
- * `showCheckbox`/`showRadio` on `DropdownMenuItem` are decorative — they draw the glyph but do not
- * manage checked/selected state or emit events. For a real, interactive `menuitemcheckbox`/`menuitemradio`
- * row, use `DropdownMenuCheckboxItem`/`DropdownMenuRadioItem` instead.
- *
- * <DropdownMenuItem showCheckbox checked>Show hidden files</DropdownMenuItem>
- * <DropdownMenuItem showRadio checked>Compact view</DropdownMenuItem>
- *
- * ### Submenu affordance
- *
- * `showSubmenuIcon` is cosmetic only in this release — it doesn't open a nested menu (no submenu infrastructure exists yet).
- *
- * <DropdownMenuItem showSubmenuIcon>More tools</DropdownMenuItem>
- *
- * ### Category
- *
- * Non-interactive section label. Pair with `DropdownMenuSeparator` if you want a divider below it.
- *
- * <DropdownMenuItem variant="category">Recent</DropdownMenuItem>
- *
- * ### Destructive
- *
- * <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { itemVariants, type ItemVariant } from "./dropdown-menu-item-variants";
-import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  disabled?: boolean;
-  inset?: boolean;
-  value?: string;
-  variant?: ItemVariant;
-  checked?: boolean;
-  showCheckbox?: boolean;
-  showRadio?: 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,
-  variant = "default",
-  checked = false,
-  showCheckbox = false,
-  showRadio = false,
-  leadingIcon = hasLeadingIconSlot,
-  avatar = hasAvatarSlot,
-  showBadge = hasBadgeSlot,
-  showSubmenuIcon = false,
-  supportiveText = hasSupportiveTextSlot,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const isCategory = variant === "category";
----
-
-<div
-  {...rest}
-  role={isCategory ? "presentation" : "menuitem"}
-  tabindex={isCategory || disabled ? -1 : 0}
-  data-slot="dropdown-menu-item"
-  data-value={value}
-  data-disabled={disabled ? "" : undefined}
-  data-inset={inset ? "" : undefined}
-  data-checked={checked ? "" : undefined}
-  data-variant={variant}
-  class={cn(itemVariants({ variant }), className)}
->
-  <DropdownMenuItemContent
-    isCategory={isCategory}
-    hasLeadingControl={showCheckbox || showRadio}
-    leadingIcon={leadingIcon}
-    avatar={avatar}
-    showBadge={showBadge}
-    showSubmenuIcon={showSubmenuIcon}
-    supportiveText={supportiveText}
-  >
-    {
-      showCheckbox && (
-        <span
-          slot="leading-control"
-          data-slot="dropdown-menu-item-checkbox"
-          class={cn(
-            "border-input relative flex size-5 shrink-0 items-center justify-center rounded-sm border transition-colors",
-            checked && "border-primary bg-primary",
-          )}
-          aria-hidden="true"
-        >
-          {checked && (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-primary-foreground size-3.5">
-              <path
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M20 6L9 17l-5-5"
-              />
-            </svg>
-          )}
-        </span>
-      )
-    }
-    {
-      showRadio && (
-        <span
-          slot="leading-control"
-          data-slot="dropdown-menu-item-radio"
-          class={cn(
-            "border-input relative flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors",
-            checked && "border-primary bg-primary",
-          )}
-          aria-hidden="true"
-        >
-          {checked && <span class="bg-primary-foreground size-2 rounded-full" />}
-        </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 DropdownMenuItem
+ * @title Dropdown Menu Item
+ * @description A selectable row inside a DropdownMenuContent, with optional leading icon/avatar/checkbox/radio and trailing badge/submenu affordance.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
+ *
+ * @preview
+ *
+ * <DropdownMenu defaultOpen>
+ *   <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
+ *   <DropdownMenuContent class="static block" align="start">
+ *     <DropdownMenuItem leadingIcon>
+ *       <UserIcon slot="leading-icon" />
+ *       Profile
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem supportiveText>
+ *       Export
+ *       <span slot="supportive-text">as CSV</span>
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { DropdownMenuItem } from '@bejamas/ui/components/dropdown-menu';
+ * ---
+ *
+ * <DropdownMenuItem>Edit</DropdownMenuItem>
+ * ```
+ *
+ * @examples
+ *
+ * ### With leading icon
+ *
+ * <DropdownMenuItem leadingIcon>
+ *   <UserIcon slot="leading-icon" />
+ *   Profile
+ * </DropdownMenuItem>
+ *
+ * ### With avatar
+ *
+ * Pass an `<Avatar size="sm">` (24px) into the `avatar` slot — it already matches Figma's item avatar size, no extra sizing needed.
+ *
+ * <DropdownMenuItem avatar>
+ *   <Avatar size="sm" slot="avatar">
+ *     <AvatarImage src="https://github.com/thomkrupa.png" alt="Thom Krupa" />
+ *     <AvatarFallback>TK</AvatarFallback>
+ *   </Avatar>
+ *   Thom Krupa
+ * </DropdownMenuItem>
+ *
+ * ### With supportive text
+ *
+ * <DropdownMenuItem supportiveText>
+ *   Export
+ *   <span slot="supportive-text">as CSV</span>
+ * </DropdownMenuItem>
+ *
+ * ### With badge
+ *
+ * Pass a `<Badge size="sm">` into the `badge` slot.
+ *
+ * <DropdownMenuItem showBadge>
+ *   Notifications
+ *   <Badge size="sm" slot="badge">3</Badge>
+ * </DropdownMenuItem>
+ *
+ * ### With checkbox / radio (presentational only)
+ *
+ * `showCheckbox`/`showRadio` on `DropdownMenuItem` are decorative — they draw the glyph but do not
+ * manage checked/selected state or emit events. For a real, interactive `menuitemcheckbox`/`menuitemradio`
+ * row, use `DropdownMenuCheckboxItem`/`DropdownMenuRadioItem` instead.
+ *
+ * <DropdownMenuItem showCheckbox checked>Show hidden files</DropdownMenuItem>
+ * <DropdownMenuItem showRadio checked>Compact view</DropdownMenuItem>
+ *
+ * ### Submenu affordance
+ *
+ * `showSubmenuIcon` is cosmetic only in this release — it doesn't open a nested menu (no submenu infrastructure exists yet).
+ *
+ * <DropdownMenuItem showSubmenuIcon>More tools</DropdownMenuItem>
+ *
+ * ### Category
+ *
+ * Non-interactive section label. Pair with `DropdownMenuSeparator` if you want a divider below it.
+ *
+ * <DropdownMenuItem variant="category">Recent</DropdownMenuItem>
+ *
+ * ### Destructive
+ *
+ * <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { itemVariants, type ItemVariant } from "./dropdown-menu-item-variants";
+import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  disabled?: boolean;
+  inset?: boolean;
+  value?: string;
+  variant?: ItemVariant;
+  checked?: boolean;
+  showCheckbox?: boolean;
+  showRadio?: 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,
+  variant = "default",
+  checked = false,
+  showCheckbox = false,
+  showRadio = false,
+  leadingIcon = hasLeadingIconSlot,
+  avatar = hasAvatarSlot,
+  showBadge = hasBadgeSlot,
+  showSubmenuIcon = false,
+  supportiveText = hasSupportiveTextSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const isCategory = variant === "category";
+---
+
+<div
+  {...rest}
+  role={isCategory ? "presentation" : "menuitem"}
+  tabindex={isCategory || disabled ? -1 : 0}
+  data-slot="dropdown-menu-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  data-inset={inset ? "" : undefined}
+  data-checked={checked ? "" : undefined}
+  data-variant={variant}
+  class={cn(itemVariants({ variant }), className)}
+>
+  <DropdownMenuItemContent
+    isCategory={isCategory}
+    hasLeadingControl={showCheckbox || showRadio}
+    leadingIcon={leadingIcon}
+    avatar={avatar}
+    showBadge={showBadge}
+    showSubmenuIcon={showSubmenuIcon}
+    supportiveText={supportiveText}
+  >
+    {
+      showCheckbox && (
+        <span
+          slot="leading-control"
+          data-slot="dropdown-menu-item-checkbox"
+          class={cn(
+            "border-input relative flex size-5 shrink-0 items-center justify-center rounded-sm border transition-colors",
+            checked && "border-primary bg-primary",
+          )}
+          aria-hidden="true"
+        >
+          {checked && (
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-primary-foreground size-3.5">
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M20 6L9 17l-5-5"
+              />
+            </svg>
+          )}
+        </span>
+      )
+    }
+    {
+      showRadio && (
+        <span
+          slot="leading-control"
+          data-slot="dropdown-menu-item-radio"
+          class={cn(
+            "border-input relative flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors",
+            checked && "border-primary bg-primary",
+          )}
+          aria-hidden="true"
+        >
+          {checked && <span class="bg-primary-foreground size-2 rounded-full" />}
+        </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/DropdownMenuLabel.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  inset?: boolean;
-  class?: string;
-}
-
-const { inset = false, class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="dropdown-menu-label"
-  data-inset={inset ? "" : undefined}
-  class={cn("text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8 text-sm", className)}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  inset?: boolean;
+  class?: string;
+}
+
+const { inset = false, class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="dropdown-menu-label"
+  data-inset={inset ? "" : undefined}
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8 text-sm", className)}
+>
+  <slot />
+</div>