@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/marquee/Marquee.astro

@@ -1,119 +1,119 @@
----
-/**
- * @component Marquee
- * @title Marquee
- * @description A horizontally auto-scrolling container for repeating content like logos or messages.
- * @status stable
- * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2511-7717&t=YFStJ3V8fXEO8QD8-4
- *
- * @preview
- *
- *
- * <Marquee class="dark:invert">
- *   <img src="/demo/logo/sonos.svg" alt="Netflix" class="h-5 self-center mx-10"/>
- *   <img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10"/>
- *   <img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10"/>
- *   <img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10"/>
- *   <img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10"/>
- * </Marquee>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Marquee } from '@bejamas/ui/components/marquee';
- * ---
- * <Marquee>
- *   <!-- Your content here -->
- * </Marquee>
- * ```
- *
- * @examples
- *
- * ### Direction
- *
- * <div class="flex gap-6 h-60">
- *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top">
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
- *   </Marquee>
- *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom">
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
- *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
- *   </Marquee>
- * </div>
- */
-
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props {
-  direction?: "left" | "right" | "top" | "bottom";
-  time?: number | string;
-  variant?: "gradient" | "solid";
-  class?: string;
-}
-
-const {
-  class: className = "",
-  direction = "left",
-  time = 30,
-  variant = "gradient",
-  ...props
-} = Astro.props as Props;
-
-const marqueeVariants = cva("relative w-full", {
-  variants: {
-    variant: {
-      gradient:
-        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)]",
-      solid: "",
-    },
-  },
-  defaultVariants: {
-    variant: "gradient",
-  },
-});
----
-
-<div
-  data-marquee
-  data-direction={direction}
-  class={cn(
-    "",
-    // container utilities
-    "group flex overflow-hidden w-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col",
-    marqueeVariants({ variant }),
-    className,
-  )}
-  style={` --duration:${typeof time === "number" ? `${time}s` : time};`}
-  {...props}
->
-  <div
-    class={cn(
-      "",
-      "marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]",
-      direction === "top" && "flex-col",
-      direction === "bottom" && "flex-col",
-    )}
-  >
-    <slot />
-  </div>
-  <div
-    class={cn(
-      "",
-      "marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]",
-      direction === "top" && "flex-col",
-      direction === "bottom" && "flex-col",
-    )}
-    aria-hidden="true"
-  >
-    <slot />
-  </div>
-</div>
+---
+/**
+ * @component Marquee
+ * @title Marquee
+ * @description A horizontally auto-scrolling container for repeating content like logos or messages.
+ * @status stable
+ * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2511-7717&t=YFStJ3V8fXEO8QD8-4
+ *
+ * @preview
+ *
+ *
+ * <Marquee class="dark:invert">
+ *   <img src="/demo/logo/sonos.svg" alt="Netflix" class="h-5 self-center mx-10"/>
+ *   <img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10"/>
+ *   <img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10"/>
+ *   <img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10"/>
+ *   <img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10"/>
+ * </Marquee>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Marquee } from '@bejamas/ui/components/marquee';
+ * ---
+ * <Marquee>
+ *   <!-- Your content here -->
+ * </Marquee>
+ * ```
+ *
+ * @examples
+ *
+ * ### Direction
+ *
+ * <div class="flex gap-6 h-60">
+ *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top">
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
+ *   </Marquee>
+ *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom">
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
+ *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
+ *   </Marquee>
+ * </div>
+ */
+
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props {
+  direction?: "left" | "right" | "top" | "bottom";
+  time?: number | string;
+  variant?: "gradient" | "solid";
+  class?: string;
+}
+
+const {
+  class: className = "",
+  direction = "left",
+  time = 30,
+  variant = "gradient",
+  ...props
+} = Astro.props as Props;
+
+const marqueeVariants = cva("relative w-full", {
+  variants: {
+    variant: {
+      gradient:
+        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)]",
+      solid: "",
+    },
+  },
+  defaultVariants: {
+    variant: "gradient",
+  },
+});
+---
+
+<div
+  data-marquee
+  data-direction={direction}
+  class={cn(
+    "",
+    // container utilities
+    "group flex overflow-hidden w-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col",
+    marqueeVariants({ variant }),
+    className,
+  )}
+  style={` --duration:${typeof time === "number" ? `${time}s` : time};`}
+  {...props}
+>
+  <div
+    class={cn(
+      "",
+      "marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]",
+      direction === "top" && "flex-col",
+      direction === "bottom" && "flex-col",
+    )}
+  >
+    <slot />
+  </div>
+  <div
+    class={cn(
+      "",
+      "marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]",
+      direction === "top" && "flex-col",
+      direction === "bottom" && "flex-col",
+    )}
+    aria-hidden="true"
+  >
+    <slot />
+  </div>
+</div>

package/src/components/native-select/NativeSelect.astro

