@cl-light-ds/ui 0.2.0 → 0.4.0

package/README.md

@@ -1,45 +1,45 @@
-# @cl-light-ds/ui
-
-ClickLearn Lightning Design System — a library of Astro UI components.
-
-## Requirements
-
-Your project needs Astro 7+ and Tailwind CSS v4 already set up.
-
-## Install
-
-```bash
-npm install @cl-light-ds/ui
-```
-
-## Usage
-
-Import the design tokens once, e.g. in your root layout:
-
-```astro
----
-import "@cl-light-ds/ui/globals.css";
----
-```
-
-Then import components from their individual paths:
-
-```astro
----
-import { Button } from "@cl-light-ds/ui/components/button";
----
-
-<Button>Click me</Button>
-```
-
-Tailwind v4 needs to see these component files to extract their classes. Add a `@source` directive pointing at the
-package inside your own global stylesheet:
-
-```css
-@import "tailwindcss";
-@import "@cl-light-ds/ui/globals.css";
-
-@source "../node_modules/@cl-light-ds/ui/src/**/*.{astro,ts}";
-```
-
-(Adjust the relative path to match where your stylesheet lives relative to `node_modules`.)
+# @cl-light-ds/ui
+
+ClickLearn Lightning Design System — a library of Astro UI components.
+
+## Requirements
+
+Your project needs Astro 7+ and Tailwind CSS v4 already set up.
+
+## Install
+
+```bash
+npm install @cl-light-ds/ui
+```
+
+## Usage
+
+Import the design tokens once, e.g. in your root layout:
+
+```astro
+---
+import "@cl-light-ds/ui/globals.css";
+---
+```
+
+Then import components from their individual paths:
+
+```astro
+---
+import { Button } from "@cl-light-ds/ui/components/button";
+---
+
+<Button>Click me</Button>
+```
+
+Tailwind v4 needs to see these component files to extract their classes. Add a `@source` directive pointing at the
+package inside your own global stylesheet:
+
+```css
+@import "tailwindcss";
+@import "@cl-light-ds/ui/globals.css";
+
+@source "../node_modules/@cl-light-ds/ui/src/**/*.{astro,ts}";
+```
+
+(Adjust the relative path to match where your stylesheet lives relative to `node_modules`.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cl-light-ds/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "ClickLearn Lightning Design System — Astro UI component library.",
   "license": "MIT",
   "type": "module",
@@ -10,7 +10,7 @@
   "exports": {
     "./globals.css": "./src/styles/globals.css",
     "./lib/*": "./src/lib/*.ts",
-    "./components/*": "./src/components/*.ts"
+    "./components/*": "./src/components/*/index.ts"
   },
   "publishConfig": {
     "access": "public"

package/src/components/accordion/Accordion.astro

@@ -1,248 +1,248 @@
----
-/**
- * @component Accordion
- * @title Accordion
- * @description Vertically stacked collapsible sections that let users show and hide content panels.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=133-7547
- *
- * @preview
- *
- * <Accordion class="w-full max-w-[420px] self-start mt-10" defaultValue="accordion-item-1">
- *   <AccordionItem value="accordion-item-1">
- *     <AccordionTrigger icon={List}>
- *       Is it accessible?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes. It adheres to WAI-ARIA design patterns.
- *     </AccordionContent>
- *   </AccordionItem>
- *   <AccordionItem value="accordion-item-2">
- *     <AccordionTrigger badge="New">
- *       Can I customize the icon?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes you can.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- *
- * <Accordion class="w-full max-w-[420px] self-start mt-10" shape="rounded" defaultValue="accordion-item-1">
- *   <AccordionItem value="accordion-item-1">
- *     <AccordionTrigger>
- *       Is it accessible?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes. It adheres to WAI-ARIA design patterns.
- *     </AccordionContent>
- *   </AccordionItem>
- *   <AccordionItem value="accordion-item-2" disabled>
- *     <AccordionTrigger>
- *       Can I customize the icon?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes you can.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@bejamas/ui/components/accordion';
- * ---
- *
- * <Accordion class="w-full max-w-[420px] self-start" defaultValue="accordion-item-1">
- *   <AccordionItem value="accordion-item-1">
- *     <AccordionTrigger>
- *       Is it accessible?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes. It adheres to WAI-ARIA design patterns.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- *
- * @api
- *
- * ### Events
- *
- * The accordion emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `accordion:change` | `{ value: string[] }` | Fired when expanded items change |
- *
- * ```astro nocollapse
- * <Accordion id="my-accordion">
- *   <AccordionItem value="item-1">
- *     <AccordionTrigger>Item 1</AccordionTrigger>
- *     <AccordionContent>Content 1</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- *
- * ```js nocollapse
- *   const accordion = document.getElementById('my-accordion');
- *
- *   accordion.addEventListener('accordion:change', (e) => {
- *     console.log('Expanded items:', e.detail.value);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can control the accordion programmatically by dispatching an `accordion:set` event:
- *
- * ```js nocollapse
- * const accordion = document.getElementById('my-accordion');
- *
- * // Expand a single item
- * accordion.dispatchEvent(new CustomEvent('accordion:set', {
- *   detail: { value: 'item-1' }
- * }));
- *
- * // Expand multiple items (when multiple prop is true)
- * accordion.dispatchEvent(new CustomEvent('accordion:set', {
- *   detail: { value: ['item-1', 'item-2'] }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * The accordion sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-state` | accordion-item | Current state (`open` or `closed`) |
- * | `data-shape` | accordion | Current shape (`default`, `flush`, or `rounded`) |
- * | `data-disabled` | accordion-item | Present when the item is disabled |
- *
- * @examples
- *
- * ### Rounded shape
- *
- * <Accordion class="w-full max-w-[420px] self-start" shape="rounded" defaultValue="accordion-item-1">
- *   <AccordionItem value="accordion-item-1">
- *     <AccordionTrigger>
- *       Is it accessible?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes. It adheres to WAI-ARIA design patterns.
- *     </AccordionContent>
- *   </AccordionItem>
- *   <AccordionItem value="accordion-item-2">
- *     <AccordionTrigger>
- *       Can I customize the icon?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes you can.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- *
- * ### Disabled item
- *
- * <Accordion class="w-full max-w-[420px] self-start" defaultValue="accordion-item-1">
- *   <AccordionItem value="accordion-item-1" disabled>
- *     <AccordionTrigger>
- *       This item can't be expanded
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Hidden content.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- *
- * ### Multiple choice accordion
- *
- * <Accordion class="w-full max-w-[420px] self-start" multiple defaultValue={["accordion-item-1"]}>
- *   <AccordionItem value="accordion-item-1">
- *     <AccordionTrigger>
- *       Is it accessible?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes. It adheres to WAI-ARIA design patterns.
- *     </AccordionContent>
- *   </AccordionItem>
- *   <AccordionItem value="accordion-item-2">
- *     <AccordionTrigger>
- *       Can I customize the icon?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes you can.
- *     </AccordionContent>
- *   </AccordionItem>
- *   <AccordionItem value="accordion-item-3">
- *     <AccordionTrigger>
- *       Can I customize the icon?
- *     </AccordionTrigger>
- *     <AccordionContent>
- *       Yes you can.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- *
- */
-
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-type AccordionShape = "default" | "flush" | "rounded";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  multiple?: boolean;
-  defaultValue?: string | string[];
-  collapsible?: boolean;
-  shape?: AccordionShape;
-}
-
-const {
-  class: className = "",
-  multiple = false,
-  defaultValue,
-  collapsible = true,
-  shape = "default",
-  ...rest
-} = Astro.props as Props;
-
-const rootDefaultValue = Array.isArray(defaultValue)
-  ? JSON.stringify(defaultValue)
-  : defaultValue;
-
-const accordionVariants = cva("group/accordion flex w-full flex-col", {
-  variants: {
-    shape: {
-      default: "gap-0",
-      flush: "gap-0",
-      rounded: "gap-2",
-    },
-  },
-  defaultVariants: {
-    shape: "default",
-  },
-});
----
-
-<div
-  {...rest}
-  data-slot="accordion"
-  data-multiple={multiple ? "true" : undefined}
-  data-default-value={rootDefaultValue}
-  data-collapsible={collapsible ? undefined : "false"}
-  data-shape={shape}
-  class={cn(accordionVariants({ shape }), className)}
->
-  <slot />
-</div>
-
-<script>
-  import { createAccordion } from "@data-slot/accordion";
-
-  document.querySelectorAll('[data-slot="accordion"]').forEach((el) => {
-    createAccordion(el);
-  });
-</script>
+---
+/**
+ * @component Accordion
+ * @title Accordion
+ * @description Vertically stacked collapsible sections that let users show and hide content panels.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=133-7547
+ *
+ * @preview
+ *
+ * <Accordion class="w-full max-w-[420px] self-start mt-10" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger icon={List}>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2">
+ *     <AccordionTrigger badge="New">
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * <Accordion class="w-full max-w-[420px] self-start mt-10" shape="rounded" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2" disabled>
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@bejamas/ui/components/accordion';
+ * ---
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The accordion emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `accordion:change` | `{ value: string[] }` | Fired when expanded items change |
+ *
+ * ```astro nocollapse
+ * <Accordion id="my-accordion">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Item 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * ```js nocollapse
+ *   const accordion = document.getElementById('my-accordion');
+ *
+ *   accordion.addEventListener('accordion:change', (e) => {
+ *     console.log('Expanded items:', e.detail.value);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the accordion programmatically by dispatching an `accordion:set` event:
+ *
+ * ```js nocollapse
+ * const accordion = document.getElementById('my-accordion');
+ *
+ * // Expand a single item
+ * accordion.dispatchEvent(new CustomEvent('accordion:set', {
+ *   detail: { value: 'item-1' }
+ * }));
+ *
+ * // Expand multiple items (when multiple prop is true)
+ * accordion.dispatchEvent(new CustomEvent('accordion:set', {
+ *   detail: { value: ['item-1', 'item-2'] }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The accordion sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | accordion-item | Current state (`open` or `closed`) |
+ * | `data-shape` | accordion | Current shape (`default`, `flush`, or `rounded`) |
+ * | `data-disabled` | accordion-item | Present when the item is disabled |
+ *
+ * @examples
+ *
+ * ### Rounded shape
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" shape="rounded" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2">
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * ### Disabled item
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1" disabled>
+ *     <AccordionTrigger>
+ *       This item can't be expanded
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Hidden content.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * ### Multiple choice accordion
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" multiple defaultValue={["accordion-item-1"]}>
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2">
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-3">
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ */
+
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type AccordionShape = "default" | "flush" | "rounded";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  multiple?: boolean;
+  defaultValue?: string | string[];
+  collapsible?: boolean;
+  shape?: AccordionShape;
+}
+
+const {
+  class: className = "",
+  multiple = false,
+  defaultValue,
+  collapsible = true,
+  shape = "default",
+  ...rest
+} = Astro.props as Props;
+
+const rootDefaultValue = Array.isArray(defaultValue)
+  ? JSON.stringify(defaultValue)
+  : defaultValue;
+
+const accordionVariants = cva("group/accordion flex w-full flex-col", {
+  variants: {
+    shape: {
+      default: "gap-0",
+      flush: "gap-0",
+      rounded: "gap-2",
+    },
+  },
+  defaultVariants: {
+    shape: "default",
+  },
+});
+---
+
+<div
+  {...rest}
+  data-slot="accordion"
+  data-multiple={multiple ? "true" : undefined}
+  data-default-value={rootDefaultValue}
+  data-collapsible={collapsible ? undefined : "false"}
+  data-shape={shape}
+  class={cn(accordionVariants({ shape }), className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createAccordion } from "@data-slot/accordion";
+
+  document.querySelectorAll('[data-slot="accordion"]').forEach((el) => {
+    createAccordion(el);
+  });
+</script>

package/src/components/accordion/AccordionContent.astro

@@ -1,26 +1,26 @@
----
-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="accordion-content"
-  hidden
-  class="data-open:animate-accordion-down data-closed:animate-accordion-up text-muted-foreground text-xs overflow-hidden"
->
-  <div
-    class={cn(
-      "pr-3 pl-(--accordion-indent,--spacing(3)) pt-1 pb-3 h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-      className,
-    )}
-  >
-    <slot />
-  </div>
-</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="accordion-content"
+  hidden
+  class="data-open:animate-accordion-down data-closed:animate-accordion-up text-muted-foreground text-xs overflow-hidden"
+>
+  <div
+    class={cn(
+      "pr-3 pl-(--accordion-indent,--spacing(3)) pt-1 pb-3 h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+      className,
+    )}
+  >
+    <slot />
+  </div>
+</div>