@cl-light-ds/ui 0.1.0 → 0.2.0

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

@@ -1,114 +1,114 @@
----
-/**
- * @component DropdownMenuCheckboxItem
- * @title Dropdown Menu Checkbox Item
- * @description A real, interactive `menuitemcheckbox` row — checked 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 { DropdownMenuCheckboxItem } from '@bejamas/ui/components/dropdown-menu';
- * ---
- *
- * <DropdownMenuCheckboxItem value="email">Email</DropdownMenuCheckboxItem>
- * ```
- *
- * For a purely decorative checkbox glyph on a plain, non-interactive row, use `DropdownMenuItem`'s
- * own `showCheckbox`/`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="menuitemcheckbox"
-  tabindex={disabled ? -1 : 0}
-  data-slot="dropdown-menu-checkbox-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-checkbox-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-sm border transition-colors"
-      aria-hidden="true"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        class="text-primary-foreground size-3.5 opacity-0 transition-opacity group-data-checked/dropdown-menu-item:opacity-100"
-      >
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M20 6L9 17l-5-5"
-        />
-      </svg>
-    </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 DropdownMenuCheckboxItem
+ * @title Dropdown Menu Checkbox Item
+ * @description A real, interactive `menuitemcheckbox` row — checked 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 { DropdownMenuCheckboxItem } from '@bejamas/ui/components/dropdown-menu';
+ * ---
+ *
+ * <DropdownMenuCheckboxItem value="email">Email</DropdownMenuCheckboxItem>
+ * ```
+ *
+ * For a purely decorative checkbox glyph on a plain, non-interactive row, use `DropdownMenuItem`'s
+ * own `showCheckbox`/`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="menuitemcheckbox"
+  tabindex={disabled ? -1 : 0}
+  data-slot="dropdown-menu-checkbox-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-checkbox-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-sm border transition-colors"
+      aria-hidden="true"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="text-primary-foreground size-3.5 opacity-0 transition-opacity group-data-checked/dropdown-menu-item:opacity-100"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M20 6L9 17l-5-5"
+        />
+      </svg>
+    </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/DropdownMenuContent.astro

@@ -1,42 +1,42 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  side?: "top" | "bottom" | "left" | "right";
-  sideOffset?: number;
-  class?: string;
-}
-
-const {
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div data-slot="dropdown-menu-portal">
-  <div data-slot="dropdown-menu-positioner" class="isolate z-50 outline-none">
-    <div
-      {...rest}
-      hidden
-      data-slot="dropdown-menu-content"
-      data-align={align}
-      data-align-offset={alignOffset}
-      data-side={side}
-      data-side-offset={sideOffset}
-      class={cn(
-        "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 border-border bg-popover text-popover-foreground flex min-w-32 flex-col gap-1.5 rounded-lg border p-2 shadow-[0.3px_2px_4px_-2.2px_#1F003B05,0.5px_3.2px_3px_-1.4px_#1F003B08,0.7px_4px_2.5px_-1.8px_#1F003B0F] duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-[var(--available-height)] w-[var(--anchor-width)] origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-[state=closed]:overflow-hidden no-scrollbar overscroll-none",
-        "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",
-        className,
-      )}
-    >
-      <slot />
-    </div>
-  </div>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  sideOffset?: number;
+  class?: string;
+}
+
+const {
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="dropdown-menu-portal">
+  <div data-slot="dropdown-menu-positioner" class="isolate z-50 outline-none">
+    <div
+      {...rest}
+      hidden
+      data-slot="dropdown-menu-content"
+      data-align={align}
+      data-align-offset={alignOffset}
+      data-side={side}
+      data-side-offset={sideOffset}
+      class={cn(
+        "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 border-border bg-popover text-popover-foreground flex min-w-32 flex-col gap-1.5 rounded-lg border p-2 shadow-[0.3px_2px_4px_-2.2px_#1F003B05,0.5px_3.2px_3px_-1.4px_#1F003B08,0.7px_4px_2.5px_-1.8px_#1F003B0F] duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-[var(--available-height)] w-[var(--anchor-width)] origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-[state=closed]:overflow-hidden no-scrollbar overscroll-none",
+        "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",
+        className,
+      )}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

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

@@ -1,19 +1,19 @@
----
-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="group"
-  data-slot="dropdown-menu-group"
-  class={cn("", "", 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}
+  role="group"
+  data-slot="dropdown-menu-group"
+  class={cn("", "", className)}
+>
+  <slot />
+</div>