@nattui/react-components 0.0.11 → 0.0.13

package/dist/button-background.module-T5B7XZ2Z.module.css

@@ -1,39 +0,0 @@
-/* Base */
-.button_background {
-  bottom: 50%;
-  filter: none !important;
-  left: 0;
-  opacity: 0.2;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition-duration: inherit;
-  transition-property: opacity;
-  z-index: -1;
-}
-
-/* Rounded */
-.button_background__rounded_base {
-  border-radius: 7px;
-}
-
-.button_background__rounded_full {
-  border-radius: 9999px;
-}
-
-/* Variant */
-.button_background__variant_accent {
-  background: linear-gradient(
-    to bottom,
-    var(--color-primary-7, #edadc8),
-    var(--color-primary-8, #e58fb1)
-  );
-}
-
-.button_background__variant_primary {
-  background: linear-gradient(
-    to bottom,
-    var(--color-gray-10, #86848d),
-    var(--color-gray-11, #6f6e77)
-  );
-}

package/dist/index.d.ts

@@ -1,70 +0,0 @@
-import { ComponentProps, ReactNode, JSX } from 'react';
-
-interface ButtonProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
-    iconEnd?: ReactNode;
-    iconOnly?: boolean;
-    iconStart?: ReactNode;
-    isActive?: boolean;
-    isDisabled?: boolean;
-    isFullWidth?: boolean;
-    isLoading?: boolean;
-    isRounded?: boolean;
-    size?: 32 | 36 | 40 | 44;
-    variant?: "accent" | "ghost" | "primary" | "secondary";
-}
-type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText;
-interface ButtonPropsWithIcon extends ButtonProps {
-    children?: ReactNode;
-    iconEnd?: never;
-    iconOnly: true;
-    iconStart?: never;
-}
-interface ButtonPropsWithText extends ButtonProps {
-    children?: string;
-    iconOnly?: false;
-}
-declare function Button(props: ButtonPropsInternal): JSX.Element;
-declare const BUTTON_CLASS_NAME: {
-    readonly BASE: string;
-    readonly ICON_ONLY: string;
-    readonly ROUNDED: {
-        readonly BASE: string;
-        readonly FULL: string;
-    };
-    readonly SIZE: {
-        readonly 32: string;
-        readonly 36: string;
-        readonly 40: string;
-        readonly 44: string;
-    };
-    readonly VARIANT: {
-        readonly ACCENT: string;
-        readonly GHOST: string;
-        readonly PRIMARY: string;
-        readonly SECONDARY: string;
-    };
-    readonly WIDTH: {
-        readonly BASE: string;
-        readonly FULL: string;
-    };
-};
-
-interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "disabled" | "readOnly"> {
-    isActive?: boolean;
-    isDisabled?: boolean;
-    isReadOnly?: boolean;
-}
-declare function Input(props: InputProps): JSX.Element;
-declare const INPUT_CLASS_NAME: {
-    readonly BASE: string;
-    readonly PASSWORD: string;
-};
-
-interface LabelProps extends ComponentProps<"label"> {
-}
-declare function Label(props: LabelProps): JSX.Element;
-declare const LABEL_CLASS_NAME: {
-    readonly BASE: string;
-};
-
-export { BUTTON_CLASS_NAME, Button, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps };

package/dist/index.js

@@ -1,176 +0,0 @@
-'use strict';
-
-var styles = require('./button-background.module-T5B7XZ2Z.module.css');
-var jsxRuntime = require('react/jsx-runtime');
-var styles2 = require('./button-spinner.module-4TBETQ4T.module.css');
-var styles3 = require('./button.module-HTK2BWYK.module.css');
-var styles4 = require('./input.module-M44BKREB.module.css');
-var styles5 = require('./label.module-4CZ6ETIR.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var styles2__default = /*#__PURE__*/_interopDefault(styles2);
-var styles3__default = /*#__PURE__*/_interopDefault(styles3);
-var styles4__default = /*#__PURE__*/_interopDefault(styles4);
-var styles5__default = /*#__PURE__*/_interopDefault(styles5);
-
-// src/button-background.tsx
-function ButtonBackground(props) {
-  const { isRounded = false, variant = "primary" } = props;
-  const combinedBackgroundStyles = `
-    ${BUTTON_BACKGROUND_CLASS_NAME.BASE}
-    ${isRounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.BASE}
-    ${variant === "accent" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.ACCENT : ""}
-    ${variant === "primary" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.PRIMARY : ""}
-  `.replaceAll(/\s+/g, " ").trim();
-  if (!(variant === "accent" || variant === "primary")) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: combinedBackgroundStyles,
-      "data-element": "button-background"
-    }
-  );
-}
-var BUTTON_BACKGROUND_CLASS_NAME = {
-  BASE: styles__default.default.button_background,
-  ROUNDED: {
-    BASE: styles__default.default.button_background__rounded_base,
-    FULL: styles__default.default.button_background__rounded_full
-  },
-  VARIANT: {
-    ACCENT: styles__default.default.button_background__variant_accent,
-    PRIMARY: styles__default.default.button_background__variant_primary
-  }
-};
-function ButtonSpinner(props) {
-  const { size = 16 } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: styles2__default.default.button_spinner,
-      style: { "--size": `${size}px` },
-      children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {}, index))
-    }
-  );
-}
-function Button(props) {
-  const {
-    children = "",
-    className: customClassName = "",
-    iconEnd = "",
-    iconOnly = false,
-    iconStart = "",
-    isActive = false,
-    isDisabled = false,
-    isFullWidth = false,
-    isLoading = false,
-    isRounded = false,
-    size = 36,
-    type = "button",
-    variant = "primary",
-    ...rest
-  } = props;
-  const combinedClassName = `
-    ${BUTTON_CLASS_NAME.BASE}
-    ${BUTTON_CLASS_NAME.SIZE[size]}
-    ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase()]}
-    ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}
-    ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : ""}
-    ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
-    ${customClassName}
-  `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      "aria-pressed": isActive,
-      className: combinedClassName,
-      disabled: isDisabled || isLoading,
-      type,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ButtonBackground, { isRounded, variant }),
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSpinner, {}),
-        !isLoading && iconStart,
-        iconOnly ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
-        !isLoading && iconEnd
-      ]
-    }
-  );
-}
-var BUTTON_CLASS_NAME = {
-  BASE: styles3__default.default.button,
-  ICON_ONLY: styles3__default.default.button__icon_only,
-  ROUNDED: {
-    BASE: styles3__default.default.button__rounded_base,
-    FULL: styles3__default.default.button__rounded_full
-  },
-  SIZE: {
-    32: styles3__default.default.button__size_32,
-    36: styles3__default.default.button__size_36,
-    40: styles3__default.default.button__size_40,
-    44: styles3__default.default.button__size_44
-  },
-  VARIANT: {
-    ACCENT: styles3__default.default.button__variant_accent,
-    GHOST: styles3__default.default.button__variant_ghost,
-    PRIMARY: styles3__default.default.button__variant_primary,
-    SECONDARY: styles3__default.default.button__variant_secondary
-  },
-  WIDTH: {
-    BASE: styles3__default.default.button__width_base,
-    FULL: styles3__default.default.button__width_full
-  }
-};
-function Input(props) {
-  const {
-    className: customClassName = "",
-    isActive = false,
-    isDisabled = false,
-    isReadOnly = false,
-    type = "text",
-    ...rest
-  } = props;
-  const isPassword = type === "password";
-  const combinedClassName = `
-    ${INPUT_CLASS_NAME.BASE}
-    ${isPassword ? INPUT_CLASS_NAME.PASSWORD : ""}
-    ${customClassName}
-  `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      "aria-pressed": isActive,
-      className: combinedClassName,
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      type,
-      ...rest
-    }
-  );
-}
-var INPUT_CLASS_NAME = {
-  BASE: styles4__default.default.input,
-  PASSWORD: styles4__default.default.input__password
-};
-function Label(props) {
-  const { className: customClassName = "", ...rest } = props;
-  const combinedClassName = `
-    ${LABEL_CLASS_NAME.BASE}
-    ${customClassName}
-  `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: combinedClassName, ...rest });
-}
-var LABEL_CLASS_NAME = {
-  BASE: styles5__default.default.label
-};
-
-exports.BUTTON_CLASS_NAME = BUTTON_CLASS_NAME;
-exports.Button = Button;
-exports.INPUT_CLASS_NAME = INPUT_CLASS_NAME;
-exports.Input = Input;
-exports.LABEL_CLASS_NAME = LABEL_CLASS_NAME;
-exports.Label = Label;
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx","../src/input.tsx","../src/label.tsx"],"names":["jsx","Fragment","styles","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["import type { JSX } from \"react\"\nimport type { ButtonProps } from \"@/button\"\nimport styles from \"@/button-background.module.css\"\n\nexport interface ButtonBackgroundProps\n  extends Pick<ButtonProps, \"isRounded\" | \"variant\"> {}\n\nexport function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {\n  const { isRounded = false, variant = \"primary\" } = props\n\n  const combinedBackgroundStyles = `\n    ${BUTTON_BACKGROUND_CLASS_NAME.BASE}\n    ${isRounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.BASE}\n    ${variant === \"accent\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.ACCENT : \"\"}\n    ${variant === \"primary\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.PRIMARY : \"\"}\n  `\n    .replaceAll(/\\s+/g, \" \")\n    .trim()\n\n  if (!(variant === \"accent\" || variant === \"primary\")) return <></>\n\n  return (\n    <div\n      className={combinedBackgroundStyles}\n      data-element=\"button-background\"\n    />\n  )\n}\n\nexport const BUTTON_BACKGROUND_CLASS_NAME = {\n  BASE: styles.button_background,\n  ROUNDED: {\n    BASE: styles.button_background__rounded_base,\n    FULL: styles.button_background__rounded_full,\n  },\n  VARIANT: {\n    ACCENT: styles.button_background__variant_accent,\n    PRIMARY: styles.button_background__variant_primary,\n  },\n} as const\n","import type { CSSProperties, JSX } from \"react\"\nimport styles from \"@/button-spinner.module.css\"\n\nexport interface ButtonSpinnerProps {\n  size?: number\n}\n\nexport function ButtonSpinner(props: ButtonSpinnerProps): JSX.Element {\n  const { size = 16 } = props\n\n  return (\n    <div\n      className={styles.button_spinner}\n      style={{ \"--size\": `${size}px` } as CSSProperties}\n    >\n      {Array.from({ length: 12 }).map((_, index) => (\n        <div key={index} />\n      ))}\n    </div>\n  )\n}\n","import type { ComponentProps, JSX, ReactNode } from \"react\"\nimport { ButtonBackground } from \"@/button-background\"\nimport { ButtonSpinner } from \"@/button-spinner\"\nimport styles from \"@/button.module.css\"\n\nexport interface ButtonProps\n  extends Omit<ComponentProps<\"button\">, \"aria-pressed\" | \"disabled\"> {\n  iconEnd?: ReactNode\n  iconOnly?: boolean\n  iconStart?: ReactNode\n  isActive?: boolean\n  isDisabled?: boolean\n  isFullWidth?: boolean\n  isLoading?: boolean\n  isRounded?: boolean\n  size?: 32 | 36 | 40 | 44\n  variant?: \"accent\" | \"ghost\" | \"primary\" | \"secondary\"\n}\n\ntype ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText\n\ninterface ButtonPropsWithIcon extends ButtonProps {\n  children?: ReactNode\n  iconEnd?: never\n  iconOnly: true\n  iconStart?: never\n}\n\ninterface ButtonPropsWithText extends ButtonProps {\n  children?: string\n  iconOnly?: false\n}\n\nexport function Button(props: ButtonPropsInternal): JSX.Element {\n  const {\n    children = \"\",\n    className: customClassName = \"\",\n    iconEnd = \"\",\n    iconOnly = false,\n    iconStart = \"\",\n    isActive = false,\n    isDisabled = false,\n    isFullWidth = false,\n    isLoading = false,\n    isRounded = false,\n    size = 36,\n    type = \"button\",\n    variant = \"primary\",\n    ...rest\n  } = props\n\n  const combinedClassName = `\n    ${BUTTON_CLASS_NAME.BASE}\n    ${BUTTON_CLASS_NAME.SIZE[size]}\n    ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase() as keyof typeof BUTTON_CLASS_NAME.VARIANT]}\n    ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}\n    ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : \"\"}\n    ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}\n    ${customClassName}\n  `\n    .replaceAll(/\\s+/g, \" \")\n    .trim()\n\n  return (\n    <button\n      aria-pressed={isActive}\n      className={combinedClassName}\n      disabled={isDisabled || isLoading}\n      type={type}\n      {...rest}\n    >\n      <ButtonBackground isRounded={isRounded} variant={variant} />\n      {isLoading && <ButtonSpinner />}\n      {!isLoading && iconStart}\n      {iconOnly ? children : <span>{children}</span>}\n      {!isLoading && iconEnd}\n    </button>\n  )\n}\n\nexport const BUTTON_CLASS_NAME = {\n  BASE: styles.button,\n  ICON_ONLY: styles.button__icon_only,\n  ROUNDED: {\n    BASE: styles.button__rounded_base,\n    FULL: styles.button__rounded_full,\n  },\n  SIZE: {\n    32: styles.button__size_32,\n    36: styles.button__size_36,\n    40: styles.button__size_40,\n    44: styles.button__size_44,\n  },\n  VARIANT: {\n    ACCENT: styles.button__variant_accent,\n    GHOST: styles.button__variant_ghost,\n    PRIMARY: styles.button__variant_primary,\n    SECONDARY: styles.button__variant_secondary,\n  },\n  WIDTH: {\n    BASE: styles.button__width_base,\n    FULL: styles.button__width_full,\n  },\n} as const\n","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/input.module.css\"\n\nexport interface InputProps\n  extends Omit<\n    ComponentProps<\"input\">,\n    \"aria-pressed\" | \"disabled\" | \"readOnly\"\n  > {\n  isActive?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n}\n\nexport function Input(props: InputProps): JSX.Element {\n  const {\n    className: customClassName = \"\",\n    isActive = false,\n    isDisabled = false,\n    isReadOnly = false,\n    type = \"text\",\n    ...rest\n  } = props\n\n  const isPassword = type === \"password\"\n\n  const combinedClassName = `\n    ${INPUT_CLASS_NAME.BASE}\n    ${isPassword ? INPUT_CLASS_NAME.PASSWORD : \"\"}\n    ${customClassName}\n  `\n    .replaceAll(/\\s+/g, \" \")\n    .trim()\n\n  return (\n    <input\n      aria-pressed={isActive}\n      className={combinedClassName}\n      disabled={isDisabled}\n      readOnly={isReadOnly}\n      type={type}\n      {...rest}\n    />\n  )\n}\n\nexport const INPUT_CLASS_NAME = {\n  BASE: styles.input,\n  PASSWORD: styles.input__password,\n} as const\n","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/label.module.css\"\n\nexport interface LabelProps extends ComponentProps<\"label\"> {}\n\nexport function Label(props: LabelProps): JSX.Element {\n  const { className: customClassName = \"\", ...rest } = props\n\n  const combinedClassName = `\n    ${LABEL_CLASS_NAME.BASE}\n    ${customClassName}\n  `\n    .replaceAll(/\\s+/g, \" \")\n    .trim()\n\n  return <label className={combinedClassName} {...rest} />\n}\n\nexport const LABEL_CLASS_NAME = {\n  BASE: styles.label,\n} as const\n"]}

