@zedtech/zedkit-ui 0.0.0-stage → 0.1.1

package/src/field.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import type * as React from "react";
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils.js";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "[&>[data-slot=field-label]]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+      responsive: [
+        "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors) {
+      return null;
+    }
+
+    if (errors?.length === 1 && errors[0]?.message) {
+      return errors[0].message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};

package/src/form-submit.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import type * as React from "react";
+import { useFormContext } from "react-hook-form";
+
+import { Button, type ButtonProps } from "./button.js";
+
+export type FormSubmitProps = Omit<ButtonProps, "type"> & {
+  /**
+   * Label shown while the form submits. Defaults to `children`.
+   * Both come from the caller (message catalog), never hard-coded.
+   */
+  pendingLabel?: React.ReactNode;
+};
+
+/**
+ * Submit button wired to the enclosing form: disabled while the
+ * submission is in flight, with an optional pending label.
+ * Must render inside `<Form>` (uses the form context).
+ */
+export function FormSubmit({ pendingLabel, children, disabled, ...props }: FormSubmitProps) {
+  const { formState } = useFormContext();
+  const pending = formState.isSubmitting;
+  return (
+    <Button type="submit" disabled={disabled === true || pending} {...props}>
+      {pending && pendingLabel !== undefined ? pendingLabel : children}
+    </Button>
+  );
+}

package/src/form.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "./utils.js";
+import { Label } from "./label.js";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return (
+      <p ref={ref} id={formDescriptionId} className={cn("text-[0.8rem] text-muted-foreground", className)} {...props} />
+    );
+  },
+);
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? "") : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p
+        ref={ref}
+        id={formMessageId}
+        className={cn("text-[0.8rem] font-medium text-destructive", className)}
+        {...props}
+      >
+        {body}
+      </p>
+    );
+  },
+);
+FormMessage.displayName = "FormMessage";
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/src/index.ts

@@ -0,0 +1,95 @@
+export { Alert, AlertDescription, AlertTitle } from "./alert.js";
+export { AppShell, type AppShellProps } from "./app-shell.js";
+export { Badge, badgeVariants } from "./badge.js";
+export { Button, buttonVariants, type ButtonProps } from "./button.js";
+export { ConfirmDialog, type ConfirmDialogProps } from "./confirm-dialog.js";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+export { Checkbox } from "./checkbox.js";
+export {
+  DataTable,
+  createDataTableColumns,
+  type DataTableColumn,
+  type DataTableProps,
+} from "./data-table.js";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog.js";
+export { DetailPanel, type DetailItem, type DetailPanelProps } from "./detail-panel.js";
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "./field.js";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+} from "./form.js";
+export { FormSubmit, type FormSubmitProps } from "./form-submit.js";
+export { useValidatedForm } from "./use-validated-form.js";
+export { Input } from "./input.js";
+export { Label } from "./label.js";
+export { Section, Stack, stackVariants, type SectionProps, type StackProps } from "./layout.js";
+export { LivePulse, type LivePulseProps } from "./live-pulse.js";
+export { OptionCards, type OptionCard, type OptionCardsProps } from "./option-cards.js";
+export { PageHeader, type PageHeaderProps } from "./page-header.js";
+export { SecretField, type SecretFieldProps } from "./secret-field.js";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select.js";
+export { Separator } from "./separator.js";
+export { Skeleton } from "./skeleton.js";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table.js";
+export { WizardSteps, type WizardStepsProps } from "./wizard-steps.js";
+export { Switch } from "./switch.js";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+export { Textarea } from "./textarea.js";
+export { Toaster } from "./sonner.js";
+export {
+  Heading,
+  headingVariants,
+  Text,
+  textVariants,
+  type HeadingProps,
+  type TextProps,
+} from "./typography.js";
+export { cn } from "./utils.js";

