miolo 3.0.0-beta.21 → 3.0.0-beta.210

package/template/src/cli/components/shadcn-io/spinner/index.jsx

@@ -0,0 +1,232 @@
+import { LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon } from "lucide-react"
+import { cn } from "#cli/lib/utils.mjs"
+
+const Default = ({ className, ...props }) => (
+  <LoaderIcon className={cn("animate-spin", className)} {...props} />
+)
+
+const Circle = ({ className, ...props }) => (
+  <LoaderCircleIcon className={cn("animate-spin", className)} {...props} />
+)
+
+const Pinwheel = ({ className, ...props }) => (
+  <LoaderPinwheelIcon className={cn("animate-spin", className)} {...props} />
+)
+
+const CircleFilled = ({ className, size = 24, ...props }) => (
+  <div className="relative" style={{ width: size, height: size }}>
+    <div className="absolute inset-0 rotate-180">
+      <LoaderCircleIcon
+        className={cn("animate-spin", className, "text-foreground opacity-20")}
+        size={size}
+        {...props}
+      />
+    </div>
+    <LoaderCircleIcon className={cn("relative animate-spin", className)} size={size} {...props} />
+  </div>
+)
+
+const Ellipsis = ({ size = 24, ...props }) => {
+  return (
+    <svg
+      height={size}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>Loading...</title>
+      <circle cx="4" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="0;ellipsis3.end+0.25s"
+          calcMode="spline"
+          dur="0.6s"
+          id="ellipsis1"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+      <circle cx="12" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="ellipsis1.begin+0.1s"
+          calcMode="spline"
+          dur="0.6s"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+      <circle cx="20" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="ellipsis1.begin+0.2s"
+          calcMode="spline"
+          dur="0.6s"
+          id="ellipsis3"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+    </svg>
+  )
+}
+
+const Ring = ({ size = 24, ...props }) => (
+  <svg
+    height={size}
+    stroke="currentColor"
+    viewBox="0 0 44 44"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>Loading...</title>
+    <g fill="none" fillRule="evenodd" strokeWidth="2">
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+    </g>
+  </svg>
+)
+
+const Bars = ({ size = 24, ...props }) => (
+  <svg height={size} viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>Loading...</title>
+    <style>{`
+      .spinner-bar {
+        animation: spinner-bars-animation .8s linear infinite;
+        animation-delay: -.8s;
+      }
+      .spinner-bars-2 {
+        animation-delay: -.65s;
+      }
+      .spinner-bars-3 {
+        animation-delay: -0.5s;
+      }
+      @keyframes spinner-bars-animation {
+        0% {
+          y: 1px;
+          height: 22px;
+        }
+        93.75% {
+          y: 5px;
+          height: 14px;
+          opacity: 0.2;
+        }
+      }
+    `}</style>
+    <rect className="spinner-bar" fill="currentColor" height="22" width="6" x="1" y="1" />
+    <rect
+      className="spinner-bar spinner-bars-2"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="9"
+      y="1"
+    />
+    <rect
+      className="spinner-bar spinner-bars-3"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="17"
+      y="1"
+    />
+  </svg>
+)
+
+const Infinite = ({ size = 24, ...props }) => (
+  <svg
+    height={size}
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 100 100"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>Loading...</title>
+    <path
+      d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
+      fill="none"
+      stroke="currentColor"
+      strokeDasharray="205.271142578125 51.317785644531256"
+      strokeLinecap="round"
+      strokeWidth="10"
+      style={{
+        transform: "scale(0.8)",
+        transformOrigin: "50px 50px"
+      }}
+    >
+      <animate
+        attributeName="stroke-dashoffset"
+        dur="2s"
+        keyTimes="0;1"
+        repeatCount="indefinite"
+        values="0;256.58892822265625"
+      />
+    </path>
+  </svg>
+)
+
+export const Spinner = ({ variant, ...props }) => {
+  switch (variant) {
+    case "circle":
+      return <Circle {...props} />
+    case "pinwheel":
+      return <Pinwheel {...props} />
+    case "circle-filled":
+      return <CircleFilled {...props} />
+    case "ellipsis":
+      return <Ellipsis {...props} />
+    case "ring":
+      return <Ring {...props} />
+    case "bars":
+      return <Bars {...props} />
+    case "infinite":
+      return <Infinite {...props} />
+    default:
+      return <Default {...props} />
+  }
+}

