@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/select/SelectContent.astro

@@ -1,91 +1,91 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { cva } from "class-variance-authority";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  position?: "item-aligned" | "popper";
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  side?: "top" | "bottom";
-  sideOffset?: number;
-}
-
-const {
-  class: className = "",
-  position = "item-aligned",
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  ...rest
-} = Astro.props as Props;
-
-const contentVariants = cva(
-  [
-    "group/select-content relative isolate z-50",
-    "origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
-  ],
-  {
-    variants: {
-      position: {
-        "item-aligned": "",
-        popper: "",
-      },
-      side: {
-        top: "",
-        bottom: "",
-      },
-    },
-    defaultVariants: {
-      position: "item-aligned",
-      side: "bottom",
-    },
-  },
-);
----
-
-<div
-  {...rest}
-  hidden
-  data-slot="select-content"
-  data-position={position}
-  data-align-trigger={position === "item-aligned"}
-  data-align={align}
-  data-align-offset={alignOffset}
-  data-side={side}
-  data-side-offset={sideOffset}
-  class={cn(
-    "bg-popover text-popover-foreground ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 rounded-lg",
-    contentVariants({ position, side }),
-    "max-h-(--available-height) w-(--anchor-width)",
-    className,
-  )}
->
-  <div
-    data-slot="select-scroll-up-button"
-    class="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full"
-    hidden
-  >
-    <slot name="scroll-up"
-      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m18 15l-6-6l-6 6"/></svg></slot
-    >
-  </div>
-  <div
-    data-slot="select-viewport"
-    data-position={position}
-    class="max-h-[var(--select-content-available-height,300px)] flex flex-col gap-1 overflow-x-hidden overflow-y-auto p-1"
-  >
-    <slot />
-  </div>
-  <div
-    data-slot="select-scroll-down-button"
-    class="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full"
-    hidden
-  >
-    <slot name="scroll-down"
-      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg></slot
-    >
-  </div>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva } from "class-variance-authority";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  position?: "item-aligned" | "popper";
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  position = "item-aligned",
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...rest
+} = Astro.props as Props;
+
+const contentVariants = cva(
+  [
+    "group/select-content relative isolate z-50",
+    "origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
+  ],
+  {
+    variants: {
+      position: {
+        "item-aligned": "",
+        popper: "",
+      },
+      side: {
+        top: "",
+        bottom: "",
+      },
+    },
+    defaultVariants: {
+      position: "item-aligned",
+      side: "bottom",
+    },
+  },
+);
+---
+
+<div
+  {...rest}
+  hidden
+  data-slot="select-content"
+  data-position={position}
+  data-align-trigger={position === "item-aligned"}
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  class={cn(
+    "bg-popover text-popover-foreground ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 rounded-lg",
+    contentVariants({ position, side }),
+    "max-h-(--available-height) w-(--anchor-width)",
+    className,
+  )}
+>
+  <div
+    data-slot="select-scroll-up-button"
+    class="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full"
+    hidden
+  >
+    <slot name="scroll-up"
+      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m18 15l-6-6l-6 6"/></svg></slot
+    >
+  </div>
+  <div
+    data-slot="select-viewport"
+    data-position={position}
+    class="max-h-[var(--select-content-available-height,300px)] flex flex-col gap-1 overflow-x-hidden overflow-y-auto p-1"
+  >
+    <slot />
+  </div>
+  <div
+    data-slot="select-scroll-down-button"
+    class="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full"
+    hidden
+  >
+    <slot name="scroll-down"
+      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg></slot
+    >
+  </div>
+</div>

