@cl-light-ds/ui 0.1.0

package/src/components/sticky-surface/StickySurface.astro

@@ -0,0 +1,152 @@
+---
+/**
+ * @component StickySurface
+ * @title Sticky Surface
+ * @description A sticky surface component with scroll-based effects (border, shadow, surface swap, shrink, glass).
+ * @figmaUrl 
+ * 
+ * @preview
+ * 
+ * <div class="overflow-y-auto max-h-[320px] w-full bg-border px-8 border-border">
+ *   <div class="h-[1000px] bg-muted">
+ *     <StickySurface effects={["line", "elevate"]} threshold="1rem" observeStuck class="bg-background p-4 flex justify-between items-center">
+ *       <p>Scroll inside!</p>
+ *       <div class="flex items-center gap-2">
+ *         <Button size="sm" variant="outline" class="group-[.is-stuck]/surface:opacity-0 will-change-transform group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out">Log in</Button>
+ *         <Button size="sm" class="w-24 group-[.is-stuck]/surface:w-28 duration-500 ease-out">
+ *           <span class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out">Contact</span>
+ *           <span class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 opacity-0 transition-all blur-sm duration-500 ease-out">Get a demo</span>
+ *         </Button>
+ *       </div>
+ *     </StickySurface>
+ *   </div>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { StickySurface } from '@bejamas/ui/components/sticky-surface';
+ * ---
+ *
+ * <StickySurface effects={["line", "elevate"]} threshold="1rem">
+ *   <!-- Your content here -->
+ * </StickySurface>
+ * ```
+ */
+
+import type { HTMLTag } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props {
+  as?: HTMLTag;
+  threshold?: string | number;
+  effects?: Array<"line" | "elevate" | "backdrop">;
+  class?: string;
+  style?: string;
+  observeStuck?: boolean;
+}
+
+const {
+  as = "div",
+  threshold = "16px",
+  effects = [],
+  class: className = "",
+  style = "",
+  ...props
+} = Astro.props as Props;
+
+// Compose effect booleans for easier use
+const hasLine = effects.includes("line");
+const hasElevate = effects.includes("elevate");
+const hasBackdrop = effects.includes("backdrop");
+
+// CSS variable tokens (can be overridden via Tailwind arbitrary props)
+const defaultVars = {
+  '--stuck-shadow': '0 2px 8px 0 rgb(0 0 0 / 0.06)',
+  '--stuck-threshold': typeof threshold === "number" ? `${threshold}px` : threshold,
+};
+
+
+const Tag = as;
+
+// cva for sticky surface effects
+const stickySurfaceVariants = cva(
+  [
+    "group/surface", "sticky", "top-0", "z-50", "w-full", "transition-all", "duration-300", "will-change-transform"
+  ],
+  {
+    variants: {
+      line: {
+        true: "after:content-[''] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-black/15 after:opacity-0 supports-[animation-timeline:scroll()]:after:[animation:show-line_linear_both] supports-[animation-timeline:scroll()]:after:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:after:[animation-range:0_var(--stuck-threshold)]"
+      },
+      elevate: {
+        true: "shadow-none supports-[animation-timeline:scroll()]:[animation:stuck-shadow_linear_both] supports-[animation-timeline:scroll()]:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:[animation-range:0_var(--stuck-threshold)]"
+      },
+      backdrop: {
+        true: "backdrop-blur supports-[animation-timeline:scroll()]:[animation:stuck-backdrop_linear_both] supports-[animation-timeline:scroll()]:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:[animation-range:0_var(--stuck-threshold)]"
+      }
+    }
+  }
+);
+
+const effectClasses = cn(
+  "",
+  stickySurfaceVariants({
+    line: hasLine,
+    elevate: hasElevate,
+    backdrop: hasBackdrop
+  }),
+  className
+);
+
+const styleVars = Object.entries(defaultVars)
+  ?.map(([k, v]) => `${k}:${v}`)
+  ?.join(";");
+---
+
+<Tag
+  class={effectClasses}
+  style={`${styleVars};${style}`}
+  data-sticky-surface
+  {...props}
+>
+  <slot />
+</Tag>
+
+<style>
+@supports (animation-timeline: scroll()) {
+  /* Line fade-in */
+  @keyframes show-line {
+    from { opacity: 0 }
+    to { opacity: 1 }
+  }
+  /* Shadow fade-in */
+  @keyframes stuck-shadow {
+    from { box-shadow: none }
+    to { box-shadow: var(--stuck-shadow) }
+  }
+}
+</style>
+
+
+{Astro.props.observeStuck && (
+  <script is:inline>
+    (() => {
+      const surfaces = document.querySelectorAll('[data-sticky-surface]');
+      surfaces.forEach(surface => {
+        // Insert a 1px sentinel right before the sticky element
+        const sentinel = document.createElement('div');
+        sentinel.style.cssText = 'position:relative;height:0;opacity:0;visibility:hidden;';
+        surface.parentNode?.insertBefore(sentinel, surface);
+    
+        const io = new IntersectionObserver(([e]) => {
+          surface.classList.toggle('is-stuck', !e.isIntersecting);
+        }, { threshold: [0, 1] });
+    
+        io.observe(sentinel);
+      });
+    })();
+  </script>
+)}

