@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/stepper.d.ts

@@ -1,43 +1,42 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/stepper.d.ts
 type StepperOrientation = "horizontal" | "vertical";
 type StepperState = "complete" | "active" | "upcoming";
 type StepperProps = React.ComponentProps<"div"> & {
-    orientation?: StepperOrientation;
-    /** Active step number (1-based). Items without an explicit `state` derive theirs from this. */
-    value?: number;
+  orientation?: StepperOrientation;
+  /** Active step number (1-based). Items without an explicit `state` derive theirs from this. */
+  value?: number;
 };
 declare function Stepper({ orientation, value, className, children, ...props }: StepperProps): React.JSX.Element;
 type StepperItemProps = Omit<React.ComponentProps<"div">, "children"> & {
-    /** Force a specific state instead of deriving it from the stepper `value`. */
-    state?: StepperState;
-    /** 1-based position. Injected by `Stepper`; only set this to override. */
-    step?: number;
-    /** Whether this is the last item (hides its connector). Injected by `Stepper`. */
-    last?: boolean;
-    /** Custom indicator node. Defaults to a numbered circle / checkmark. */
-    indicator?: React.ReactNode;
-    children?: React.ReactNode;
+  /** Force a specific state instead of deriving it from the stepper `value`. */
+  state?: StepperState;
+  /** 1-based position. Injected by `Stepper`; only set this to override. */
+  step?: number;
+  /** Whether this is the last item (hides its connector). Injected by `Stepper`. */
+  last?: boolean;
+  /** Custom indicator node. Defaults to a numbered circle / checkmark. */
+  indicator?: React.ReactNode;
+  children?: React.ReactNode;
 };
 declare function StepperItem({ state: stateOverride, step, last, indicator, className, children, ...props }: StepperItemProps): React.JSX.Element;
 declare const indicatorVariants: (props?: ({
-    state?: "active" | "complete" | "upcoming" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  state?: "active" | "complete" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StepperIndicatorProps = Omit<React.ComponentProps<"div">, "children"> & VariantProps<typeof indicatorVariants> & {
-    /** Override the rendered glyph. Defaults to the step number / checkmark. */
-    children?: React.ReactNode;
+  /** Override the rendered glyph. Defaults to the step number / checkmark. */
+  children?: React.ReactNode;
 };
 declare function StepperIndicator({ className, state: stateProp, children, ...props }: StepperIndicatorProps): React.JSX.Element;
 declare function StepperSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function StepperTitle({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 declare function StepperDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 type StepperMetaProps = Omit<React.ComponentProps<"div">, "children"> & {
-    date?: React.ReactNode;
-    time?: React.ReactNode;
+  date?: React.ReactNode;
+  time?: React.ReactNode;
 };
 /** Date / timestamp caption pair. Placeholder colour regardless of state. */
 declare function StepperMeta({ date, time, className, ...props }: StepperMetaProps): React.JSX.Element | null;
-
-export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperMeta, type StepperOrientation, StepperSeparator, type StepperState, StepperTitle };
+//#endregion
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperMeta, type StepperOrientation, StepperSeparator, type StepperState, StepperTitle };

package/dist/stepper.js

@@ -1,296 +1,169 @@
-// src/components/ui/stepper.tsx
-import { cva } from "class-variance-authority";
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { CheckIcon } from "lucide-react";
-import * as React from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/stepper.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var StepperContext = React.createContext(null);
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/stepper.tsx
+const StepperContext = React.createContext(null);
 function useStepper() {
-  const context = React.useContext(StepperContext);
-  if (!context) {
-    throw new Error("Stepper parts must be used within a <Stepper />");
-  }
-  return context;
+	const context = React.useContext(StepperContext);
+	if (!context) throw new Error("Stepper parts must be used within a <Stepper />");
+	return context;
 }
-var StepperItemContext = React.createContext(
-  null
-);
+const StepperItemContext = React.createContext(null);
 function useStepperItem() {
-  const context = React.useContext(StepperItemContext);
-  if (!context) {
-    throw new Error("Stepper item parts must be used within a <StepperItem />");
-  }
-  return context;
+	const context = React.useContext(StepperItemContext);
+	if (!context) throw new Error("Stepper item parts must be used within a <StepperItem />");
+	return context;
 }
 function resolveState(step, value, override) {
-  if (override) return override;
-  if (value == null) return "upcoming";
-  if (step < value) return "complete";
-  if (step === value) return "active";
-  return "upcoming";
+	if (override) return override;
+	if (value == null) return "upcoming";
+	if (step < value) return "complete";
+	if (step === value) return "active";
+	return "upcoming";
 }
-function Stepper({
-  orientation = "horizontal",
-  value,
-  className,
-  children,
-  ...props
-}) {
-  const items = React.Children.toArray(children).filter(React.isValidElement);
-  const contextValue = React.useMemo(
-    () => ({ orientation, value }),
-    [orientation, value]
-  );
-  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "stepper",
-      "data-orientation": orientation,
-      className: cn(
-        "flex",
-        orientation === "horizontal" ? "flex-row" : "flex-col",
-        className
-      ),
-      ...props,
-      children: items.map((child, index) => {
-        if (!React.isValidElement(child)) return child;
-        return React.cloneElement(child, {
-          step: child.props.step ?? index + 1,
-          last: child.props.last ?? index === items.length - 1
-        });
-      })
-    }
-  ) });
+function Stepper({ orientation = "horizontal", value, className, children, ...props }) {
+	const items = React.Children.toArray(children).filter(React.isValidElement);
+	const contextValue = React.useMemo(() => ({
+		orientation,
+		value
+	}), [orientation, value]);
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "stepper",
+			"data-orientation": orientation,
+			className: cn("flex", orientation === "horizontal" ? "flex-row" : "flex-col", className),
+			...props,
+			children: items.map((child, index) => {
+				if (!React.isValidElement(child)) return child;
+				return React.cloneElement(child, {
+					step: child.props.step ?? index + 1,
+					last: child.props.last ?? index === items.length - 1
+				});
+			})
+		})
+	});
 }
