@duskmoon-dev/art-components 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# @duskmoon-dev/art-components
+
+React wrappers for `@duskmoon-dev/css-art`.
+
+## Installation
+
+```bash
+bun add @duskmoon-dev/art-components @duskmoon-dev/css-art
+```
+
+Import the CSS once in your app:
+
+```css
+@import "@duskmoon-dev/art-components/styles.css";
+```
+
+## Usage
+
+```tsx
+import { ArtMoon, ArtPlasmaBall } from "@duskmoon-dev/art-components";
+
+export function Demo() {
+  return (
+    <>
+      <ArtMoon crescent glow size="lg" />
+      <ArtPlasmaBall defaultChecked />
+    </>
+  );
+}
+```
+
+## Components
+
+- `ArtMoon`
+- `ArtSun`
+- `ArtAtom`
+- `ArtEclipse`
+- `ArtMountain`
+- `ArtSnowflake`
+- `ArtPlasmaBall`
+- `ArtCircularGallery`
+- `ArtCatStargazer`
+- `ArtFlowerAnimation`
+- `ArtColorSpin`
+- `ArtSynthwaveStarfield`
+- `ArtCsswitch` / `ArtCSSwitch`
+- `ArtSnowballPreloader`
+- `ArtGeminiInput`
+
+All decorative components forward refs to their root element, accept `className`,
+`style`, and DuskMoon CSS custom properties through `style`.

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+export type ArtSize = "sm" | "default" | "lg";
+export type ArtExtendedSize = ArtSize | "xl";
+export type ArtStyle = CSSProperties & {
+    [key: `--${string}`]: string | number | undefined;
+};
+interface BaseArtProps extends Omit<ComponentProps<"div">, "style"> {
+    decorative?: boolean;
+    style?: ArtStyle;
+}
+interface SizedArtProps extends BaseArtProps {
+    size?: ArtSize;
+}
+interface ExtendedSizedArtProps extends BaseArtProps {
+    size?: ArtExtendedSize;
+}
+export interface ArtMoonProps extends ExtendedSizedArtProps {
+    crescent?: boolean;
+    glow?: boolean;
+}
+export declare const ArtMoon: React.ForwardRefExoticComponent<Omit<ArtMoonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ArtSunProps extends ExtendedSizedArtProps {
+    rays?: boolean;
+    sunset?: boolean;
+    pulse?: boolean;
+}
+export declare const ArtSun: React.ForwardRefExoticComponent<Omit<ArtSunProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtAtomProps = SizedArtProps;
+export declare const ArtAtom: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtEclipseProps = SizedArtProps;
+export declare const ArtEclipse: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtMountainProps = SizedArtProps;
+export declare const ArtMountain: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ArtSnowflakeProps extends BaseArtProps {
+    unicode?: boolean;
+    fall?: boolean;
+}
+export declare const ArtSnowflake: React.ForwardRefExoticComponent<Omit<ArtSnowflakeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ArtPlasmaBallProps extends SizedArtProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    hideBase?: boolean;
+    hideElectrode?: boolean;
+    inputProps?: Omit<ComponentProps<"input">, "type" | "checked" | "defaultChecked">;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const ArtPlasmaBall: React.ForwardRefExoticComponent<Omit<ArtPlasmaBallProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ArtCircularGalleryItem {
+    id?: string;
+    title: string;
+    src: string;
+    href?: string;
+    alt?: string;
+    target?: ComponentProps<"a">["target"];
+    rel?: ComponentProps<"a">["rel"];
+}
+export interface ArtCircularGalleryProps extends Omit<SizedArtProps, "title"> {
+    title?: ReactNode;
+    items: ArtCircularGalleryItem[];
+}
+export declare const ArtCircularGallery: React.ForwardRefExoticComponent<Omit<ArtCircularGalleryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtCatStargazerProps = SizedArtProps;
+export declare const ArtCatStargazer: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtFlowerAnimationProps = SizedArtProps;
+export declare const ArtFlowerAnimation: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtColorSpinProps = SizedArtProps;
+export declare const ArtColorSpin: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ArtSynthwaveStarfieldProps extends SizedArtProps {
+    paused?: boolean;
+}
+export declare const ArtSynthwaveStarfield: React.ForwardRefExoticComponent<Omit<ArtSynthwaveStarfieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtCsswitchProps = SizedArtProps;
+export declare const ArtCsswitch: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ArtCSSwitch: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ArtSnowballPreloaderProps = SizedArtProps;
+export declare const ArtSnowballPreloader: React.ForwardRefExoticComponent<Omit<SizedArtProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type GeminiButtonProps = Omit<ComponentProps<"button">, "children">;
+export interface ArtGeminiInputProps extends Omit<BaseArtProps, "children" | "onChange" | "defaultValue" | "style"> {
+    size?: ArtSize;
+    style?: ArtStyle;
+    value?: ComponentProps<"textarea">["value"];
+    defaultValue?: ComponentProps<"textarea">["defaultValue"];
+    onChange?: ComponentProps<"textarea">["onChange"];
+    placeholder?: string;
+    name?: string;
+    rows?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    fieldClassName?: string;
+    textareaProps?: Omit<ComponentProps<"textarea">, "className" | "value" | "defaultValue" | "onChange" | "placeholder" | "name" | "rows" | "disabled" | "readOnly" | "required">;
+    before?: ReactNode;
+    after?: ReactNode;
+    beforeButtonProps?: GeminiButtonProps;
+    afterButtonProps?: GeminiButtonProps;
+}
+export declare const ArtGeminiInput: React.ForwardRefExoticComponent<Omit<ArtGeminiInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/index.js

