Storyden

import { sva } from "@/styled-system/css"; import { styled } from "@/styled-system/jsx"; import styles from "./spinner.module.css"; const spinner = sva({ slots: ["root"], base: { root: {}, }, variants: { size: { sm: { root: { w: "4", h: "4", borderWidth: "[2px]", }, }, md: { root: { w: "5", h: "5", borderWidth: "[3px]", }, }, lg: { root: { w: "6", h: "6", borderWidth: "[5px]", }, }, }, }, defaultVariants: { size: "md", }, }); type SpinnerProps = { size?: "sm" | "md" | "lg"; }; export function Spinner({ size }: SpinnerProps) { const classes = spinner({ size }); return <styled.div className={`${styles["spinner"]} ${classes.root}`} />; }