@cl-light-ds/ui 0.1.0

package/src/components/table/index.ts

@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.astro";
+export { default as TableHeader } from "./TableHeader.astro";
+export { default as TableBody } from "./TableBody.astro";
+export { default as TableFooter } from "./TableFooter.astro";
+export { default as TableHead } from "./TableHead.astro";
+export { default as TableRow } from "./TableRow.astro";
+export { default as TableCell } from "./TableCell.astro";
+export { default as TableCaption } from "./TableCaption.astro";
+

package/src/components/tabs/CHANGELOG.md

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

package/src/components/tabs/Tabs.astro

@@ -0,0 +1,306 @@
+---
+/**
+ * @component Tabs
+ * @title Tabs
+ * @description Organize content into tabbed panels, rendering one panel at a time.
+ * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4
+ *
+ * @preview
+ *
+ * <Tabs defaultValue="overview" class="w-full max-w-[400px]">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *     <TabsTrigger value="reports">Reports</TabsTrigger>
+ *     <TabsTrigger value="settings">Settings</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Overview</CardTitle>
+ *         <CardDescription>
+ *           View key metrics and recent activity across active projects.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         You have 12 active projects and 3 pending tasks.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ *   <TabsContent value="analytics">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Analytics</CardTitle>
+ *         <CardDescription>
+ *           Track engagement trends and performance over time.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         Page views are up 25% compared to last month.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ *   <TabsContent value="reports">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Reports</CardTitle>
+ *         <CardDescription>
+ *           Generate detailed exports for sharing and analysis.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         You have 5 reports ready to export.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ *   <TabsContent value="settings">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Settings</CardTitle>
+ *         <CardDescription>
+ *           Manage account preferences and personalization options.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         Configure notifications, security, and themes.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ * </Tabs>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@bejamas/ui/components/tabs';
+ * ---
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Overview content...</TabsContent>
+ *   <TabsContent value="analytics">Analytics content...</TabsContent>
+ * </Tabs>
+ *
+ * ```
+ *
+ * @examples
+ *
+ * ### Line Animated
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList variant="line-animated" class="mb-4">
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *     <TabsTrigger value="reports">Reports</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Line variant content.</TabsContent>
+ *   <TabsContent value="analytics">Analytics content.</TabsContent>
+ *   <TabsContent value="reports">Reports content.</TabsContent>
+ * </Tabs>
+ *
+ * ### Vertical
+ *
+ * <Tabs defaultValue="profile" orientation="vertical" class="w-full max-w-xl">
+ *   <TabsList class="min-w-40">
+ *     <TabsTrigger value="profile" class="justify-start px-3">Profile</TabsTrigger>
+ *     <TabsTrigger value="billing" class="justify-start px-3">Billing</TabsTrigger>
+ *     <TabsTrigger value="notifications" class="justify-start px-3">Notifications</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="profile" class="rounded-lg border p-4">
+ *     Profile settings content.
+ *   </TabsContent>
+ *   <TabsContent value="billing" class="rounded-lg border p-4">
+ *     Billing settings content.
+ *   </TabsContent>
+ *   <TabsContent value="notifications" class="rounded-lg border p-4">
+ *     Notifications settings content.
+ *   </TabsContent>
+ * </Tabs>
+ *
+ * ### Disabled
+ *
+ * <Tabs defaultValue="active">
+ *   <TabsList>
+ *     <TabsTrigger value="active">Active</TabsTrigger>
+ *     <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
+ *     <TabsTrigger value="secondary">Secondary</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="active">Active tab content.</TabsContent>
+ *   <TabsContent value="disabled">Disabled tab content.</TabsContent>
+ *   <TabsContent value="secondary">Secondary tab content.</TabsContent>
+ * </Tabs>
+ *
+ * ### Overflow
+ *
+ * <Tabs defaultValue="monday">
+ *   <TabsList class="w-full max-w-[20rem] justify-start overflow-x-auto whitespace-nowrap">
+ *     <TabsTrigger value="monday" class="shrink-0">Monday</TabsTrigger>
+ *     <TabsTrigger value="tuesday" class="shrink-0">Tuesday</TabsTrigger>
+ *     <TabsTrigger value="wednesday" class="shrink-0">Wednesday</TabsTrigger>
+ *     <TabsTrigger value="thursday" class="shrink-0">Thursday</TabsTrigger>
+ *     <TabsTrigger value="friday" class="shrink-0">Friday</TabsTrigger>
+ *     <TabsTrigger value="saturday" class="shrink-0">Saturday</TabsTrigger>
+ *     <TabsTrigger value="sunday" class="shrink-0">Sunday</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="monday">Monday content.</TabsContent>
+ *   <TabsContent value="tuesday">Tuesday content.</TabsContent>
+ *   <TabsContent value="wednesday">Wednesday content.</TabsContent>
+ *   <TabsContent value="thursday">Thursday content.</TabsContent>
+ *   <TabsContent value="friday">Friday content.</TabsContent>
+ *   <TabsContent value="saturday">Saturday content.</TabsContent>
+ *   <TabsContent value="sunday">Sunday content.</TabsContent>
+ * </Tabs>
+ *
+ * ### Direction Animation
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *     <TabsTrigger value="reports">Reports</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview" animation="direction">Direction-aware overview.</TabsContent>
+ *   <TabsContent value="analytics" animation="direction">Direction-aware analytics.</TabsContent>
+ *   <TabsContent value="reports" animation="direction">Direction-aware reports.</TabsContent>
+ * </Tabs>
+ *
+ * ### Sizes
+ *
+ * <div class="space-y-4">
+ *   <Tabs defaultValue="sm-account">
+ *     <TabsList size="sm">
+ *       <TabsTrigger value="sm-account" class="text-xs px-2">Account</TabsTrigger>
+ *       <TabsTrigger value="sm-password" class="text-xs px-2">Password</TabsTrigger>
+ *     </TabsList>
+ *   </Tabs>
+ *
+ *   <Tabs defaultValue="md-account">
+ *     <TabsList size="default">
+ *       <TabsTrigger value="md-account">Account</TabsTrigger>
+ *       <TabsTrigger value="md-password">Password</TabsTrigger>
+ *     </TabsList>
+ *   </Tabs>
+ *
+ *   <Tabs defaultValue="lg-account">
+ *     <TabsList size="lg">
+ *       <TabsTrigger value="lg-account" class="text-base px-4">Account</TabsTrigger>
+ *       <TabsTrigger value="lg-password" class="text-base px-4">Password</TabsTrigger>
+ *     </TabsList>
+ *   </Tabs>
+ * </div>
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The tabs component emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `tabs:change` | `{ value: string }` | Fired when the selected tab changes |
+ *
+ * ```astro nocollapse console
+ * <Tabs id="my-tabs" defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * ```js nocollapse
+ *   const tabs = document.getElementById('my-tabs');
+ *
+ *   tabs.addEventListener('tabs:change', (e) => {
+ *     console.log('Selected tab:', e.detail.value);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the tabs programmatically by dispatching a `tabs:set` event:
+ *
+ * ```js nocollapse
+ * const tabs = document.getElementById('my-tabs');
+ *
+ * // Select a tab
+ * tabs.dispatchEvent(new CustomEvent('tabs:set', {
+ *   detail: { value: 'tab2' }
+ * }));
+ * ```
+ *
+ * ### Variants
+ *
+ * | Prop | Element | Values | Default |
+ * |------|---------|--------|---------|
+ * | `variant` | tabs-list | `indicator`, `default`, `line`, `line-animated` | `indicator` |
+ * | `size` | tabs-list | `sm`, `default`, `lg` | `default` |
+ * | `animation` | tabs-content | `none`, `fade`, `slide`, `direction` | `none` |
+ *
+ * ### Data Attributes
+ *
+ * The tabs component sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-orientation` | tabs | Current orientation (`horizontal` or `vertical`) |
+ * | `data-variant` | tabs-list | Current list variant (`indicator`, `default`, `line`, or `line-animated`) |
+ * | `data-activation-direction` | tabs-content | Last activation direction after tab change (`left`, `right`, `up`, or `down`, not set on initial mount) |
+ * | `data-state` | tabs-trigger | Current state (`active` or `inactive`) |
+ *
+ * ### CSS Variables
+ *
+ * The tabs indicator exposes CSS variables for animation:
+ *
+ * | Variable | Element | Description |
+ * |----------|---------|-------------|
+ * | `--active-tab-left` | tabs-indicator | Left position of active tab |
+ * | `--active-tab-width` | tabs-indicator | Width of active tab |
+ * | `--active-tab-top` | tabs-indicator | Top position of active tab |
+ * | `--active-tab-height` | tabs-indicator | Height of active tab |
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  orientation?: "horizontal" | "vertical";
+  defaultValue?: string;
+}
+
+const {
+  class: className = "",
+  orientation = "horizontal",
+  defaultValue,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="tabs"
+  data-orientation={orientation}
+  data-default-value={defaultValue}
+  data-horizontal={orientation === "horizontal" ? "true" : undefined}
+  data-vertical={orientation === "vertical" ? "true" : undefined}
+  class={cn(
+    "gap-2",
+    "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+    className,
+  )}
+>
+  <slot />
+</div>
+
+<script>
+  import { createTabs } from "@data-slot/tabs";
+  document
+    .querySelectorAll('[data-slot="tabs"]')
+    .forEach((el) => createTabs(el));
+</script>

package/src/components/tabs/TabsContent.astro

@@ -0,0 +1,47 @@
+---
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+export const tabsContentVariants = cva(
+  "flex-1 outline-none hidden data-[state=active]:block",
+  {
+    variants: {
+      animation: {
+        none: "",
+        fade: "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200",
+        slide:
+          "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:duration-200",
+        direction:
+          "data-[state=active]:animate-in data-[state=active]:duration-200 data-[activation-direction=left]:slide-in-from-left-2 data-[activation-direction=right]:slide-in-from-right-2 data-[activation-direction=up]:slide-in-from-top-2 data-[activation-direction=down]:slide-in-from-bottom-2 data-[activation-direction=left]:fade-in-0 data-[activation-direction=right]:fade-in-0 data-[activation-direction=up]:fade-in-0 data-[activation-direction=down]:fade-in-0",
+      },
+    },
+    defaultVariants: {
+      animation: "none",
+    },
+  },
+);
+
+interface Props extends VariantProps<typeof tabsContentVariants>, HTMLAttributes<"div"> {
+  value: string;
+  class?: string;
+}
+
+const {
+  value,
+  animation = "none",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="tabpanel"
+  data-slot="tabs-content"
+  data-value={value}
+  tabindex="0"
+  class={cn("text-sm", tabsContentVariants({ animation }), className)}
+>
+  <slot />
+</div>

package/src/components/tabs/TabsList.astro

@@ -0,0 +1,69 @@
+---
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+export const tabsListVariants = cva(
+  "group/tabs-list text-muted-foreground relative inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        indicator: "rounded-lg bg-muted p-[2px] [--tabs-indicator-radius:calc(var(--radius)_-_2px)]",
+        default: "rounded-lg bg-muted p-[3px]",
+        line: "rounded-none gap-1 bg-transparent p-0",
+        "line-animated":
+          "rounded-none gap-1 bg-transparent p-0",
+      },
+      size: {
+        default: "group-data-horizontal/tabs:h-9",
+        sm: "group-data-horizontal/tabs:h-8",
+        lg: "group-data-horizontal/tabs:h-10",
+      },
+    },
+    defaultVariants: {
+      variant: "indicator",
+      size: "default",
+    },
+  },
+);
+
+interface Props
+  extends VariantProps<typeof tabsListVariants>, HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  variant = "indicator",
+  size = "default",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="tablist"
+  data-slot="tabs-list"
+  data-variant={variant}
+  class={cn("", tabsListVariants({ variant, size }), className)}
+>
+  {
+    variant === "indicator" && (
+      <div
+        aria-hidden="true"
+        data-slot="tabs-indicator"
+        class="gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width) bg-background shadow-sm transition-all duration-150 ease dark:border-input dark:bg-input/30"
+      />
+    )
+  }
+  {
+    variant === "line-animated" && (
+      <div
+        aria-hidden="true"
+        data-slot="tabs-indicator"
+        class="pointer-events-none absolute z-0 rounded-full bg-foreground transition-all duration-150 ease group-data-[orientation=horizontal]/tabs:left-[var(--active-tab-left)] group-data-[orientation=horizontal]/tabs:top-[calc(var(--active-tab-top)+var(--active-tab-height)-2px)] group-data-[orientation=horizontal]/tabs:h-0.5 group-data-[orientation=horizontal]/tabs:w-[var(--active-tab-width)] group-data-[orientation=vertical]/tabs:top-[var(--active-tab-top)] group-data-[orientation=vertical]/tabs:left-[calc(var(--active-tab-left)+var(--active-tab-width)-2px)] group-data-[orientation=vertical]/tabs:h-[var(--active-tab-height)] group-data-[orientation=vertical]/tabs:w-0.5"
+      />
+    )
+  }
+  <slot />
+</div>

package/src/components/tabs/TabsTrigger.astro

@@ -0,0 +1,40 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  value,
+  disabled = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  type="button"
+  disabled={disabled}
+  role="tab"
+  data-slot="tabs-trigger"
+  data-value={value}
+  class={cn(
+    "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4",
+    "relative z-10 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap outline-none transition-all disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
+    "focus-visible:border-ring focus-visible:ring-ring/50 text-foreground/60 hover:text-foreground data-[state=active]:text-foreground focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground",
+    "group-data-[variant=default]/tabs-list:data-[state=active]:bg-background dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-input dark:group-data-[variant=default]/tabs-list:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+    "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm",
+    "group-data-[variant=indicator]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=indicator]/tabs-list:data-[state=active]:shadow-none",
+    "group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+    "group-data-[variant=line-animated]/tabs-list:rounded-none group-data-[variant=line-animated]/tabs-list:bg-transparent group-data-[variant=line-animated]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line-animated]/tabs-list:data-[state=active]:shadow-none",
+    "after:pointer-events-none after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=default]/tabs-list:after:hidden group-data-[variant=indicator]/tabs-list:after:hidden group-data-[variant=line-animated]/tabs-list:after:hidden group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+    className,
+  )}
+>
+  <slot />
+</button>

package/src/components/tabs/index.ts

@@ -0,0 +1,6 @@
+export { default as Tabs } from "./Tabs.astro";
+export { default as TabsList } from "./TabsList.astro";
+export { default as TabsTrigger } from "./TabsTrigger.astro";
+export { default as TabsContent } from "./TabsContent.astro";
+export { tabsListVariants } from "./TabsList.astro";
+export { tabsContentVariants } from "./TabsContent.astro";

package/src/components/textarea/CHANGELOG.md

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

package/src/components/textarea/Textarea.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * @component Textarea
+ * @title Textarea
+ * @description A multi-line input field for longer user content.
+ * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2508-2555&t=YFStJ3V8fXEO8QD8-4
+ * @status stable
+ * @since 0.1.0
+ *
+ * @preview
+ *
+ * <Textarea placeholder="Type your message here..." />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Textarea } from '@bejamas/ui/components/textarea';
+ * ---
+ *
+ * <Textarea placeholder="Type your message here..." />
+ * ```
+ */
+
+const { class: className = "", ...props } = Astro.props;
+
+const baseClass =
+  "flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50";
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+---
+
+<textarea
+  data-slot={props["data-slot"] ?? "textarea"}
+  class={cn("border-input dark:bg-input/30 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 rounded-lg border bg-transparent px-2.5 py-2 text-base font-semibold shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm px-3", baseClass, className)}
+  {...props}></textarea>

