@nattui/react-components 0.0.7 → 0.0.9

package/dist/{button.module-4G5LYXJH.module.css → button.module-FYQKV2DX.module.css}

@@ -10,6 +10,8 @@
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
   font-weight: 500;
   justify-content: safe center;
   line-height: 1.5;
@@ -21,7 +23,8 @@
   position: relative;
   transition-duration: 150ms;
   transition-property:
-    background-color, border-color, box-shadow, color, opacity, scale, translate;
+    background-color, border-color, box-shadow, color, filter, opacity, scale,
+    translate;
   user-select: none;
 }
 
@@ -85,28 +88,24 @@
 /* ===================================================== */
 .button__size_32 {
   --size: 32px;
-  font-size: 14px;
   height: var(--size);
   padding: 0 8px;
 }
 
 .button__size_36 {
   --size: 36px;
-  font-size: 14px;
   height: var(--size);
   padding: 0 12px;
 }
 
 .button__size_40 {
   --size: 40px;
-  font-size: 14px;
   height: var(--size);
   padding: 0 16px;
 }
 
-.button__size_48 {
-  --size: 48px;
-  font-size: 16px;
+.button__size_44 {
+  --size: 44px;
   height: var(--size);
   padding: 0 20px;
 }
@@ -220,11 +219,17 @@
   filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.1));
 }
 
+.button__variant_accent:enabled:active,
 .button__variant_accent:enabled:hover,
+.button__variant_accent:enabled[aria-pressed="true"],
+.button__variant_primary:enabled:active,
 .button__variant_primary:enabled:hover,
-.button__variant_secondary:enabled:hover {
+.button__variant_primary:enabled[aria-pressed="true"],
+.button__variant_secondary:enabled:active,
+.button__variant_secondary:enabled:hover,
+.button__variant_secondary:enabled[aria-pressed="true"] {
   box-shadow: inset 0 0 0 0 transparent;
-  filter: none;
+  filter: drop-shadow(0 1px 0 transparent);
 }
 
 .button__variant_ghost:enabled:hover,

package/dist/index.d.mts

@@ -1,15 +1,15 @@
 import { ComponentProps, ReactNode, JSX } from 'react';
 
 interface ButtonProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
-    fullWidth?: boolean;
     iconEnd?: ReactNode;
     iconOnly?: boolean;
     iconStart?: ReactNode;
     isActive?: boolean;
     isDisabled?: boolean;
+    isFullWidth?: boolean;
     isLoading?: boolean;
-    rounded?: boolean;
-    size?: 32 | 36 | 40 | 48;
+    isRounded?: boolean;
+    size?: 32 | 36 | 40 | 44;
     variant?: "accent" | "ghost" | "primary" | "secondary";
 }
 type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText;
@@ -33,7 +33,7 @@ declare const BUTTON_CLASS_NAME: {
         readonly 32: string;
         readonly 36: string;
         readonly 40: string;
-        readonly 48: string;
+        readonly 44: string;
     };
     readonly VARIANT: {
         readonly ACCENT: string;
@@ -47,4 +47,22 @@ declare const BUTTON_CLASS_NAME: {
     };
 };
 
-export { BUTTON_CLASS_NAME, Button, type ButtonProps };
+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.d.ts

@@ -1,15 +1,15 @@
 import { ComponentProps, ReactNode, JSX } from 'react';
 
 interface ButtonProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
-    fullWidth?: boolean;
     iconEnd?: ReactNode;
     iconOnly?: boolean;
     iconStart?: ReactNode;
     isActive?: boolean;
     isDisabled?: boolean;
+    isFullWidth?: boolean;
     isLoading?: boolean;
-    rounded?: boolean;
-    size?: 32 | 36 | 40 | 48;
+    isRounded?: boolean;
+    size?: 32 | 36 | 40 | 44;
     variant?: "accent" | "ghost" | "primary" | "secondary";
 }
 type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText;
@@ -33,7 +33,7 @@ declare const BUTTON_CLASS_NAME: {
         readonly 32: string;
         readonly 36: string;
         readonly 40: string;
-        readonly 48: string;
+        readonly 44: string;
     };
     readonly VARIANT: {
         readonly ACCENT: string;
@@ -47,4 +47,22 @@ declare const BUTTON_CLASS_NAME: {
     };
 };
 
-export { BUTTON_CLASS_NAME, Button, type ButtonProps };
+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

@@ -3,20 +3,24 @@
 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-4G5LYXJH.module.css');
