@nattui/react-components 0.0.1

package/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+pnpm-lock.yaml

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "jsonRecursiveSort": true,
+  "plugins": [
+    "prettier-plugin-css-order",
+    "prettier-plugin-packagejson",
+    "prettier-plugin-sort-json"
+  ],
+  "semi": false
+}

package/.turbo/turbo-build.log

@@ -0,0 +1,29 @@
+
+
+> @nattui/react-components@0.0.1 build /Users/snowshift/Documents/3-github/react-components/packages/ui
+> tsup
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /Users/snowshift/Documents/3-github/react-components/packages/ui/tsup.config.ts
+CLI Target: node16
+CLI Cleaning output folder
+ESM Build start
+CJS Build start
+ESM dist/button-spinner.module-IRIJPNSF.module.css    1.49 KB
+ESM dist/button.module-QR72PPSM.module.css            5.60 KB
+ESM dist/button-background.module-FK4ABTRO.module.css 667.00 B
+ESM dist/index.mjs                                    3.42 KB
+ESM dist/index.mjs.map                                7.61 KB
+ESM ⚡️ Build success in 83ms
+CJS dist/button-spinner.module-IRIJPNSF.module.css    1.49 KB
+CJS dist/button.module-QR72PPSM.module.css            5.60 KB
+CJS dist/button-background.module-FK4ABTRO.module.css 667.00 B
+CJS dist/index.js                                     4.14 KB
+CJS dist/index.js.map                                 7.66 KB
+CJS ⚡️ Build success in 83ms
+DTS Build start
+DTS ⚡️ Build success in 682ms
+DTS dist/index.d.mts 1.31 KB
+DTS dist/index.d.ts  1.31 KB

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Natt Nguyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,38 @@
+/* Base */
+.button_background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 50%;
+  left: 0;
+  opacity: 0.2;
+  z-index: -1;
+  filter: none !important;
+  transition: opacity 150ms;
+}
+
+/* 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/button-spinner.module-IRIJPNSF.module.css

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

package/dist/button.module-QR72PPSM.module.css

@@ -0,0 +1,238 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.button {
+  display: flex;
+  position: relative;
+  column-gap: 8px;
+  flex-shrink: 0;
+  justify-content: safe center;
+  align-items: safe center;
+  transition-duration: 150ms;
+  transition-property: all;
+  cursor: pointer;
+  outline-width: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+  font-weight: 500;
+  line-height: 1.5;
+  user-select: none;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Active */
+.button:enabled[aria-pressed="true"] > *,
+.button:enabled:active > * {
+  transform: translateY(1px);
+  transition-duration: 150ms;
+  transition-property: transform;
+}
+
+/* Disable child shadow */
+.button:enabled[aria-pressed="true"] > *,
+.button:enabled:active > *,
+.button:enabled:hover > * {
+  filter: none !important;
+}
+
+/* Hover */
+.button:enabled[aria-pressed="true"],
+.button:enabled:active,
+.button:enabled:hover {
+  opacity: 0.85;
+}
+
+/* Button background */
+.button:enabled[aria-pressed="true"] > [data-element="button-background"],
+.button:enabled:active > [data-element="button-background"],
+.button:enabled:hover > [data-element="button-background"] {
+  opacity: 0;
+}
+
+/* ===================================================== */
+/* Icon only */
+/* ===================================================== */
+.button__icon_only {
+  padding: 0 !important;
+  width: var(--size) !important;
+}
+
+/* ===================================================== */
+/* Rounded */
+/* ===================================================== */
+.button__rounded_base {
+  border-radius: 8px;
+}
+
+.button__rounded_full {
+  border-radius: 9999px;
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.button__size_32 {
+  --size: 32px;
+  padding: 0 8px;
+  height: var(--size);
+  font-size: 14px;
+}
+
+.button__size_36 {
+  --size: 36px;
+  padding: 0 12px;
+  height: var(--size);
+  font-size: 14px;
+}
+
+.button__size_40 {
+  --size: 40px;
+  padding: 0 16px;
+  height: var(--size);
+  font-size: 14px;
+}
+
+.button__size_48 {
+  --size: 48px;
+  padding: 0 20px;
+  height: var(--size);
+  font-size: 16px;
+}
+
+/* ===================================================== */
+/* Variant */
+/* ===================================================== */
+/* Accent */
+.button__variant_accent {
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+  border-color: var(--color-primary-9, #e93d82);
+  background-image: linear-gradient(
+    to bottom,
+    var(--color-primary-9, #e93d82),
+    var(--color-primary-10, #e03177)
+  );
+  color: var(--color-gray-1, #fdfcfd);
+}
+
+.button__variant_accent:enabled[aria-pressed="true"],
+.button__variant_accent:enabled:active {
+  box-shadow:
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Ghost */
+.button__variant_ghost {
+  background-color: transparent;
+  color: var(--color-gray-11, #6f6e77);
+}
+
+.button__variant_ghost:enabled[aria-pressed="true"],
+.button__variant_ghost:enabled:active {
+  background-color: var(--color-gray-5, #e9e8ea) !important;
+  color: var(--color-gray-12, #1a1523);
+}
+
+.button__variant_ghost:enabled:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--color-gray-5, #e9e8ea) 75%,
+    transparent
+  );
+  color: var(--color-gray-12, #1a1523);
+}
+
+/* Primary */
+.button__variant_primary {
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+  border-color: var(--color-gray-12, #1a1523);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
+    var(--color-gray-12, #1a1523)
+  );
+  color: var(--color-gray-1, #fdfcfd);
+}
+
+.button__variant_primary:enabled[aria-pressed="true"],
+.button__variant_primary:enabled:active {
+  box-shadow:
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 1px 0 0 rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Secondary */
+.button__variant_secondary {
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+  border-color: var(--color-gray-6, #e4e2e4);
+  background-image: linear-gradient(
+    to bottom,
+    var(--color-gray-1, #fdfcfd),
+    var(--color-gray-3, #f4f2f4)
+  );
+  color: var(--color-gray-11, #6f6e77);
+}
+
+.button__variant_secondary:enabled[aria-pressed="true"],
+.button__variant_secondary:enabled:active,
+.button__variant_secondary:enabled:hover {
+  border-color: var(--color-gray-8, #c8c7cb);
+  color: var(--color-gray-12, #1a1523);
+}
+
+.button__variant_secondary:enabled[aria-pressed="true"],
+.button__variant_secondary:enabled:active {
+  box-shadow:
+    inset 0 -1px 0 0 var(--color-gray-1, #fdfcfd),
+    inset 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Group */
+.button__variant_accent,
+.button__variant_primary,
+.button__variant_secondary {
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
+}
+
+.button__variant_accent > * {
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
+}
+
+.button__variant_primary > * {
+  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.1));
+}
+
+.button__variant_accent:enabled:hover,
+.button__variant_primary:enabled:hover,
+.button__variant_secondary:enabled:hover {
+  filter: none;
+  box-shadow: inset 0 0 0 0 transparent;
+}
+
+.button__variant_ghost:enabled:hover,
+.button__variant_secondary:enabled:hover {
+  color: var(--color-gray-12, #1a1523);
+}
+
+/* ===================================================== */
+/* Width */
+/* ===================================================== */
+.button__width_base {
+  width: max-content;
+}
+
+.button__width_full {
+  width: 100%;
+}

package/dist/index.d.mts

@@ -0,0 +1,48 @@
+import { ComponentProps, ReactNode, JSX } from 'react';
+
+interface ButtonProps extends ComponentProps<"button"> {
+    fullWidth?: boolean;
+    iconEnd?: ReactNode;
+    iconOnly?: boolean;
+    iconStart?: ReactNode;
+    isLoading?: boolean;
+    rounded?: boolean;
+    size?: 32 | 36 | 40 | 48;
+    variant?: "accent" | "ghost" | "primary" | "secondary";
+}
+type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText;
+interface ButtonPropsWithIcon extends ButtonProps {
+    children?: ReactNode;
+    iconOnly: true;
+}
+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 48: string;
+    };
+    readonly VARIANT: {
+        readonly ACCENT: string;
+        readonly GHOST: string;
+        readonly PRIMARY: string;
+        readonly SECONDARY: string;
+    };
+    readonly WIDTH: {
+        readonly BASE: string;
+        readonly FULL: string;
+    };
+};
+
+export { BUTTON_CLASS_NAME, Button, type ButtonProps };

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps, ReactNode, JSX } from 'react';
+
+interface ButtonProps extends ComponentProps<"button"> {
+    fullWidth?: boolean;
+    iconEnd?: ReactNode;
+    iconOnly?: boolean;
+    iconStart?: ReactNode;
+    isLoading?: boolean;
+    rounded?: boolean;
+    size?: 32 | 36 | 40 | 48;
+    variant?: "accent" | "ghost" | "primary" | "secondary";
+}
+type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText;
+interface ButtonPropsWithIcon extends ButtonProps {
+    children?: ReactNode;
+    iconOnly: true;
+}
+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 48: string;
+    };
+    readonly VARIANT: {
+        readonly ACCENT: string;
+        readonly GHOST: string;
+        readonly PRIMARY: string;
+        readonly SECONDARY: string;
+    };
+    readonly WIDTH: {
+        readonly BASE: string;
+        readonly FULL: string;
+    };
+};
+
+export { BUTTON_CLASS_NAME, Button, type ButtonProps };

package/dist/index.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var styles = require('./button-background.module-FK4ABTRO.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+var styles2 = require('./button-spinner.module-IRIJPNSF.module.css');
+var styles3 = require('./button.module-QR72PPSM.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);
+
+// src/button-background.tsx
+function ButtonBackground(props) {
+  const { rounded = false, variant = "primary" } = props;
+  const combinedBackgroundStyles = `
+    ${BUTTON_BACKGROUND_CLASS_NAME.BASE}
+    ${rounded ? 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 = "",
+    disabled = false,
+    fullWidth = false,
+    iconEnd = "",
+    iconOnly = false,
+    iconStart = "",
+    isLoading = false,
+    rounded = 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()]}
+    ${fullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}
+    ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : ""}
+    ${rounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
+    ${customClassName}
+  `.replaceAll(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: combinedClassName,
+      disabled: disabled || isLoading,
+      type,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ButtonBackground, { rounded, variant }),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSpinner, {}),
+        !isLoading && iconStart,
+        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,
+    48: styles3__default.default.button__size_48
+  },
+  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
+  }
+};
+
+exports.BUTTON_CLASS_NAME = BUTTON_CLASS_NAME;
+exports.Button = Button;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.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, \"rounded\" | \"variant\"> {}\n\nexport function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {\n  const { rounded = false, variant = \"primary\" } = props\n\n  const combinedBackgroundStyles = `\n    ${BUTTON_BACKGROUND_CLASS_NAME.BASE}\n    ${rounded ? 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 extends ComponentProps<\"button\"> {\n  fullWidth?: boolean\n  iconEnd?: ReactNode\n  iconOnly?: boolean\n  iconStart?: ReactNode\n  isLoading?: boolean\n  rounded?: boolean\n  size?: 32 | 36 | 40 | 48\n  variant?: \"accent\" | \"ghost\" | \"primary\" | \"secondary\"\n}\n\ntype ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText\n\ninterface ButtonPropsWithIcon extends ButtonProps {\n  children?: ReactNode\n  iconOnly: true\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    disabled = false,\n    fullWidth = false,\n    iconEnd = \"\",\n    iconOnly = false,\n    iconStart = \"\",\n    isLoading = false,\n    rounded = 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    ${fullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}\n    ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : \"\"}\n    ${rounded ? 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      className={combinedClassName}\n      disabled={disabled || isLoading}\n      type={type}\n      {...rest}\n    >\n      <ButtonBackground rounded={rounded} variant={variant} />\n      {isLoading && <ButtonSpinner />}\n      {!isLoading && iconStart}\n      {children}\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    48: styles.button__size_48,\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"]}