@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/kbd/KbdGroup.astro

@@ -1,55 +1,55 @@
----
-/**
- * @component KbdGroup
- * @title Keyboard Key Group
- * @description A container for grouping multiple keyboard keys together, typically used for displaying keyboard shortcuts.
- * @status stable
- *
- * @preview
- *
- * <div class="flex flex-col items-center gap-4">
- *   <KbdGroup>
- *     <Kbd>⌘</Kbd>
- *     <Kbd>⇧</Kbd>
- *     <Kbd>⌥</Kbd>
- *     <Kbd>⌃</Kbd>
- *   </KbdGroup>
- *   <KbdGroup>
- *     <Kbd>Ctrl</Kbd>
- *     <span>+</span>
- *     <Kbd>B</Kbd>
- *   </KbdGroup>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
- * ---
- *
- * <KbdGroup>
- *   <Kbd>⌘</Kbd>
- *   <Kbd>K</Kbd>
- * </KbdGroup>
- * ```
- *
- * @props
- * - class?: string — Additional classes for styling.
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-const {
-  class: className = "",
-  ...props
-} = Astro.props;
----
-
-<div
-  data-slot="kbd-group"
-  class={cn("gap-1", "gap-1 inline-flex items-center", className)}
-  {...props}
->
-  <slot />
-</div>
+---
+/**
+ * @component KbdGroup
+ * @title Keyboard Key Group
+ * @description A container for grouping multiple keyboard keys together, typically used for displaying keyboard shortcuts.
+ * @status stable
+ *
+ * @preview
+ *
+ * <div class="flex flex-col items-center gap-4">
+ *   <KbdGroup>
+ *     <Kbd>⌘</Kbd>
+ *     <Kbd>⇧</Kbd>
+ *     <Kbd>⌥</Kbd>
+ *     <Kbd>⌃</Kbd>
+ *   </KbdGroup>
+ *   <KbdGroup>
+ *     <Kbd>Ctrl</Kbd>
+ *     <span>+</span>
+ *     <Kbd>B</Kbd>
+ *   </KbdGroup>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
+ * ---
+ *
+ * <KbdGroup>
+ *   <Kbd>⌘</Kbd>
+ *   <Kbd>K</Kbd>
+ * </KbdGroup>
+ * ```
+ *
+ * @props
+ * - class?: string — Additional classes for styling.
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const {
+  class: className = "",
+  ...props
+} = Astro.props;
+---
+
+<div
+  data-slot="kbd-group"
+  class={cn("gap-1", "gap-1 inline-flex items-center", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/label/Label.astro

@@ -1,97 +1,97 @@
----
-/**
- * @component Label
- * @title Label
- * @description A text label for form controls.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7228-1290
- *
- * @preview
- *
- * <div class="flex items-center space-x-2">
- *   <Checkbox id="terms" />
- *   <Label for="terms">Accept terms and conditions</Label>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Label } from '@bejamas/ui/components/label';
- * ---
- *
- * <Label for="terms">Accept terms and conditions</Label>
- * ```
- *
- * @examples
- *
- * ### With supportive text
- *
- * <Label for="first-name" supportiveText="Enter your legal first name" showSupportiveText>
- *   First Name
- * </Label>
- *
- * ### With hint icon
- *
- * <Label for="corporate-id" showHintIcon>Corporate ID</Label>
- *
- * ### With hint icon and supportive text
- *
- * <Label
- *   for="corporate-id-2"
- *   showHintIcon
- *   supportiveText="Contact admin to enable"
- *   showSupportiveText
- * >
- *   Corporate ID
- * </Label>
- */
-
-import { CircleQuestionMark } from "@lucide/astro";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"label"> {
-  class?: string;
-  supportiveText?: string;
-  showSupportiveText?: boolean;
-  showHintIcon?: boolean;
-}
-
-const {
-  class: className = "",
-  supportiveText,
-  showSupportiveText = false,
-  showHintIcon = false,
-  ...props
-} = Astro.props as Props;
-
-const hasSupportiveText = showSupportiveText && !!supportiveText;
-const hasExtras = showHintIcon || hasSupportiveText;
----
-
-<label
-  data-slot="label"
-  class={cn(
-    "flex items-center gap-2 text-sm font-medium text-foreground select-none",
-    "group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-    hasExtras && "flex-col items-start gap-1",
-    className,
-  )}
-  {...props}
->
-  {hasExtras ? (
-    <span data-slot="label-text" class="flex items-center gap-2">
-      <slot />
-      {showHintIcon && (
-        <CircleQuestionMark data-slot="label-hint-icon" class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
-      )}
-    </span>
-  ) : (
-    <slot />
-  )}
-  {hasSupportiveText && (
-    <span data-slot="label-supportive-text" class="text-xs font-medium text-muted-foreground">
-      {supportiveText}
-    </span>
-  )}
-</label>
+---
+/**
+ * @component Label
+ * @title Label
+ * @description A text label for form controls.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7228-1290
+ *
+ * @preview
+ *
+ * <div class="flex items-center space-x-2">
+ *   <Checkbox id="terms" />
+ *   <Label for="terms">Accept terms and conditions</Label>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <Label for="terms">Accept terms and conditions</Label>
+ * ```
+ *
+ * @examples
+ *
+ * ### With supportive text
+ *
+ * <Label for="first-name" supportiveText="Enter your legal first name" showSupportiveText>
+ *   First Name
+ * </Label>
+ *
+ * ### With hint icon
+ *
+ * <Label for="corporate-id" showHintIcon>Corporate ID</Label>
+ *
+ * ### With hint icon and supportive text
+ *
+ * <Label
+ *   for="corporate-id-2"
+ *   showHintIcon
+ *   supportiveText="Contact admin to enable"
+ *   showSupportiveText
+ * >
+ *   Corporate ID
+ * </Label>
+ */
+
+import { CircleQuestionMark } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"label"> {
+  class?: string;
+  supportiveText?: string;
+  showSupportiveText?: boolean;
+  showHintIcon?: boolean;
+}
+
+const {
+  class: className = "",
+  supportiveText,
+  showSupportiveText = false,
+  showHintIcon = false,
+  ...props
+} = Astro.props as Props;
+
+const hasSupportiveText = showSupportiveText && !!supportiveText;
+const hasExtras = showHintIcon || hasSupportiveText;
+---
+
+<label
+  data-slot="label"
+  class={cn(
+    "flex items-center gap-2 text-sm font-medium text-foreground select-none",
+    "group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+    hasExtras && "flex-col items-start gap-1",
+    className,
+  )}
+  {...props}
+>
+  {hasExtras ? (
+    <span data-slot="label-text" class="flex items-center gap-2">
+      <slot />
+      {showHintIcon && (
+        <CircleQuestionMark data-slot="label-hint-icon" class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+      )}
+    </span>
+  ) : (
+    <slot />
+  )}
+  {hasSupportiveText && (
+    <span data-slot="label-supportive-text" class="text-xs font-medium text-muted-foreground">
+      {supportiveText}
+    </span>
+  )}
+</label>

