@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/link-group/LinkGroupList.astro

@@ -1,25 +1,25 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-import { linkGroupListVariants, type LinkGroupOrientation } from "./link-group-list-variants";
-
-interface Props extends HTMLAttributes<"ul"> {
-  orientation?: LinkGroupOrientation;
-  class?: string;
-}
-
-const {
-  orientation = "vertical",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<ul
-  {...rest}
-  data-slot="link-group-list"
-  data-orientation={orientation}
-  class={cn(linkGroupListVariants({ orientation }), className)}
->
-  <slot />
-</ul>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { linkGroupListVariants, type LinkGroupOrientation } from "./link-group-list-variants";
+
+interface Props extends HTMLAttributes<"ul"> {
+  orientation?: LinkGroupOrientation;
+  class?: string;
+}
+
+const {
+  orientation = "vertical",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<ul
+  {...rest}
+  data-slot="link-group-list"
+  data-orientation={orientation}
+  class={cn(linkGroupListVariants({ orientation }), className)}
+>
+  <slot />
+</ul>

package/src/components/link-group/LinkGroupTitle.astro

@@ -1,22 +1,22 @@
----
-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="link-group-title"
-  class={cn("", "text-base font-semibold text-foreground", 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="link-group-title"
+  class={cn("", "text-base font-semibold text-foreground", className)}
+>
+  <slot />
+</div>
+

package/src/components/link-group/index.ts

@@ -1,5 +1,5 @@
-export { default as LinkGroup } from "./LinkGroup.astro";
-export { default as LinkGroupTitle } from "./LinkGroupTitle.astro";
-export { default as LinkGroupList } from "./LinkGroupList.astro";
-export { default as LinkGroupItem } from "./LinkGroupItem.astro";
-
+export { default as LinkGroup } from "./LinkGroup.astro";
+export { default as LinkGroupTitle } from "./LinkGroupTitle.astro";
+export { default as LinkGroupList } from "./LinkGroupList.astro";
+export { default as LinkGroupItem } from "./LinkGroupItem.astro";
+

package/src/components/link-group/link-group-list-variants.ts

@@ -1,15 +1,15 @@
-import { cva } from "class-variance-authority";
-
-export const linkGroupListVariants = cva("flex gap-2", {
-  variants: {
-    orientation: {
-      vertical: "flex-col items-start",
-      horizontal: "flex-row items-start w-full",
-    },
-  },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-});
-
-export type LinkGroupOrientation = "vertical" | "horizontal";
+import { cva } from "class-variance-authority";
+
+export const linkGroupListVariants = cva("flex gap-2", {
+  variants: {
+    orientation: {
+      vertical: "flex-col items-start",
+      horizontal: "flex-row items-start w-full",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+export type LinkGroupOrientation = "vertical" | "horizontal";

package/src/components/marquee/CHANGELOG.md

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

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/marquee/index.ts

@@ -1,2 +1,2 @@
-export { default as Marquee } from "./Marquee.astro";
-
+export { default as Marquee } from "./Marquee.astro";
+

package/src/components/native-select/CHANGELOG.md

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