@zedtech/zedkit-ui 0.0.0-stage → 0.1.0

package/src/tabs.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "./utils.js";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn("inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className)}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "./utils.js";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/typography.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils.js";
+
+// No shadcn registry item exists for typography (docs-only class
+// recipes), so these two thin wrappers carry the documented styles.
+// They exist so consumers can ban raw h1-h6/p tags entirely.
+
+const headingVariants = cva("scroll-m-20 tracking-tight", {
+  variants: {
+    level: {
+      1: "text-4xl font-extrabold lg:text-5xl",
+      2: "text-3xl font-semibold",
+      3: "text-2xl font-semibold",
+      4: "text-xl font-semibold",
+    },
+  },
+  defaultVariants: {
+    level: 1,
+  },
+});
+
+export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
+  VariantProps<typeof headingVariants> & {
+    /** Heading level: picks the default tag (`h1`-`h4`) and size. */
+    level?: 1 | 2 | 3 | 4;
+    /** Tag override when the outline needs a different element. */
+    as?: "h1" | "h2" | "h3" | "h4" | "div";
+  };
+
+function Heading({ level = 1, as, className, ...props }: HeadingProps) {
+  const Tag = (as ?? `h${level}`) as "h1";
+  return <Tag className={cn(headingVariants({ level }), className)} {...props} />;
+}
+
+const textVariants = cva("leading-7", {
+  variants: {
+    variant: {
+      body: "",
+      muted: "text-sm text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "body",
+  },
+});
+
+export type TextProps = React.HTMLAttributes<HTMLParagraphElement> &
+  VariantProps<typeof textVariants> & {
+    /** Tag override (`p` by default). */
+    as?: "p" | "span" | "div";
+  };
+
+function Text({ variant, as: Tag = "p", className, ...props }: TextProps) {
+  return <Tag className={cn(textVariants({ variant }), className)} {...props} />;
+}
+
+export { Heading, headingVariants, Text, textVariants };

package/src/use-validated-form.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  useForm,
+  type FieldValues,
+  type Resolver,
+  type UseFormProps,
+  type UseFormReturn,
+} from "react-hook-form";
+
+/**
+ * Validated form in one call: the zod schema is the single source of
+ * truth (in a real app it lives in the shared contracts package next
+ * to the API validators) and the resolver wiring stays inside the
+ * kit, so consumers never import the resolver library directly.
+ */
+export function useValidatedForm<TFieldValues extends FieldValues>(
+  schema: Parameters<typeof zodResolver>[0],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirrors useForm's own context type (any)
+  options: Omit<UseFormProps<TFieldValues, any>, "resolver"> = {},
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirrors useForm's own context type (any)
+): UseFormReturn<TFieldValues, any, TFieldValues> {
+  // The resolver is exact for this schema, but react-hook-form's
+  // Resolver is invariant in its options type, so a schema-typed
+  // resolver cannot flow through the generic untouched (same
+  // upstream-invariance situation as the data-table columns).
+  const resolver = zodResolver(schema) as Resolver<TFieldValues>;
+  return useForm<TFieldValues>({ ...options, resolver });
+}

package/src/utils.ts

@@ -0,0 +1,11 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges class names, with tailwind-merge resolving conflicting
+ * Tailwind utilities (last one wins). Every component takes an
+ * optional className that flows through here.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/wizard-steps.tsx

@@ -0,0 +1,40 @@
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "./utils.js";
+
+export interface WizardStepsProps {
+  steps: string[];
+  /** 0-based index of the current step. */
+  current: number;
+  className?: string;
+}
+
+export function WizardSteps({ steps, current, className }: WizardStepsProps) {
+  return (
+    <ol className={cn("flex flex-wrap items-center gap-x-3 gap-y-2", className)} aria-label="Progress">
+      {steps.map((step, index) => (
+        <li
+          key={step}
+          aria-current={index === current ? "step" : undefined}
+          className="flex items-center gap-2 text-sm"
+        >
+          <span
+            aria-hidden
+            className={cn(
+              "flex size-6 items-center justify-center rounded-full border text-xs font-medium",
+              index < current && "border-primary bg-primary text-primary-foreground",
+              index === current && "border-primary text-primary",
+              index > current && "text-muted-foreground",
+            )}
+          >
+            {index < current ? <CheckIcon className="size-3.5" /> : index + 1}
+          </span>
+          <span className={cn(index === current ? "font-medium" : "text-muted-foreground")}>{step}</span>
+          {index < steps.length - 1 ? (
+            <span aria-hidden className="ml-1 h-px w-6 bg-border" />
+          ) : null}
+        </li>
+      ))}
+    </ol>
+  );
+}