package/src/components/link-group/LinkGroup.astro

@@ -1,67 +1,67 @@
----
-/**
- * @component LinkGroup
- * @title Link Group
- * @description A group of related links with optional title for navigation or footer sections.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-7942
- *
- * @preview
- *
- * <LinkGroup>
- *   <LinkGroupTitle>Company</LinkGroupTitle>
- *   <LinkGroupList>
- *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
- *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
- *   </LinkGroupList>
- * </LinkGroup>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';
- * ---
- *
- * <LinkGroup>
- *   <LinkGroupTitle>Company</LinkGroupTitle>
- *   <LinkGroupList>
- *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
- *   </LinkGroupList>
- * </LinkGroup>
- * ```
- *
- * @examples
- *
- * ### Horizontal orientation
- *
- * <LinkGroup>
- *   <LinkGroupTitle>Company</LinkGroupTitle>
- *   <LinkGroupList orientation="horizontal">
- *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
- *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
- *     <LinkGroupItem><a href="#">Careers</a></LinkGroupItem>
- *   </LinkGroupList>
- * </LinkGroup>
- */
-
-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="link-group"
-  class={cn("", "flex flex-col items-start gap-2", className)}
->
-  <slot />
-</div>
-
+---
+/**
+ * @component LinkGroup
+ * @title Link Group
+ * @description A group of related links with optional title for navigation or footer sections.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-7942
+ *
+ * @preview
+ *
+ * <LinkGroup>
+ *   <LinkGroupTitle>Company</LinkGroupTitle>
+ *   <LinkGroupList>
+ *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
+ *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
+ *   </LinkGroupList>
+ * </LinkGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';
+ * ---
+ *
+ * <LinkGroup>
+ *   <LinkGroupTitle>Company</LinkGroupTitle>
+ *   <LinkGroupList>
+ *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
+ *   </LinkGroupList>
+ * </LinkGroup>
+ * ```
+ *
+ * @examples
+ *
+ * ### Horizontal orientation
+ *
+ * <LinkGroup>
+ *   <LinkGroupTitle>Company</LinkGroupTitle>
+ *   <LinkGroupList orientation="horizontal">
+ *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
+ *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
+ *     <LinkGroupItem><a href="#">Careers</a></LinkGroupItem>
+ *   </LinkGroupList>
+ * </LinkGroup>
+ */
+
+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="link-group"
+  class={cn("", "flex flex-col items-start gap-2", className)}
+>
+  <slot />
+</div>
+

