@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/field/FieldContent.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  data-slot="field-content"
-  class={cn(
-    "gap-1",
-    "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-content"
+  class={cn(
+    "gap-1",
+    "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/field/FieldDescription.astro

@@ -1,22 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"p"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<p
-  data-slot="field-description"
-  class={cn(
-    "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5",
-    "leading-normal font-normal group-has-data-horizontal/field:text-balance",
-    "last:mt-0 nth-last-2:-mt-1",
-    "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</p>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<p
+  data-slot="field-description"
+  class={cn(
+    "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5",
+    "leading-normal font-normal group-has-data-horizontal/field:text-balance",
+    "last:mt-0 nth-last-2:-mt-1",
+    "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</p>

package/src/components/field/FieldError.astro

@@ -1,51 +1,51 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-type ErrorItem = { message?: string } | undefined;
-
-interface Props extends HTMLAttributes<"div"> {
-  errors?: ErrorItem[];
-  forceMount?: boolean;
-}
-
-const {
-  class: className = "",
-  errors = [],
-  forceMount = false,
-  ...rest
-} = Astro.props as Props;
-
-const hasContent = Astro.slots.has("default");
-
-const uniqueMessages = Array.from(
-  new Set(
-    errors
-      .map((error) => error?.message)
-      .filter((message): message is string => Boolean(message)),
-  ),
-);
-
-const shouldRender = forceMount || hasContent || uniqueMessages.length > 0;
----
-
-{
-  shouldRender && (
-    <div
-      role="alert"
-      data-slot="field-error"
-      class={cn("text-destructive text-sm font-normal", className)}
-      {...rest}
-    >
-      {hasContent && <slot />}
-      {!hasContent && uniqueMessages.length === 1 && uniqueMessages[0]}
-      {!hasContent && uniqueMessages.length > 1 && (
-        <ul class="ml-4 flex list-disc flex-col gap-1">
-          {uniqueMessages.map((message) => (
-            <li>{message}</li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type ErrorItem = { message?: string } | undefined;
+
+interface Props extends HTMLAttributes<"div"> {
+  errors?: ErrorItem[];
+  forceMount?: boolean;
+}
+
+const {
+  class: className = "",
+  errors = [],
+  forceMount = false,
+  ...rest
+} = Astro.props as Props;
+
+const hasContent = Astro.slots.has("default");
+
+const uniqueMessages = Array.from(
+  new Set(
+    errors
+      .map((error) => error?.message)
+      .filter((message): message is string => Boolean(message)),
+  ),
+);
+
+const shouldRender = forceMount || hasContent || uniqueMessages.length > 0;
+---
+
+{
+  shouldRender && (
+    <div
+      role="alert"
+      data-slot="field-error"
+      class={cn("text-destructive text-sm font-normal", className)}
+      {...rest}
+    >
+      {hasContent && <slot />}
+      {!hasContent && uniqueMessages.length === 1 && uniqueMessages[0]}
+      {!hasContent && uniqueMessages.length > 1 && (
+        <ul class="ml-4 flex list-disc flex-col gap-1">
+          {uniqueMessages.map((message) => (
+            <li>{message}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/field/FieldGroup.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  data-slot="field-group"
-  class={cn(
-    "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
-    "group/field-group @container/field-group flex w-full flex-col",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-group"
+  class={cn(
+    "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+    "group/field-group @container/field-group flex w-full flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/field/FieldLabel.astro

@@ -1,22 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Label } from "../label";
-
-interface Props extends HTMLAttributes<"label"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<Label
-  data-slot="field-label"
-  class={cn(
-    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
-    "group/field-label peer/field-label flex w-fit leading-snug",
-    "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</Label>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Label } from "../label";
+
+interface Props extends HTMLAttributes<"label"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<Label
+  data-slot="field-label"
+  class={cn(
+    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+    "group/field-label peer/field-label flex w-fit leading-snug",
+    "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</Label>

package/src/components/field/FieldLegend.astro

@@ -1,23 +1,23 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"legend"> {
-  variant?: "legend" | "label";
-}
-
-const {
-  class: className = "",
-  variant = "legend",
-  ...rest
-} = Astro.props as Props;
----
-
-<legend
-  data-slot="field-legend"
-  data-variant={variant}
-  class={cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
-  {...rest}
->
-  <slot />
-</legend>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"legend"> {
+  variant?: "legend" | "label";
+}
+
+const {
+  class: className = "",
+  variant = "legend",
+  ...rest
+} = Astro.props as Props;
+---
+
+<legend
+  data-slot="field-legend"
+  data-variant={variant}
+  class={cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+  {...rest}
+>
+  <slot />
+</legend>

package/src/components/field/FieldSeparator.astro

@@ -1,30 +1,30 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Separator } from "../separator";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
-
-const hasContent = Astro.slots.has("default");
----
-
-<div
-  data-slot="field-separator"
-  data-content={hasContent ? "true" : undefined}
-  class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
-  {...rest}
->
-  <Separator class="absolute inset-0 top-1/2" />
-  {
-    hasContent && (
-      <span
-        class="text-muted-foreground px-2 relative mx-auto block w-fit bg-background"
-        data-slot="field-separator-content"
-      >
-        <slot />
-      </span>
-    )
-  }
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Separator } from "../separator";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+
+const hasContent = Astro.slots.has("default");
+---
+
+<div
+  data-slot="field-separator"
+  data-content={hasContent ? "true" : undefined}
+  class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+  {...rest}
+>
+  <Separator class="absolute inset-0 top-1/2" />
+  {
+    hasContent && (
+      <span
+        class="text-muted-foreground px-2 relative mx-auto block w-fit bg-background"
+        data-slot="field-separator-content"
+      >
+        <slot />
+      </span>
+    )
+  }
+</div>

package/src/components/field/FieldSet.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"fieldset"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<fieldset
-  data-slot="field-set"
-  class={cn(
-    "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-    "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</fieldset>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"fieldset"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<fieldset
+  data-slot="field-set"
+  class={cn(
+    "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+    "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</fieldset>

package/src/components/field/FieldTitle.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  data-slot="field-title"
-  class={cn(
-    "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
-    "flex w-fit items-center leading-snug",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-title"
+  class={cn(
+    "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+    "flex w-fit items-center leading-snug",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>