package/eslint.config.mjs

@@ -1,85 +0,0 @@
-import js from "@eslint/js"
-import pluginPerfectionist from "eslint-plugin-perfectionist"
-import pluginReact from "eslint-plugin-react"
-import pluginUnicorn from "eslint-plugin-unicorn"
-import pluginUnusedImports from "eslint-plugin-unused-imports"
-import { defineConfig } from "eslint/config"
-import globals from "globals"
-import tseslint from "typescript-eslint"
-
-export default defineConfig([
-  // Global ignores
-  {
-    ignores: ["dist/"],
-  },
-  // Base configurations for JS/TS files only
-  {
-    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    ...pluginPerfectionist.configs["recommended-natural"],
-  },
-  {
-    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    ...pluginReact.configs.flat.recommended,
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-  },
-  {
-    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    ...pluginUnicorn.configs.all,
-  },
-  ...tseslint.configs.recommended.map((config) => ({
-    ...config,
-    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-  })),
-  {
-    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    languageOptions: { globals: globals.browser },
-  },
-  // JavaScript configuration
-  {
-    extends: ["js/recommended"],
-    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    plugins: { js },
-  },
-  // Custom rules for JS/TS files only
-  {
-    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    plugins: {
-      "unused-imports": pluginUnusedImports,
-    },
-    rules: {
-      "@typescript-eslint/no-empty-object-type": [
-        "error",
-        {
-          allowInterfaces: "with-single-extends",
-        },
-      ],
-      "perfectionist/sort-imports": [
-        "error",
-        {
-          newlinesBetween: "never",
-          sortSideEffects: true,
-        },
-      ],
-      "react/react-in-jsx-scope": "off",
-      "unicorn/consistent-function-scoping": "off",
-      "unicorn/import-style": "off",
-      "unicorn/no-keyword-prefix": "off",
-      "unicorn/no-unused-properties": "warn",
-      "unicorn/prevent-abbreviations": "off",
-      "unused-imports/no-unused-imports": "error",
-      "unused-imports/no-unused-vars": [
-        "warn",
-        {
-          args: "after-used",
-          argsIgnorePattern: "^_",
-          vars: "all",
-          varsIgnorePattern: "^_",
-        },
-      ],
-    },
-  },
-])

