@mahiraltinkaya/me-ui 0.1.0 → 0.2.0

package/README.md

@@ -38,7 +38,7 @@ cannot cost you local changes.
 | `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`          | Progress rail for multi-step flows.                                |
 | `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.            |
@@ -55,12 +55,11 @@ 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/…` |
+| Registry path     | Default destination   |
+| ----------------- | --------------------- |
+| `components/ui/…` | `src/components/ui/…` |
+| `components/…`    | `src/components/…`    |
+| `lib/…`           | `src/lib/…`           |
 
 Imports inside the copied files are rewritten to match, whatever the aliases are.
 
@@ -70,7 +69,6 @@ Imports inside the copied files are rewritten to match, whatever the aliases are
 - **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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mahiraltinkaya/me-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Copy React + Tailwind form components into any project — they become your files, not a dependency.",
   "type": "module",
   "bin": {

package/registry/components/stepper-provider.tsx

@@ -33,13 +33,6 @@ export interface StepperProviderProps {
   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,

package/registry/components/stepper-view.tsx

@@ -8,22 +8,12 @@ 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 (

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

@@ -5,10 +5,6 @@ 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)]";
 
@@ -19,24 +15,11 @@ export interface FieldHintContent {
 
 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}>

package/registry/components/ui/input.tsx

@@ -28,8 +28,6 @@ function Input({
   const hintId = id ? `${id}-hint` : undefined;
   const hintOpen = Boolean(tooltip) && focused;
 
-  // Merged rather than replaced: the field can be described by both its
-  // validation message and the hint panel at the same time.
   const describedByAll =
     [describedBy, hintOpen ? hintId : undefined].filter(Boolean).join(" ") || undefined;
 

package/registry/components/ui/stepper/index.tsx

@@ -3,7 +3,6 @@
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
-import { StepperProgress } from "@/components/ui/stepper/stepper-progress";
 import { StepperRail } from "@/components/ui/stepper/stepper-rail";
 import type { StepperLayoutProps } from "@/components/ui/stepper/types";
 
@@ -15,7 +14,6 @@ export interface StepperProps
 function Stepper({ steps, currentStep, onStepChange, className, ...props }: StepperProps) {
   return (
     <div className={cn("w-full", className)} {...props}>
-      <StepperProgress steps={steps} currentStep={currentStep} />
       <StepperRail steps={steps} currentStep={currentStep} onStepChange={onStepChange} />
     </div>
   );

package/registry/components/ui/stepper/step-divider.tsx

@@ -1,19 +1,20 @@
 import { memo } from "react";
-import Image from "next/image";
-
 const StepDivider = memo(function StepDivider() {
   return (
-    <span className="relative block h-full w-12 shrink-0">
-      <Image
-        src="/assets/images/breadcrumb_arrow.svg"
-        alt=""
-        aria-hidden
-        unoptimized
-        fill
-        sizes="21px"
-        className="object-contain"
+    <svg
+      aria-hidden
+      viewBox="0 0 25 70"
+      preserveAspectRatio="xMidYMid meet"
+      className="block h-full w-5 shrink-0 text-zinc-300 md:w-12"
+    >
+      <path
+        d="M1 1L23.6667 35L1 69"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
-    </span>
+    </svg>
   );
 });
 

package/registry/components/ui/stepper/step-indicator.tsx

@@ -21,7 +21,7 @@ const StepIndicator = memo(function StepIndicator({ status, index, icon }: StepI
     <span
       aria-hidden
       className={cn(
-        "flex size-9 shrink-0 items-center justify-center rounded-full text-[0.9375rem] font-semibold transition-colors duration-200",
+        "flex size-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold transition-colors duration-200 md:size-9 md:text-[0.9375rem]",
         indicatorStyles[status],
       )}
     >

package/registry/components/ui/stepper/step-label.tsx

@@ -5,7 +5,7 @@ import type { StepStatus } from "@/components/ui/stepper/types";
 
 const labelStyles: Record<StepStatus, string> = {
   completed: "text-zinc-900 font-semibold",
-  current: "text-zinc-900 font-semibold",
+  current: "text-brand md:text-zinc-900 font-semibold",
   upcoming: "text-zinc-400 font-medium",
 };
 
@@ -13,12 +13,24 @@ export interface StepLabelProps {
   label: string;
   description?: string;
   status: StepStatus;
+  className?: string;
 }
 
-const StepLabel = memo(function StepLabel({ label, description, status }: StepLabelProps) {
+const StepLabel = memo(function StepLabel({
+  label,
+  description,
+  status,
+  className,
+}: StepLabelProps) {
   return (
-    <span className={cn("flex min-w-0 flex-col text-left transition-colors", labelStyles[status])}>
-      <span className="truncate text-[0.9375rem] whitespace-nowrap">{label}</span>
+    <span
+      className={cn(
+        "flex min-w-0 flex-col text-left transition-colors",
+        labelStyles[status],
+        className,
+      )}
+    >
+      <span className="truncate text-sm whitespace-nowrap md:text-[0.9375rem]">{label}</span>
       {description ? (
         <span className="truncate text-xs whitespace-nowrap opacity-70">{description}</span>
       ) : null}

package/registry/components/ui/stepper/stepper-rail.tsx

@@ -28,7 +28,7 @@ function StepperRailItem({ step, index, currentStep, onStepChange }: StepperRail
   const handleClick = useCallback(() => onStepChange?.(index), [onStepChange, index]);
 
   const className = cn(
-    "flex w-full items-center gap-4 rounded-full px-2.5 py-2.5 transition-colors duration-200",
+    "flex w-full items-center gap-2 rounded-full px-2 py-2.5 transition-colors duration-200 md:gap-4 md:px-2.5",
     isCurrent && "bg-white",
     clickable &&
       "cursor-pointer hover:bg-white/60 focus-visible:outline-brand focus-visible:outline-2 focus-visible:outline-offset-2",
@@ -37,7 +37,15 @@ function StepperRailItem({ step, index, currentStep, onStepChange }: StepperRail
   const content = (
     <>
       <StepIndicator status={status} index={index} icon={step.icon} />
-      <StepLabel label={step.label} description={step.description} status={status} />
+      <StepLabel
+        label={step.label}
+        description={step.description}
+        status={status}
+        // Below `md` only the active step is legible enough to be worth the
+        // width. `sr-only` rather than `hidden`, so the other steps keep their
+        // names in the accessibility tree instead of becoming bare numbers.
+        className={cn(!isCurrent && "sr-only md:not-sr-only md:flex")}
+      />
     </>
   );
 
@@ -76,15 +84,20 @@ const StepperRail = memo(function StepperRail({
   onStepChange,
 }: StepperLayoutProps) {
   return (
-    <nav aria-label="İlerleme" data-slot="stepper" className="relative hidden md:block">
+    <nav aria-label="İlerleme" data-slot="stepper" className="relative block">
       <span
         aria-hidden
         className="pointer-events-none absolute top-1/2 left-1/2 h-px w-screen -translate-x-1/2 -translate-y-1/2 bg-zinc-200/80"
       />
-      <ol className="relative flex w-full items-stretch rounded-full border border-zinc-200/90 bg-white px-0.75">
+      <ol className="relative flex h-17 w-full items-stretch rounded-full border border-zinc-200/90 bg-white px-0.75">
         {steps.map((step, index) => (
           <Fragment key={step.label}>
-            <li className="flex min-w-0 flex-1">
+            <li
+              className={cn(
+                "flex min-w-0 md:flex-1",
+                index === currentStep ? "flex-1" : "flex-none",
+              )}
+            >
               <StepperRailItem
                 step={step}
                 index={index}
@@ -93,7 +106,7 @@ const StepperRail = memo(function StepperRail({
               />
             </li>
             {index < steps.length - 1 ? (
-              <li aria-hidden className="mr-6 ml-1 flex shrink-0 items-stretch">
+              <li aria-hidden className="mr-1.5 ml-0.5 flex shrink-0 items-stretch md:mr-6 md:ml-1">
                 <StepDivider />
               </li>
             ) : null}

package/registry.json

@@ -128,14 +128,8 @@
       "name": "stepper",
       "title": "Stepper",
       "description": "Progress rail for multi-step flows: a mobile progress bar plus a clickable desktop rail.",
-      "dependencies": ["next"],
       "registryDependencies": ["utils", "brand-theme"],
       "files": [
-        {
-          "source": "public/assets/images/breadcrumb_arrow.svg",
-          "path": "assets/breadcrumb_arrow.svg",
-          "target": "public/assets/images/breadcrumb_arrow.svg"
-        },
         {
           "source": "src/components/ui/stepper/index.tsx",
           "path": "components/ui/stepper/index.tsx"
@@ -156,10 +150,6 @@
           "source": "src/components/ui/stepper/step-label.tsx",
           "path": "components/ui/stepper/step-label.tsx"
         },
-        {
-          "source": "src/components/ui/stepper/stepper-progress.tsx",
-          "path": "components/ui/stepper/stepper-progress.tsx"
-        },
         {
           "source": "src/components/ui/stepper/stepper-rail.tsx",
           "path": "components/ui/stepper/stepper-rail.tsx"

package/registry/assets/breadcrumb_arrow.svg

@@ -1,3 +0,0 @@
-<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/ui/stepper/stepper-progress.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { memo } from "react";
-
-import { cn } from "@/lib/utils";
-import type { StepperLayoutProps } from "@/components/ui/stepper/types";
-
-/** Mobile layout: active step name, counter, and a segmented progress bar. */
-const StepperProgress = memo(function StepperProgress({
-  steps,
-  currentStep,
-}: Omit<StepperLayoutProps, "onStepChange">) {
-  const totalSteps = steps.length;
-  const activeIndex = Math.min(Math.max(currentStep, 0), totalSteps - 1);
-
-  return (
-    <div className="rounded-2xl border border-zinc-200 bg-white p-4 md:hidden">
-      <div className="flex items-baseline justify-between gap-3">
-        <span className="text-brand text-sm font-semibold">{steps[activeIndex]?.label}</span>
-        <span className="shrink-0 text-xs font-medium text-zinc-400 tabular-nums">
-          {activeIndex + 1} / {totalSteps}
-        </span>
-      </div>
-      <div className="mt-3 flex gap-1.5" role="presentation">
-        {steps.map((step, index) => (
-          <span
-            key={step.label}
-            title={step.label}
-            className={cn(
-              "h-1.5 flex-1 rounded-full transition-colors duration-300",
-              index <= currentStep ? "bg-brand" : "bg-zinc-200",
-            )}
-          />
-        ))}
-      </div>
-    </div>
-  );
-});
-
-export { StepperProgress };