@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/combobox/ComboboxContent.astro

@@ -1,37 +1,37 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  side?: "top" | "bottom";
-  align?: "start" | "center" | "end";
-  sideOffset?: number;
-  alignOffset?: number;
-}
-
-const {
-  class: className = "",
-  side = "bottom",
-  align = "center",
-  sideOffset = 6,
-  alignOffset = 0,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="combobox-content"
-  data-side={side}
-  data-align={align}
-  data-side-offset={sideOffset}
-  data-align-offset={alignOffset}
-  hidden
-  class={cn(
-    "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative w-[var(--anchor-width)] max-h-[var(--available-height)] max-w-[var(--available-width)] min-w-[max(8rem,var(--anchor-width))] origin-(--transform-origin)",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  side?: "top" | "bottom";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  alignOffset?: number;
+}
+
+const {
+  class: className = "",
+  side = "bottom",
+  align = "center",
+  sideOffset = 6,
+  alignOffset = 0,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="combobox-content"
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  hidden
+  class={cn(
+    "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative w-[var(--anchor-width)] max-h-[var(--available-height)] max-w-[var(--available-width)] min-w-[max(8rem,var(--anchor-width))] origin-(--transform-origin)",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/combobox/ComboboxEmpty.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="combobox-empty"
-  class={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="combobox-empty"
+  class={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
+>
+  <slot />
+</div>

package/src/components/combobox/ComboboxGroup.astro

@@ -1,19 +1,19 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="group"
-  data-slot="combobox-group"
-  class={cn("", "scroll-my-1", className)}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="group"
+  data-slot="combobox-group"
+  class={cn("", "scroll-my-1", className)}
+>
+  <slot />
+</div>

package/src/components/combobox/ComboboxInput.astro

@@ -1,74 +1,74 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import {
-  InputGroup,
-  InputGroupInput,
-  InputGroupAddon,
-  InputGroupButton,
-} from "../input-group";
-
-interface Props extends Omit<HTMLAttributes<"input">, "size"> {
-  class?: string;
-  size?: "sm" | "default" | "lg";
-  placeholder?: string;
-  disabled?: boolean;
-  showTrigger?: boolean;
-  showClear?: boolean;
-}
-
-const {
-  class: className = "",
-  size = "default",
-  placeholder,
-  disabled = false,
-  showTrigger = true,
-  showClear = false,
-  ...rest
-} = Astro.props as Props;
----
-
-<InputGroup size={size} class={cn("w-auto", className)}>
-  <InputGroupInput
-    data-input-group-control
-    data-slot="combobox-input"
-    placeholder={placeholder}
-    disabled={disabled}
-    autocomplete="off"
-    {...rest}
-   class="" />
-  {
-    (showTrigger || showClear) && (
-      <InputGroupAddon align="inline-end">
-        {showClear && (
-          <InputGroupButton
-            data-slot="combobox-clear"
-            type="button"
-            size="icon-xs"
-            class="hidden [[data-value]_&]:inline-flex"
-            aria-label="Clear selection"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-3.5 group-data-[size=sm]/input-group:size-3"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
-          </InputGroupButton>
-        )}
-        {showTrigger && (
-          <InputGroupButton
-            data-slot="combobox-trigger"
-            type="button"
-            size="icon-xs"
-            tabindex={-1}
-            disabled={disabled}
-            class={cn("[&_svg:not([class*='size-'])]:size-4 rounded-lg", 
-              "text-muted-foreground",
-              showClear && "[[data-value]_&]:hidden",
-            )}
-            aria-label="Toggle menu"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-slot="combobox-icon"
-              class="size-4 group-data-[size=sm]/input-group:size-3.5"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
-          </InputGroupButton>
-        )}
-      </InputGroupAddon>
-    )
-  }
-</InputGroup>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  InputGroup,
+  InputGroupInput,
+  InputGroupAddon,
+  InputGroupButton,
+} from "../input-group";
+
+interface Props extends Omit<HTMLAttributes<"input">, "size"> {
+  class?: string;
+  size?: "sm" | "default" | "lg";
+  placeholder?: string;
+  disabled?: boolean;
+  showTrigger?: boolean;
+  showClear?: boolean;
+}
+
+const {
+  class: className = "",
+  size = "default",
+  placeholder,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<InputGroup size={size} class={cn("w-auto", className)}>
+  <InputGroupInput
+    data-input-group-control
+    data-slot="combobox-input"
+    placeholder={placeholder}
+    disabled={disabled}
+    autocomplete="off"
+    {...rest}
+   class="" />
+  {
+    (showTrigger || showClear) && (
+      <InputGroupAddon align="inline-end">
+        {showClear && (
+          <InputGroupButton
+            data-slot="combobox-clear"
+            type="button"
+            size="icon-xs"
+            class="hidden [[data-value]_&]:inline-flex"
+            aria-label="Clear selection"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-3.5 group-data-[size=sm]/input-group:size-3"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
+          </InputGroupButton>
+        )}
+        {showTrigger && (
+          <InputGroupButton
+            data-slot="combobox-trigger"
+            type="button"
+            size="icon-xs"
+            tabindex={-1}
+            disabled={disabled}
+            class={cn("[&_svg:not([class*='size-'])]:size-4 rounded-lg", 
+              "text-muted-foreground",
+              showClear && "[[data-value]_&]:hidden",
+            )}
+            aria-label="Toggle menu"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-slot="combobox-icon"
+              class="size-4 group-data-[size=sm]/input-group:size-3.5"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+          </InputGroupButton>
+        )}
+      </InputGroupAddon>
+    )
+  }
+</InputGroup>

package/src/components/combobox/ComboboxItem.astro

@@ -1,39 +1,39 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  value: string;
-  label?: string;
-  disabled?: boolean;
-  class?: string;
-}
-
-const {
-  value,
-  label,
-  disabled = false,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="combobox-item"
-  data-value={value}
-  data-label={label}
-  data-disabled={disabled ? "" : undefined}
-  class={cn(
-    "data-highlighted:bg-background-hover data-highlighted:text-foreground not-data-[variant=destructive]:data-highlighted:**:text-foreground gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-    className,
-  )}
->
-  <span
-    data-slot="combobox-item-indicator"
-    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
-  >
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pointer-events-none"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/></svg>
-  </span>
-  <span data-slot="combobox-item-text" class="flex flex-1 gap-2"><slot /></span>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  value: string;
+  label?: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  value,
+  label,
+  disabled = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="combobox-item"
+  data-value={value}
+  data-label={label}
+  data-disabled={disabled ? "" : undefined}
+  class={cn(
+    "data-highlighted:bg-background-hover data-highlighted:text-foreground not-data-[variant=destructive]:data-highlighted:**:text-foreground gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+>
+  <span
+    data-slot="combobox-item-indicator"
+    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pointer-events-none"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/></svg>
+  </span>
+  <span data-slot="combobox-item-text" class="flex flex-1 gap-2"><slot /></span>
+</div>

package/src/components/combobox/ComboboxLabel.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="combobox-label"
-  class={cn("text-muted-foreground px-2 py-1.5 text-xs font-medium", className)}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="combobox-label"
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs font-medium", className)}
+>
+  <slot />
+</div>

package/src/components/combobox/ComboboxList.astro

@@ -1,21 +1,21 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="combobox-list"
-  class={cn(
-    "no-scrollbar scroll-py-1 overflow-y-auto p-1 data-empty:p-0 max-h-[min(18rem,calc(var(--available-height)-var(--anchor-height)))] overscroll-contain",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="combobox-list"
+  class={cn(
+    "no-scrollbar scroll-py-1 overflow-y-auto p-1 data-empty:p-0 max-h-[min(18rem,calc(var(--available-height)-var(--anchor-height)))] overscroll-contain",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/combobox/ComboboxSeparator.astro

@@ -1,17 +1,17 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="separator"
-  data-slot="combobox-separator"
-  class={cn("bg-border -mx-1 my-1 h-px", className)}
-/>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="separator"
+  data-slot="combobox-separator"
+  class={cn("bg-border -mx-1 my-1 h-px", className)}
+/>

package/src/components/combobox/ComboboxTrigger.astro

@@ -1,30 +1,30 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-  size?: "sm" | "default" | "lg";
-}
-
-const {
-  class: className = "",
-  size = "default",
-  ...rest
-} = Astro.props as Props;
----
-
-<button
-  {...rest}
-  type="button"
-  data-slot="combobox-trigger"
-  data-size={size}
-  class={cn(
-    "[&_svg:not([class*='size-'])]:size-4 rounded-lg flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-    className,
-  )}
->
-  <slot />
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground size-4 pointer-events-none"
-    data-slot="combobox-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
-</button>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  size?: "sm" | "default" | "lg";
+}
+
+const {
+  class: className = "",
+  size = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  type="button"
+  data-slot="combobox-trigger"
+  data-size={size}
+  class={cn(
+    "[&_svg:not([class*='size-'])]:size-4 rounded-lg flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+>
+  <slot />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground size-4 pointer-events-none"
+    data-slot="combobox-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+</button>

package/src/components/combobox/ComboboxValue.astro

@@ -1,22 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"span"> {
-  class?: string;
-  placeholder?: string;
-}
-
-const {
-  class: className = "",
-  placeholder = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<span
-  {...rest}
-  data-slot="combobox-value"
-  data-placeholder={placeholder}
-  class={cn("", "block truncate pointer-events-none", className)}
->{placeholder}</span>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+  placeholder?: string;
+}
+
+const {
+  class: className = "",
+  placeholder = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  data-slot="combobox-value"
+  data-placeholder={placeholder}
+  class={cn("", "block truncate pointer-events-none", className)}
+>{placeholder}</span>

package/src/components/combobox/index.ts

@@ -1,11 +1,11 @@
-export { default as Combobox } from "./Combobox.astro";
-export { default as ComboboxContent } from "./ComboboxContent.astro";
-export { default as ComboboxEmpty } from "./ComboboxEmpty.astro";
-export { default as ComboboxGroup } from "./ComboboxGroup.astro";
-export { default as ComboboxInput } from "./ComboboxInput.astro";
-export { default as ComboboxItem } from "./ComboboxItem.astro";
-export { default as ComboboxLabel } from "./ComboboxLabel.astro";
-export { default as ComboboxList } from "./ComboboxList.astro";
-export { default as ComboboxSeparator } from "./ComboboxSeparator.astro";
-export { default as ComboboxTrigger } from "./ComboboxTrigger.astro";
-export { default as ComboboxValue } from "./ComboboxValue.astro";
+export { default as Combobox } from "./Combobox.astro";
+export { default as ComboboxContent } from "./ComboboxContent.astro";
+export { default as ComboboxEmpty } from "./ComboboxEmpty.astro";
+export { default as ComboboxGroup } from "./ComboboxGroup.astro";
+export { default as ComboboxInput } from "./ComboboxInput.astro";
+export { default as ComboboxItem } from "./ComboboxItem.astro";
+export { default as ComboboxLabel } from "./ComboboxLabel.astro";
+export { default as ComboboxList } from "./ComboboxList.astro";
+export { default as ComboboxSeparator } from "./ComboboxSeparator.astro";
+export { default as ComboboxTrigger } from "./ComboboxTrigger.astro";
+export { default as ComboboxValue } from "./ComboboxValue.astro";