@cl-light-ds/ui 0.1.0

package/src/components/separator/Separator.astro

@@ -0,0 +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>

package/src/components/separator/index.ts

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

package/src/components/skeleton/CHANGELOG.md

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

package/src/components/skeleton/Skeleton.astro

@@ -0,0 +1,121 @@
+---
+/**
+ * @component Skeleton
+ * @title Skeleton
+ * @description A loading placeholder component that displays animated pulse effect, commonly used to indicate content is being loaded.
+ * @status stable
+ *
+ * Works great with Astro Server Islands as a fallback for loading content.
+ *
+ * @preview
+ *
+ * <div class="flex items-center gap-4">
+ *   <Skeleton class="h-12 w-12 rounded-full" />
+ *   <div class="space-y-2">
+ *     <Skeleton class="h-4 w-[250px]" />
+ *     <Skeleton class="h-4 w-[200px]" />
+ *   </div>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro
+ * ---
+ * import { Skeleton } from '@bejamas/ui/components/skeleton';
+ * ---
+ *
+ * <Skeleton class="h-4 w-[250px]" />
+ * ```
+ *
+ * @examples
+ *
+ * ### Avatar
+ *
+ * <div class="flex w-fit items-center gap-4">
+ *   <Skeleton class="size-10 shrink-0 rounded-full" />
+ *   <div class="grid gap-2">
+ *     <Skeleton class="h-4 w-[150px]" />
+ *     <Skeleton class="h-4 w-[100px]" />
+ *   </div>
+ * </div>
+ *
+ * ### Card
+ *
+ * <Card class="w-full max-w-xs">
+ *   <CardHeader>
+ *     <Skeleton class="h-4 w-2/3" />
+ *     <Skeleton class="h-4 w-1/2" />
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Skeleton class="aspect-video w-full" />
+ *   </CardContent>
+ * </Card>
+ *
+ * ### Text
+ *
+ * <div class="flex w-full max-w-xs flex-col gap-2">
+ *   <Skeleton class="h-4 w-full" />
+ *   <Skeleton class="h-4 w-full" />
+ *   <Skeleton class="h-4 w-3/4" />
+ * </div>
+ *
+ * ### Form
+ *
+ * <div class="flex w-full max-w-xs flex-col gap-7">
+ *   <div class="flex flex-col gap-3">
+ *     <Skeleton class="h-4 w-20" />
+ *     <Skeleton class="h-8 w-full" />
+ *   </div>
+ *   <div class="flex flex-col gap-3">
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-8 w-full" />
+ *   </div>
+ *   <Skeleton class="h-8 w-24" />
+ * </div>
+ *
+ * ### Table
+ *
+ * <div class="flex w-full max-w-sm flex-col gap-2">
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ * </div>
+ *
+ * @props
+ * - class?: string — Additional classes for styling.
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const { class: className = "", ...props } = Astro.props;
+---
+
+<div
+  data-slot="skeleton"
+  class={cn("bg-muted rounded-md animate-pulse", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/skeleton/index.ts

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

package/src/components/slider/CHANGELOG.md

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

package/src/components/slider/Slider.astro

@@ -0,0 +1,198 @@
+---
+/**
+ * @component Slider
+ * @title Slider
+ * @description An input component that allows users to select a value from a range by dragging a thumb along a track.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-17811
+ *
+ * @preview
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={50} max={100} />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Slider } from '@bejamas/ui/components/slider';
+ * ---
+ *
+ * <Slider defaultValue={50} max={100} />
+ * ```
+ *
+ * @examples
+ *
+ * ### Range
+ *
+ * Use two thumbs to create a range slider for selecting a min and max value.
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={[25, 75]} max={100} />
+ *
+ * ### Vertical
+ *
+ * Set orientation to vertical for a vertical slider.
+ *
+ * <div class="h-48">
+ *   <Slider class="h-full" orientation="vertical" defaultValue={50} max={100} />
+ * </div>
+ *
+ * ### Disabled
+ *
+ * Disable the slider to prevent interaction.
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={50} max={100} disabled />
+ *
+ * ### Step
+ *
+ * Set a custom step increment.
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={50} max={100} step={10} />
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The slider emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `slider:change` | `{ value: number \| [number, number] }` | Fired on every value change (during drag) |
+ * | `slider:commit` | `{ value: number \| [number, number] }` | Fired when value is committed (pointer up or keyboard blur) |
+ *
+ * ```astro nocollapse
+ * <Slider id="my-slider" defaultValue={50} max={100} />
+ * ```
+ *
+ * ```js nocollapse
+ *   const slider = document.getElementById('my-slider');
+ *
+ *   slider.addEventListener('slider:change', (e) => {
+ *     console.log('Value changing:', e.detail.value);
+ *   });
+ *
+ *   slider.addEventListener('slider:commit', (e) => {
+ *     console.log('Value committed:', e.detail.value);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can set the slider value programmatically by dispatching a `slider:set` event:
+ *
+ * ```js nocollapse
+ * // Set single value
+ * slider.dispatchEvent(new CustomEvent('slider:set', {
+ *   detail: { value: 75 }
+ * }));
+ *
+ * // Set range values
+ * slider.dispatchEvent(new CustomEvent('slider:set', {
+ *   detail: { value: [25, 75] }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The slider sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-orientation` | slider | Current orientation (`horizontal` or `vertical`) |
+ * | `data-disabled` | slider | Present when slider is disabled |
+ * | `data-dragging` | slider, thumb | Present during drag interaction |
+ * | `data-value` | slider | Current value(s) as string (e.g., `"50"` or `"25,75"`) |
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type SliderValue = number | [number, number];
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  value?: SliderValue;
+  defaultValue?: SliderValue;
+  min?: number;
+  max?: number;
+  step?: number;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+}
+
+const {
+  class: className = "",
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  disabled = false,
+  ...rest
+} = Astro.props as Props;
+
+const resolvedValue = value ?? defaultValue ?? min;
+const defaultValueAttribute = Array.isArray(resolvedValue)
+  ? resolvedValue.join(",")
+  : String(resolvedValue);
+const thumbCount = Array.isArray(resolvedValue) ? 2 : 1;
+---
+
+<div
+  {...rest}
+  data-slot="slider"
+  data-default-value={defaultValueAttribute}
+  data-min={min}
+  data-max={max}
+  data-step={step}
+  data-orientation={orientation}
+  data-thumb-alignment="edge"
+  data-disabled={disabled ? "true" : undefined}
+  class={cn("data-horizontal:w-full data-vertical:h-full", className)}
+>
+  <div
+    data-disabled={disabled ? "true" : undefined}
+    class="data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:cursor-not-allowed data-vertical:h-full data-vertical:w-auto data-vertical:flex-col"
+  >
+    <div
+      data-slot="slider-track"
+      class="bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden select-none data-disabled:opacity-40"
+    >
+      <div
+        data-slot="slider-range"
+        class="bg-primary select-none data-horizontal:h-full data-vertical:w-full data-disabled:bg-slider-background-disabled"
+      >
+      </div>
+    </div>
+    {
+      Array.from({ length: thumbCount }, (_, index) => (
+        <div
+          data-slot="slider-thumb"
+          data-index={index}
+          data-disabled={disabled ? "true" : undefined}
+          class="border-primary size-4 rounded-full border-2 bg-background transition-[color,box-shadow] hover:ring-3 hover:ring-ring/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-hidden block shrink-0 select-none data-disabled:pointer-events-none data-disabled:bg-[linear-gradient(var(--slider-dot-background-disabled),var(--slider-dot-background-disabled))] data-disabled:border-[var(--primary-50)]"
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  import { createSlider } from "@data-slot/slider";
+
+  document.querySelectorAll('[data-slot="slider"]').forEach((el) => {
+    const element = el as HTMLElement;
+
+    // Don't pass defaultValue in options - let the library read from
+    // data-default-value directly so single and range sliders stay aligned.
+    createSlider(element, {
+      min: Number(element.dataset.min) || 0,
+      max: Number(element.dataset.max) || 100,
+      step: Number(element.dataset.step) || 1,
+      orientation:
+        (element.dataset.orientation as "horizontal" | "vertical") ||
+        "horizontal",
+      disabled: element.dataset.disabled === "true",
+    });
+  });
+</script>

package/src/components/slider/index.ts

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

package/src/components/spinner/CHANGELOG.md

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

package/src/components/spinner/Spinner.astro

@@ -0,0 +1,134 @@
+---
+/**
+ * @component Spinner
+ * @title Spinner
+ * @description A loading indicator component that displays an animated spinning icon.
+ *
+ * @preview
+ *
+ * <Item variant="muted" class="w-full max-w-xs">
+ *   <ItemMedia>
+ *     <Spinner />
+ *   </ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle class="line-clamp-1">Submitting Contact Form...</ItemTitle>
+ *   </ItemContent>
+ * </Item>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Spinner } from '@bejamas/ui/components/spinner';
+ * ---
+ *
+ * <Spinner />
+ * ```
+ *
+ * ## Customization
+ *
+ * You can replace the default spinner icon with any other icon by editing the `Spinner` component.
+ *
+ * ```astro showLineNumbers title="components/ui/spinner/Spinner.astro" nocollapse nopreview
+ * ---
+ * import { cn } from "@cl-light-ds/ui/lib/utils";
+ * import { Loader as LoaderIcon } from "@lucide/astro";
+ *
+ * const { class: className = "", ...props } = Astro.props;
+ * ---
+ *
+ * <LoaderIcon
+ *   data-slot="spinner"
+ *   role="status"
+ *   aria-label="Loading"
+ *   class={cn("cn-spinner", "size-4 animate-spin", className)}
+ *   {...props}
+ * />
+ * ```
+ *
+ * @examples
+ *
+ * ### Size
+ *
+ * Use the `size-*` utility class to change the size of the spinner.
+ *
+ * <div class="flex items-center gap-6">
+ *   <Spinner class="size-3" />
+ *   <Spinner class="size-4" />
+ *   <Spinner class="size-6" />
+ *   <Spinner class="size-8" />
+ * </div>
+ *
+ * ### Button
+ *
+ * Add a spinner to a button to indicate a loading state. Remember to use the `data-icon` attribute for proper spacing.
+ *
+ * <div class="flex flex-col items-center gap-4">
+ *   <Button disabled size="sm">
+ *     <Spinner data-icon />
+ *     Loading...
+ *   </Button>
+ *   <Button variant="outline" disabled size="sm">
+ *     <Spinner data-icon />
+ *     Please wait
+ *   </Button>
+ *   <Button variant="secondary" disabled size="sm">
+ *     <Spinner data-icon />
+ *     Processing
+ *   </Button>
+ * </div>
+ *
+ * ### Badge
+ *
+ * Add a spinner to a badge to indicate a loading state.
+ *
+ * <div class="flex items-center gap-4 [--radius:1.2rem]">
+ *   <Badge>
+ *     <Spinner data-icon />
+ *     Syncing
+ *   </Badge>
+ *   <Badge variant="secondary">
+ *     <Spinner data-icon />
+ *     Updating
+ *   </Badge>
+ *   <Badge variant="outline">
+ *     <Spinner data-icon />
+ *     Processing
+ *   </Badge>
+ * </div>
+ *
+ * ### Input Group
+ *
+ * <div class="flex w-full max-w-md flex-col gap-4">
+ *   <InputGroup>
+ *     <InputGroupInput placeholder="Send a message..." disabled />
+ *     <InputGroupAddon align="inline-end">
+ *       <Spinner />
+ *     </InputGroupAddon>
+ *   </InputGroup>
+ *   <InputGroup>
+ *     <InputGroupTextarea placeholder="Send a message..." disabled />
+ *     <InputGroupAddon align="block-end">
+ *       <Spinner /> Validating...
+ *       <InputGroupButton class="ml-auto" variant="default">
+ *         <ArrowUpIcon />
+ *         <span class="sr-only">Send</span>
+ *       </InputGroupButton>
+ *     </InputGroupAddon>
+ *   </InputGroup>
+ * </div>
+ *
+ * @props
+ * - class?: string — Additional classes for styling (e.g., size-3, size-6).
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const { class: className = "", ...props } = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-slot="spinner"
+  role="status"
+  aria-label="Loading"
+  class={cn("", "size-4 animate-spin", className)}
+  {...props}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/src/components/spinner/index.ts

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

package/src/components/sticky-surface/CHANGELOG.md

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