package/src/components/textarea/index.ts

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

package/src/components/toggle/CHANGELOG.md

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

package/src/components/toggle/Toggle.astro

@@ -0,0 +1,138 @@
+---
+/**
+ * @component Toggle
+ * @title Toggle
+ * @description A two-state button that can be either on or off.
+ *
+ * @preview
+ *
+ * <Toggle aria-label="Toggle bookmark" variant="outline">
+ *   <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
+ *   Bookmark
+ * </Toggle>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Toggle } from '@bejamas/ui/components/toggle';
+ * import { BoldIcon } from '@lucide/astro';
+ * ---
+ *
+ * <Toggle aria-label="Toggle bold">
+ *   <BoldIcon />
+ * </Toggle>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `toggle:change` | `{ pressed: boolean }` | Fired when the toggle state changes |
+ *
+ * ### Programmatic Control
+ *
+ * ```js nocollapse
+ * // Set toggle state programmatically
+ * element.dispatchEvent(new CustomEvent('toggle:set', { detail: { value: true } }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | toggle | Current state: `on` or `off` |
+ * | `data-disabled` | toggle | Present when toggle is disabled |
+ *
+ * @examples
+ *
+ * ### Outline
+ *
+ * <div class="flex items-center gap-2">
+ *   <Toggle variant="outline" aria-label="Toggle bold">
+ *     <BoldIcon />
+ *     Bold
+ *   </Toggle>
+ *   <Toggle variant="outline" aria-label="Toggle italic">
+ *     <ItalicIcon />
+ *     Italic
+ *   </Toggle>
+ * </div>
+ *
+ * ### With Text
+ *
+ * <Toggle variant="outline" aria-label="Toggle italic">
+ *   <ItalicIcon />
+ *   Italic
+ * </Toggle>
+ *
+ * ### Sizes
+ *
+ * <div class="flex items-center gap-2">
+ *   <Toggle size="sm" variant="outline" aria-label="Toggle small">
+ *     Small
+ *   </Toggle>
+ *   <Toggle size="default" variant="outline" aria-label="Toggle default">
+ *     Default
+ *   </Toggle>
+ *   <Toggle size="lg" variant="outline" aria-label="Toggle large">
+ *     Large
+ *   </Toggle>
+ * </div>
+ *
+ * ### Disabled
+ *
+ * <div class="flex items-center gap-2">
+ *   <Toggle disabled aria-label="Toggle bold">
+ *     Disabled
+ *   </Toggle>
+ *   <Toggle disabled variant="outline" aria-label="Toggle italic">
+ *     Disabled
+ *   </Toggle>
+ * </div>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  toggleVariants,
+  type ToggleVariantProps,
+} from "@cl-light-ds/ui/lib/toggle-shared";
+
+interface Props extends ToggleVariantProps, Omit<HTMLAttributes<"button">, "class"> {
+  defaultPressed?: boolean;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  variant = "default",
+  size = "default",
+  defaultPressed,
+  disabled,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  type="button"
+  data-slot="toggle"
+  data-default-pressed={defaultPressed ? "" : undefined}
+  data-disabled={disabled ? "true" : undefined}
+  disabled={disabled}
+  class={cn(toggleVariants({ variant, size }), className)}
+  {...rest}
+>
+  <slot />
+</button>
+
+<script>
+  import { createToggle } from "@data-slot/toggle";
+  document
+    .querySelectorAll<HTMLElement>('[data-slot="toggle"]')
+    .forEach((el) => createToggle(el));
+</script>