@mahiraltinkaya/me-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mahir Altınkaya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# me-ui
+
+Copies the design system's components into your project. They land as your files —
+edit them, restyle them, delete the parts you do not need. Nothing is imported from
+`node_modules` at runtime, so there is no version to keep in step and no wrapper to
+fight when a screen needs something slightly different.
+
+```bash
+npx @mahiraltinkaya/me-ui add input
+```
+
+## Commands
+
+```bash
+npx @mahiraltinkaya/me-ui add <item…>     # copy items and everything they depend on
+npx @mahiraltinkaya/me-ui list            # show every item
+```
+
+| Option             |                                                      |
+| ------------------ | ---------------------------------------------------- |
+| `-c, --cwd <path>` | project to install into (default: current directory) |
+| `-o, --overwrite`  | replace files that already exist                     |
+| `--dry-run`        | show what would happen, write nothing                |
+| `--skip-install`   | do not run the package manager                       |
+
+Existing files are never replaced silently. A file you have edited is reported and
+left alone until you pass `--overwrite`, so re-running `add` to pick up a dependency
+cannot cost you local changes.
+
+## Items
+
+| Item               | What it is                                                         |
+| ------------------ | ------------------------------------------------------------------ |
+| `utils`            | `cn` — clsx piped through tailwind-merge.                          |
+| `brand-theme`      | The `--brand` token the fields paint focus and error states with.  |
+| `field-hint`       | Focus-driven explanatory panel anchored to a field.                |
+| `input`            | Text field with optional leading icon and hint.                    |
+| `select`           | Dropdown over a string list, matching `input`'s affordances.       |
+| `button`           | Button with `cva` variant and size sets.                           |
+| `tooltip`          | Tooltip provider, root, trigger and content.                       |
+| `stepper`          | Progress rail for multi-step flows. **Requires Next.js.**          |
+| `stepper-provider` | Step state, next/back guards and the `useStepper` hook.            |
+| `step-field`       | Label, control and validation message.                             |
+| `form-fields`      | `FormInput` and `FormSelect`, bound to react-hook-form.            |
+| `normalize`        | `digits` — strips everything that is not a digit.                  |
+| `tckn`             | T.C. kimlik no validation, check digits included.                  |
+| `quote-schema`     | Zod schemas for the quote flow, plus per-step fields and defaults. |
+
+Dependencies resolve on their own — `me-ui add form-fields` also brings `input`,
+`select`, `step-field`, `cn`, the npm packages and the `--brand` token.
+
+## Where files land
+
+A `components.json` is honoured when the project has one, so files follow the
+aliases the rest of its UI already uses. Otherwise the CLI reads `tsconfig.json`
+paths, falling back to the `src/` convention:
+
+| Registry path     | Default destination      |
+| ----------------- | ------------------------ |
+| `components/ui/…` | `src/components/ui/…`    |
+| `components/…`    | `src/components/…`       |
+| `lib/…`           | `src/lib/…`              |
+| `assets/…`        | `public/assets/images/…` |
+
+Imports inside the copied files are rewritten to match, whatever the aliases are.
+
+## What the project needs first
+
+- **React 19** and **Tailwind CSS v4**.
+- **A shadcn base theme.** The components style against `--border`, `--input`,
+  `--muted-foreground` and friends. `add` warns about any that are missing —
+  `npx shadcn@latest init` is the quickest way to get them.
+- **Next.js**, but only for `stepper`, which renders its divider with `next/image`.
+
+## Publishing
+
+Public package on npmjs.com — anyone can run `npx @mahiraltinkaya/me-ui` without an account or a
+token.
+
+```bash
+bun run ui:sync                 # from the repo root, after changing any component
+cd packages/me-ui
+npm version patch               # npm refuses to overwrite a published version
+npm publish
+```
+
+`prepublishOnly` re-checks that `registry/` still matches the app it was copied
+from, so a stale component cannot ship.
+
+Copied files do not update themselves — that is the point of copying rather than
+importing. To take a newer version of a component:
+
+```bash
+npx @mahiraltinkaya/me-ui@latest add input --overwrite
+```
+
+`@latest` matters because npx will otherwise happily reuse a cached older build,
+and `--overwrite` matters because `add` protects existing files by default. Run it
+with `--dry-run` first if the file has local edits worth keeping.