package/template/src/cli/components/stepper.jsx

@@ -0,0 +1,408 @@
+import { Slot } from "@radix-ui/react-slot"
+import * as Stepperize from "@stepperize/react"
+import { cva } from "class-variance-authority"
+import { Children, createContext, isValidElement, useContext, useMemo } from "react"
+import { Button } from "#cli/components/ui/patched/button.jsx"
+import { cn } from "#cli/lib/utils.mjs"
+
+const StepperContext = createContext(null)
+
+const useStepperProvider = () => {
+  const context = useContext(StepperContext)
+  if (!context) {
+    throw new Error("useStepper must be used within a StepperProvider.")
+  }
+  return context
+}
+
+const defineStepper = (...steps) => {
+  const { Scoped, useStepper, ...rest } = Stepperize.defineStepper(...steps)
+
+  const StepperContainer = ({ children, className, ...props }) => {
+    const methods = useStepper()
+
+    return (
+      <div date-component="stepper" className={cn("w-full", className)} {...props}>
+        {typeof children === "function" ? children({ methods }) : children}
+      </div>
+    )
+  }
+
+  return {
+    ...rest,
+    useStepper,
+    Stepper: {
+      Provider: ({
+        variant = "horizontal",
+        labelOrientation = "horizontal",
+        tracking = false,
+        children,
+        className,
+        ...props
+      }) => {
+        return (
+          <StepperContext.Provider value={{ variant, labelOrientation, tracking }}>
+            <Scoped initialStep={props.initialStep} initialMetadata={props.initialMetadata}>
+              <StepperContainer className={className} {...props}>
+                {children}
+              </StepperContainer>
+            </Scoped>
+          </StepperContext.Provider>
+        )
+      },
+      Navigation: ({ children, "aria-label": ariaLabel = "Stepper Navigation", ...props }) => {
+        const { variant } = useStepperProvider()
+        return (
+          /* biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: biome-ignore */
+          <nav date-component="stepper-navigation" aria-label={ariaLabel} role="tablist" {...props}>
+            <ol
+              date-component="stepper-navigation-list"
+              className={classForNavigationList({ variant: variant })}
+            >
+              {children}
+            </ol>
+          </nav>
+        )
+      },
+      Step: ({ children, className, icon, ...props }) => {
+        const { variant, labelOrientation } = useStepperProvider()
+        const { current } = useStepper()
+
+        const utils = rest.utils
+        const steps = rest.steps
+
+        const stepIndex = utils.getIndex(props.of)
+        const step = steps[stepIndex]
+        const currentIndex = utils.getIndex(current.id)
+
+        const isLast = utils.getLast().id === props.of
+        const isActive = current.id === props.of
+
+        const dataState = getStepState(currentIndex, stepIndex)
+        const childMap = useStepChildren(children)
+
+        const title = childMap.get("title")
+        const description = childMap.get("description")
+        const panel = childMap.get("panel")
+
+        if (variant === "circle") {
+          return (
+            <li
+              date-component="stepper-step"
+              className={cn(
+                "flex shrink-0 items-center gap-4 rounded-md transition-colors",
+                className
+              )}
+            >
+              <CircleStepIndicator currentStep={stepIndex + 1} totalSteps={steps.length} />
+              <div
+                date-component="stepper-step-content"
+                className="flex flex-col items-start gap-1"
+              >
+                {title}
+                {description}
+              </div>
+            </li>
+          )
+        }
+
+        return (
+          <>
+            <li
+              date-component="stepper-step"
+              className={cn([
+                "group peer relative flex items-center gap-2",
+                "data-[variant=vertical]:flex-row",
+                "data-[label-orientation=vertical]:w-full",
+                "data-[label-orientation=vertical]:flex-col",
+                "data-[label-orientation=vertical]:justify-center"
+              ])}
+              data-variant={variant}
+              data-label-orientation={labelOrientation}
+              data-state={dataState}
+              data-disabled={props.disabled}
+            >
+              <Button
+                id={`step-${step.id}`}
+                date-component="stepper-step-indicator"
+                type="button"
+                role="tab"
+                tabIndex={dataState !== "inactive" ? 0 : -1}
+                className="rounded-full"
+                variant={dataState !== "inactive" ? "default" : "secondary"}
+                size="icon"
+                aria-controls={`step-panel-${props.of}`}
+                aria-current={isActive ? "step" : undefined}
+                aria-posinset={stepIndex + 1}
+                aria-setsize={steps.length}
+                aria-selected={isActive}
+                onKeyDown={(e) =>
+                  onStepKeyDown(e, utils.getNext(props.of), utils.getPrev(props.of))
+                }
+                {...props}
+              >
+                {icon ?? stepIndex + 1}
+              </Button>
+              {variant === "horizontal" && labelOrientation === "vertical" && (
+                <StepperSeparator
+                  orientation="horizontal"
+                  labelOrientation={labelOrientation}
+                  isLast={isLast}
+                  state={dataState}
+                  disabled={props.disabled}
+                />
+              )}
+              <div date-component="stepper-step-content" className="flex flex-col items-start">
+                {title}
+                {description}
+              </div>
+            </li>
+            {variant === "horizontal" && labelOrientation === "horizontal" && (
+              <StepperSeparator
+                orientation="horizontal"
+                isLast={isLast}
+                state={dataState}
+                disabled={props.disabled}
+              />
+            )}
+            {variant === "vertical" && (
+              <div className="flex gap-4">
+                {!isLast && (
+                  <div className="flex justify-center ps-[calc(var(--spacing)_*_4.5_-_1px)]">
+                    <StepperSeparator
+                      orientation="vertical"
+                      isLast={isLast}
+                      state={dataState}
+                      disabled={props.disabled}
+                    />
+                  </div>
+                )}
+                <div className="my-3 flex-1 ps-4">{panel}</div>
+              </div>
+            )}
+          </>
+        )
+      },
+      Title,
+      Description,
+      Panel: ({ children, asChild, ...props }) => {
+        const Comp = asChild ? Slot : "div"
+        const { tracking } = useStepperProvider()
+
+        return (
+          <Comp
+            date-component="stepper-step-panel"
+            ref={(node) => scrollIntoStepperPanel(node, tracking)}
+            {...props}
+          >
+            {children}
+          </Comp>
+        )
+      },
+      Controls: ({ children, className, asChild, ...props }) => {
+        const Comp = asChild ? Slot : "div"
+        return (
+          <Comp
+            date-component="stepper-controls"
+            className={cn("flex justify-end gap-4", className)}
+            {...props}
+          >
+            {children}
+          </Comp>
+        )
+      }
+    }
+  }
+}
+
+const Title = ({ children, className, asChild, ...props }) => {
+  const Comp = asChild ? Slot : "h4"
+
+  return (
+    <Comp
+      date-component="stepper-step-title"
+      className={cn("text-base font-medium", className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+}
+
+const Description = ({ children, className, asChild, ...props }) => {
+  const Comp = asChild ? Slot : "p"
+
+  return (
+    <Comp
+      date-component="stepper-step-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+}
+
+const StepperSeparator = ({ orientation, isLast, labelOrientation, state, disabled }) => {
+  if (isLast) {
+    return null
+  }
+  return (
+    /* biome-ignore lint/a11y/useSemanticElements: biome-ignore */
+    <div
+      date-component="stepper-separator"
+      data-orientation={orientation}
+      data-state={state}
+      data-disabled={disabled}
+      /* biome-ignore lint/a11y/useAriaPropsForRole: biome-ignore */
+      role="separator"
+      tabIndex={-1}
+      className={classForSeparator({ orientation, labelOrientation })}
+    />
+  )
+}
+
+const CircleStepIndicator = ({ currentStep, totalSteps, size = 80, strokeWidth = 6 }) => {
+  const radius = (size - strokeWidth) / 2
+  const circumference = radius * 2 * Math.PI
+  const fillPercentage = (currentStep / totalSteps) * 100
+  const dashOffset = circumference - (circumference * fillPercentage) / 100
+  return (
+    <div
+      date-component="stepper-step-indicator"
+      role="progressbar"
+      aria-valuenow={currentStep}
+      aria-valuemin={1}
+      aria-valuemax={totalSteps}
+      tabIndex={-1}
+      className="relative inline-flex items-center justify-center"
+    >
+      <svg width={size} height={size}>
+        <title>Step Indicator</title>
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className="text-muted-foreground"
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+          className="text-primary transition-all duration-300 ease-in-out"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center">
+        <span className="text-sm font-medium" aria-live="polite">
+          {currentStep} of {totalSteps}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+const classForNavigationList = cva("flex gap-2", {
+  variants: {
+    variant: {
+      horizontal: "flex-row items-center justify-between",
+      vertical: "flex-col",
+      circle: "flex-row items-center justify-between"
+    }
+  }
+})
+
+const classForSeparator = cva(
+  [
+    "bg-muted",
+    "data-[state=completed]:bg-primary data-[disabled]:opacity-50",
+    "transition-all duration-300 ease-in-out"
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-0.5 flex-1",
+        vertical: "h-full w-0.5"
+      },
+      labelOrientation: {
+        vertical: "absolute left-[calc(50%+30px)] right-[calc(-50%+20px)] top-5 block shrink-0"
+      }
+    }
+  }
+)
+
+function scrollIntoStepperPanel(node, tracking) {
+  if (tracking) {
+    node?.scrollIntoView({ behavior: "smooth", block: "center" })
+  }
+}
+
+const useStepChildren = (children) => {
+  return useMemo(() => extractChildren(children), [children])
+}
+
+const extractChildren = (children) => {
+  const childrenArray = Children.toArray(children)
+  const map = new Map()
+
+  for (const child of childrenArray) {
+    if (isValidElement(child)) {
+      if (child.type === Title) {
+        map.set("title", child)
+      } else if (child.type === Description) {
+        map.set("description", child)
+      } else {
+        map.set("panel", child)
+      }
+    }
+  }
+
+  return map
+}
+
+const onStepKeyDown = (e, nextStep, prevStep) => {
+  const { key } = e
+  const directions = {
+    next: ["ArrowRight", "ArrowDown"],
+    prev: ["ArrowLeft", "ArrowUp"]
+  }
+
+  if (directions.next.includes(key) || directions.prev.includes(key)) {
+    const direction = directions.next.includes(key) ? "next" : "prev"
+    const step = direction === "next" ? nextStep : prevStep
+
+    if (!step) {
+      return
+    }
+
+    const stepElement = document.getElementById(`step-${step.id}`)
+    if (!stepElement) {
+      return
+    }
+
+    const isActive = stepElement.parentElement?.getAttribute("data-state") !== "inactive"
+    if (isActive || direction === "prev") {
+      stepElement.focus()
+    }
+  }
+}
+
+const getStepState = (currentIndex, stepIndex) => {
+  if (currentIndex === stepIndex) {
+    return "active"
+  }
+  if (currentIndex > stepIndex) {
+    return "completed"
+  }
+  return "inactive"
+}
+
+export { defineStepper }

package/template/src/cli/components/ui/avatar.jsx

@@ -0,0 +1,36 @@
+"use client"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "#cli/lib/utils.mjs"
+
+function Avatar({ className, ...props }) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({ className, ...props }) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarFallback, AvatarImage }

package/template/src/cli/components/ui/badge.jsx

@@ -0,0 +1,31 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+
+import { cn } from "#cli/lib/utils.mjs"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+)
+
+function Badge({ className, variant, asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "span"
+
+  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }