@zentauri-ui/zentauri-components 1.9.0 → 1.9.1

package/src/ui/stepper/stepper.tsx

@@ -1,171 +0,0 @@
-"use client";
-
-import {
-  Children,
-  createContext,
-  isValidElement,
-  useContext,
-  useMemo,
-} from "react";
-
-import { cn } from "../../lib/utils";
-
-import type {
-  StepperCtx,
-  StepperDescriptionProps,
-  StepperIndicatorProps,
-  StepperItemProps,
-  StepperProps,
-  StepperTitleProps,
-} from "./types";
-import {
-  stepperIndicatorVariants,
-  stepperItemVariants,
-  stepperVariants,
-} from "./variants";
-
-const StepperContext = createContext<StepperCtx | null>(null);
-
-function useStepper(component: string): StepperCtx {
-  const ctx = useContext(StepperContext);
-  if (!ctx) {
-    throw new Error(`${component} must be used within <Stepper>`);
-  }
-  return ctx;
-}
-
-const StepperIndexContext = createContext<number | null>(null);
-
-function useStepperIndex(component: string): number {
-  const index = useContext(StepperIndexContext);
-  if (index === null) {
-    throw new Error(`${component} must be used within <StepperItem>`);
-  }
-  return index;
-}
-
-export function Stepper({
-  className,
-  orientation = "horizontal",
-  size = "md",
-  children,
-  ref,
-  ...rest
-}: StepperProps) {
-  const items = useMemo(
-    () => Children.toArray(children).filter(isValidElement),
-    [children],
-  );
-  const ctx = useMemo(
-    () => ({
-      orientation: orientation ?? "horizontal",
-      size: size ?? "md",
-      total: items.length,
-    }),
-    [items.length, orientation, size],
-  );
-
-  return (
-    <StepperContext.Provider value={ctx}>
-      <ol
-        ref={ref}
-        data-slot="stepper"
-        className={cn(
-          stepperVariants({ orientation }),
-          "m-0 list-none p-0",
-          className,
-        )}
-        {...rest}
-      >
-        {items.map((child, index) => (
-          <StepperIndexContext.Provider key={index} value={index}>
-            {child}
-          </StepperIndexContext.Provider>
-        ))}
-      </ol>
-    </StepperContext.Provider>
-  );
-}
-
-Stepper.displayName = "Stepper";
-
-export function StepperItem({
-  className,
-  ref,
-  children,
-  ...rest
-}: StepperItemProps) {
-  const { orientation } = useStepper("StepperItem");
-  return (
-    <li
-      ref={ref}
-      data-slot="stepper-item"
-      className={cn(stepperItemVariants({ orientation }), className)}
-      {...rest}
-    >
-      {children}
-    </li>
-  );
-}
-
-StepperItem.displayName = "StepperItem";
-
-export function StepperIndicator({
-  className,
-  ref,
-  children,
-  appearance,
-  ...rest
-}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {
-  const { size } = useStepper("StepperIndicator");
-  const index = useStepperIndex("StepperIndicator");
-  return (
-    <div
-      ref={ref}
-      data-slot="stepper-indicator"
-      className={cn(stepperIndicatorVariants({ appearance, size }), className)}
-      {...rest}
-    >
-      {children ?? index + 1}
-    </div>
-  );
-}
-
-StepperIndicator.displayName = "StepperIndicator";
-
-export function StepperTitle({
-  className,
-  ref,
-  ...rest
-}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {
-  return (
-    <div
-      ref={ref}
-      data-slot="stepper-title"
-      className={cn(
-        "text-sm font-semibold text-slate-900 dark:text-white",
-        className,
-      )}
-      {...rest}
-    />
-  );
-}
-
-StepperTitle.displayName = "StepperTitle";
-
-export function StepperDescription({
-  className,
-  ref,
-  ...rest
-}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {
-  return (
-    <p
-      ref={ref}
-      data-slot="stepper-description"
-      className={cn("text-xs text-slate-900 dark:text-slate-400", className)}
-      {...rest}
-    />
-  );
-}
-
-StepperDescription.displayName = "StepperDescription";

package/src/ui/stepper/types.ts

@@ -1,38 +0,0 @@
-import type { VariantProps } from "class-variance-authority";
-import type {
-  ComponentPropsWithoutRef,
-  ComponentPropsWithRef,
-  ReactNode,
-} from "react";
-
-import type { stepperIndicatorVariants, stepperVariants } from "./variants";
-
-type StepperVariantProps = VariantProps<typeof stepperVariants>;
-
-export type StepperProps = StepperVariantProps & {
-  size?: VariantProps<typeof stepperIndicatorVariants>["size"];
-  children?: ReactNode;
-} & Omit<ComponentPropsWithRef<"ol">, "children">;
-
-export type StepperItemProps = ComponentPropsWithRef<"li"> & {
-  children?: ReactNode;
-};
-
-export type StepperIndicatorProps = ComponentPropsWithoutRef<"div"> & {
-  children?: ReactNode;
-  appearance?: StepperAppearance;
-};
-
-export type StepperTitleProps = ComponentPropsWithoutRef<"div">;
-
-export type StepperDescriptionProps = ComponentPropsWithoutRef<"p">;
-
-export type StepperAppearance = VariantProps<
-  typeof stepperIndicatorVariants
->["appearance"];
-
-export type StepperCtx = {
-  orientation: NonNullable<StepperProps["orientation"]>;
-  size: NonNullable<StepperProps["size"]>;
-  total: number;
-};

package/src/ui/stepper/variants.ts

@@ -1,40 +0,0 @@
-import { cva } from "class-variance-authority";
-
-import {
-  zuiStepperBase,
-  zuiStepperIndicatorAppearances,
-  zuiStepperIndicatorBase,
-  zuiStepperIndicatorSizes,
-  zuiStepperItemBase,
-  zuiStepperItemOrientations,
-  zuiStepperOrientations,
-} from "../../design-system/stepper";
-
-export const stepperVariants = cva(zuiStepperBase, {
-  variants: {
-    orientation: zuiStepperOrientations,
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-  },
-});
-
-export const stepperItemVariants = cva(zuiStepperItemBase, {
-  variants: {
-    orientation: zuiStepperItemOrientations,
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-  },
-});
-
-export const stepperIndicatorVariants = cva(zuiStepperIndicatorBase, {
-  variants: {
-    appearance: zuiStepperIndicatorAppearances,
-    size: zuiStepperIndicatorSizes,
-  },
-  defaultVariants: {
-    appearance: "upcoming",
-    size: "md",
-  },
-});