@bundu/ui 0.1.0

package/src/ui/card.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Card — shadcn CVA pattern over the design system's `.card` surface
+ * token (defined in each app's global.css @layer components). Renders an
+ * <a> when `href` is set so whole-card links stay a single component.
+ */
+export const cardVariants = cva("card", {
+  variants: {
+    padding: {
+      none: "",
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+    hover: {
+      true: "card-hover",
+    },
+  },
+  defaultVariants: {
+    padding: "md",
+  },
+});
+
+export interface CardProps extends VariantProps<typeof cardVariants> {
+  href?: string;
+  external?: boolean;
+  class?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Card({
+  padding,
+  hover,
+  href,
+  external,
+  class: astroClass,
+  className,
+  children,
+}: CardProps) {
+  const classes = cn(cardVariants({ padding, hover }), astroClass, className);
+
+  if (href) {
+    const ext = external
+      ? { target: "_blank", rel: "noopener noreferrer" }
+      : {};
+    return (
+      <a href={href} className={classes} data-slot="card" {...ext}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <div className={classes} data-slot="card">
+      {children}
+    </div>
+  );
+}

package/src/ui/checkbox.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Checkbox — a NATIVE `<input type="checkbox">` styled to the design
+ * system's semantic tokens.
+ *
+ * Deliberately NOT Radix: this is the minimal accessible, form-native,
+ * SSR-friendly implementation. It uses the CSS `accent-color`
+ * (`accent-primary`) so the browser's built-in checked glyph is tinted
+ * to the brand `--primary` token — no client JS, fully keyboard- and
+ * screen-reader-accessible, and it submits inside a `<form>` like any
+ * native checkbox. The 20px box sits inside a comfortable label hit
+ * area; pair it with a `<Label>` for a larger touch target.
+ */
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  class?: string;
+  className?: string;
+}
+
+export function Checkbox({
+  class: astroClass,
+  className,
+  ...props
+}: CheckboxProps) {
+  return (
+    <input
+      type="checkbox"
+      data-slot="checkbox"
+      className={cn(
+        "h-5 w-5 shrink-0 cursor-pointer rounded-[7px] border border-border bg-background accent-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        astroClass,
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/ui/input.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Input — native <input> styled to the Nyuchi Design System tokens
+ * (shadcn pattern, mapped onto the Five-African-Minerals semantic
+ * tokens). Dependency-free and SSR-friendly so it renders as plain HTML
+ * inside Astro without a client directive.
+ *
+ * Forwards every standard input prop (type, name, id, placeholder,
+ * required, value, defaultValue, autocomplete, inputmode, …) via
+ * `...props`. The `h-12` floor keeps the Ubuntu 48px minimum touch
+ * target for outdoor, all-ages use.
+ */
+export const inputClasses =
+  "flex h-12 w-full rounded-lg border border-border bg-background px-4 text-body text-foreground transition-colors placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** Astro-style class attribute (merged with `className`). */
+  class?: string;
+  className?: string;
+}
+
+export function Input({ class: astroClass, className, ...props }: InputProps) {
+  return (
+    <input
+      data-slot="input"
+      className={cn(inputClasses, astroClass, className)}
+      {...props}
+    />
+  );
+}

package/src/ui/label.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Label — native <label> styled to the Nyuchi Design System tokens
+ * (shadcn pattern over the Five-African-Minerals tokens).
+ * Dependency-free and SSR-friendly. Forwards every standard label prop
+ * (htmlFor / for, id, …) via `...props` and renders its children as-is.
+ */
+export const labelClasses = "text-body-sm font-medium text-foreground";
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  /** Astro-style class attribute (merged with `className`). */
+  class?: string;
+  className?: string;
+  /** Astro-style `for` attribute (maps to React `htmlFor`). */
+  for?: string;
+  children?: React.ReactNode;
+}
+
+export function Label({
+  class: astroClass,
+  className,
+  for: astroFor,
+  htmlFor,
+  children,
+  ...props
+}: LabelProps) {
+  return (
+    <label
+      data-slot="label"
+      htmlFor={htmlFor ?? astroFor}
+      className={cn(labelClasses, astroClass, className)}
+      {...props}
+    >
+      {children}
+    </label>
+  );
+}

package/src/ui/select.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Select — native <select> styled to the Nyuchi Design System tokens
+ * (shadcn pattern over the Five-African-Minerals tokens). Deliberately
+ * NOT Radix: kept dependency-free and SSR-friendly so it renders as
+ * plain HTML inside Astro without a client directive.
+ *
+ * Forwards every standard select prop (name, id, required, value,
+ * defaultValue, …) via `...props`, and renders its <option> children
+ * as-is.
+ */
+export const selectClasses =
+  "flex h-12 w-full appearance-none rounded-lg border border-border bg-background px-4 text-body text-foreground transition-colors outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed";
+
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  /** Astro-style class attribute (merged with `className`). */
+  class?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Select({
+  class: astroClass,
+  className,
+  children,
+  ...props
+}: SelectProps) {
+  return (
+    <select
+      data-slot="select"
+      className={cn(selectClasses, astroClass, className)}
+      {...props}
+    >
+      {children}
+    </select>
+  );
+}

package/src/ui/separator.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Separator — a thin rule using the semantic `border` token.
+ *
+ * NOT Radix: a plain, accessible `<div>` with the correct ARIA. When
+ * `decorative` (the default) it's `role="none"` and hidden from the
+ * a11y tree; set `decorative={false}` for a semantic separator that
+ * exposes `role="separator"` + `aria-orientation`.
+ */
+export interface SeparatorProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+  class?: string;
+  className?: string;
+}
+
+export function Separator({
+  orientation = "horizontal",
+  decorative = true,
+  class: astroClass,
+  className,
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      data-slot="separator"
+      data-orientation={orientation}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={
+        decorative ? undefined : orientation === "vertical" ? "vertical" : "horizontal"
+      }
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "vertical" ? "h-full w-px" : "h-px w-full",
+        astroClass,
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/ui/skeleton.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Skeleton — a loading placeholder using the semantic `muted` token
+ * and Tailwind's `animate-pulse`. Dependency-free and SSR-friendly.
+ * Size it with utility classes (`h-4 w-32`, `h-10 w-10 rounded-full`,
+ * …) via `class` / `className`.
+ */
+export interface SkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  className?: string;
+}
+
+export function Skeleton({
+  class: astroClass,
+  className,
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      data-slot="skeleton"
+      aria-hidden="true"
+      className={cn("animate-pulse rounded-md bg-muted", astroClass, className)}
+      {...props}
+    />
+  );
+}

package/src/ui/switch.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Switch — a minimal accessible toggle.
+ *
+ * Deliberately NOT Radix (kept dependency-light): a `<button>` with
+ * `role="switch"` and `aria-checked`, supporting both controlled
+ * (`checked` + `onCheckedChange`) and uncontrolled (`defaultChecked`)
+ * use. It expands its hit area to the Ubuntu 48px touch-target floor
+ * with `p-3 -m-3` (padding out, negative margin back) so the visual
+ * track stays compact while the tap target stays large. Colours come
+ * from the semantic `primary` / `muted` tokens — no hex.
+ */
+export interface SwitchProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  id?: string;
+  name?: string;
+  value?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  class?: string;
+  className?: string;
+}
+
+export function Switch({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  id,
+  name,
+  value,
+  class: astroClass,
+  className,
+  ...aria
+}: SwitchProps) {
+  const isControlled = checked !== undefined;
+  const [internal, setInternal] = React.useState(defaultChecked ?? false);
+  const isOn = isControlled ? checked : internal;
+
+  function toggle() {
+    if (disabled) return;
+    const next = !isOn;
+    if (!isControlled) setInternal(next);
+    onCheckedChange?.(next);
+  }
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      id={id}
+      aria-checked={isOn}
+      aria-label={aria["aria-label"]}
+      aria-labelledby={aria["aria-labelledby"]}
+      disabled={disabled}
+      data-slot="switch"
+      data-state={isOn ? "checked" : "unchecked"}
+      onClick={toggle}
+      className={cn(
+        "group relative box-content inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full p-3 -m-3 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        astroClass,
+        className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none inline-flex h-6 w-11 items-center rounded-full transition-colors",
+          isOn ? "bg-primary" : "bg-muted",
+        )}
+      >
+        <span
+          className={cn(
+            "h-5 w-5 rounded-full bg-background shadow-sm transition-transform",
+            isOn ? "translate-x-[22px]" : "translate-x-0.5",
+          )}
+        />
+      </span>
+      {name ? (
+        <input
+          type="checkbox"
+          name={name}
+          value={value}
+          checked={isOn}
+          readOnly
+          hidden
+          aria-hidden="true"
+          tabIndex={-1}
+        />
+      ) : null}
+    </button>
+  );
+}

package/src/ui/tabs.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Tabs — a minimal accessible tab set.
+ *
+ * Deliberately NOT Radix (kept dependency-light): a small React
+ * context drives selection, with the WAI-ARIA tabs pattern —
+ * `role="tablist" / "tab" / "tabpanel"`, `aria-selected`,
+ * `aria-controls`/`aria-labelledby`, roving `tabIndex`, and
+ * Left/Right/Home/End keyboard navigation. Controlled (`value` +
+ * `onValueChange`) or uncontrolled (`defaultValue`). Colours come from
+ * the semantic tokens — no hex.
+ */
+interface TabsContextValue {
+  value: string;
+  setValue: (v: string) => void;
+  baseId: string;
+}
+
+const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+function useTabs(component: string): TabsContextValue {
+  const ctx = React.useContext(TabsContext);
+  if (!ctx) throw new Error(`<${component}> must be used within <Tabs>`);
+  return ctx;
+}
+
+export interface TabsProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  id?: string;
+  class?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  id,
+  class: astroClass,
+  className,
+  children,
+}: TabsProps) {
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = React.useState(defaultValue ?? "");
+  const current = isControlled ? value : internal;
+  const reactId = React.useId();
+  const baseId = id ?? reactId;
+
+  const setValue = React.useCallback(
+    (v: string) => {
+      if (!isControlled) setInternal(v);
+      onValueChange?.(v);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return (
+    <TabsContext.Provider value={{ value: current, setValue, baseId }}>
+      <div data-slot="tabs" className={cn(astroClass, className)}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+export interface TabsListProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  className?: string;
+}
+
+export function TabsList({
+  class: astroClass,
+  className,
+  children,
+  ...props
+}: TabsListProps) {
+  function onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    const keys = ["ArrowRight", "ArrowLeft", "Home", "End"];
+    if (!keys.includes(e.key)) return;
+    const tabs = Array.from(
+      e.currentTarget.querySelectorAll<HTMLButtonElement>(
+        '[role="tab"]:not([disabled])',
+      ),
+    );
+    const idx = tabs.indexOf(document.activeElement as HTMLButtonElement);
+    if (idx === -1) return;
+    e.preventDefault();
+    let next = idx;
+    if (e.key === "ArrowRight") next = (idx + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") next = (idx - 1 + tabs.length) % tabs.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = tabs.length - 1;
+    tabs[next]?.focus();
+    tabs[next]?.click();
+  }
+
+  return (
+    <div
+      role="tablist"
+      data-slot="tabs-list"
+      onKeyDown={onKeyDown}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full bg-muted p-1",
+        astroClass,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function TabsTrigger({
+  value,
+  disabled,
+  class: astroClass,
+  className,
+  children,
+}: TabsTriggerProps) {
+  const { value: current, setValue, baseId } = useTabs("TabsTrigger");
+  const selected = current === value;
+  return (
+    <button
+      type="button"
+      role="tab"
+      id={`${baseId}-trigger-${value}`}
+      aria-selected={selected}
+      aria-controls={`${baseId}-content-${value}`}
+      tabIndex={selected ? 0 : -1}
+      disabled={disabled}
+      data-slot="tabs-trigger"
+      data-state={selected ? "active" : "inactive"}
+      onClick={() => setValue(value)}
+      className={cn(
+        "inline-flex h-10 items-center justify-center rounded-full px-4 text-body-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        selected
+          ? "bg-background text-foreground shadow-sm"
+          : "text-muted-foreground hover:text-foreground",
+        astroClass,
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export interface TabsContentProps {
+  value: string;
+  class?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function TabsContent({
+  value,
+  class: astroClass,
+  className,
+  children,
+}: TabsContentProps) {
+  const { value: current, baseId } = useTabs("TabsContent");
+  const selected = current === value;
+  return (
+    <div
+      role="tabpanel"
+      id={`${baseId}-content-${value}`}
+      aria-labelledby={`${baseId}-trigger-${value}`}
+      hidden={!selected}
+      tabIndex={0}
+      data-slot="tabs-content"
+      data-state={selected ? "active" : "inactive"}
+      className={cn(
+        "mt-4 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        astroClass,
+        className,
+      )}
+    >
+      {selected ? children : null}
+    </div>
+  );
+}

package/src/ui/textarea.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Textarea — native <textarea> styled to the Nyuchi Design System
+ * tokens (shadcn pattern over the Five-African-Minerals tokens).
+ * Dependency-free and SSR-friendly. Forwards every standard textarea
+ * prop (name, id, placeholder, required, rows, value, defaultValue, …)
+ * via `...props`.
+ */
+export const textareaClasses =
+  "flex min-h-24 w-full rounded-lg border border-border bg-background px-4 py-3 text-body text-foreground transition-colors placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Astro-style class attribute (merged with `className`). */
+  class?: string;
+  className?: string;
+}
+
+export function Textarea({
+  class: astroClass,
+  className,
+  ...props
+}: TextareaProps) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(textareaClasses, astroClass, className)}
+      {...props}
+    />
+  );
+}