+var styles3 = require('./button.module-FYQKV2DX.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 { rounded = false, variant = "primary" } = props;
+  const { isRounded = false, variant = "primary" } = props;
   const combinedBackgroundStyles = `
     ${BUTTON_BACKGROUND_CLASS_NAME.BASE}
-    ${rounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.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();
@@ -55,14 +59,14 @@ function Button(props) {
   const {
     children = "",
     className: customClassName = "",
-    fullWidth = false,
     iconEnd = "",
     iconOnly = false,
     iconStart = "",
     isActive = false,
     isDisabled = false,
+    isFullWidth = false,
     isLoading = false,
-    rounded = false,
+    isRounded = false,
     size = 36,
     type = "button",
     variant = "primary",
@@ -72,9 +76,9 @@ function Button(props) {
     ${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}
+    ${isFullWidth ? 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}
+    ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -86,7 +90,7 @@ function Button(props) {
       type,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ButtonBackground, { rounded, variant }),
+        /* @__PURE__ */ jsxRuntime.jsx(ButtonBackground, { isRounded, variant }),
         isLoading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSpinner, {}),
         !isLoading && iconStart,
         iconOnly ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
@@ -106,7 +110,7 @@ var BUTTON_CLASS_NAME = {
     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
+    44: styles3__default.default.button__size_44
   },
   VARIANT: {
     ACCENT: styles3__default.default.button__variant_accent,
@@ -119,8 +123,54 @@ var BUTTON_CLASS_NAME = {
     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 +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\n  extends Omit<ComponentProps<\"button\">, \"aria-pressed\" | \"disabled\"> {\n  fullWidth?: boolean\n  iconEnd?: ReactNode\n  iconOnly?: boolean\n  iconStart?: ReactNode\n  isActive?: boolean\n  isDisabled?: boolean\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    fullWidth = false,\n    iconEnd = \"\",\n    iconOnly = false,\n    iconStart = \"\",\n    isActive = false,\n    isDisabled = false,\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      aria-pressed={isActive}\n      className={combinedClassName}\n      disabled={isDisabled || isLoading}\n      type={type}\n      {...rest}\n    >\n      <ButtonBackground rounded={rounded} 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    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"]}
+{"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  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    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/dist/index.mjs

@@ -1,14 +1,16 @@
 import styles from './button-background.module-T5B7XZ2Z.module.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import styles2 from './button-spinner.module-4TBETQ4T.module.css';
-import styles3 from './button.module-4G5LYXJH.module.css';
+import styles3 from './button.module-FYQKV2DX.module.css';
+import styles4 from './input.module-M44BKREB.module.css';
+import styles5 from './label.module-4CZ6ETIR.module.css';
 
 // src/button-background.tsx
 function ButtonBackground(props) {
-  const { rounded = false, variant = "primary" } = props;
+  const { isRounded = false, variant = "primary" } = props;
   const combinedBackgroundStyles = `
     ${BUTTON_BACKGROUND_CLASS_NAME.BASE}
-    ${rounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.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();
@@ -47,14 +49,14 @@ function Button(props) {
   const {
     children = "",
     className: customClassName = "",
-    fullWidth = false,
     iconEnd = "",
     iconOnly = false,
     iconStart = "",
     isActive = false,
     isDisabled = false,
+    isFullWidth = false,
     isLoading = false,
-    rounded = false,
+    isRounded = false,
     size = 36,
     type = "button",
     variant = "primary",
@@ -64,9 +66,9 @@ function Button(props) {
     ${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}
+    ${isFullWidth ? 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}
+    ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
   return /* @__PURE__ */ jsxs(
@@ -78,7 +80,7 @@ function Button(props) {
       type,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(ButtonBackground, { rounded, variant }),
+        /* @__PURE__ */ jsx(ButtonBackground, { isRounded, variant }),
         isLoading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
         !isLoading && iconStart,
         iconOnly ? children : /* @__PURE__ */ jsx("span", { children }),
@@ -98,7 +100,7 @@ var BUTTON_CLASS_NAME = {
     32: styles3.button__size_32,
     36: styles3.button__size_36,
     40: styles3.button__size_40,
-    48: styles3.button__size_48
+    44: styles3.button__size_44
   },
   VARIANT: {
     ACCENT: styles3.button__variant_accent,
@@ -111,7 +113,49 @@ var BUTTON_CLASS_NAME = {
     FULL: styles3.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__ */ jsx(
+    "input",
+    {
+      "aria-pressed": isActive,
+      className: combinedClassName,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      type,
+      ...rest
+    }
+  );
+}
+var INPUT_CLASS_NAME = {
+  BASE: styles4.input,
+  PASSWORD: styles4.input__password
+};
+function Label(props) {
+  const { className: customClassName = "", ...rest } = props;
+  const combinedClassName = `
+    ${LABEL_CLASS_NAME.BASE}
+    ${customClassName}
+  `.replaceAll(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx("label", { className: combinedClassName, ...rest });
+}
+var LABEL_CLASS_NAME = {
+  BASE: styles5.label
+};
 
-export { BUTTON_CLASS_NAME, Button };
+export { BUTTON_CLASS_NAME, Button, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx"],"names":["jsx","styles"],"mappings":"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","file":"index.mjs","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\n  extends Omit<ComponentProps<\"button\">, \"aria-pressed\" | \"disabled\"> {\n  fullWidth?: boolean\n  iconEnd?: ReactNode\n  iconOnly?: boolean\n  iconStart?: ReactNode\n  isActive?: boolean\n  isDisabled?: boolean\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    fullWidth = false,\n    iconEnd = \"\",\n    iconOnly = false,\n    iconStart = \"\",\n    isActive = false,\n    isDisabled = false,\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      aria-pressed={isActive}\n      className={combinedClassName}\n      disabled={isDisabled || isLoading}\n      type={type}\n      {...rest}\n    >\n      <ButtonBackground rounded={rounded} 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    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"]}
+{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx","../src/input.tsx","../src/label.tsx"],"names":["jsx","styles"],"mappings":"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","file":"index.mjs","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  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    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/dist/input.module-M44BKREB.module.css

@@ -0,0 +1,57 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.input {
+  appearance: none;
+  background-color: var(--color-gray-1, #fcfcfc);
+  border-color: var(--color-gray-5, #e0e0e0);
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 1px rgba(0, 0, 0, 0.05);
+  color: var(--color-gray-12, #202020);
+  cursor: text;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 400;
+  height: 40px;
+  line-height: 1.5;
+  outline-color: var(--color-primary-9, #e93d82);
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-width: 0;
+  padding: 0 12px;
+  text-decoration: none;
+  transition-duration: 150ms;
+  transition-property: background-color, border-color, box-shadow, opacity;
+  width: 100%;
+}
+
+.input::placeholder {
+  color: var(--color-gray-9, #8d8d8d);
+  user-select: none;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.input:enabled:active,
+.input:enabled:focus,
+.input:enabled:hover,
+.input:enabled[aria-pressed="true"] {
+  border-color: var(--color-gray-8, #bbbbbb);
+  box-shadow: 0 1px transparent;
+}
+
+.input:focus-visible {
+  outline-width: 2px;
+}
+
+/* ===================================================== */
+/* Password */
+/* ===================================================== */
+.input__password {
+  font-family: var(--font-mono, monospace);
+}

package/dist/label.module-4CZ6ETIR.module.css

@@ -0,0 +1,8 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.label {
+  color: var(--color-gray-11, #646464);
+  font-size: 13px;
+  width: fit-content;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattui/react-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A collection of reusable React components built with TypeScript and CSS Modules",
   "keywords": [
     "components",
@@ -27,22 +27,34 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "check": "pnpm check:format && pnpm check:lint",
+    "check:fix": "pnpm check:format:fix && pnpm check:lint:fix",
+    "check:format": "prettier --check .",
+    "check:format:fix": "prettier --write .",
+    "check:lint": "eslint .",
+    "check:lint:fix": "eslint --fix .",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm run build",
+    "update": "pnpx npm-check-updates --upgrade"
+  },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
-    "@types/react": "^19.1.9",
-    "eslint": "^9.32.0",
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.15",
+    "eslint": "^9.36.0",
     "eslint-plugin-perfectionist": "^4.15.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-unicorn": "^59.0.1",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^16.3.0",
-    "prettier": "^3.6.2",
-    "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-packagejson": "^2.5.19",
-    "prettier-plugin-sort-json": "^4.1.1",
+    "eslint-plugin-unused-imports": "^4.2.0",
+    "globals": "^16.4.0",
+    "prettier": "catalog:",
+    "prettier-plugin-css-order": "catalog:",
+    "prettier-plugin-packagejson": "catalog:",
+    "prettier-plugin-sort-json": "catalog:",
     "tsup": "^8.5.0",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.38.0"
+    "typescript-eslint": "^8.44.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -50,16 +62,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "tsup",
-    "check": "pnpm check:format && pnpm check:lint",
-    "check:fix": "pnpm check:format:fix && pnpm check:lint:fix",
-    "check:format": "prettier --check .",
-    "check:format:fix": "prettier --write .",
-    "check:lint": "eslint .",
-    "check:lint:fix": "eslint --fix .",
-    "dev": "tsup --watch",
-    "update": "pnpx npm-check-updates --upgrade"
   }
-}
+}