@@ -0,0 +1,801 @@
+"use client";
+
+// src/index.tsx
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function sizeClass(baseClass, size) {
+  return size && size !== "default" ? `${baseClass}-${size}` : undefined;
+}
+function getDecorativeProps(decorative, props) {
+  if (decorative === false || props["aria-hidden"] !== undefined || props["aria-label"] || props["aria-labelledby"] || props.role || props.title) {
+    return {};
+  }
+  return { "aria-hidden": true };
+}
+function cssUrl(value) {
+  return `url("${value.replaceAll('"', "\\\"")}")`;
+}
+var ArtMoon = forwardRef(({
+  size = "default",
+  crescent = false,
+  glow = false,
+  decorative,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("art-moon", sizeClass("art-moon", size), crescent && "art-moon-crescent", glow && "art-moon-glow", className),
+  ...getDecorativeProps(decorative, props),
+  ...props
+}));
+ArtMoon.displayName = "ArtMoon";
+var ArtSun = forwardRef(({
+  size = "default",
+  rays = false,
+  sunset = false,
+  pulse = false,
+  decorative,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("art-sun", sizeClass("art-sun", size), rays && "art-sun-rays", sunset && "art-sun-sunset", pulse && "art-sun-pulse", className),
+  ...getDecorativeProps(decorative, props),
+  ...props
+}));
+ArtSun.displayName = "ArtSun";
+var ArtAtom = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: cn("art-atom", sizeClass("art-atom", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx("div", {
+      className: "electron"
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "electron-alpha"
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "electron-omega"
+    })
+  ]
+}));
+ArtAtom.displayName = "ArtAtom";
+var ArtEclipse = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("art-eclipse", sizeClass("art-eclipse", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx("div", {
+    className: cn("layer", `layer-${index + 1}`)
+  }, index))
+}));
+ArtEclipse.displayName = "ArtEclipse";
+var ArtMountain = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: cn("art-mountain", sizeClass("art-mountain", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: [
+    Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("div", {
+      className: "mountain"
+    }, `mountain-${index}`)),
+    Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx("div", {
+      className: "tree"
+    }, `tree-${index}`)),
+    /* @__PURE__ */ jsx("div", {
+      className: "lights",
+      children: Array.from({ length: 9 }, (_, index) => /* @__PURE__ */ jsx("div", {
+        className: "borealis"
+      }, index))
+    })
+  ]
+}));
+ArtMountain.displayName = "ArtMountain";
+var ArtSnowflake = forwardRef(({ unicode = false, fall = false, decorative, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("art-snowflake", unicode && "art-snowflake-unicode", fall && "art-snowflake-fall", className),
+  ...getDecorativeProps(decorative, props),
+  ...props
+}));
+ArtSnowflake.displayName = "ArtSnowflake";
+function PlasmaRay({ bigwave = false }) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("ray", bigwave && "bigwave"),
+    children: [
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {})
+    ]
+  });
+}
+function PlasmaRays({ group }) {
+  const rayCount = group > 3 ? 3 : 5;
+  return /* @__PURE__ */ jsx("div", {
+    className: "rays",
+    children: Array.from({ length: rayCount }, (_, index) => /* @__PURE__ */ jsx(PlasmaRay, {
+      bigwave: group >= 4 || index % 2 === 1
+    }, index))
+  });
+}
+var ArtPlasmaBall = forwardRef(({
+  size = "default",
+  checked,
+  defaultChecked,
+  hideBase = false,
+  hideElectrode = false,
+  inputProps,
+  onCheckedChange,
+  className,
+  ...props
+}, ref) => {
+  const {
+    className: inputClassName,
+    onChange: inputOnChange,
+    ...restInputProps
+  } = inputProps ?? {};
+  const inputLabelProps = restInputProps["aria-label"] || restInputProps["aria-labelledby"] ? {} : { "aria-label": "Toggle plasma ball" };
+  const handleChange = (event) => {
+    onCheckedChange?.(event.currentTarget.checked);
+    inputOnChange?.(event);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn("art-plasma-ball", sizeClass("art-plasma-ball", size), hideBase && "art-plasma-ball-no-base", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        type: "checkbox",
+        className: cn("switcher", inputClassName),
+        checked,
+        defaultChecked,
+        onChange: handleChange,
+        ...inputLabelProps,
+        ...restInputProps
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "glassball",
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: cn("electrode", hideElectrode && "hide-electrode")
+          }),
+          Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(PlasmaRays, {
+            group: index
+          }, index))
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "base",
+        children: [
+          /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx("span", {})
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "switch"
+      })
+    ]
+  });
+});
+ArtPlasmaBall.displayName = "ArtPlasmaBall";
+var ArtCircularGallery = forwardRef(({
+  title = "Gallery",
+  items,
+  size = "default",
+  decorative,
+  className,
+  ...props
+}, ref) => {
+  const reactId = useId().replaceAll(":", "");
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn("art-circular-gallery", sizeClass("art-circular-gallery", size), className),
+    ...getDecorativeProps(decorative, props),
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx("h1", {
+        children: title
+      }) : null,
+      items.map((item, index) => {
+        const id = item.id ?? `${reactId}-gallery-item-${index + 1}`;
+        const itemStyle = {
+          "--i": index + 1,
+          "--bg-img": cssUrl(item.src)
+        };
+        return /* @__PURE__ */ jsx("div", {
+          id,
+          "data-title": item.title,
+          style: itemStyle,
+          children: /* @__PURE__ */ jsx("a", {
+            href: item.href ?? `#${id}`,
+            target: item.target,
+            rel: item.rel,
+            children: /* @__PURE__ */ jsx("img", {
+              src: item.src,
+              alt: item.alt ?? item.title
+            })
+          })
+        }, id);
+      })
+    ]
+  });
+});
+ArtCircularGallery.displayName = "ArtCircularGallery";
+var ArtCatStargazer = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: cn("art-cat-stargazer", sizeClass("art-cat-stargazer", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx("div", {
+      className: "moon"
+    }),
+    /* @__PURE__ */ jsxs("div", {
+      className: "cat",
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: "bubble"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "backpack"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "tail"
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "body",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              className: "leg"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "paw"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "paw"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "ear"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "ear"
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "head",
+          children: [
+            Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("div", {
+              className: "whisker"
+            }, index)),
+            /* @__PURE__ */ jsx("div", {
+              className: "nose"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "eye"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "eye"
+            })
+          ]
+        })
+      ]
+    })
+  ]
+}));
+ArtCatStargazer.displayName = "ArtCatStargazer";
+function Flower({ index }) {
+  const leafCount = index === 1 ? 6 : 4;
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("flower", `flower--${index}`),
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: cn("flower__leafs", `flower__leafs--${Math.min(index, 3)}`),
+        children: [
+          Array.from({ length: 4 }, (_, leafIndex) => /* @__PURE__ */ jsx("div", {
+            className: cn("flower__leaf", `flower__leaf--${leafIndex + 1}`)
+          }, leafIndex)),
+          /* @__PURE__ */ jsx("div", {
+            className: "flower__white-circle"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flower__line",
+        children: Array.from({ length: leafCount }, (_, leafIndex) => /* @__PURE__ */ jsx("div", {
+          className: cn("flower__line__leaf", `flower__line__leaf--${leafIndex + 1}`)
+        }, leafIndex))
+      }),
+      Array.from({ length: 8 }, (_, lightIndex) => /* @__PURE__ */ jsx("div", {
+        className: cn("flower__light", `flower__light--${lightIndex + 1}`)
+      }, lightIndex))
+    ]
+  });
+}
+function FlowerGrass({ index }) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("flower__grass", `flower__grass--${index}`),
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "flower__grass--top"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flower__grass--bottom"
+      }),
+      Array.from({ length: 8 }, (_, leafIndex) => /* @__PURE__ */ jsx("div", {
+        className: cn("flower__grass__leaf", `flower__grass__leaf--${leafIndex + 1}`)
+      }, leafIndex)),
+      /* @__PURE__ */ jsx("div", {
+        className: "flower__grass__overlay"
+      })
+    ]
+  });
+}
+function LongGrass({ index }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn("long-g", `long-g--${index}`),
+    children: Array.from({ length: 4 }, (_, leafIndex) => /* @__PURE__ */ jsx("div", {
+      className: cn("leaf", `leaf--${leafIndex}`)
+    }, leafIndex))
+  });
+}
+function FrontGrass() {
+  return /* @__PURE__ */ jsx("div", {
+    className: "flower__g-front",
+    children: /* @__PURE__ */ jsx("div", {
+      className: "flower__g-front__line",
+      children: Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx("div", {
+        className: cn("flower__g-front__leaf-wrapper", `flower__g-front__leaf-wrapper--${index + 1}`),
+        children: /* @__PURE__ */ jsx("div", {
+          className: "flower__g-front__leaf"
+        })
+      }, index))
+    })
+  });
+}
+function FrontRightGrass() {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flower__g-fr",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "leaf"
+      }),
+      Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx("div", {
+        className: cn("flower__g-fr__leaf", `flower__g-fr__leaf--${index + 1}`)
+      }, index))
+    ]
+  });
+}
+function Bubble() {
+  return /* @__PURE__ */ jsx("div", {
+    className: "bubble",
+    children: /* @__PURE__ */ jsx("svg", {
+      className: "heart",
+      viewBox: "0 0 32 29.6",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", {
+        d: "M23.6 0c-2.9 0-5.6 1.6-7.6 4.1C14 1.6 11.3 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.3 16 21.2 16 21.2S32 17.7 32 8.4C32 3.8 28.2 0 23.6 0z"
+      })
+    })
+  });
+}
+var ArtFlowerAnimation = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: cn("art-flower-animation", sizeClass("art-flower-animation", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx("div", {
+      className: "night"
+    }),
+    /* @__PURE__ */ jsxs("div", {
+      className: "flowers",
+      children: [
+        /* @__PURE__ */ jsx(Flower, {
+          index: 1
+        }),
+        /* @__PURE__ */ jsx(Flower, {
+          index: 2
+        }),
+        /* @__PURE__ */ jsx(Flower, {
+          index: 3
+        }),
+        /* @__PURE__ */ jsx(Flower, {
+          index: 4
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "growing-grass",
+          children: [
+            /* @__PURE__ */ jsx(FlowerGrass, {
+              index: 1
+            }),
+            /* @__PURE__ */ jsx(FlowerGrass, {
+              index: 2
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "flower__g-long",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              className: "flower__g-long__top"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "flower__g-long__bottom"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "flower__g-right flower__g-right--1",
+          children: /* @__PURE__ */ jsx("div", {
+            className: "leaf"
+          })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "flower__g-right flower__g-right--2",
+          children: /* @__PURE__ */ jsx("div", {
+            className: "leaf"
+          })
+        }),
+        /* @__PURE__ */ jsx(FrontGrass, {}),
+        /* @__PURE__ */ jsx(FrontRightGrass, {}),
+        Array.from({ length: 7 }, (_, index) => /* @__PURE__ */ jsx(LongGrass, {
+          index: index + 1
+        }, index)),
+        /* @__PURE__ */ jsx("div", {
+          className: "bubbles",
+          children: Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ jsx(Bubble, {}, index))
+        })
+      ]
+    })
+  ]
+}));
+ArtFlowerAnimation.displayName = "ArtFlowerAnimation";
+var ArtColorSpin = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("art-color-spin", sizeClass("art-color-spin", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: /* @__PURE__ */ jsx("ul", {
+    children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("li", {
+      style: { "--i": index }
+    }, index))
+  })
+}));
+ArtColorSpin.displayName = "ArtColorSpin";
+var ArtSynthwaveStarfield = forwardRef(({ size = "default", paused = false, decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: cn("art-synthwave-starfield", sizeClass("art-synthwave-starfield", size), paused && "art-synthwave-starfield-paused", className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx("div", {
+      className: "art-synthwave-starfield-sides art-synthwave-starfield-lefrig"
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "art-synthwave-starfield-sides art-synthwave-starfield-topbot"
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "art-synthwave-starfield-stars"
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "art-synthwave-starfield-stars"
+    })
+  ]
+}));
+ArtSynthwaveStarfield.displayName = "ArtSynthwaveStarfield";
+function SwitchButton({ className }) {
+  return /* @__PURE__ */ jsx("button", {
+    type: "button",
+    className,
+    tabIndex: -1,
+    "aria-hidden": "true"
+  });
+}
+function SwitchBar() {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "bar",
+    children: [
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "sub-lr"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "sub-rr"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "minus-sign"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "peripheral"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "cord"
+      })
+    ]
+  });
+}
+function SwitchConnector() {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "connector",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "con-lr",
+        children: /* @__PURE__ */ jsx("div", {
+          className: "con-part"
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "con-rr",
+        children: /* @__PURE__ */ jsx("div", {
+          className: "con-part"
+        })
+      })
+    ]
+  });
+}
+function LeftJoycon() {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "controller",
+    children: [
+      /* @__PURE__ */ jsx(SwitchBar, {}),
+      /* @__PURE__ */ jsx(SwitchConnector, {}),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "minus"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "mushroom round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction arrow up round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction arrow down round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction arrow left round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction arrow right round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "menu"
+      })
+    ]
+  });
+}
+function RightJoycon() {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "controller right",
+    children: [
+      /* @__PURE__ */ jsx(SwitchBar, {}),
+      /* @__PURE__ */ jsx(SwitchConnector, {}),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "minus plus"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "mushroom round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction x round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction y round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction a round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction b round"
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "home round"
+      })
+    ]
+  });
+}
+function SwitchBody() {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "body",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "frame",
+        children: /* @__PURE__ */ jsx("div", {
+          className: "screen"
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "lr"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "lr rr"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "volume"
+      })
+    ]
+  });
+}
+function ComfortGrip() {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "comfort-grip",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "grip"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "grip right"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "holder",
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "main-frame",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              className: "logo"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "logo right"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "nintendo",
+              children: "NINTENDO"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "switch",
+              children: "SWITCH"
+            }),
+            Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx("div", {
+              className: "light"
+            }, index))
+          ]
+        })
+      })
+    ]
+  });
+}
+var ArtCsswitch = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: cn("art-csswitch", sizeClass("art-csswitch", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx(SwitchBody, {}),
+    /* @__PURE__ */ jsx(ComfortGrip, {}),
+    /* @__PURE__ */ jsx(LeftJoycon, {}),
+    /* @__PURE__ */ jsx(RightJoycon, {})
+  ]
+}));
+ArtCsswitch.displayName = "ArtCsswitch";
+var ArtCSSwitch = ArtCsswitch;
+var ArtSnowballPreloader = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: cn("art-snowball-preloader", sizeClass("art-snowball-preloader", size), className),
+  ...getDecorativeProps(decorative, props),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx("div", {
+      className: "art-snowball-preloader-outer-ring"
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "art-snowball-preloader-inner-ring"
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "art-snowball-preloader-track-cover"
+    }),
+    /* @__PURE__ */ jsxs("div", {
+      className: "art-snowball-preloader-ball",
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: "art-snowball-preloader-ball-texture"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "art-snowball-preloader-ball-inner-shadow"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "art-snowball-preloader-ball-outer-shadow"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "art-snowball-preloader-ball-side-shadows"
+        })
+      ]
+    })
+  ]
+}));
+ArtSnowballPreloader.displayName = "ArtSnowballPreloader";
+var ArtGeminiInput = forwardRef(({
+  size = "default",
+  className,
+  value,
+  defaultValue,
+  onChange,
+  placeholder,
+  name,
+  rows,
+  disabled,
+  readOnly,
+  required,
+  fieldClassName,
+  textareaProps,
+  before = "+",
+  after = ">",
+  beforeButtonProps,
+  afterButtonProps,
+  ...props
+}, ref) => {
+  const {
+    className: beforeButtonClassName,
+    type: beforeButtonType = "button",
+    ...restBeforeButtonProps
+  } = beforeButtonProps ?? {};
+  const {
+    className: afterButtonClassName,
+    type: afterButtonType = "button",
+    ...restAfterButtonProps
+  } = afterButtonProps ?? {};
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn("art-gemini-input", sizeClass("art-gemini-input", size), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "art-gemini-input-border"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "art-gemini-input-inner",
+        children: [
+          before !== null ? /* @__PURE__ */ jsx("button", {
+            type: beforeButtonType,
+            className: cn("art-gemini-input-btn", beforeButtonClassName),
+            disabled: disabled || beforeButtonProps?.disabled,
+            ...restBeforeButtonProps,
+            children: before
+          }) : null,
+          /* @__PURE__ */ jsx("textarea", {
+            className: cn("art-gemini-input-field", fieldClassName),
+            value,
+            defaultValue,
+            onChange,
+            placeholder,
+            name,
+            rows,
+            disabled,
+            readOnly,
+            required,
+            ...textareaProps
+          }),
+          after !== null ? /* @__PURE__ */ jsx("button", {
+            type: afterButtonType,
+            className: cn("art-gemini-input-btn", afterButtonClassName),
+            disabled: disabled || afterButtonProps?.disabled,
+            ...restAfterButtonProps,
+            children: after
+          }) : null
+        ]
+      })
+    ]
+  });
+});
+ArtGeminiInput.displayName = "ArtGeminiInput";
+export {
+  ArtSynthwaveStarfield,
+  ArtSun,
+  ArtSnowflake,
+  ArtSnowballPreloader,
+  ArtPlasmaBall,
+  ArtMountain,
+  ArtMoon,
+  ArtGeminiInput,
+  ArtFlowerAnimation,
+  ArtEclipse,
+  ArtCsswitch,
+  ArtColorSpin,
+  ArtCircularGallery,
+  ArtCatStargazer,
+  ArtCSSwitch,
+  ArtAtom
+};

package/dist/styles.css

@@ -0,0 +1 @@
+@import "@duskmoon-dev/css-art";

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@duskmoon-dev/art-components",
+  "version": "0.1.0",
+  "description": "React components for @duskmoon-dev/css-art pure CSS illustrations",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/styles.css",
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && bun run build:js && bun run build:types && bun run build:css",
+    "build:js": "bun run build.ts",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build:css": "mkdir -p dist && cp src/styles.css dist/styles.css",
+    "test": "bun test --preload ../../test/setup.ts tests",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "duskmoon",
+    "react",
+    "css-art",
+    "pure-css",
+    "components"
+  ],
+  "author": "DuskMoon Development",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/duskmoon-dev/duskmoon-react.git",
+    "directory": "packages/art-components"
+  },
+  "peerDependencies": {
+    "@duskmoon-dev/css-art": ">=1.17.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "devDependencies": {
+    "@duskmoon-dev/css-art": "^1.17.0",
+    "@testing-library/react": "16.3.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "happy-dom": "20.10.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}