package/bin/me-ui.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { parseArgs } from "../src/args.js";
+import { add } from "../src/commands/add.js";
+import { list } from "../src/commands/list.js";
+import { bold, cyan, dim, fail, line } from "../src/log.js";
+
+const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
+const { version } = JSON.parse(readFileSync(join(packageRoot, "package.json"), "utf8"));
+
+const HELP = `
+${bold("me-ui")} ${dim(`v${version}`)}
+
+  Copies components into your project. They become your files — edit them freely.
+
+${bold("Usage")}
+  ${cyan("npx @mahiraltinkaya/me-ui add")} <item…>     copy items and their dependencies
+  ${cyan("npx @mahiraltinkaya/me-ui list")}            show every item
+
+${bold("Options")}
+  -c, --cwd <path>            project to install into ${dim("(default: current directory)")}
+  -o, --overwrite             replace files that already exist
+      --dry-run               show what would happen, write nothing
+      --skip-install          do not run the package manager
+  -h, --help                  this text
+  -v, --version               print the version
+
+${bold("Examples")}
+  ${dim("$")} npx @mahiraltinkaya/me-ui add input
+  ${dim("$")} npx @mahiraltinkaya/me-ui add form-fields quote-schema
+  ${dim("$")} npx @mahiraltinkaya/me-ui add stepper --dry-run
+`;
+
+function main() {
+  const options = parseArgs(process.argv.slice(2));
+
+  if (options.version) return line(version);
+  if (options.help || !options.command) return line(HELP);
+
+  switch (options.command) {
+    case "add":
+      return add(options);
+    case "list":
+    case "ls":
+      return list();
+    default:
+      throw new Error(`Unknown command "${options.command}". Try \`me-ui --help\`.`);
+  }
+}
+
+try {
+  main();
+} catch (error) {
+  fail(error.message);
+  process.exit(1);
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@mahiraltinkaya/me-ui",
+  "version": "0.1.0",
+  "description": "Copy React + Tailwind form components into any project — they become your files, not a dependency.",
+  "type": "module",
+  "bin": {
+    "me-ui": "bin/me-ui.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "registry",
+    "registry.json"
+  ],
+  "engines": {
+    "node": ">=20.11"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublishOnly": "node ../../scripts/sync-registry.mjs --check"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "react",
+    "tailwind",
+    "base-ui",
+    "shadcn",
+    "cli"
+  ],
+  "license": "MIT"
+}

package/registry/assets/breadcrumb_arrow.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="70" viewBox="0 0 25 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 269" d="M1 1L23.6667 35L1 69" stroke="#CBD6DE"/>
+</svg>

package/registry/components/stepper-provider.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import * as React from "react";
+
+import type { StepItem } from "@/components/ui/stepper";
+
+export interface StepperContextValue {
+  steps: StepItem[];
+  currentStep: number;
+  totalSteps: number;
+  isFirstStep: boolean;
+  isLastStep: boolean;
+  goNext: () => Promise<boolean>;
+  goBack: () => void;
+  goToStep: (index: number) => void;
+}
+
+const StepperContext = React.createContext<StepperContextValue | null>(null);
+
+export function useStepper() {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a <StepperProvider>");
+  }
+  return context;
+}
+
+export interface StepperProviderProps {
+  steps: StepItem[];
+  initialStep?: number;
+  onStepChange?: (index: number) => void;
+  beforeNext?: (index: number) => boolean | Promise<boolean>;
+  children: React.ReactNode;
+}
+
+/**
+ * Step state and nothing else — no markup of its own.
+ *
+ * The rail and the active step are rendered by `<StepperView>`, which reads
+ * this context. Keeping them apart means a consumer can drive step state from
+ * a layout this component knows nothing about.
+ */
+function StepperProvider({
+  steps,
+  initialStep = 0,
+  onStepChange,
+  beforeNext,
+  children,
+}: StepperProviderProps) {
+  const [currentStep, setCurrentStep] = React.useState(initialStep);
+  const totalSteps = steps.length;
+
+  const goToStep = React.useCallback(
+    (index: number) => {
+      const clamped = Math.min(Math.max(index, 0), totalSteps - 1);
+      setCurrentStep(clamped);
+      onStepChange?.(clamped);
+    },
+    [totalSteps, onStepChange],
+  );
+
+  const goNext = React.useCallback(async () => {
+    const allowed = (await beforeNext?.(currentStep)) ?? true;
+    if (!allowed) return false;
+    goToStep(currentStep + 1);
+    return true;
+  }, [beforeNext, currentStep, goToStep]);
+
+  const goBack = React.useCallback(() => goToStep(currentStep - 1), [currentStep, goToStep]);
+
+  const value = React.useMemo<StepperContextValue>(
+    () => ({
+      steps,
+      currentStep,
+      totalSteps,
+      isFirstStep: currentStep === 0,
+      isLastStep: currentStep === totalSteps - 1,
+      goNext,
+      goBack,
+      goToStep,
+    }),
+    [steps, currentStep, totalSteps, goNext, goBack, goToStep],
+  );
+
+  return <StepperContext.Provider value={value}>{children}</StepperContext.Provider>;
+}
+
+export { StepperProvider };

