@nattui/react-components 0.0.21 → 0.0.23

package/dist/{button-background.module-Y3DFESUY.module.css → button-background.module-EWE3JTY4.module.css}

@@ -22,18 +22,11 @@
 }
 
 /* Variant */
-.button_background__variant_accent {
-  background: linear-gradient(
-    to bottom,
-    var(--color-primary-7, #edadc8),
-    var(--color-primary-8, #e58fb1)
-  );
-}
-
+.button_background__variant_accent,
 .button_background__variant_primary {
   background: linear-gradient(
     to bottom,
-    var(--color-gray-10, #86848d),
-    var(--color-gray-11, #6f6e77)
+    var(--color-white-a6, rgba(0, 0, 0, 0.4)),
+    var(--color-white-a5, rgba(0, 0, 0, 0.3))
   );
 }

package/dist/{button.module-VAXL2INY.module.css → button.module-44LVL7ES.module.css}

@@ -8,6 +8,8 @@
   column-gap: 8px;
   align-items: safe center;
   justify-content: safe center;
+  height: var(--size);
+  padding: var(--padding);
   overflow: hidden;
   font-family: var(--font-sans, sans-serif);
   font-size: 14px;
@@ -24,8 +26,7 @@
   border-width: 1px;
   transition-duration: 150ms;
   transition-property:
-    background-color, border-color, box-shadow, color, filter, opacity,
-    translate;
+    background-color, border-color, box-shadow, color, filter, opacity, translate;
 }
 
 .button:disabled {
@@ -78,6 +79,13 @@
   border-radius: 8px;
 }
 
+@supports (corner-shape: squircle) {
+  .button__rounded_base {
+    border-radius: 9999px;
+    corner-shape: squircle;
+  }
+}
+
 .button__rounded_full {
   border-radius: 9999px;
 }
@@ -87,26 +95,22 @@
 /* ===================================================== */
 .button__size_32 {
   --size: 32px;
-  height: var(--size);
-  padding: 0 8px;
+  --padding: 0 10px;
 }
 
 .button__size_36 {
   --size: 36px;
-  height: var(--size);
-  padding: 0 12px;
+  --padding: 0 14px;
 }
 
 .button__size_40 {
   --size: 40px;
-  height: var(--size);
-  padding: 0 16px;
+  --padding: 0 18px;
 }
 
 .button__size_44 {
   --size: 44px;
-  height: var(--size);
-  padding: 0 20px;
+  --padding: 0 22px;
 }
 
 /* ===================================================== */
@@ -114,7 +118,7 @@
 /* ===================================================== */
 /* Accent */
 .button__variant_accent {
-  color: var(--color-gray-1, #fdfcfd);
+  color: var(--color-white, #ffffff);
   background-image: linear-gradient(
     to bottom,
     var(--color-primary-9, #e93d82),
@@ -147,11 +151,7 @@
 
 .button__variant_ghost:enabled:hover {
   color: var(--color-gray-12, #1a1523);
-  background-color: color-mix(
-    in oklab,
-    var(--color-gray-5, #e9e8ea) 75%,
-    transparent
-  );
+  background-color: color-mix(in oklab, var(--color-gray-5, #e9e8ea) 75%, transparent);
 }
 
 /* Primary */

package/dist/index.d.ts

@@ -1,5 +1,15 @@
 import { ComponentProps, ReactNode, JSX } from 'react';
 
+interface ButtonIconProps extends ButtonPropsInternal {
+    children?: ReactNode;
+    iconEnd?: never;
+    iconOnly: true;
+    iconStart?: never;
+}
+interface ButtonProps extends ButtonPropsInternal {
+    children?: string | string[];
+    iconOnly?: false;
+}
 interface ButtonPropsInternal extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
     iconEnd?: ReactNode;
     iconOnly?: boolean;
@@ -12,16 +22,6 @@ interface ButtonPropsInternal extends Omit<ComponentProps<"button">, "aria-press
     size?: 32 | 36 | 40 | 44;
     variant?: "accent" | "ghost" | "primary" | "secondary";
 }
-interface ButtonIconProps extends ButtonPropsInternal {
-    children?: ReactNode;
-    iconEnd?: never;
-    iconOnly: true;
-    iconStart?: never;
-}
-interface ButtonProps extends ButtonPropsInternal {
-    children?: string | string[];
-    iconOnly?: false;
-}
 type ButtonUnionProps = ButtonIconProps | ButtonProps;
 declare function Button(props: ButtonUnionProps): JSX.Element;
 declare const BUTTON_CLASS_NAME: {
@@ -54,11 +54,18 @@ interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "dis
     isDisabled?: boolean;
     isReadOnly?: boolean;
     isRequired?: boolean;
+    size?: 32 | 36 | 40 | 44;
 }
 declare function Input(props: InputProps): JSX.Element;
 declare const INPUT_CLASS_NAME: {
     readonly BASE: string;
     readonly PASSWORD: string;
+    readonly SIZE: {
+        readonly 32: string;
+        readonly 36: string;
+        readonly 40: string;
+        readonly 44: string;
+    };
 };
 
 interface LabelProps extends ComponentProps<"label"> {

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/button.tsx
-import styles3 from "./button.module-VAXL2INY.module.css";
+import styles3 from "./button.module-44LVL7ES.module.css";
 
 // src/button-background.tsx
-import styles from "./button-background.module-Y3DFESUY.module.css";
+import styles from "./button-background.module-EWE3JTY4.module.css";
 import { Fragment, jsx } from "react/jsx-runtime";
 function ButtonBackground(props) {
   const { isRounded = false, variant = "primary" } = props;
@@ -85,7 +85,13 @@ function Button(props) {
       type,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx3(ButtonBackground, { isRounded, variant }),
+        /* @__PURE__ */ jsx3(
+          ButtonBackground,
+          {
+            isRounded,
+            variant
+          }
+        ),
         isLoading && /* @__PURE__ */ jsx3(ButtonSpinner, {}),
         !isLoading && iconStart,
         iconOnly ? isLoading ? /* @__PURE__ */ jsx3(Fragment2, {}) : children : /* @__PURE__ */ jsx3("span", { children }),
@@ -120,7 +126,7 @@ var BUTTON_CLASS_NAME = {
 };
 
 // src/input.tsx
-import styles4 from "./input.module-GMZ6XJ62.module.css";
+import styles4 from "./input.module-RQOR3OFH.module.css";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function Input(props) {
   const {
@@ -129,12 +135,14 @@ function Input(props) {
     isDisabled = false,
     isReadOnly = false,
     isRequired = false,
+    size = 40,
     type = "text",
     ...rest
   } = props;
   const isPassword = type === "password";
   const combinedClassName = `
     ${INPUT_CLASS_NAME.BASE}
+    ${INPUT_CLASS_NAME.SIZE[size]}
     ${isPassword ? INPUT_CLASS_NAME.PASSWORD : ""}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
@@ -153,7 +161,13 @@ function Input(props) {
 }
 var INPUT_CLASS_NAME = {
   BASE: styles4.input,
-  PASSWORD: styles4.input__password
+  PASSWORD: styles4.input__password,
+  SIZE: {
+    32: styles4.input__size_32,
+    36: styles4.input__size_36,
+    40: styles4.input__size_40,
+    44: styles4.input__size_44
+  }
 };
 
 // src/label.tsx
@@ -165,7 +179,13 @@ function Label(props) {
     ${LABEL_CLASS_NAME.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx5("label", { className: combinedClassName, ...rest });
+  return /* @__PURE__ */ jsx5(
+    "label",
+    {
+      className: combinedClassName,
+      ...rest
+    }
+  );
 }
 var LABEL_CLASS_NAME = {
   BASE: styles5.label

package/dist/{input.module-GMZ6XJ62.module.css → input.module-RQOR3OFH.module.css}

@@ -3,7 +3,7 @@
 /* ===================================================== */
 .input {
   width: 100%;
-  height: 40px;
+  height: var(--size);
   padding: 0 12px;
   font-family: var(--font-sans, sans-serif);
   font-size: 14px;
@@ -27,8 +27,19 @@
   transition-property: background-color, border-color, box-shadow, opacity;
 }
 
+:global(.dark) .input {
+  background-color: var(--color-gray-2, #101010);
+}
+
+@supports (corner-shape: squircle) {
+  .input {
+    border-radius: 9999px;
+    corner-shape: squircle;
+  }
+}
+
 .input::placeholder {
-  color: var(--color-gray-9, #8d8d8d);
+  color: var(--color-gray, #8d8d8d);
   user-select: none;
 }
 
@@ -55,3 +66,22 @@
 .input__password {
   font-family: var(--font-mono, monospace);
 }
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.input__size_32 {
+  --size: 32px;
+}
+
+.input__size_36 {
+  --size: 36px;
+}
+
+.input__size_40 {
+  --size: 40px;
+}
+
+.input__size_44 {
+  --size: 44px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattui/react-components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "A collection of reusable React components built with TypeScript and CSS Modules",
   "keywords": [
     "components",
@@ -31,14 +31,11 @@
   ],
   "scripts": {
     "build": "tsup",
-    "check": "biome check",
-    "check:fix": "biome check --write",
+    "check:type": "tsc",
     "dev": "tsup --watch",
-    "prepublishOnly": "pnpm run build",
-    "update": "pnpx npm-check-updates --upgrade"
+    "prepublishOnly": "pnpm run build"
   },
   "devDependencies": {
-    "@biomejs/biome": "catalog:",
     "@types/react": "catalog:",
     "tsup": "^8.5.0",
     "typescript": "catalog:"