package/src/components/select/SelectGroup.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="select-group"
-  class={cn("scroll-my-1 p-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="select-group"
+  class={cn("scroll-my-1 p-1", className)}
+>
+  <slot />
+</div>

package/src/components/select/SelectItem.astro

@@ -1,48 +1,48 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  value: string;
-  disabled?: boolean;
-  class?: string;
-}
-
-const {
-  value,
-  disabled = false,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="option"
-  tabindex={disabled ? -1 : 0}
-  data-slot="select-item"
-  data-value={value}
-  data-disabled={disabled ? "" : undefined}
-  class={cn(
-    "focus:bg-background-hover focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-    "group/item 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="select-item-text"
-    class="flex flex-1 gap-2 shrink-0 whitespace-nowrap"
-    ><slot /></span
-  >
-
-  <span
-    data-slot="select-item-indicator"
-    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
-  >
-    <span class="hidden items-center justify-center group-data-[selected]/item:inline-flex">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/></svg>
-    </span>
-  </span>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  value,
+  disabled = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="option"
+  tabindex={disabled ? -1 : 0}
+  data-slot="select-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  class={cn(
+    "focus:bg-background-hover focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+    "group/item 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="select-item-text"
+    class="flex flex-1 gap-2 shrink-0 whitespace-nowrap"
+    ><slot /></span
+  >
+
+  <span
+    data-slot="select-item-indicator"
+    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+  >
+    <span class="hidden items-center justify-center group-data-[selected]/item:inline-flex">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/></svg>
+    </span>
+  </span>
+</div>

package/src/components/select/SelectLabel.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="select-label"
-  class={cn("text-muted-foreground px-2 py-1.5 text-xs", 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="select-label"
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+>
+  <slot />
+</div>

package/src/components/select/SelectSeparator.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="select-separator"
-  class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", 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="select-separator"
+  class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
+/>

package/src/components/select/SelectTrigger.astro

@@ -1,34 +1,34 @@
----
-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="select-trigger"
-  data-size={size}
-  class={cn(
-    "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-1 px-3 text-xs font-semibold shadow-xs transition-[color,box-shadow] aria-invalid:ring-3 data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4",
-    "flex w-fit items-center justify-between whitespace-nowrap outline-none",
-    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted disabled:text-muted-foreground",
-    "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-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="select-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="select-trigger"
+  data-size={size}
+  class={cn(
+    "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-1 px-3 text-xs font-semibold shadow-xs transition-[color,box-shadow] aria-invalid:ring-3 data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4",
+    "flex w-fit items-center justify-between whitespace-nowrap outline-none",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted disabled:text-muted-foreground",
+    "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-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="select-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/select/SelectValue.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="select-value"
-  data-placeholder={placeholder}
-  class={cn("flex flex-1 text-left", 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="select-value"
+  data-placeholder={placeholder}
+  class={cn("flex flex-1 text-left", className)}
+>{placeholder}</span>

package/src/components/select/index.ts

@@ -1,8 +1,8 @@
-export { default as Select } from "./Select.astro";
-export { default as SelectTrigger } from "./SelectTrigger.astro";
-export { default as SelectValue } from "./SelectValue.astro";
-export { default as SelectContent } from "./SelectContent.astro";
-export { default as SelectItem } from "./SelectItem.astro";
-export { default as SelectGroup } from "./SelectGroup.astro";
-export { default as SelectLabel } from "./SelectLabel.astro";
-export { default as SelectSeparator } from "./SelectSeparator.astro";
+export { default as Select } from "./Select.astro";
+export { default as SelectTrigger } from "./SelectTrigger.astro";
+export { default as SelectValue } from "./SelectValue.astro";
+export { default as SelectContent } from "./SelectContent.astro";
+export { default as SelectItem } from "./SelectItem.astro";
+export { default as SelectGroup } from "./SelectGroup.astro";
+export { default as SelectLabel } from "./SelectLabel.astro";
+export { default as SelectSeparator } from "./SelectSeparator.astro";

package/src/components/separator/CHANGELOG.md

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

package/src/components/separator/Separator.astro

@@ -1,60 +1,60 @@
----
-/**
- * @component Separator
- * @title Separator
- * @description Visual separator for grouping content, supporting horizontal and vertical orientation.
- * @status stable
- * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2511-5829&t=YFStJ3V8fXEO8QD8-4
- *
- * @preview
- * <div>
- *   <div class="space-y-1">
- *     <h4 class="text-sm leading-none font-medium">bejamas/ui</h4>
- *     <p class="text-muted-foreground text-sm">
- *       An open-source UI component library.
- *     </p>
- *   </div>
- *   <Separator class="my-4" />
- *   <div class="flex h-5 items-center space-x-4 text-sm">
- *     <div>Blog</div>
- *     <Separator orientation="vertical" />
- *     <div>Docs</div>
- *     <Separator orientation="vertical" />
- *     <div>Source</div>
- *   </div>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Separator } from '@bejamas/ui/components/separator';
- * ---
- *
- * <Separator />
- * <Separator orientation="vertical" />
- * ```
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-const {
-  class: className = "",
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-} = Astro.props;
----
-
-<div
-  aria-orientation={orientation}
-  aria-hidden={decorative ? "true" : undefined}
-  class={cn(
-    "bg-border shrink-0",
-    orientation === "vertical" ? "h-full w-px" : "h-px w-full",
-    "shrink-0",
-    className,
-  )}
-  {...props}
->
-</div>
+---
+/**
+ * @component Separator
+ * @title Separator
+ * @description Visual separator for grouping content, supporting horizontal and vertical orientation.
+ * @status stable
+ * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2511-5829&t=YFStJ3V8fXEO8QD8-4
+ *
+ * @preview
+ * <div>
+ *   <div class="space-y-1">
+ *     <h4 class="text-sm leading-none font-medium">bejamas/ui</h4>
+ *     <p class="text-muted-foreground text-sm">
+ *       An open-source UI component library.
+ *     </p>
+ *   </div>
+ *   <Separator class="my-4" />
+ *   <div class="flex h-5 items-center space-x-4 text-sm">
+ *     <div>Blog</div>
+ *     <Separator orientation="vertical" />
+ *     <div>Docs</div>
+ *     <Separator orientation="vertical" />
+ *     <div>Source</div>
+ *   </div>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Separator } from '@bejamas/ui/components/separator';
+ * ---
+ *
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * ```
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const {
+  class: className = "",
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+} = Astro.props;
+---
+
+<div
+  aria-orientation={orientation}
+  aria-hidden={decorative ? "true" : undefined}
+  class={cn(
+    "bg-border shrink-0",
+    orientation === "vertical" ? "h-full w-px" : "h-px w-full",
+    "shrink-0",
+    className,
+  )}
+  {...props}
+>
+</div>