@cl-light-ds/ui 0.2.0 → 0.4.0

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>

package/src/components/alert/AlertDescription.astro

@@ -1,24 +1,24 @@
----
-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="alert-description"
-  class={cn(
-    "text-sm text-muted-foreground [&_p:not(:last-child)]:mb-1 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover: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="alert-description"
+  class={cn(
+    "text-sm text-muted-foreground [&_p:not(:last-child)]:mb-1 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/alert/AlertTitle.astro

@@ -1,24 +1,24 @@
----
-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="alert-title"
-  class={cn(
-    "text-sm font-semibold text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground/80",
-    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="alert-title"
+  class={cn(
+    "text-sm font-semibold text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground/80",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/alert/CHANGELOG.md

@@ -1,5 +1,5 @@
-# Changelog
-
-All notable changes to the `Alert` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Alert` component will be documented in this file.
+
+## Unreleased

package/src/components/alert/index.ts

@@ -1,4 +1,4 @@
-export { default as Alert } from "./Alert.astro";
-export { default as AlertTitle } from "./AlertTitle.astro";
-export { default as AlertDescription } from "./AlertDescription.astro";
-
+export { default as Alert } from "./Alert.astro";
+export { default as AlertTitle } from "./AlertTitle.astro";
+export { default as AlertDescription } from "./AlertDescription.astro";
+