@@ -1,125 +1,125 @@
----
-/**
- * @component NativeSelect
- * @title Native Select
- * @description A styled native HTML select element with consistent design system integration.
- *
- * @preview
- * <NativeSelect class="w-[200px]">
- *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
- * </NativeSelect>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import {
- *   NativeSelect,
- *   NativeSelectOption,
- *   NativeSelectOptGroup,
- * } from '@bejamas/ui/components/native-select';
- * ---
- *
- * <NativeSelect>
- *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- * </NativeSelect>
- * ```
- *
- * ### Native Select vs Select
- *
- * Use **NativeSelect** when you need standard browser form behavior — native validation, mobile-optimized pickers, and zero JavaScript. Use **Select** when you need a custom-styled dropdown with keyboard navigation, grouped items, and rich content.
- *
- * @examples
- *
- * ### With Groups
- *
- * <NativeSelect class="w-[200px]">
- *   <NativeSelectOptGroup label="Fruits">
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelectOptGroup>
- *   <NativeSelectOptGroup label="Vegetables">
- *     <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
- *     <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
- *   </NativeSelectOptGroup>
- * </NativeSelect>
- *
- * ### Sizes
- *
- * <div class="flex flex-col items-start gap-4 sm:flex-row">
- *   <NativeSelect class="w-[180px]" size="sm">
- *     <NativeSelectOption value="">Small (h-8)</NativeSelectOption>
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelect>
- *   <NativeSelect class="w-[180px]" size="default">
- *     <NativeSelectOption value="">Default (h-9)</NativeSelectOption>
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelect>
- *   <NativeSelect class="w-[180px]" size="lg">
- *     <NativeSelectOption value="">Large (h-10)</NativeSelectOption>
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelect>
- * </div>
- *
- * ### Disabled
- *
- * <NativeSelect disabled class="w-[200px]">
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- * </NativeSelect>
- *
- * ### Invalid
- *
- * <NativeSelect aria-invalid="true" class="w-[200px]">
- *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- * </NativeSelect>
- *
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"select"> {
-  class?: string;
-  size?: "sm" | "default" | "lg";
-}
-
-const {
-  class: className = "",
-  size = "default",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  data-slot="native-select-wrapper"
-  data-size={size}
-  class={cn("",
-    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
-    className,
-  )}
->
-  <select
-    data-slot="native-select"
-    data-size={size}
-    class={cn(
-      "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 rounded-lg outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
-    )}
-    {...rest}
-  >
-    <slot />
-  </select>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
-    aria-hidden="true"
-    data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
-</div>
+---
+/**
+ * @component NativeSelect
+ * @title Native Select
+ * @description A styled native HTML select element with consistent design system integration.
+ *
+ * @preview
+ * <NativeSelect class="w-[200px]">
+ *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
+ * </NativeSelect>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   NativeSelect,
+ *   NativeSelectOption,
+ *   NativeSelectOptGroup,
+ * } from '@bejamas/ui/components/native-select';
+ * ---
+ *
+ * <NativeSelect>
+ *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ * </NativeSelect>
+ * ```
+ *
+ * ### Native Select vs Select
+ *
+ * Use **NativeSelect** when you need standard browser form behavior — native validation, mobile-optimized pickers, and zero JavaScript. Use **Select** when you need a custom-styled dropdown with keyboard navigation, grouped items, and rich content.
+ *
+ * @examples
+ *
+ * ### With Groups
+ *
+ * <NativeSelect class="w-[200px]">
+ *   <NativeSelectOptGroup label="Fruits">
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelectOptGroup>
+ *   <NativeSelectOptGroup label="Vegetables">
+ *     <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
+ *     <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
+ *   </NativeSelectOptGroup>
+ * </NativeSelect>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col items-start gap-4 sm:flex-row">
+ *   <NativeSelect class="w-[180px]" size="sm">
+ *     <NativeSelectOption value="">Small (h-8)</NativeSelectOption>
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelect>
+ *   <NativeSelect class="w-[180px]" size="default">
+ *     <NativeSelectOption value="">Default (h-9)</NativeSelectOption>
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelect>
+ *   <NativeSelect class="w-[180px]" size="lg">
+ *     <NativeSelectOption value="">Large (h-10)</NativeSelectOption>
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelect>
+ * </div>
+ *
+ * ### Disabled
+ *
+ * <NativeSelect disabled class="w-[200px]">
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ * </NativeSelect>
+ *
+ * ### Invalid
+ *
+ * <NativeSelect aria-invalid="true" class="w-[200px]">
+ *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ * </NativeSelect>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"select"> {
+  class?: string;
+  size?: "sm" | "default" | "lg";
+}
+
+const {
+  class: className = "",
+  size = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  data-slot="native-select-wrapper"
+  data-size={size}
+  class={cn("",
+    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+    className,
+  )}
+>
+  <select
+    data-slot="native-select"
+    data-size={size}
+    class={cn(
+      "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 rounded-lg outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+    )}
+    {...rest}
+  >
+    <slot />
+  </select>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
+    aria-hidden="true"
+    data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+</div>

package/src/components/native-select/NativeSelectOptGroup.astro

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