@zentauri-ui/zentauri-components 1.0.0 → 1.1.0

package/dist/ui/stepper.d.ts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentPropsWithoutRef, Ref } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const stepperVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const stepperItemVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const stepperIndicatorVariants: (props?: ({
+    appearance?: "complete" | "current" | "upcoming" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type StepperVariantProps = VariantProps<typeof stepperVariants>;
+type StepperProps = StepperVariantProps & {
+    size?: VariantProps<typeof stepperIndicatorVariants>["size"];
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+type StepperItemProps = ComponentPropsWithoutRef<"div"> & {
+    children?: ReactNode;
+};
+type StepperIndicatorProps = ComponentPropsWithoutRef<"div"> & {
+    children?: ReactNode;
+    appearance?: StepperAppearance;
+};
+type StepperTitleProps = ComponentPropsWithoutRef<"div">;
+type StepperDescriptionProps = ComponentPropsWithoutRef<"p">;
+type StepperAppearance = VariantProps<typeof stepperIndicatorVariants>["appearance"];
+
+declare function Stepper({ className, orientation, size, children, ref, ...rest }: StepperProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace Stepper {
+    var displayName: string;
+}
+declare function StepperItem({ className, ref, children, ...rest }: StepperItemProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace StepperItem {
+    var displayName: string;
+}
+declare function StepperIndicator({ className, ref, children, appearance, ...rest }: StepperIndicatorProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace StepperIndicator {
+    var displayName: string;
+}
+declare function StepperTitle({ className, ref, ...rest }: StepperTitleProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace StepperTitle {
+    var displayName: string;
+}
+declare function StepperDescription({ className, ref, ...rest }: StepperDescriptionProps & {
+    ref?: React.Ref<HTMLParagraphElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace StepperDescription {
+    var displayName: string;
+}
+
+export { Stepper, type StepperAppearance, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperProps, StepperTitle, type StepperTitleProps, stepperIndicatorVariants, stepperItemVariants, stepperVariants };

package/dist/ui/stepper.js

@@ -0,0 +1,207 @@
+"use client";
+'use strict';
+
+var chunkWZ2GOU2J_js = require('../chunk-WZ2GOU2J.js');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var stepperVariants = classVarianceAuthority.cva("flex w-full", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row flex-wrap items-start gap-4",
+      vertical: "flex-col gap-6"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var stepperItemVariants = classVarianceAuthority.cva("relative flex gap-3", {
+  variants: {
+    orientation: {
+      horizontal: "min-w-0 flex-col items-center text-center",
+      vertical: "flex-row items-start text-left"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var stepperIndicatorVariants = classVarianceAuthority.cva(
+  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
+  {
+    variants: {
+      appearance: {
+        complete: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        current: "border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50",
+        upcoming: "border-white/15 bg-white/5 text-slate-400",
+        sky: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
+        rose: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
+        purple: "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        pink: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        orange: "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+        yellow: "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        teal: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        indigo: "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        emerald: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        gray: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
+        violet: "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
+        "gradient-blue": "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
+        "gradient-green": "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
+        "gradient-red": "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
+        "gradient-yellow": "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        "gradient-purple": "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        "gradient-teal": "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        "gradient-indigo": "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        "gradient-pink": "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        "gradient-orange": "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30"
+      },
+      size: {
+        sm: "size-8 text-xs",
+        md: "size-9 text-sm",
+        lg: "size-10 text-base"
+      }
+    },
+    defaultVariants: {
+      appearance: "upcoming",
+      size: "md"
+    }
+  }
+);
+var StepperContext = react.createContext(null);
+function useStepper(component) {
+  const ctx = react.useContext(StepperContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Stepper>`);
+  }
+  return ctx;
+}
+var StepperIndexContext = react.createContext(null);
+function useStepperIndex(component) {
+  const index = react.useContext(StepperIndexContext);
+  if (index === null) {
+    throw new Error(`${component} must be used within <StepperItem>`);
+  }
+  return index;
+}
+function Stepper({
+  className,
+  orientation = "horizontal",
+  size = "md",
+  children,
+  ref,
+  ...rest
+}) {
+  const items = react.useMemo(
+    () => react.Children.toArray(children).filter(react.isValidElement),
+    [children]
+  );
+  const ctx = react.useMemo(
+    () => ({
+      orientation: orientation ?? "horizontal",
+      size: size ?? "md",
+      total: items.length
+    }),
+    [items.length, orientation, size]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper",
+      role: "list",
+      className: chunkWZ2GOU2J_js.cn(stepperVariants({ orientation }), className),
+      ...rest,
+      children: items.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(StepperIndexContext.Provider, { value: index, children: child }, index))
+    }
+  ) });
+}
+Stepper.displayName = "Stepper";
+function StepperItem({
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  const { orientation } = useStepper("StepperItem");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper-item",
+      role: "listitem",
+      className: chunkWZ2GOU2J_js.cn(stepperItemVariants({ orientation }), className),
+      ...rest,
+      children
+    }
+  );
+}
+StepperItem.displayName = "StepperItem";
+function StepperIndicator({
+  className,
+  ref,
+  children,
+  appearance,
+  ...rest
+}) {
+  const { size } = useStepper("StepperIndicator");
+  const index = useStepperIndex("StepperIndicator");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper-indicator",
+      className: chunkWZ2GOU2J_js.cn(stepperIndicatorVariants({ appearance, size }), className),
+      ...rest,
+      children: children ?? index + 1
+    }
+  );
+}
+StepperIndicator.displayName = "StepperIndicator";
+function StepperTitle({
+  className,
+  ref,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper-title",
+      className: chunkWZ2GOU2J_js.cn(
+        "mt-3 text-sm font-semibold",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+StepperTitle.displayName = "StepperTitle";
+function StepperDescription({
+  className,
+  ref,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "stepper-description",
+      className: chunkWZ2GOU2J_js.cn("mt-1 text-xs text-slate-400", className),
+      ...rest
+    }
+  );
+}
+StepperDescription.displayName = "StepperDescription";
+
+exports.Stepper = Stepper;
+exports.StepperDescription = StepperDescription;
+exports.StepperIndicator = StepperIndicator;
+exports.StepperItem = StepperItem;
+exports.StepperTitle = StepperTitle;
+exports.stepperIndicatorVariants = stepperIndicatorVariants;
+exports.stepperItemVariants = stepperItemVariants;
+exports.stepperVariants = stepperVariants;
+//# sourceMappingURL=stepper.js.map
+//# sourceMappingURL=stepper.js.map

package/dist/ui/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/stepper/variants.ts","../../src/ui/stepper/stepper.tsx"],"names":["cva","createContext","useContext","useMemo","Children","isValidElement","jsx","cn"],"mappings":"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","file":"stepper.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const stepperVariants = cva(\"flex w-full\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-row flex-wrap items-start gap-4\",\n      vertical: \"flex-col gap-6\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperItemVariants = cva(\"relative flex gap-3\", {\n  variants: {\n    orientation: {\n      horizontal: \"min-w-0 flex-col items-center text-center\",\n      vertical: \"flex-row items-start text-left\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperIndicatorVariants = cva(\n  \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\",\n  {\n    variants: {\n      appearance: {\n        complete:\n          \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n        current:\n          \"border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50\",\n        upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n        sky: \"border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30\",\n        rose: \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n        purple: \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n        pink: \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n        orange: \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n        yellow: \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n        teal: \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n        indigo: \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n        emerald: \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n        gray: \"border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30\",\n        violet: \"border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30\",\n        \"gradient-blue\": \"border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30\",\n        \"gradient-green\": \"border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30\",\n        \"gradient-red\": \"border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30\",\n        \"gradient-yellow\": \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n        \"gradient-purple\": \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n        \"gradient-teal\": \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n        \"gradient-indigo\": \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n        \"gradient-pink\": \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n        \"gradient-orange\": \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n      },\n      size: {\n        sm: \"size-8 text-xs\",\n        md: \"size-9 text-sm\",\n        lg: \"size-10 text-base\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"upcoming\",\n      size: \"md\",\n    },\n  },\n);\n","\"use client\";\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  StepperCtx,\n  StepperDescriptionProps,\n  StepperIndicatorProps,\n  StepperItemProps,\n  StepperProps,\n  StepperTitleProps,\n} from \"./types\";\nimport {\n  stepperIndicatorVariants,\n  stepperItemVariants,\n  stepperVariants,\n} from \"./variants\";\n\n\nconst StepperContext = createContext<StepperCtx | null>(null);\n\nfunction useStepper(component: string): StepperCtx {\n  const ctx = useContext(StepperContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Stepper>`);\n  }\n  return ctx;\n}\n\nconst StepperIndexContext = createContext<number | null>(null);\n\nfunction useStepperIndex(component: string): number {\n  const index = useContext(StepperIndexContext);\n  if (index === null) {\n    throw new Error(`${component} must be used within <StepperItem>`);\n  }\n  return index;\n}\n\n\nexport function Stepper({\n  className,\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n  ref,\n  ...rest\n}: StepperProps & { ref?: Ref<HTMLDivElement> }) {\n  const items = useMemo(\n    () => Children.toArray(children).filter(isValidElement),\n    [children],\n  );\n  const ctx = useMemo(\n    () => ({\n      orientation: orientation ?? \"horizontal\",\n      size: size ?? \"md\",\n      total: items.length,\n    }),\n    [items.length, orientation, size],\n  );\n\n  return (\n    <StepperContext.Provider value={ctx}>\n      <div\n        ref={ref}\n        data-slot=\"stepper\"\n        role=\"list\"\n        className={cn(stepperVariants({ orientation }), className)}\n        {...rest}\n      >\n        {items.map((child, index) => (\n          <StepperIndexContext.Provider key={index} value={index}>\n            {child}\n          </StepperIndexContext.Provider>\n        ))}\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nStepper.displayName = \"Stepper\";\n\nexport function StepperItem({\n  className,\n  ref,\n  children,\n  ...rest\n}: StepperItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { orientation } = useStepper(\"StepperItem\");\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-item\"\n      role=\"listitem\"\n      className={cn(stepperItemVariants({ orientation }), className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nStepperItem.displayName = \"StepperItem\";\n\nexport function StepperIndicator({\n  className,\n  ref,\n  children,\n  appearance,\n  ...rest\n}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { size } = useStepper(\"StepperIndicator\");\n  const index = useStepperIndex(\"StepperIndicator\");\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-indicator\"\n      className={cn(stepperIndicatorVariants({ appearance, size }), className)}\n      {...rest}\n    >\n      {children ?? index + 1}\n    </div>\n  );\n}\n\nStepperIndicator.displayName = \"StepperIndicator\";\n\nexport function StepperTitle({\n  className,\n  ref,\n  ...rest\n}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-title\"\n      className={cn(\n        \"mt-3 text-sm font-semibold\",\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n\nStepperTitle.displayName = \"StepperTitle\";\n\nexport function StepperDescription({\n  className,\n  ref,\n  ...rest\n}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      ref={ref}\n      data-slot=\"stepper-description\"\n      className={cn(\"mt-1 text-xs text-slate-400\", className)}\n      {...rest}\n    />\n  );\n}\n\nStepperDescription.displayName = \"StepperDescription\";\n"]}

package/dist/ui/stepper.mjs

@@ -0,0 +1,198 @@
+"use client";
+import { cn } from '../chunk-B23TPTVG.mjs';
+import { createContext, useMemo, Children, isValidElement, useContext } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var stepperVariants = cva("flex w-full", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row flex-wrap items-start gap-4",
+      vertical: "flex-col gap-6"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var stepperItemVariants = cva("relative flex gap-3", {
+  variants: {
+    orientation: {
+      horizontal: "min-w-0 flex-col items-center text-center",
+      vertical: "flex-row items-start text-left"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var stepperIndicatorVariants = cva(
+  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
+  {
+    variants: {
+      appearance: {
+        complete: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        current: "border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50",
+        upcoming: "border-white/15 bg-white/5 text-slate-400",
+        sky: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
+        rose: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
+        purple: "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        pink: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        orange: "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+        yellow: "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        teal: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        indigo: "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        emerald: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        gray: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
+        violet: "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
+        "gradient-blue": "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
+        "gradient-green": "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
+        "gradient-red": "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
+        "gradient-yellow": "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        "gradient-purple": "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        "gradient-teal": "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        "gradient-indigo": "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        "gradient-pink": "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        "gradient-orange": "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30"
+      },
+      size: {
+        sm: "size-8 text-xs",
+        md: "size-9 text-sm",
+        lg: "size-10 text-base"
+      }
+    },
+    defaultVariants: {
+      appearance: "upcoming",
+      size: "md"
+    }
+  }
+);
+var StepperContext = createContext(null);
+function useStepper(component) {
+  const ctx = useContext(StepperContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Stepper>`);
+  }
+  return ctx;
+}
+var StepperIndexContext = createContext(null);
+function useStepperIndex(component) {
+  const index = useContext(StepperIndexContext);
+  if (index === null) {
+    throw new Error(`${component} must be used within <StepperItem>`);
+  }
+  return index;
+}
+function Stepper({
+  className,
+  orientation = "horizontal",
+  size = "md",
+  children,
+  ref,
+  ...rest
+}) {
+  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 /* @__PURE__ */ jsx(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper",
+      role: "list",
+      className: cn(stepperVariants({ orientation }), className),
+      ...rest,
+      children: items.map((child, index) => /* @__PURE__ */ jsx(StepperIndexContext.Provider, { value: index, children: child }, index))
+    }
+  ) });
+}
+Stepper.displayName = "Stepper";
+function StepperItem({
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  const { orientation } = useStepper("StepperItem");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper-item",
+      role: "listitem",
+      className: cn(stepperItemVariants({ orientation }), className),
+      ...rest,
+      children
+    }
+  );
+}
+StepperItem.displayName = "StepperItem";
+function StepperIndicator({
+  className,
+  ref,
+  children,
+  appearance,
+  ...rest
+}) {
+  const { size } = useStepper("StepperIndicator");
+  const index = useStepperIndex("StepperIndicator");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper-indicator",
+      className: cn(stepperIndicatorVariants({ appearance, size }), className),
+      ...rest,
+      children: children ?? index + 1
+    }
+  );
+}
+StepperIndicator.displayName = "StepperIndicator";
+function StepperTitle({
+  className,
+  ref,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stepper-title",
+      className: cn(
+        "mt-3 text-sm font-semibold",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+StepperTitle.displayName = "StepperTitle";
+function StepperDescription({
+  className,
+  ref,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "stepper-description",
+      className: cn("mt-1 text-xs text-slate-400", className),
+      ...rest
+    }
+  );
+}
+StepperDescription.displayName = "StepperDescription";
+
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperTitle, stepperIndicatorVariants, stepperItemVariants, stepperVariants };
+//# sourceMappingURL=stepper.mjs.map
+//# sourceMappingURL=stepper.mjs.map

package/dist/ui/stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/stepper/variants.ts","../../src/ui/stepper/stepper.tsx"],"names":[],"mappings":"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","file":"stepper.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const stepperVariants = cva(\"flex w-full\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-row flex-wrap items-start gap-4\",\n      vertical: \"flex-col gap-6\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperItemVariants = cva(\"relative flex gap-3\", {\n  variants: {\n    orientation: {\n      horizontal: \"min-w-0 flex-col items-center text-center\",\n      vertical: \"flex-row items-start text-left\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperIndicatorVariants = cva(\n  \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\",\n  {\n    variants: {\n      appearance: {\n        complete:\n          \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n        current:\n          \"border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50\",\n        upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n        sky: \"border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30\",\n        rose: \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n        purple: \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n        pink: \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n        orange: \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n        yellow: \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n        teal: \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n        indigo: \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n        emerald: \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n        gray: \"border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30\",\n        violet: \"border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30\",\n        \"gradient-blue\": \"border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30\",\n        \"gradient-green\": \"border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30\",\n        \"gradient-red\": \"border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30\",\n        \"gradient-yellow\": \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n        \"gradient-purple\": \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n        \"gradient-teal\": \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n        \"gradient-indigo\": \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n        \"gradient-pink\": \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n        \"gradient-orange\": \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n      },\n      size: {\n        sm: \"size-8 text-xs\",\n        md: \"size-9 text-sm\",\n        lg: \"size-10 text-base\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"upcoming\",\n      size: \"md\",\n    },\n  },\n);\n","\"use client\";\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  StepperCtx,\n  StepperDescriptionProps,\n  StepperIndicatorProps,\n  StepperItemProps,\n  StepperProps,\n  StepperTitleProps,\n} from \"./types\";\nimport {\n  stepperIndicatorVariants,\n  stepperItemVariants,\n  stepperVariants,\n} from \"./variants\";\n\n\nconst StepperContext = createContext<StepperCtx | null>(null);\n\nfunction useStepper(component: string): StepperCtx {\n  const ctx = useContext(StepperContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Stepper>`);\n  }\n  return ctx;\n}\n\nconst StepperIndexContext = createContext<number | null>(null);\n\nfunction useStepperIndex(component: string): number {\n  const index = useContext(StepperIndexContext);\n  if (index === null) {\n    throw new Error(`${component} must be used within <StepperItem>`);\n  }\n  return index;\n}\n\n\nexport function Stepper({\n  className,\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n  ref,\n  ...rest\n}: StepperProps & { ref?: Ref<HTMLDivElement> }) {\n  const items = useMemo(\n    () => Children.toArray(children).filter(isValidElement),\n    [children],\n  );\n  const ctx = useMemo(\n    () => ({\n      orientation: orientation ?? \"horizontal\",\n      size: size ?? \"md\",\n      total: items.length,\n    }),\n    [items.length, orientation, size],\n  );\n\n  return (\n    <StepperContext.Provider value={ctx}>\n      <div\n        ref={ref}\n        data-slot=\"stepper\"\n        role=\"list\"\n        className={cn(stepperVariants({ orientation }), className)}\n        {...rest}\n      >\n        {items.map((child, index) => (\n          <StepperIndexContext.Provider key={index} value={index}>\n            {child}\n          </StepperIndexContext.Provider>\n        ))}\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nStepper.displayName = \"Stepper\";\n\nexport function StepperItem({\n  className,\n  ref,\n  children,\n  ...rest\n}: StepperItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { orientation } = useStepper(\"StepperItem\");\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-item\"\n      role=\"listitem\"\n      className={cn(stepperItemVariants({ orientation }), className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nStepperItem.displayName = \"StepperItem\";\n\nexport function StepperIndicator({\n  className,\n  ref,\n  children,\n  appearance,\n  ...rest\n}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { size } = useStepper(\"StepperIndicator\");\n  const index = useStepperIndex(\"StepperIndicator\");\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-indicator\"\n      className={cn(stepperIndicatorVariants({ appearance, size }), className)}\n      {...rest}\n    >\n      {children ?? index + 1}\n    </div>\n  );\n}\n\nStepperIndicator.displayName = \"StepperIndicator\";\n\nexport function StepperTitle({\n  className,\n  ref,\n  ...rest\n}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-title\"\n      className={cn(\n        \"mt-3 text-sm font-semibold\",\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n\nStepperTitle.displayName = \"StepperTitle\";\n\nexport function StepperDescription({\n  className,\n  ref,\n  ...rest\n}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      ref={ref}\n      data-slot=\"stepper-description\"\n      className={cn(\"mt-1 text-xs text-slate-400\", className)}\n      {...rest}\n    />\n  );\n}\n\nStepperDescription.displayName = \"StepperDescription\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A UI component library built with React and Tailwind CSS",
   "license": "MIT",
   "files": ["dist"],