@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/breadcrumb/Breadcrumb.astro

@@ -1,76 +1,76 @@
----
-/**
- * @component Breadcrumb
- * @title Breadcrumb
- * @description A navigation path showing the user's location in the site hierarchy with links to parent pages.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5409
- *
- * @preview
- *
- * <Breadcrumb>
- *   <BreadcrumbList>
- *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
- *     <BreadcrumbSeparator />
- *     <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
- *     <BreadcrumbSeparator />
- *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
- *   </BreadcrumbList>
- * </Breadcrumb>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
- * ---
- *
- * <Breadcrumb>
- *   <BreadcrumbList>
- *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
- *     <BreadcrumbSeparator />
- *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
- *   </BreadcrumbList>
- * </Breadcrumb>
- * ```
- *
- * @examples
- *
- * ### Custom separator
- *
- *  <Breadcrumb>
- *    <BreadcrumbList>
- *       <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
- *       <BreadcrumbSeparator>
- *         <SlashIcon />
- *       </BreadcrumbSeparator>
- *       <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
- *       <BreadcrumbSeparator>
- *         <SlashIcon />
- *       </BreadcrumbSeparator>
- *       <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
- *   </BreadcrumbList>
- * </Breadcrumb>
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"nav"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<nav
-  {...rest}
-  aria-label="breadcrumb"
-  data-slot="breadcrumb"
-  class={cn("", className)}
->
-  <slot />
-</nav>
-
+---
+/**
+ * @component Breadcrumb
+ * @title Breadcrumb
+ * @description A navigation path showing the user's location in the site hierarchy with links to parent pages.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5409
+ *
+ * @preview
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
+ * ---
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @examples
+ *
+ * ### Custom separator
+ *
+ *  <Breadcrumb>
+ *    <BreadcrumbList>
+ *       <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *       <BreadcrumbSeparator>
+ *         <SlashIcon />
+ *       </BreadcrumbSeparator>
+ *       <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
+ *       <BreadcrumbSeparator>
+ *         <SlashIcon />
+ *       </BreadcrumbSeparator>
+ *       <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"nav"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<nav
+  {...rest}
+  aria-label="breadcrumb"
+  data-slot="breadcrumb"
+  class={cn("", className)}
+>
+  <slot />
+</nav>
+

package/src/components/breadcrumb/BreadcrumbItem.astro

@@ -1,32 +1,32 @@
----
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const itemVariants = cva("inline-flex items-center");
----
-
-<li
-  {...rest}
-  data-slot="breadcrumb-item"
-  class={cn(
-    "gap-1.5",
-    "[&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-lg [&_a]:px-3 [&_a]:py-2 [&_a]:font-medium [&_a]:outline-none [&_a]:transition-colors [&_a]:focus-visible:ring-3 [&_a]:focus-visible:ring-ring/50",
-    "[&_a]:text-muted-foreground [&_a:hover]:text-foreground",
-    "[&_[aria-current=page]]:inline-flex [&_[aria-current=page]]:items-center [&_[aria-current=page]]:gap-1 [&_[aria-current=page]]:rounded-lg [&_[aria-current=page]]:px-3 [&_[aria-current=page]]:py-2 [&_[aria-current=page]]:font-medium",
-    "[&_[aria-current=page]]:text-foreground",
-    itemVariants(),
-    className,
-  )}
->
-  <slot />
-</li>
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const itemVariants = cva("inline-flex items-center");
+---
+
+<li
+  {...rest}
+  data-slot="breadcrumb-item"
+  class={cn(
+    "gap-1.5",
+    "[&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-lg [&_a]:px-3 [&_a]:py-2 [&_a]:font-medium [&_a]:outline-none [&_a]:transition-colors [&_a]:focus-visible:ring-3 [&_a]:focus-visible:ring-ring/50",
+    "[&_a]:text-muted-foreground [&_a:hover]:text-foreground",
+    "[&_[aria-current=page]]:inline-flex [&_[aria-current=page]]:items-center [&_[aria-current=page]]:gap-1 [&_[aria-current=page]]:rounded-lg [&_[aria-current=page]]:px-3 [&_[aria-current=page]]:py-2 [&_[aria-current=page]]:font-medium",
+    "[&_[aria-current=page]]:text-foreground",
+    itemVariants(),
+    className,
+  )}
+>
+  <slot />
+</li>

package/src/components/breadcrumb/BreadcrumbList.astro

@@ -1,26 +1,26 @@
----
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"ol"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const listVariants = cva(
-  "flex flex-wrap items-center wrap-break-word",
-);
----
-
-<ol
-  {...rest}
-  data-slot="breadcrumb-list"
-  class={cn("text-muted-foreground gap-0 text-sm", listVariants(), className)}
->
-  <slot />
-</ol>
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"ol"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const listVariants = cva(
+  "flex flex-wrap items-center wrap-break-word",
+);
+---
+
+<ol
+  {...rest}
+  data-slot="breadcrumb-list"
+  class={cn("text-muted-foreground gap-0 text-sm", listVariants(), className)}
+>
+  <slot />
+</ol>

package/src/components/breadcrumb/BreadcrumbSeparator.astro

@@ -1,26 +1,26 @@
----
-import { ChevronRight } from "@lucide/astro";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<li
-  {...rest}
-  role="presentation"
-  aria-hidden="true"
-  data-slot="breadcrumb-separator"
-  class={cn("[&>svg]:size-4", className)}
->
-  <slot>
-    <ChevronRight />
-  </slot>
-</li>
+---
+import { ChevronRight } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  role="presentation"
+  aria-hidden="true"
+  data-slot="breadcrumb-separator"
+  class={cn("[&>svg]:size-4", className)}
+>
+  <slot>
+    <ChevronRight />
+  </slot>
+</li>