-function StepperItem({
-  state: stateOverride,
-  step = 1,
-  last = false,
-  indicator,
-  className,
-  children,
-  ...props
-}) {
-  const { orientation, value } = useStepper();
-  const state = resolveState(step, value, stateOverride);
-  const itemContext = React.useMemo(
-    () => ({ state, step }),
-    [state, step]
-  );
-  return /* @__PURE__ */ jsx(StepperItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "stepper-item",
-      "data-state": state,
-      "data-orientation": orientation,
-      className: cn(
-        "group/stepper-item flex min-w-0",
-        orientation === "horizontal" ? "flex-1 flex-col gap-3 last:flex-none" : "flex-row items-stretch gap-3",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex",
-              orientation === "horizontal" ? "items-center" : "flex-col items-center"
-            ),
-            children: [
-              indicator ?? /* @__PURE__ */ jsx(StepperIndicator, {}),
-              !last && /* @__PURE__ */ jsx(StepperSeparator, {})
-            ]
-          }
-        ),
-        children != null && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex min-w-0 flex-col gap-1",
-              orientation === "horizontal" ? "pr-4" : cn("pt-1", !last && "pb-8")
-            ),
-            children
-          }
-        )
-      ]
-    }
-  ) });
+function StepperItem({ state: stateOverride, step = 1, last = false, indicator, className, children, ...props }) {
+	const { orientation, value } = useStepper();
+	const state = resolveState(step, value, stateOverride);
+	const itemContext = React.useMemo(() => ({
+		state,
+		step
+	}), [state, step]);
+	return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
+		value: itemContext,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "stepper-item",
+			"data-state": state,
+			"data-orientation": orientation,
+			className: cn("group/stepper-item flex min-w-0", orientation === "horizontal" ? "flex-1 flex-col gap-3 last:flex-none" : "flex-row items-stretch gap-3", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("flex", orientation === "horizontal" ? "items-center" : "flex-col items-center"),
+				children: [indicator ?? /* @__PURE__ */ jsx(StepperIndicator, {}), !last && /* @__PURE__ */ jsx(StepperSeparator, {})]
+			}), children != null && /* @__PURE__ */ jsx("div", {
+				className: cn("flex min-w-0 flex-col gap-1", orientation === "horizontal" ? "pr-4" : cn("pt-1", !last && "pb-8")),
+				children
+			})]
+		})
+	});
 }
-var indicatorVariants = cva(
-  "relative flex size-7 shrink-0 items-center justify-center rounded-full text-gdt-sm font-semibold transition-colors sm:size-9",
-  {
-    variants: {
-      state: {
-        complete: "border border-transparent bg-action-primary text-fg-on-brand",
-        active: "border-2 border-line-focus bg-canvas text-fg-brand",
-        upcoming: "border border-line bg-surface text-fg-secondary"
-      }
-    },
-    defaultVariants: {
-      state: "upcoming"
-    }
-  }
-);
-function StepperIndicator({
-  className,
-  state: stateProp,
-  children,
-  ...props
-}) {
-  const { state, step } = useStepperItem();
-  const resolved = stateProp ?? state;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "stepper-indicator",
-      "data-state": resolved,
-      className: cn(indicatorVariants({ state: resolved }), className),
-      ...props,
-      children: children ?? (resolved === "complete" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 sm:size-4.5", strokeWidth: 2.5 }) : step)
-    }
-  );
+const indicatorVariants = cva("relative flex size-7 shrink-0 items-center justify-center rounded-full text-gdt-sm font-semibold transition-colors sm:size-9", {
+	variants: { state: {
+		complete: "border border-transparent bg-action-primary text-fg-on-brand",
+		active: "border-2 border-line-focus bg-canvas text-fg-brand",
+		upcoming: "border border-line bg-surface text-fg-secondary"
+	} },
+	defaultVariants: { state: "upcoming" }
+});
+function StepperIndicator({ className, state: stateProp, children, ...props }) {
+	const { state, step } = useStepperItem();
+	const resolved = stateProp ?? state;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stepper-indicator",
+		"data-state": resolved,
+		className: cn(indicatorVariants({ state: resolved }), className),
+		...props,
+		children: children ?? (resolved === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {
+			className: "size-4 sm:size-4.5",
+			strokeWidth: 2.5
+		}) : step)
+	});
 }