package/global.d.ts

@@ -1,4 +0,0 @@
-declare module "*.module.css" {
-  const classes: { [key: string]: string }
-  export default classes
-}

package/prettier.config.mjs

@@ -1,16 +0,0 @@
-/**
- * @see https://prettier.io/docs/configuration
- * @type {import("prettier").Config}
- */
-const config = {
-  cssDeclarationSorterOrder: "alphabetical",
-  jsonRecursiveSort: true,
-  plugins: [
-    "prettier-plugin-css-order",
-    "prettier-plugin-packagejson",
-    "prettier-plugin-sort-json",
-  ],
-  semi: false,
-}
-
-export default config

package/src/button-background.tsx

@@ -1,40 +0,0 @@
-import type { JSX } from "react"
-import type { ButtonProps } from "@/button"
-import styles from "@/button-background.module.css"
-
-export interface ButtonBackgroundProps
-  extends Pick<ButtonProps, "isRounded" | "variant"> {}
-
-export function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {
-  const { isRounded = false, variant = "primary" } = props
-
-  const combinedBackgroundStyles = `
-    ${BUTTON_BACKGROUND_CLASS_NAME.BASE}
-    ${isRounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.BASE}
-    ${variant === "accent" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.ACCENT : ""}
-    ${variant === "primary" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.PRIMARY : ""}
-  `
-    .replaceAll(/\s+/g, " ")
-    .trim()
-
-  if (!(variant === "accent" || variant === "primary")) return <></>
-
-  return (
-    <div
-      className={combinedBackgroundStyles}
-      data-element="button-background"
-    />
-  )
-}
-
-export const BUTTON_BACKGROUND_CLASS_NAME = {
-  BASE: styles.button_background,
-  ROUNDED: {
-    BASE: styles.button_background__rounded_base,
-    FULL: styles.button_background__rounded_full,
-  },
-  VARIANT: {
-    ACCENT: styles.button_background__variant_accent,
-    PRIMARY: styles.button_background__variant_primary,
-  },
-} as const

