@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/accordion/AccordionItem.astro

@@ -1,36 +1,36 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  value: string;
-  class?: string;
-  disabled?: boolean;
-}
-
-const {
-  value,
-  class: className = "",
-  disabled = false,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-value={value}
-  data-slot="accordion-item"
-  data-disabled={disabled ? "" : undefined}
-  aria-disabled={disabled ? "true" : undefined}
-  class={cn(
-    "group/accordion-item",
-    "[--accordion-indent:--spacing(3)] has-data-[slot=accordion-trigger-lead-icon]:[--accordion-indent:--spacing(9)]",
-    "group-data-[shape=default]/accordion:not-last:border-b group-data-[shape=default]/accordion:border-border",
-    "group-data-[shape=rounded]/accordion:rounded-lg group-data-[shape=rounded]/accordion:border group-data-[shape=rounded]/accordion:border-border group-data-[shape=rounded]/accordion:bg-card",
-    "has-[[data-slot=accordion-trigger]:focus-visible]:relative has-[[data-slot=accordion-trigger]:focus-visible]:z-10 has-[[data-slot=accordion-trigger]:focus-visible]:border has-[[data-slot=accordion-trigger]:focus-visible]:border-ring has-[[data-slot=accordion-trigger]:focus-visible]:ring-3 has-[[data-slot=accordion-trigger]:focus-visible]:ring-ring/50 has-[[data-slot=accordion-trigger]:focus-visible]:bg-card",
-    "data-disabled:opacity-50",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  value: string;
+  class?: string;
+  disabled?: boolean;
+}
+
+const {
+  value,
+  class: className = "",
+  disabled = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-value={value}
+  data-slot="accordion-item"
+  data-disabled={disabled ? "" : undefined}
+  aria-disabled={disabled ? "true" : undefined}
+  class={cn(
+    "group/accordion-item",
+    "[--accordion-indent:--spacing(3)] has-data-[slot=accordion-trigger-lead-icon]:[--accordion-indent:--spacing(9)]",
+    "group-data-[shape=default]/accordion:not-last:border-b group-data-[shape=default]/accordion:border-border",
+    "group-data-[shape=rounded]/accordion:rounded-lg group-data-[shape=rounded]/accordion:border group-data-[shape=rounded]/accordion:border-border group-data-[shape=rounded]/accordion:bg-card",
+    "has-[[data-slot=accordion-trigger]:focus-visible]:relative has-[[data-slot=accordion-trigger]:focus-visible]:z-10 has-[[data-slot=accordion-trigger]:focus-visible]:border has-[[data-slot=accordion-trigger]:focus-visible]:border-ring has-[[data-slot=accordion-trigger]:focus-visible]:ring-3 has-[[data-slot=accordion-trigger]:focus-visible]:ring-ring/50 has-[[data-slot=accordion-trigger]:focus-visible]:bg-card",
+    "data-disabled:opacity-50",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/accordion/AccordionTrigger.astro

@@ -1,118 +1,118 @@
----
-import { cva } from "class-variance-authority";
-import { Plus, Minus, ChevronDown, ChevronUp } from "@lucide/astro";
-import type { AstroComponent } from "@lucide/astro";
-import Badge from "../badge/Badge.astro";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-type IndicatorIcon = "plus-minus" | "chevron";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
-  asChild?: boolean;
-  /** Leading icon rendered before the label (e.g. a lucide-astro icon). */
-  icon?: AstroComponent;
-  /** Optional badge/pill rendered next to the label. */
-  badge?: string | number;
-  disabled?: boolean;
-  /** Style of the built-in expand/collapse indicator. Ignored when a custom `icon` slot is provided. */
-  indicatorIcon?: IndicatorIcon;
-}
-
-const {
-  class: className = "",
-  asChild = false,
-  type = "button",
-  icon,
-  badge,
-  disabled = false,
-  indicatorIcon = "plus-minus",
-  ...rest
-} = Astro.props as Props;
-
-const Icon = icon;
-const hasBadge = badge !== undefined && badge !== null;
-const [CollapsedIndicator, ExpandedIndicator] =
-  indicatorIcon === "chevron" ? [ChevronDown, ChevronUp] : [Plus, Minus];
-
-const triggerVariants = cva(
-  "**:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md p-3 aria-expanded:pb-1 text-left text-xs font-semibold hover:underline **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between gap-2 transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-disabled/accordion-item:pointer-events-none group-data-disabled/accordion-item:opacity-50",
-);
----
-
-{
-  asChild ? (
-    <div class="flex">
-      <div
-        data-slot="accordion-trigger"
-        data-as-child
-        class={cn(triggerVariants(), className)}
-      >
-        <slot />
-      </div>
-    </div>
-  ) : (
-    <div class="flex">
-      <button
-        {...rest}
-        type={type}
-        aria-disabled={disabled ? "true" : undefined}
-        data-slot="accordion-trigger"
-        class={cn(triggerVariants(), className)}
-      >
-        <span class="flex flex-1 items-center gap-2">
-          {
-            Icon && (
-              <span
-                data-slot="accordion-trigger-lead-icon"
-                class="text-foreground pointer-events-none size-4 shrink-0"
-              >
-                <Icon class="size-4" />
-              </span>
-            )
-          }
-          <span class="flex items-center gap-1.5">
-            <slot />
-            {
-              hasBadge && (
-                <Badge
-                  data-slot="accordion-trigger-badge"
-                  variant="outline"
-                  shape="pill"
-                  size="sm"
-                >
-                  {badge}
-                </Badge>
-              )
-            }
-          </span>
-        </span>
-        {
-          Astro.slots.has("icon") ? (
-            <span
-              data-slot="accordion-trigger-icon"
-              class="pointer-events-none shrink-0"
-            >
-              <slot name="icon" />
-            </span>
-          ) : (
-            <>
-              <CollapsedIndicator
-                data-slot="accordion-trigger-icon"
-                class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-                aria-hidden="true"
-              />
-              <ExpandedIndicator
-                data-slot="accordion-trigger-icon"
-                class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
-                aria-hidden="true"
-              />
-            </>
-          )
-        }
-      </button>
-    </div>
-  )
-}
+---
+import { cva } from "class-variance-authority";
+import { Plus, Minus, ChevronDown, ChevronUp } from "@lucide/astro";
+import type { AstroComponent } from "@lucide/astro";
+import Badge from "../badge/Badge.astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type IndicatorIcon = "plus-minus" | "chevron";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+  /** Leading icon rendered before the label (e.g. a lucide-astro icon). */
+  icon?: AstroComponent;
+  /** Optional badge/pill rendered next to the label. */
+  badge?: string | number;
+  disabled?: boolean;
+  /** Style of the built-in expand/collapse indicator. Ignored when a custom `icon` slot is provided. */
+  indicatorIcon?: IndicatorIcon;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  icon,
+  badge,
+  disabled = false,
+  indicatorIcon = "plus-minus",
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon;
+const hasBadge = badge !== undefined && badge !== null;
+const [CollapsedIndicator, ExpandedIndicator] =
+  indicatorIcon === "chevron" ? [ChevronDown, ChevronUp] : [Plus, Minus];
+
+const triggerVariants = cva(
+  "**:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md p-3 aria-expanded:pb-1 text-left text-xs font-semibold hover:underline **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between gap-2 transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-disabled/accordion-item:pointer-events-none group-data-disabled/accordion-item:opacity-50",
+);
+---
+
+{
+  asChild ? (
+    <div class="flex">
+      <div
+        data-slot="accordion-trigger"
+        data-as-child
+        class={cn(triggerVariants(), className)}
+      >
+        <slot />
+      </div>
+    </div>
+  ) : (
+    <div class="flex">
+      <button
+        {...rest}
+        type={type}
+        aria-disabled={disabled ? "true" : undefined}
+        data-slot="accordion-trigger"
+        class={cn(triggerVariants(), className)}
+      >
+        <span class="flex flex-1 items-center gap-2">
+          {
+            Icon && (
+              <span
+                data-slot="accordion-trigger-lead-icon"
+                class="text-foreground pointer-events-none size-4 shrink-0"
+              >
+                <Icon class="size-4" />
+              </span>
+            )
+          }
+          <span class="flex items-center gap-1.5">
+            <slot />
+            {
+              hasBadge && (
+                <Badge
+                  data-slot="accordion-trigger-badge"
+                  variant="outline"
+                  shape="pill"
+                  size="sm"
+                >
+                  {badge}
+                </Badge>
+              )
+            }
+          </span>
+        </span>
+        {
+          Astro.slots.has("icon") ? (
+            <span
+              data-slot="accordion-trigger-icon"
+              class="pointer-events-none shrink-0"
+            >
+              <slot name="icon" />
+            </span>
+          ) : (
+            <>
+              <CollapsedIndicator
+                data-slot="accordion-trigger-icon"
+                class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+                aria-hidden="true"
+              />
+              <ExpandedIndicator
+                data-slot="accordion-trigger-icon"
+                class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+                aria-hidden="true"
+              />
+            </>
+          )
+        }
+      </button>
+    </div>
+  )
+}

package/src/components/alert/Alert.astro

@@ -1,167 +1,167 @@
----
-/**
- * @component Alert
- * @title Alert
- * @description A prominent message that draws user attention to important information.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=133-10053
- *
- * @preview
- *
- * <div class="grid w-full max-w-xl items-start gap-4">
- *   <Alert icon={Info}>
- *     <AlertTitle>Success! Your changes have been saved</AlertTitle>
- *   </Alert>
- *
- *   <Alert variant="destructive" size="large" icon={CircleAlertIcon}>
- *     <AlertTitle>Unable to process your payment.</AlertTitle>
- *     <AlertDescription>Please verify your billing information and try again.</AlertDescription>
- *     <Fragment slot="actions">
- *       <Button size="sm">Primary</Button>
- *       <Button size="sm" variant="outline">Outline</Button>
- *     </Fragment>
- *   </Alert>
- *
- *   <Alert variant="success" icon={CircleCheckIcon}>
- *     <AlertTitle>Payment successful.</AlertTitle>
- *   </Alert>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Alert, AlertTitle, AlertDescription } from '@bejamas/ui/components/alert';
- * import { InfoIcon } from '@lucide/astro';
- * ---
- * <Alert variant="default" icon={InfoIcon}>
- *   <AlertTitle>Heads up!</AlertTitle>
- *   <AlertDescription>Something happened successfully.</AlertDescription>
- * </Alert>
- * ```
- */
-import { cva } from "class-variance-authority";
-import { X as XIcon } from "@lucide/astro";
-import type { AstroComponent } from "@lucide/astro";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-type AlertVariant = "default" | "destructive" | "success";
-type AlertSize = "default" | "large";
-
-interface Props extends HTMLAttributes<"div"> {
-  variant?: AlertVariant;
-  size?: AlertSize;
-  icon?: AstroComponent;
-  dismissible?: boolean;
-  class?: string;
-}
-
-const {
-  class: className = "",
-  variant = "default",
-  size = "default",
-  icon,
-  dismissible = true,
-  ...rest
-} = Astro.props as Props;
-
-const Icon = icon;
-const hasIcon = Boolean(Icon);
-const hasActions = Astro.slots.has("actions");
-
-const alertVariants = cva(
-  "group/alert relative flex w-full rounded-lg border border-border",
-  {
-    variants: {
-      variant: {
-        default: "bg-popover",
-        destructive: "bg-card",
-        success: "bg-card",
-      },
-      size: {
-        default: "items-center gap-2 p-2",
-        large: "items-start gap-4 p-4",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const iconVariants = cva(
-  "flex size-6 shrink-0 items-center justify-center rounded-full [&>svg]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted text-foreground",
-        destructive: "bg-destructive text-destructive-foreground",
-        success: "bg-success text-success-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const contentVariants = cva("flex flex-1 text-sm", {
-  variants: {
-    size: {
-      default: "items-center py-0.5 pl-2",
-      large: "flex-col gap-8 pt-0.5",
-    },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-});
----
-
-<div
-  {...rest}
-  data-slot="alert"
-  data-variant={variant}
-  data-size={size}
-  role="alert"
-  class={cn(alertVariants({ variant, size }), className)}
->
-  {
-    hasIcon && (
-      <div data-slot="alert-icon" class={iconVariants({ variant })}>
-        <Icon />
-      </div>
-    )
-  }
-  <div data-slot="alert-content" class={contentVariants({ size })}>
-    {
-      size === "large" ? (
-        <div class="flex flex-col gap-2">
-          <slot />
-        </div>
-      ) : (
-        <slot />
-      )
-    }
-    {
-      size === "large" && hasActions && (
-        <div data-slot="alert-actions" class="flex w-full items-center gap-2">
-          <slot name="actions" />
-        </div>
-      )
-    }
-  </div>
-  {
-    dismissible && (
-      <button
-        type="button"
-        data-slot="alert-dismiss"
-        class="flex shrink-0 items-center justify-center gap-0.5 rounded-lg bg-background p-2 [&>svg]:size-4"
-      >
-        <XIcon />
-        <span class="sr-only">Dismiss</span>
-      </button>
-    )
-  }
-</div>
+---
+/**
+ * @component Alert
+ * @title Alert
+ * @description A prominent message that draws user attention to important information.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=133-10053
+ *
+ * @preview
+ *
+ * <div class="grid w-full max-w-xl items-start gap-4">
+ *   <Alert icon={Info}>
+ *     <AlertTitle>Success! Your changes have been saved</AlertTitle>
+ *   </Alert>
+ *
+ *   <Alert variant="destructive" size="large" icon={CircleAlertIcon}>
+ *     <AlertTitle>Unable to process your payment.</AlertTitle>
+ *     <AlertDescription>Please verify your billing information and try again.</AlertDescription>
+ *     <Fragment slot="actions">
+ *       <Button size="sm">Primary</Button>
+ *       <Button size="sm" variant="outline">Outline</Button>
+ *     </Fragment>
+ *   </Alert>
+ *
+ *   <Alert variant="success" icon={CircleCheckIcon}>
+ *     <AlertTitle>Payment successful.</AlertTitle>
+ *   </Alert>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Alert, AlertTitle, AlertDescription } from '@bejamas/ui/components/alert';
+ * import { InfoIcon } from '@lucide/astro';
+ * ---
+ * <Alert variant="default" icon={InfoIcon}>
+ *   <AlertTitle>Heads up!</AlertTitle>
+ *   <AlertDescription>Something happened successfully.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+import { cva } from "class-variance-authority";
+import { X as XIcon } from "@lucide/astro";
+import type { AstroComponent } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type AlertVariant = "default" | "destructive" | "success";
+type AlertSize = "default" | "large";
+
+interface Props extends HTMLAttributes<"div"> {
+  variant?: AlertVariant;
+  size?: AlertSize;
+  icon?: AstroComponent;
+  dismissible?: boolean;
+  class?: string;
+}
+
+const {
+  class: className = "",
+  variant = "default",
+  size = "default",
+  icon,
+  dismissible = true,
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon;
+const hasIcon = Boolean(Icon);
+const hasActions = Astro.slots.has("actions");
+
+const alertVariants = cva(
+  "group/alert relative flex w-full rounded-lg border border-border",
+  {
+    variants: {
+      variant: {
+        default: "bg-popover",
+        destructive: "bg-card",
+        success: "bg-card",
+      },
+      size: {
+        default: "items-center gap-2 p-2",
+        large: "items-start gap-4 p-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const iconVariants = cva(
+  "flex size-6 shrink-0 items-center justify-center rounded-full [&>svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted text-foreground",
+        destructive: "bg-destructive text-destructive-foreground",
+        success: "bg-success text-success-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const contentVariants = cva("flex flex-1 text-sm", {
+  variants: {
+    size: {
+      default: "items-center py-0.5 pl-2",
+      large: "flex-col gap-8 pt-0.5",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+---
+
+<div
+  {...rest}
+  data-slot="alert"
+  data-variant={variant}
+  data-size={size}
+  role="alert"
+  class={cn(alertVariants({ variant, size }), className)}
+>
+  {
+    hasIcon && (
+      <div data-slot="alert-icon" class={iconVariants({ variant })}>
+        <Icon />
+      </div>
+    )
+  }
+  <div data-slot="alert-content" class={contentVariants({ size })}>
+    {
+      size === "large" ? (
+        <div class="flex flex-col gap-2">
+          <slot />
+        </div>
+      ) : (
+        <slot />
+      )
+    }
+    {
+      size === "large" && hasActions && (
+        <div data-slot="alert-actions" class="flex w-full items-center gap-2">
+          <slot name="actions" />
+        </div>
+      )
+    }
+  </div>
+  {
+    dismissible && (
+      <button
+        type="button"
+        data-slot="alert-dismiss"
+        class="flex shrink-0 items-center justify-center gap-0.5 rounded-lg bg-background p-2 [&>svg]:size-4"
+      >
+        <XIcon />
+        <span class="sr-only">Dismiss</span>
+      </button>
+    )
+  }
+</div>