package/registry/components/stepper-view.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+
+import { useStepper } from "@/components/stepper-provider";
+import { Stepper } from "@/components/ui/stepper";
+import { cn } from "@/lib/utils";
+
+export interface StepperViewProps {
+  className?: string;
+  /** One child per step, in the same order as the provider's `steps`. */
+  children: React.ReactNode;
+}
+
+/**
+ * Renders the progress rail and the child sitting at the active index.
+ *
+ * The live region is what tells a screen reader the step changed: the rail is
+ * `aria-hidden` decoration and swapping the panel underneath it is otherwise a
+ * silent DOM update.
+ */
+function StepperView({ className, children }: StepperViewProps) {
+  const { steps, currentStep, totalSteps, goToStep } = useStepper();
+
+  // Children only change when the caller re-renders with a different set, so
+  // the array is not rebuilt on every step change.
+  const stepChildren = React.useMemo(() => React.Children.toArray(children), [children]);
+
+  return (
+    <div className={cn("flex w-full flex-col gap-10", className)}>
+      <Stepper steps={steps} currentStep={currentStep} onStepChange={goToStep} />
+      <p aria-live="polite" className="sr-only">
+        {`Adım ${currentStep + 1} / ${totalSteps}: ${steps[currentStep]?.label ?? ""}`}
+      </p>
+      {stepChildren[currentStep]}
+    </div>
+  );
+}
+
+export { StepperView };

package/registry/components/steps/form-input.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useCallback, type ChangeEvent } from "react";
+import { useController, type FieldValues, type Path } from "react-hook-form";
+
+import { Input, type InputProps } from "@/components/ui/input";
+import { StepField, errorIdFor } from "@/components/steps/step-field";
+
+export interface FormInputProps<T extends FieldValues> extends Omit<
+  InputProps,
+  "name" | "defaultValue" | "value" | "onChange" | "onBlur"
+> {
+  name: Path<T>;
+  label: string;
+  /**
+   * Applied to every keystroke and paste before the value reaches the form, so
+   * what is stored is already canonical. When set, `maxLength` counts
+   * normalized characters rather than typed ones.
+   */
+  normalize?: (value: string) => string;
+}
+
+/**
+ * Text field bound to the surrounding react-hook-form context.
+ *
+ * `useController` subscribes to this field alone, so a validation error on one
+ * field re-renders only that field — never its siblings or the step card.
+ */
+function FormInput<T extends FieldValues>({
+  name,
+  label,
+  normalize,
+  maxLength,
+  ...props
+}: FormInputProps<T>) {
+  const { field, fieldState } = useController<T>({ name });
+  const error = fieldState.error?.message;
+  const { onChange } = field;
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!normalize) return onChange(event);
+      const next = normalize(event.target.value);
+      onChange(maxLength === undefined ? next : next.slice(0, maxLength));
+    },
+    [normalize, maxLength, onChange],
+  );
+
+  return (
+    <StepField label={label} htmlFor={name} error={error}>
+      <Input
+        id={name}
+        {...props}
+        {...field}
+        value={field.value ?? ""}
+        onChange={handleChange}
+        // Enforced after normalizing rather than by the DOM. The browser clips
+        // the raw text on paste, so `0532 123 45 67` would lose its last digits
+        // before the spaces were ever removed.
+        maxLength={normalize ? undefined : maxLength}
+        aria-invalid={Boolean(error)}
+        aria-describedby={error ? errorIdFor(name) : undefined}
+      />
+    </StepField>
+  );
+}
+
+export { FormInput };

