@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/dialog/DialogClose.astro

@@ -1,23 +1,23 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-import Button from "../button/Button.astro";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<Button
-  {...rest}
-  data-slot="dialog-close"
-  data-dialog-close
-  variant="ghost"
-  size="icon-sm"
-  class={cn("absolute top-2 right-2", className)}
->
-  <slot />
-  {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
-</Button>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import Button from "../button/Button.astro";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<Button
+  {...rest}
+  data-slot="dialog-close"
+  data-dialog-close
+  variant="ghost"
+  size="icon-sm"
+  class={cn("absolute top-2 right-2", className)}
+>
+  <slot />
+  {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
+</Button>

package/src/components/dialog/DialogContent.astro

@@ -1,42 +1,42 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-import DialogClose from "./DialogClose.astro";
-import DialogOverlay from "./DialogOverlay.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  showCloseButton?: boolean;
-}
-
-const {
-  showCloseButton = true,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div data-slot="dialog-portal" class="z-50 isolate absolute">
-  <DialogOverlay />
-  <div
-    data-slot="dialog-content"
-    hidden
-    class={cn(
-      "bg-card border-border 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 max-w-[calc(100%-2rem)] rounded-lg border shadow-lg duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-      className,
-    )}
-    {...rest}
-  >
-    <div class="grid gap-6 p-6 text-sm">
-      <slot />
-    </div>
-    {
-      showCloseButton && (
-        <DialogClose>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      )
-    }
-  </div>
-</div>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+import DialogClose from "./DialogClose.astro";
+import DialogOverlay from "./DialogOverlay.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  showCloseButton?: boolean;
+}
+
+const {
+  showCloseButton = true,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="dialog-portal" class="z-50 isolate absolute">
+  <DialogOverlay />
+  <div
+    data-slot="dialog-content"
+    hidden
+    class={cn(
+      "bg-card border-border 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 max-w-[calc(100%-2rem)] rounded-lg border shadow-lg duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+      className,
+    )}
+    {...rest}
+  >
+    <div class="grid gap-6 p-6 text-sm">
+      <slot />
+    </div>
+    {
+      showCloseButton && (
+        <DialogClose>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      )
+    }
+  </div>
+</div>

package/src/components/dialog/DialogDescription.astro

@@ -1,18 +1,18 @@
----
-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="dialog-description"
-  class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", 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="dialog-description"
+  class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+>
+  <slot />
+</div>

package/src/components/dialog/DialogFooter.astro

@@ -1,18 +1,18 @@
----
-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="dialog-footer"
-  class={cn("flex justify-end gap-2", 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="dialog-footer"
+  class={cn("flex justify-end gap-2", className)}
+>
+  <slot />
+</div>

package/src/components/dialog/DialogHeader.astro

@@ -1,18 +1,18 @@
----
-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
-  data-slot="dialog-header"
-  class={cn("gap-2 flex flex-col", className)}
-  {...rest}
->
-  <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
+  data-slot="dialog-header"
+  class={cn("gap-2 flex flex-col", className)}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/dialog/DialogOverlay.astro

@@ -1,19 +1,19 @@
----
-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
-  hidden
-  data-slot="dialog-overlay"
-  class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
-  {...rest}
->
-  <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
+  hidden
+  data-slot="dialog-overlay"
+  class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/dialog/DialogTitle.astro

@@ -1,18 +1,18 @@
----
-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="dialog-title"
-  class={cn("text-xl leading-6 font-semibold cn-font-heading", 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="dialog-title"
+  class={cn("text-xl leading-6 font-semibold cn-font-heading", className)}
+>
+  <slot />
+</div>

package/src/components/dialog/DialogTrigger.astro

@@ -1,37 +1,37 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
-  asChild?: boolean;
-}
-
-const {
-  class: className = "",
-  asChild = false,
-  type = "button",
-  ...rest
-} = Astro.props as Props;
-
-const defaultClasses =
-  "cursor-pointer select-none outline-none group-focus-within:pointer-events-none inline-flex items-center gap-1";
----
-
-{
-  asChild ? (
-    <div data-slot="dialog-trigger" data-as-child class={cn("", defaultClasses, className)}>
-      <slot />
-    </div>
-  ) : (
-    <button
-      {...rest}
-      type={type}
-      data-slot="dialog-trigger"
-      class={cn("", defaultClasses, className)}
-    >
-      <slot />
-    </button>
-  )
-}
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+
+const defaultClasses =
+  "cursor-pointer select-none outline-none group-focus-within:pointer-events-none inline-flex items-center gap-1";
+---
+
+{
+  asChild ? (
+    <div data-slot="dialog-trigger" data-as-child class={cn("", defaultClasses, className)}>
+      <slot />
+    </div>
+  ) : (
+    <button
+      {...rest}
+      type={type}
+      data-slot="dialog-trigger"
+      class={cn("", defaultClasses, className)}
+    >
+      <slot />
+    </button>
+  )
+}