package/src/components/link-group/LinkGroupItem.astro

@@ -1,32 +1,32 @@
----
-/**
- * @component LinkGroupItem
- * @title Link Group Item
- * @description A single link row inside a LinkGroupList, styling a slotted `<a>` with the group's link typography and states.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5713
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<li
-  {...rest}
-  data-slot="link-group-item"
-  class={cn(
-    "[&_a]:inline-flex [&_a]:items-center [&_a]:rounded-lg [&_a]:p-0.5 [&_a]:text-sm [&_a]:font-medium [&_a]:leading-5 [&_a]:text-muted-foreground [&_a]:transition-colors [&_a]:underline-offset-4 [&_a:hover]:underline [&_a]:outline-hidden [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-chart-1",
-    className,
-  )}
->
-  <slot />
-</li>
-
+---
+/**
+ * @component LinkGroupItem
+ * @title Link Group Item
+ * @description A single link row inside a LinkGroupList, styling a slotted `<a>` with the group's link typography and states.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5713
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  data-slot="link-group-item"
+  class={cn(
+    "[&_a]:inline-flex [&_a]:items-center [&_a]:rounded-lg [&_a]:p-0.5 [&_a]:text-sm [&_a]:font-medium [&_a]:leading-5 [&_a]:text-muted-foreground [&_a]:transition-colors [&_a]:underline-offset-4 [&_a:hover]:underline [&_a]:outline-hidden [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-chart-1",
+    className,
+  )}
+>
+  <slot />
+</li>
+

package/src/components/link-group/LinkGroupList.astro

@@ -1,25 +1,25 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-import { linkGroupListVariants, type LinkGroupOrientation } from "./link-group-list-variants";
-
-interface Props extends HTMLAttributes<"ul"> {
-  orientation?: LinkGroupOrientation;
-  class?: string;
-}
-
-const {
-  orientation = "vertical",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<ul
-  {...rest}
-  data-slot="link-group-list"
-  data-orientation={orientation}
-  class={cn(linkGroupListVariants({ orientation }), className)}
->
-  <slot />
-</ul>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { linkGroupListVariants, type LinkGroupOrientation } from "./link-group-list-variants";
+
+interface Props extends HTMLAttributes<"ul"> {
+  orientation?: LinkGroupOrientation;
+  class?: string;
+}
+
+const {
+  orientation = "vertical",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<ul
+  {...rest}
+  data-slot="link-group-list"
+  data-orientation={orientation}
+  class={cn(linkGroupListVariants({ orientation }), className)}
+>
+  <slot />
+</ul>

package/src/components/link-group/LinkGroupTitle.astro

@@ -1,22 +1,22 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="link-group-title"
-  class={cn("", "text-base font-semibold text-foreground", className)}
->
-  <slot />
-</div>
-
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="link-group-title"
+  class={cn("", "text-base font-semibold text-foreground", className)}
+>
+  <slot />
+</div>
+