package/src/components/sticky-surface/index.ts

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

package/src/components/switch/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+All notable changes to the `Switch` component will be documented in this file.
+
+## Unreleased
+
+### Fixed
+
+- Restored interactivity: `@data-slot/switch` (already the correct import in `Switch.astro`) was never added as a dependency and was aliased to a no-op stub so builds wouldn't crash, leaving Switch fully static. Added the real package as a dependency and removed the stub alias.

package/src/components/switch/Switch.astro

@@ -0,0 +1,106 @@
+---
+/**
+ * @component Switch
+ * @title Switch
+ * @description A toggle control for switching between checked and unchecked states.
+ * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2509-4236&t=YFStJ3V8fXEO8QD8-4
+ *
+ * @status stable
+ * @since 0.1.0
+ *
+ * @preview
+ *
+ * <div class="flex items-center gap-3">
+ *   <Switch id="notifications" />
+ *   <Label for="notifications">Enable notifications</Label>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Switch } from '@bejamas/ui/components/switch';
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <div class="flex items-center gap-3">
+ *   <Switch id="notifications" />
+ *   <Label for="notifications">Enable notifications</Label>
+ * </div>
+ * ```
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+  id?: string;
+  size?: "sm" | "default";
+  checked?: boolean;
+  defaultChecked?: boolean;
+  name?: string;
+  value?: string;
+  uncheckedValue?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  "aria-invalid"?: boolean | "true" | "false";
+}
+
+const {
+  class: className = "",
+  id = "",
+  size = "default",
+  checked,
+  defaultChecked,
+  name,
+  value,
+  uncheckedValue,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+
+const initialChecked = checked ?? defaultChecked ?? false;
+---
+
+<span
+  {...rest}
+  id={id}
+  data-slot="switch"
+  data-size={size}
+  data-default-checked={initialChecked ? "true" : undefined}
+  data-name={name}
+  data-value={value}
+  data-unchecked-value={uncheckedValue}
+  data-disabled={disabled ? "true" : undefined}
+  data-read-only={readOnly ? "true" : undefined}
+  data-required={required ? "true" : undefined}
+  data-checked={initialChecked ? "true" : undefined}
+  data-unchecked={initialChecked ? undefined : "true"}
+  aria-invalid={ariaInvalid}
+  class={cn(
+    "data-checked:bg-primary data-unchecked:bg-muted 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 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+    className,
+  )}
+>
+  <span
+    data-slot="switch-thumb"
+    data-checked={initialChecked ? "true" : undefined}
+    data-unchecked={initialChecked ? undefined : "true"}
+    data-disabled={disabled ? "true" : undefined}
+    data-readonly={readOnly ? "true" : undefined}
+    data-required={required ? "true" : undefined}
+    class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+    aria-hidden="true"
+  ></span>
+</span>
+
+<script>
+  import { create } from "@data-slot/switch";
+
+  create();
+</script>

package/src/components/switch/index.ts

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

package/src/components/table/CHANGELOG.md

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

package/src/components/table/Table.astro

@@ -0,0 +1,250 @@
+---
+/**
+ * @component Table
+ * @title Table
+ * @description A responsive table component with compound parts for header, body, footer, and caption.
+ *
+ * @preview
+ *
+ * <Table>
+ *   <TableCaption>A list of your recent invoices.</TableCaption>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead class="w-[100px]">Invoice</TableHead>
+ *       <TableHead>Status</TableHead>
+ *       <TableHead>Method</TableHead>
+ *       <TableHead class="text-right">Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV001</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$250.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV002</TableCell>
+ *       <TableCell>Pending</TableCell>
+ *       <TableCell>PayPal</TableCell>
+ *       <TableCell class="text-right">$150.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV003</TableCell>
+ *       <TableCell>Unpaid</TableCell>
+ *       <TableCell>Bank Transfer</TableCell>
+ *       <TableCell class="text-right">$350.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV004</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$450.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV005</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>PayPal</TableCell>
+ *       <TableCell class="text-right">$550.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV006</TableCell>
+ *       <TableCell>Pending</TableCell>
+ *       <TableCell>Bank Transfer</TableCell>
+ *       <TableCell class="text-right">$200.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV007</TableCell>
+ *       <TableCell>Unpaid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$300.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colspan={3}>Total</TableCell>
+ *       <TableCell class="text-right">$2,500.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   Table,
+ *   TableBody,
+ *   TableCaption,
+ *   TableCell,
+ *   TableFooter,
+ *   TableHead,
+ *   TableHeader,
+ *   TableRow,
+ * } from '@bejamas/ui/components/table';
+ *
+ * const invoices = [
+ *   { invoice: "INV001", paymentStatus: "Paid", totalAmount: "$250.00", paymentMethod: "Credit Card" },
+ *   { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
+ *   { invoice: "INV003", paymentStatus: "Unpaid", totalAmount: "$350.00", paymentMethod: "Bank Transfer" },
+ *   { invoice: "INV004", paymentStatus: "Paid", totalAmount: "$450.00", paymentMethod: "Credit Card" },
+ *   { invoice: "INV005", paymentStatus: "Paid", totalAmount: "$550.00", paymentMethod: "PayPal" },
+ *   { invoice: "INV006", paymentStatus: "Pending", totalAmount: "$200.00", paymentMethod: "Bank Transfer" },
+ *   { invoice: "INV007", paymentStatus: "Unpaid", totalAmount: "$300.00", paymentMethod: "Credit Card" },
+ * ];
+ * ---
+ *
+ * <Table>
+ *   <TableCaption>A list of your recent invoices.</TableCaption>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead class="w-[100px]">Invoice</TableHead>
+ *       <TableHead>Status</TableHead>
+ *       <TableHead>Method</TableHead>
+ *       <TableHead class="text-right">Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     {invoices.map((invoice) => (
+ *       <TableRow>
+ *         <TableCell class="font-medium">{invoice.invoice}</TableCell>
+ *         <TableCell>{invoice.paymentStatus}</TableCell>
+ *         <TableCell>{invoice.paymentMethod}</TableCell>
+ *         <TableCell class="text-right">{invoice.totalAmount}</TableCell>
+ *       </TableRow>
+ *     ))}
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colspan={3}>Total</TableCell>
+ *       <TableCell class="text-right">$2,500.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ * ```
+ *
+ * @examples
+ *
+ * ### Footer
+ *
+ * Use the `<TableFooter />` component to add a footer to the table.
+ *
+ * <Table>
+ *   <TableCaption>A list of your recent invoices.</TableCaption>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead class="w-[100px]">Invoice</TableHead>
+ *       <TableHead>Status</TableHead>
+ *       <TableHead>Method</TableHead>
+ *       <TableHead class="text-right">Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV001</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$250.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV002</TableCell>
+ *       <TableCell>Pending</TableCell>
+ *       <TableCell>PayPal</TableCell>
+ *       <TableCell class="text-right">$150.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV003</TableCell>
+ *       <TableCell>Unpaid</TableCell>
+ *       <TableCell>Bank Transfer</TableCell>
+ *       <TableCell class="text-right">$350.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colspan={3}>Total</TableCell>
+ *       <TableCell class="text-right">$2,500.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ *
+ * ### Actions
+ *
+ * A table showing actions for each row using a `<DropdownMenu />` component.
+ *
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Product</TableHead>
+ *       <TableHead>Price</TableHead>
+ *       <TableHead class="text-right">Actions</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell class="font-medium">Wireless Mouse</TableCell>
+ *       <TableCell>$29.99</TableCell>
+ *       <TableCell class="text-right">
+ *         <DropdownMenu>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuContent align="end">
+ *             <DropdownMenuItem>Edit</DropdownMenuItem>
+ *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *             <DropdownMenuSeparator />
+ *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+ *           </DropdownMenuContent>
+ *         </DropdownMenu>
+ *       </TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">Mechanical Keyboard</TableCell>
+ *       <TableCell>$129.99</TableCell>
+ *       <TableCell class="text-right">
+ *         <DropdownMenu>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuContent align="end">
+ *             <DropdownMenuItem>Edit</DropdownMenuItem>
+ *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *             <DropdownMenuSeparator />
+ *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+ *           </DropdownMenuContent>
+ *         </DropdownMenu>
+ *       </TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">USB-C Hub</TableCell>
+ *       <TableCell>$49.99</TableCell>
+ *       <TableCell class="text-right">
+ *         <DropdownMenu>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuContent align="end">
+ *             <DropdownMenuItem>Edit</DropdownMenuItem>
+ *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *             <DropdownMenuSeparator />
+ *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+ *           </DropdownMenuContent>
+ *         </DropdownMenu>
+ *       </TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"table"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div data-slot="table-container" class="border border-border bg-background rounded-lg relative w-full overflow-x-auto">
+  <table
+    data-slot="table"
+    class={cn("w-full caption-bottom text-sm", "w-full caption-bottom text-sm", className)}
+    {...rest}
+  >
+    <slot />
+  </table>
+</div>

package/src/components/table/TableBody.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"tbody"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<tbody data-slot="table-body" class={cn("[&_tr:last-child]:border-0", "[&_tr:last-child]:border-0", className)} {...rest}>
+  <slot />
+</tbody>
+

package/src/components/table/TableCaption.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"caption"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<caption data-slot="table-caption" class={cn("text-muted-foreground mt-4 text-sm", className)} {...rest}>
+  <slot />
+</caption>

package/src/components/table/TableCell.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"td"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<td
+  data-slot="table-cell"
+  class={cn("p-2 align-middle whitespace-nowrap font-medium [&:has([role=checkbox])]:pr-0", className)}
+  {...rest}
+>
+  <slot />
+</td>

package/src/components/table/TableFooter.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"tfoot"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<tfoot
+  data-slot="table-footer"
+  class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+  {...rest}
+>
+  <slot />
+</tfoot>

package/src/components/table/TableHead.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"th"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<th
+  data-slot="table-head"
+  class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+  {...rest}
+>
+  <slot />
+</th>

package/src/components/table/TableHeader.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"thead"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<thead data-slot="table-header" class={cn("[&_tr]:border-b", className)} {...rest}>
+  <slot />
+</thead>

package/src/components/table/TableRow.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"tr"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<tr
+  data-slot="table-row"
+  class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+  {...rest}
+>
+  <slot />
+</tr>