package/src/button-spinner.module.css

@@ -1,95 +0,0 @@
-.button_spinner {
-  animation: spinner 1000ms steps(12, end) infinite;
-  height: var(--size);
-  position: relative;
-  scale: -1 1;
-  width: var(--size);
-}
-
-@keyframes spinner {
-  to {
-    rotate: 1turn;
-  }
-}
-
-.button_spinner > div {
-  height: calc(var(--size) / 12);
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform-origin: center left;
-  transition: all 150ms;
-  translate: 0 -50%;
-  width: calc(var(--size) / 2);
-}
-
-.button_spinner > div::after {
-  background-color: currentColor;
-  border-radius: 9999px;
-  content: "";
-  height: 100%;
-  position: absolute;
-  right: 0;
-  width: 50%;
-}
-
-.button_spinner > div:nth-child(1) {
-  opacity: 1;
-  rotate: 0deg;
-}
-
-.button_spinner > div:nth-child(2) {
-  opacity: 0.925;
-  rotate: 30deg;
-}
-
-.button_spinner > div:nth-child(3) {
-  opacity: 0.85;
-  rotate: 60deg;
-}
-
-.button_spinner > div:nth-child(4) {
-  opacity: 0.775;
-  rotate: 90deg;
-}
-
-.button_spinner > div:nth-child(5) {
-  opacity: 0.7;
-  rotate: 120deg;
-}
-
-.button_spinner > div:nth-child(6) {
-  opacity: 0.625;
-  rotate: 150deg;
-}
-
-.button_spinner > div:nth-child(7) {
-  opacity: 0.55;
-  rotate: 180deg;
-}
-
-.button_spinner > div:nth-child(8) {
-  opacity: 0.475;
-  rotate: 210deg;
-}
-
-.button_spinner > div:nth-child(9) {
-  opacity: 0.4;
-  rotate: 240deg;
-}
-
-.button_spinner > div:nth-child(10) {
-  opacity: 0.325;
-  rotate: 270deg;
-}
-
-.button_spinner > div:nth-child(11) {
-  opacity: 0.25;
-  rotate: 300deg;
-}
-
-.button_spinner > div:nth-child(12) {
-  opacity: 0.15;
-  rotate: 330deg;
-}

package/src/button-spinner.tsx

@@ -1,21 +0,0 @@
-import type { CSSProperties, JSX } from "react"
-import styles from "@/button-spinner.module.css"
-
-export interface ButtonSpinnerProps {
-  size?: number
-}
-
-export function ButtonSpinner(props: ButtonSpinnerProps): JSX.Element {
-  const { size = 16 } = props
-
-  return (
-    <div
-      className={styles.button_spinner}
-      style={{ "--size": `${size}px` } as CSSProperties}
-    >
-      {Array.from({ length: 12 }).map((_, index) => (
-        <div key={index} />
-      ))}
-    </div>
-  )
-}