package/src/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "./utils.js";
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/label.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./utils.js";
+
+const labelVariants = cva(
+  "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/layout.tsx

@@ -0,0 +1,69 @@
+import type * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils.js";
+import { Heading } from "./typography.js";
+import { Text } from "./typography.js";
+
+// No shadcn source exists for layout stacks/sections, so these two
+// thin wrappers carry the documented spacing patterns. They exist so
+// consumers can replace raw <section>/<div> stacks entirely.
+
+const stackVariants = cva("flex", {
+  variants: {
+    direction: {
+      vertical: "flex-col",
+      horizontal: "flex-row items-center",
+    },
+    gap: {
+      1: "gap-1",
+      2: "gap-2",
+      3: "gap-3",
+      4: "gap-4",
+      6: "gap-6",
+      8: "gap-8",
+    },
+  },
+  defaultVariants: {
+    direction: "vertical",
+    gap: 4,
+  },
+});
+
+export type StackProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof stackVariants> & {
+    direction?: "vertical" | "horizontal";
+    gap?: 1 | 2 | 3 | 4 | 6 | 8;
+  };
+
+function Stack({ direction, gap, className, ...props }: StackProps) {
+  return <div className={cn(stackVariants({ direction, gap }), className)} {...props} />;
+}
+
+export type SectionProps = React.HTMLAttributes<HTMLElement> & {
+  /** Section title, rendered as a level-2 heading. */
+  title?: React.ReactNode;
+  /** Muted description under the title. */
+  description?: React.ReactNode;
+  /** Actions row, right-aligned next to the title. */
+  actions?: React.ReactNode;
+};
+
+function Section({ title, description, actions, children, className, ...props }: SectionProps) {
+  return (
+    <section className={cn("space-y-4", className)} {...props}>
+      {(title || actions) && (
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            {title && <Heading level={2}>{title}</Heading>}
+            {description && <Text variant="muted">{description}</Text>}
+          </div>
+          {actions}
+        </div>
+      )}
+      {children}
+    </section>
+  );
+}
+
+export { Stack, stackVariants, Section };

package/src/live-pulse.tsx

@@ -0,0 +1,27 @@
+import { cn } from "./utils.js";
+
+export interface LivePulseProps {
+  active?: boolean;
+  label?: string;
+  className?: string;
+}
+
+export function LivePulse({ active = true, label = "Live", className }: LivePulseProps) {
+  return (
+    <span
+      role="status"
+      aria-label={active ? label : "Idle"}
+      className={cn("inline-flex items-center gap-1.5 text-xs text-muted-foreground", className)}
+    >
+      <span className="relative flex size-2">
+        {active ? (
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-60" />
+        ) : null}
+        <span
+          className={cn("relative inline-flex size-2 rounded-full", active ? "bg-success" : "bg-muted-foreground/40")}
+        />
+      </span>
+      {active ? label : "Idle"}
+    </span>
+  );
+}

package/src/option-cards.tsx

@@ -0,0 +1,47 @@
+import type * as React from "react";
+
+import { cn } from "./utils.js";
+
+export interface OptionCard {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+export interface OptionCardsProps {
+  options: OptionCard[];
+  selected: string[];
+  onChange: (ids: string[]) => void;
+  label?: string;
+  className?: string;
+}
+
+export function OptionCards({ options, selected, onChange, label = "Options", className }: OptionCardsProps) {
+  function toggle(id: string): void {
+    onChange(selected.includes(id) ? selected.filter((entry) => entry !== id) : [...selected, id]);
+  }
+
+  return (
+    <div role="group" aria-label={label} className={cn("grid gap-3 sm:grid-cols-2", className)}>
+      {options.map((option) => (
+        <label
+          key={option.id}
+          className="flex cursor-pointer gap-3 rounded-lg border p-4 transition-colors hover:border-muted-foreground/40 has-[:checked]:border-primary has-[:checked]:bg-primary/5 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring"
+        >
+          <input
+            type="checkbox"
+            className="sr-only"
+            checked={selected.includes(option.id)}
+            onChange={() => toggle(option.id)}
+          />
+          <span>
+            <span className="block font-medium">{option.title}</span>
+            {option.description ? (
+              <span className="block text-sm text-muted-foreground">{option.description}</span>
+            ) : null}
+          </span>
+        </label>
+      ))}
+    </div>
+  );
+}