-var separatorVariants = cva("shrink-0 rounded-full transition-colors", {
-  variants: {
-    state: {
-      complete: "bg-action-primary",
-      active: "bg-line",
-      upcoming: "bg-line"
-    },
-    orientation: {
-      horizontal: "h-0.5 flex-1",
-      vertical: "w-0.5 flex-1 min-h-8"
-    }
-  },
-  defaultVariants: {
-    state: "upcoming",
-    orientation: "horizontal"
-  }
+const separatorVariants = cva("shrink-0 rounded-full transition-colors", {
+	variants: {
+		state: {
+			complete: "bg-action-primary",
+			active: "bg-line",
+			upcoming: "bg-line"
+		},
+		orientation: {
+			horizontal: "h-0.5 flex-1",
+			vertical: "w-0.5 flex-1 min-h-8"
+		}
+	},
+	defaultVariants: {
+		state: "upcoming",
+		orientation: "horizontal"
+	}
 });
-function StepperSeparator({
-  className,
-  ...props
-}) {
-  const { orientation } = useStepper();
-  const { state } = useStepperItem();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "stepper-separator",
-      "aria-hidden": "true",
-      className: cn(separatorVariants({ state, orientation }), className),
-      ...props
-    }
-  );
+function StepperSeparator({ className, ...props }) {
+	const { orientation } = useStepper();
+	const { state } = useStepperItem();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stepper-separator",
+		"aria-hidden": "true",
+		className: cn(separatorVariants({
+			state,
+			orientation
+		}), className),
+		...props
+	});
 }
-var titleVariants = cva("text-gdt-sm font-bold", {
-  variants: {
-    state: {
-      complete: "text-fg-primary",
-      active: "text-fg-brand",
-      upcoming: "text-fg-secondary"
-    }
-  },
-  defaultVariants: {
-    state: "upcoming"
-  }
+const titleVariants = cva("text-gdt-sm font-bold", {
+	variants: { state: {
+		complete: "text-fg-primary",
+		active: "text-fg-brand",
+		upcoming: "text-fg-secondary"
+	} },
+	defaultVariants: { state: "upcoming" }
 });
 function StepperTitle({ className, ...props }) {
-  const { state } = useStepperItem();
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "stepper-title",
-      className: cn(titleVariants({ state }), className),
-      ...props
-    }
-  );
+	const { state } = useStepperItem();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "stepper-title",
+		className: cn(titleVariants({ state }), className),
+		...props
+	});
 }
-var descriptionVariants = cva("text-gdt-sm", {
-  variants: {
-    state: {
-      complete: "text-fg-secondary",
-      active: "text-fg-secondary",
-      upcoming: "text-fg-caption-placeholder"
-    }
-  },
-  defaultVariants: {
-    state: "upcoming"
-  }
+const descriptionVariants = cva("text-gdt-sm", {
+	variants: { state: {
+		complete: "text-fg-secondary",
+		active: "text-fg-secondary",
+		upcoming: "text-fg-caption-placeholder"
+	} },
+	defaultVariants: { state: "upcoming" }
 });
-function StepperDescription({
-  className,
-  ...props
-}) {
-  const { state } = useStepperItem();
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "stepper-description",
-      className: cn(descriptionVariants({ state }), className),
-      ...props
-    }
-  );
+function StepperDescription({ className, ...props }) {
+	const { state } = useStepperItem();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "stepper-description",
+		className: cn(descriptionVariants({ state }), className),
+		...props
+	});
 }
+/** Date / timestamp caption pair. Placeholder colour regardless of state. */
 function StepperMeta({ date, time, className, ...props }) {
-  if (date == null && time == null) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "stepper-meta",
-      className: cn(
-        "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-gdt-xs text-fg-caption-placeholder",
-        className
-      ),
-      ...props,
-      children: [
-        date != null && /* @__PURE__ */ jsx("span", { children: date }),
-        time != null && /* @__PURE__ */ jsx("span", { children: time })
-      ]
-    }
-  );
+	if (date == null && time == null) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "stepper-meta",
+		className: cn("flex flex-wrap items-center gap-x-2 gap-y-0.5 text-gdt-xs text-fg-caption-placeholder", className),
+		...props,
+		children: [date != null && /* @__PURE__ */ jsx("span", { children: date }), time != null && /* @__PURE__ */ jsx("span", { children: time })]
+	});
 }
-export {
-  Stepper,
-  StepperDescription,
-  StepperIndicator,
-  StepperItem,
-  StepperMeta,
-  StepperSeparator,
-  StepperTitle
-};
-//# sourceMappingURL=stepper.js.map
+//#endregion
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperMeta, StepperSeparator, StepperTitle };