@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/stepper.tsx

@@ -0,0 +1,97 @@
+import { cn } from "../support/utils";
+import { Check } from "lucide-react";
+import * as React from "react";
+
+export type StepState = "completed" | "active" | "pending";
+
+export interface StepItem {
+    id: string;
+    label: string;
+    state: StepState;
+    subtitle?: string;
+}
+
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    steps: StepItem[];
+}
+
+export function Stepper({ steps, className, ...props }: StepperProps) {
+    return (
+        <div
+            className={cn("flex items-center w-full my-6", className)}
+            {...props}
+        >
+            {steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+
+                return (
+                    <div key={step.id} className="flex items-center flex-1">
+                        {/* Step Marker */}
+                        <div className="relative flex flex-col items-center">
+                            <div
+                                className={cn(
+                                    "flex items-center justify-center w-8 h-8 rounded-full border-2 transition-colors duration-300 z-10 bg-dashboard-card",
+                                    step.state === "completed"
+                                        ? "border-emerald-500 bg-emerald-500 text-white"
+                                        : step.state === "active"
+                                          ? "border-dashboard-primary text-dashboard-primary"
+                                          : "border-dashboard-border text-dashboard-muted-foreground",
+                                )}
+                            >
+                                {step.state === "completed" ? (
+                                    <Check className="w-4 h-4" />
+                                ) : step.state === "active" ? (
+                                    <div className="w-2.5 h-2.5 rounded-full bg-dashboard-primary" />
+                                ) : (
+                                    <div className="w-2 h-2 rounded-full bg-dashboard-border" />
+                                )}
+                            </div>
+
+                            {/* Label */}
+                            <div className="absolute top-10 flex flex-col items-center w-max min-w-[80px]">
+                                <span
+                                    className={cn(
+                                        "text-xs font-semibold  tracking-wider",
+                                        step.state === "completed"
+                                            ? "text-emerald-500"
+                                            : step.state === "active"
+                                              ? "text-dashboard-primary"
+                                              : "text-dashboard-muted-foreground",
+                                    )}
+                                >
+                                    {step.label}
+                                </span>
+                                {step.subtitle && (
+                                    <span
+                                        className={cn(
+                                            "text-[10px] mt-0.5  tracking-wide",
+                                            step.state === "active"
+                                                ? "text-dashboard-primary font-bold"
+                                                : "text-dashboard-muted-foreground",
+                                        )}
+                                    >
+                                        {step.subtitle}
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Connector Line */}
+                        {!isLast && (
+                            <div className="flex-1 px-2">
+                                <div
+                                    className={cn(
+                                        "h-1 rounded-full transition-colors duration-300",
+                                        step.state === "completed"
+                                            ? "bg-emerald-500"
+                                            : "bg-dashboard-border",
+                                    )}
+                                />
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/src/components/switch.tsx

@@ -0,0 +1,46 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
+import { cn } from "../support/utils";
+
+function Switch({
+    className,
+    size = "default",
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    ...props
+}: SwitchPrimitive.Root.Props & {
+    size?: "sm" | "default";
+}) {
+    // If defaultChecked is explicitly provided without checked, treat as uncontrolled.
+    // Otherwise, if checked is passed (even if undefined initially) or onCheckedChange is provided, treat as controlled.
+    const isControlled =
+        defaultChecked !== undefined
+            ? checked !== undefined
+            : checked !== undefined || onCheckedChange !== undefined;
+
+    const resolvedChecked = isControlled ? (checked ?? false) : undefined;
+
+    return (
+        <SwitchPrimitive.Root
+            data-slot="switch"
+            data-size={size}
+            className={cn(
+                "peer cursor-pointer group/switch relative inline-flex shrink-0 items-center rounded-full border border-dashboard-border transition-colors outline-none focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 aria-invalid:border-dashboard-destructive aria-invalid:ring-1 aria-invalid:ring-dashboard-destructive/30 data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-checked:bg-dashboard-primary data-unchecked:bg-dashboard-secondary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+                className,
+            )}
+            {...(isControlled
+                ? { checked: resolvedChecked }
+                : { defaultChecked })}
+            onCheckedChange={onCheckedChange}
+            {...props}
+        >
+            <SwitchPrimitive.Thumb
+                data-slot="switch-thumb"
+                className="pointer-events-none block rounded-full bg-white shadow-xs ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-2.5 group-data-[size=default]/switch:data-checked:translate-x-4 rtl:group-data-[size=default]/switch:data-checked:-translate-x-4 group-data-[size=sm]/switch:data-checked:translate-x-2.5 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-2.5 group-data-[size=default]/switch:data-unchecked:translate-x-0.5 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0.5 group-data-[size=sm]/switch:data-unchecked:translate-x-0.5 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0.5"
+            />
+        </SwitchPrimitive.Root>
+    );
+}
+
+export { Switch };