@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/button/Button.astro

@@ -1,233 +1,233 @@
----
-/**
- * @component Button
- * @title Button
- * @description A clickable element for triggering actions or submitting forms.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=74-1461
- *
- * @preview
- *
- * <div class="flex flex-wrap items-center gap-2 md:flex-row">
- *   <Button>Button</Button>
- *   <Button variant="outline" size="icon" aria-label="Submit">
- *     <ArrowUpIcon />
- *   </Button>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Button } from '@bejamas/ui/components/button';
- * ---
- *
- * <Button>Click me</Button>
- * ```
- *
- * ## Link
- *
- * You can use the `as` prop to render the component as an anchor.
- *
- * ```astro nocollapse
- * ---
- * import { Button } from '@bejamas/ui/components/button';
- * ---
- *
- * <Button as="a" href="https://bejamas.com">Click me</Button>
- * ```
- *
- * @examples
- *
- * ### Variants
- *
- * <div class="flex flex-col items-start gap-8 sm:flex-row">
- *   <Button variant="default">Default</Button>
- *   <Button variant="secondary">Secondary</Button>
- *   <Button variant="outline">Outline</Button>
- *   <Button variant="ghost">Ghost</Button>
- *   <Button variant="destructive">Destructive</Button>
- * </div>
- *
- * ### Sizes
- *
- * <div class="flex flex-col items-start gap-8 sm:flex-row">
- *   <div class="flex items-start gap-2">
- *     <Button size="sm" variant="outline">
- *       Small
- *     </Button>
- *     <Button size="icon-sm" aria-label="Submit" variant="outline">
- *       <ArrowUpRightIcon />
- *     </Button>
- *   </div>
- *   <div class="flex items-start gap-2">
- *     <Button variant="outline">Default</Button>
- *     <Button size="icon" aria-label="Submit" variant="outline">
- *       <ArrowUpRightIcon />
- *     </Button>
- *   </div>
- *   <div class="flex items-start gap-2">
- *     <Button variant="outline" size="lg">
- *       Large
- *     </Button>
- *     <Button size="icon-lg" aria-label="Submit" variant="outline">
- *       <ArrowUpRightIcon />
- *     </Button>
- *   </div>
- * </div>
- *
- * ### With icons
- *
- * <div class="flex flex-wrap items-center gap-2">
- *   <Button leadIcon>
- *     <ArrowUpIcon slot="lead-icon" />
- *     Click me
- *   </Button>
- *   <Button variant="outline" tailIcon>
- *     Click me
- *     <ArrowUpRightIcon slot="tail-icon" />
- *   </Button>
- * </div>
- *
- * ### With badge
- *
- * <Button variant="default" badge>
- *   Click me
- *   <Badge slot="badge" variant="secondary" shape="sharp" size="sm">Value</Badge>
- * </Button>
- *
- * ### Destructive
- *
- * <Button variant="destructive">Click me</Button>
- *
- * ### Outline
- *
- * <Button variant="outline">Click me</Button>
- *
- * ### Secondary
- *
- * <Button variant="secondary">Click me</Button>
- *
- * ### Ghost
- *
- * <Button variant="ghost">Click me</Button>
- *
- * ### Link
- *
- * <Button variant="link">Click me</Button>
- *
- * ### Default
- *
- * <Button>Click me</Button>
- *
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-        outline: "border border-border bg-background text-foreground hover:bg-background-hover",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-background-button-hover",
-        ghost: "text-foreground hover:bg-background-hover",
-        link: "text-primary hover:bg-background-hover hover:underline",
-      },
-      size: {
-        default: "h-9 gap-1 px-2.5 text-xs [&_svg]:size-4",
-        sm: "h-8 gap-1 px-2 text-xs [&_svg]:size-3.5",
-        lg: "h-10 gap-1 px-2.5 text-sm [&_svg]:size-5",
-        icon: "size-9 [&_svg]:size-4",
-        "icon-sm": "size-8 [&_svg]:size-3.5",
-        "icon-lg": "size-10 [&_svg]:size-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-
-type ButtonAsButton = {
-  as?: "button";
-} & HTMLAttributes<"button">;
-
-type ButtonAsAnchor = {
-  as: "a";
-} & HTMLAttributes<"a">;
-
-type ButtonOwnProps = ButtonVariantProps & {
-  leadIcon?: boolean;
-  tailIcon?: boolean;
-  badge?: boolean;
-};
-
-export type Props = (ButtonAsButton | ButtonAsAnchor) & ButtonOwnProps;
-
-const hasLeadIconSlot = Astro.slots.has("lead-icon");
-const hasTailIconSlot = Astro.slots.has("tail-icon");
-const hasBadgeSlot = Astro.slots.has("badge");
-
-const {
-  as: Tag = "button",
-  variant = "default",
-  size = "default",
-  leadIcon = hasLeadIconSlot,
-  tailIcon = hasTailIconSlot,
-  badge = hasBadgeSlot,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  /*
-  TS can't reconcile our discriminated union props with a dynamic intrinsic Tag.
-  The public Props type *is* strict (href only allowed when as="a"),
-  but JSX wants an intersection of button+anchor attributes here.
-  We deliberately suppress this internal error and rely on Props for caller safety.
-*/
-}
-<!-- @ts-expect-error – union Props + dynamic Tag confuse JSX typing (see comment above) -->
-<Tag
-  data-slot="button"
-  data-variant={variant}
-  data-size={size}
-  class={cn(
-    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 in-data-[slot=button-group]:hover:bg-background-hover in-data-[slot=button-group]:hover:border-badge-accent aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
-    buttonVariants({ variant, size }),
-    className,
-  )}
-  {...rest}
->
-  {
-    leadIcon && (
-      <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
-        <slot name="lead-icon" />
-      </span>
-    )
-  }
-  <slot />
-  {
-    badge && (
-      <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
-        <slot name="badge" />
-      </span>
-    )
-  }
-  {
-    tailIcon && (
-      <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
-        <slot name="tail-icon" />
-      </span>
-    )
-  }
-</Tag>
+---
+/**
+ * @component Button
+ * @title Button
+ * @description A clickable element for triggering actions or submitting forms.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=74-1461
+ *
+ * @preview
+ *
+ * <div class="flex flex-wrap items-center gap-2 md:flex-row">
+ *   <Button>Button</Button>
+ *   <Button variant="outline" size="icon" aria-label="Submit">
+ *     <ArrowUpIcon />
+ *   </Button>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <Button>Click me</Button>
+ * ```
+ *
+ * ## Link
+ *
+ * You can use the `as` prop to render the component as an anchor.
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <Button as="a" href="https://bejamas.com">Click me</Button>
+ * ```
+ *
+ * @examples
+ *
+ * ### Variants
+ *
+ * <div class="flex flex-col items-start gap-8 sm:flex-row">
+ *   <Button variant="default">Default</Button>
+ *   <Button variant="secondary">Secondary</Button>
+ *   <Button variant="outline">Outline</Button>
+ *   <Button variant="ghost">Ghost</Button>
+ *   <Button variant="destructive">Destructive</Button>
+ * </div>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col items-start gap-8 sm:flex-row">
+ *   <div class="flex items-start gap-2">
+ *     <Button size="sm" variant="outline">
+ *       Small
+ *     </Button>
+ *     <Button size="icon-sm" aria-label="Submit" variant="outline">
+ *       <ArrowUpRightIcon />
+ *     </Button>
+ *   </div>
+ *   <div class="flex items-start gap-2">
+ *     <Button variant="outline">Default</Button>
+ *     <Button size="icon" aria-label="Submit" variant="outline">
+ *       <ArrowUpRightIcon />
+ *     </Button>
+ *   </div>
+ *   <div class="flex items-start gap-2">
+ *     <Button variant="outline" size="lg">
+ *       Large
+ *     </Button>
+ *     <Button size="icon-lg" aria-label="Submit" variant="outline">
+ *       <ArrowUpRightIcon />
+ *     </Button>
+ *   </div>
+ * </div>
+ *
+ * ### With icons
+ *
+ * <div class="flex flex-wrap items-center gap-2">
+ *   <Button leadIcon>
+ *     <ArrowUpIcon slot="lead-icon" />
+ *     Click me
+ *   </Button>
+ *   <Button variant="outline" tailIcon>
+ *     Click me
+ *     <ArrowUpRightIcon slot="tail-icon" />
+ *   </Button>
+ * </div>
+ *
+ * ### With badge
+ *
+ * <Button variant="default" badge>
+ *   Click me
+ *   <Badge slot="badge" variant="secondary" shape="sharp" size="sm">Value</Badge>
+ * </Button>
+ *
+ * ### Destructive
+ *
+ * <Button variant="destructive">Click me</Button>
+ *
+ * ### Outline
+ *
+ * <Button variant="outline">Click me</Button>
+ *
+ * ### Secondary
+ *
+ * <Button variant="secondary">Click me</Button>
+ *
+ * ### Ghost
+ *
+ * <Button variant="ghost">Click me</Button>
+ *
+ * ### Link
+ *
+ * <Button variant="link">Click me</Button>
+ *
+ * ### Default
+ *
+ * <Button>Click me</Button>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+        outline: "border border-border bg-background text-foreground hover:bg-background-hover",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-background-button-hover",
+        ghost: "text-foreground hover:bg-background-hover",
+        link: "text-primary hover:bg-background-hover hover:underline",
+      },
+      size: {
+        default: "h-9 gap-1 px-2.5 text-xs [&_svg]:size-4",
+        sm: "h-8 gap-1 px-2 text-xs [&_svg]:size-3.5",
+        lg: "h-10 gap-1 px-2.5 text-sm [&_svg]:size-5",
+        icon: "size-9 [&_svg]:size-4",
+        "icon-sm": "size-8 [&_svg]:size-3.5",
+        "icon-lg": "size-10 [&_svg]:size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+type ButtonAsButton = {
+  as?: "button";
+} & HTMLAttributes<"button">;
+
+type ButtonAsAnchor = {
+  as: "a";
+} & HTMLAttributes<"a">;
+
+type ButtonOwnProps = ButtonVariantProps & {
+  leadIcon?: boolean;
+  tailIcon?: boolean;
+  badge?: boolean;
+};
+
+export type Props = (ButtonAsButton | ButtonAsAnchor) & ButtonOwnProps;
+
+const hasLeadIconSlot = Astro.slots.has("lead-icon");
+const hasTailIconSlot = Astro.slots.has("tail-icon");
+const hasBadgeSlot = Astro.slots.has("badge");
+
+const {
+  as: Tag = "button",
+  variant = "default",
+  size = "default",
+  leadIcon = hasLeadIconSlot,
+  tailIcon = hasTailIconSlot,
+  badge = hasBadgeSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  /*
+  TS can't reconcile our discriminated union props with a dynamic intrinsic Tag.
+  The public Props type *is* strict (href only allowed when as="a"),
+  but JSX wants an intersection of button+anchor attributes here.
+  We deliberately suppress this internal error and rely on Props for caller safety.
+*/
+}
+<!-- @ts-expect-error – union Props + dynamic Tag confuse JSX typing (see comment above) -->
+<Tag
+  data-slot="button"
+  data-variant={variant}
+  data-size={size}
+  class={cn(
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 in-data-[slot=button-group]:hover:bg-background-hover in-data-[slot=button-group]:hover:border-badge-accent aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
+    buttonVariants({ variant, size }),
+    className,
+  )}
+  {...rest}
+>
+  {
+    leadIcon && (
+      <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
+        <slot name="lead-icon" />
+      </span>
+    )
+  }
+  <slot />
+  {
+    badge && (
+      <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
+        <slot name="badge" />
+      </span>
+    )
+  }
+  {
+    tailIcon && (
+      <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
+        <slot name="tail-icon" />
+      </span>
+    )
+  }
+</Tag>