package/registry/components/steps/form-select.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useController, type FieldValues, type Path } from "react-hook-form";
+
+import { Select, type SelectProps } from "@/components/ui/select";
+import { StepField, errorIdFor } from "@/components/steps/step-field";
+
+export interface FormSelectProps<T extends FieldValues> extends Omit<
+  SelectProps,
+  "value" | "onValueChange" | "onClose" | "id" | "name" | "invalid" | "describedBy"
+> {
+  name: Path<T>;
+  label: string;
+}
+
+/**
+ * Dropdown bound to the surrounding react-hook-form context.
+ *
+ * Closing the popup counts as the blur, which is what makes `onTouched`
+ * validation behave the same here as it does for text fields.
+ */
+function FormSelect<T extends FieldValues>({ name, label, ...props }: FormSelectProps<T>) {
+  const { field, fieldState } = useController<T>({ name });
+  const error = fieldState.error?.message;
+
+  return (
+    <StepField label={label} htmlFor={name} error={error}>
+      <Select
+        {...props}
+        id={name}
+        name={field.name}
+        value={field.value ?? null}
+        invalid={Boolean(error)}
+        describedBy={error ? errorIdFor(name) : undefined}
+        onValueChange={field.onChange}
+        onClose={field.onBlur}
+      />
+    </StepField>
+  );
+}
+
+export { FormSelect };

package/registry/components/steps/step-field.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Info } from "lucide-react";
+
+export interface StepFieldProps {
+  label: string;
+  children: ReactNode;
+  /** Associates the label with the control it wraps, and names its error node. */
+  htmlFor?: string;
+  /** Validation message rendered under the control. */
+  error?: string;
+}
+
+/** Id the control should point `aria-describedby` at when this field is invalid. */
+export const errorIdFor = (name: string) => `${name}-error`;
+
+/** Label + control + validation message. Layout only — it holds no form state. */
+function StepField({ label, children, htmlFor, error }: StepFieldProps) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label
+        htmlFor={htmlFor}
+        className="text-muted-foreground text-xs font-medium tracking-wide uppercase"
+      >
+        {label}
+      </label>
+      {children}
+      {error ? (
+        <p
+          id={htmlFor ? errorIdFor(htmlFor) : undefined}
+          role="alert"
+          className="text-brand flex items-center gap-1.5 text-xs font-medium"
+        >
+          <Info className="size-3.5 shrink-0" />
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export { StepField };

package/registry/components/ui/button.tsx

@@ -0,0 +1,69 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        brand: "bg-brand text-white hover:bg-[color-mix(in_oklab,var(--brand)_88%,white)]",
+        ink: "bg-cta text-white hover:bg-cta-hover",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        // The form and purchase controls the quote flow uses — a full-height
+        // touch target, unlike the compact toolbar sizes above.
+        xl: "h-12 gap-2 px-6",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+      shape: {
+        default: "",
+        pill: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  shape = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, shape, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/registry/components/ui/field-hint.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Tooltip } from "@base-ui/react/tooltip";
+import { Info } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Solid triangle on the popup edge nearest the field. Base UI places the element
+ * along the correct edge; the rotations below point it outward per side.
+ */
+const ARROW_CLASS =
+  "relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:bg-ink before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
+export interface FieldHintContent {
+  title: string;
+  description: string;
+}
+
+export interface FieldHintProps {
+  hint: FieldHintContent;
+  /** Driven by the field's focus state — the field is the only trigger. */
+  open: boolean;
+  /** Ties the popup to the field through `aria-describedby`. */
+  id: string;
+  className?: string;
+}
+
+/**
+ * Explanatory panel anchored to a field's trailing info mark.
+ *
+ * Built on Tooltip rather than Popover on purpose: a popover moves focus into
+ * itself when it opens, which would pull focus straight back out of the field
+ * that opened it. A tooltip never takes focus, and `role="tooltip"` is what this
+ * content actually is.
+ *
+ * The mark is a plain span with pointer events off, so hovering it does nothing;
+ * `open` is the single source of truth.
+ */
+function FieldHint({ hint, open, id, className }: FieldHintProps) {
+  return (
+    <Tooltip.Root open={open}>
+      <Tooltip.Trigger
+        render={<span aria-hidden />}
+        className={cn(
+          "group text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2",
+          className,
+        )}
+      >
+        <Info className="group-data-[popup-open]:fill-brand size-4 transition-colors group-data-[popup-open]:text-white" />
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Positioner side="right" sideOffset={28} collisionPadding={16} className="z-50">
+          <Tooltip.Popup
+            id={id}
+            className="bg-ink w-72 max-w-[calc(100vw-2rem)] origin-[var(--transform-origin)] rounded-xl px-5 py-4 text-left shadow-xl transition-[opacity,scale] duration-150 data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0"
+          >
+            <Tooltip.Arrow className={ARROW_CLASS} />
+            <p className="text-sm font-semibold text-white">{hint.title}</p>
+            <p className="mt-1.5 text-xs leading-relaxed text-white/70">{hint.description}</p>
+          </Tooltip.Popup>
+        </Tooltip.Positioner>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}
+
+export { FieldHint };