@nattui/react-components 0.0.22 → 0.0.24

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

@@ -1,15 +1,15 @@
 /* Base */
 .button_background {
+  position: absolute;
+  top: 0;
+  right: 0;
   bottom: 50%;
-  filter: none !important;
   left: 0;
+  z-index: -1;
   opacity: 0.2;
-  position: absolute;
-  right: 0;
-  top: 0;
+  filter: none !important;
   transition-duration: inherit;
   transition-property: opacity;
-  z-index: -1;
 }
 
 /* Rounded */
@@ -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-G7MNOYWZ.module.css → button.module-JEUFP4EH.module.css}

@@ -2,30 +2,31 @@
 /* Base */
 /* ===================================================== */
 .button {
-  align-items: safe center;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 1px;
-  column-gap: 8px;
-  cursor: pointer;
+  position: relative;
   display: flex;
   flex-shrink: 0;
+  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;
   font-weight: 500;
-  justify-content: safe center;
   line-height: 1.5;
-  outline-color: var(--color-primary, #e93d82);
-  outline-offset: 2px;
-  outline-style: solid;
+  cursor: pointer;
+  user-select: none;
   outline-width: 0;
-  overflow: hidden;
-  position: relative;
+  outline-style: solid;
+  outline-color: var(--color-primary-9, #e93d82);
+  outline-offset: 2px;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   transition-duration: 150ms;
   transition-property:
-    background-color, border-color, box-shadow, color, filter, opacity,
-    translate;
-  user-select: none;
+    background-color, border-color, box-shadow, color, filter, opacity, translate;
 }
 
 .button:disabled {
@@ -67,8 +68,8 @@
 /* Icon only */
 /* ===================================================== */
 .button__icon_only {
-  padding: 0 !important;
   width: var(--size) !important;
+  padding: 0 !important;
 }
 
 /* ===================================================== */
@@ -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 12px;
 }
 
 .button__size_40 {
   --size: 40px;
-  height: var(--size);
-  padding: 0 16px;
+  --padding: 0 14px;
 }
 
 .button__size_44 {
   --size: 44px;
-  height: var(--size);
-  padding: 0 20px;
+  --padding: 0 16px;
 }
 
 /* ===================================================== */
@@ -114,16 +118,16 @@
 /* ===================================================== */
 /* Accent */
 .button__variant_accent {
+  color: var(--color-white, #ffffff);
   background-image: linear-gradient(
     to bottom,
-    var(--color-primary, #e93d82),
+    var(--color-primary-9, #e93d82),
     var(--color-primary-10, #e03177)
   );
-  border-color: var(--color-primary, #e93d82);
+  border-color: var(--color-primary-9, #e93d82);
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
     inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-  color: var(--color-gray-1, #fdfcfd);
 }
 
 .button__variant_accent:enabled[aria-pressed="true"],
@@ -135,27 +139,24 @@
 
 /* Ghost */
 .button__variant_ghost {
-  background-color: transparent;
   color: var(--color-gray-11, #6f6e77);
+  background-color: transparent;
 }
 
 .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);
+  background-color: var(--color-gray-5, #e9e8ea) !important;
 }
 
 .button__variant_ghost:enabled:hover {
-  background-color: color-mix(
-    in oklab,
-    var(--color-gray-5, #e9e8ea) 75%,
-    transparent
-  );
   color: var(--color-gray-12, #1a1523);
+  background-color: color-mix(in oklab, var(--color-gray-5, #e9e8ea) 75%, transparent);
 }
 
 /* Primary */
 .button__variant_primary {
+  color: var(--color-gray-1, #fdfcfd);
   background-image: linear-gradient(
     to bottom,
     color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
@@ -165,7 +166,6 @@
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
     inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-  color: var(--color-gray-1, #fdfcfd);
 }
 
 .button__variant_primary:enabled[aria-pressed="true"],
@@ -177,6 +177,7 @@
 
 /* Secondary */
 .button__variant_secondary {
+  color: var(--color-gray-11, #6f6e77);
   background-image: linear-gradient(
     to bottom,
     var(--color-gray-1, #fdfcfd),
@@ -186,14 +187,13 @@
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
     inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-  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);
+  border-color: var(--color-gray-8, #c8c7cb);
 }
 
 .button__variant_secondary:enabled[aria-pressed="true"],

package/dist/index.d.ts

@@ -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,5 +1,8 @@
+// src/button.tsx
+import styles3 from "./button.module-JEUFP4EH.module.css";
+
 // src/button-background.tsx
-import styles from "./button-background.module-T5B7XZ2Z.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;
@@ -31,7 +34,7 @@ var BUTTON_BACKGROUND_CLASS_NAME = {
 };
 
 // src/button-spinner.tsx
-import styles2 from "./button-spinner.module-4TBETQ4T.module.css";
+import styles2 from "./button-spinner.module-T3OGVJS4.module.css";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function ButtonSpinner(props) {
   const { size = 16 } = props;
@@ -46,7 +49,6 @@ function ButtonSpinner(props) {
 }
 
 // src/button.tsx
-import styles3 from "./button.module-G7MNOYWZ.module.css";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function Button(props) {
   const {
@@ -83,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 }),
@@ -118,7 +126,7 @@ var BUTTON_CLASS_NAME = {
 };
 
 // src/input.tsx
-import styles4 from "./input.module-GJV5YJKN.module.css";
+import styles4 from "./input.module-RQOR3OFH.module.css";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function Input(props) {
   const {
@@ -127,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();
@@ -151,11 +161,17 @@ 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
-import styles5 from "./label.module-4CZ6ETIR.module.css";
+import styles5 from "./label.module-3W6OLN6C.module.css";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function Label(props) {
   const { className: customClassName = "", ...rest } = props;
@@ -163,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-GJV5YJKN.module.css → input.module-RQOR3OFH.module.css}

@@ -2,29 +2,40 @@
 /* Base */
 /* ===================================================== */
 .input {
+  width: 100%;
+  height: var(--size);
+  padding: 0 12px;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--color-gray-12, #202020);
+  text-decoration: none;
   appearance: none;
+  cursor: text;
+  outline-width: 0;
+  outline-style: solid;
+  outline-color: var(--color-primary-9, #e93d82);
+  outline-offset: 2px;
   background-color: var(--color-gray-1, #fcfcfc);
   border-color: var(--color-gray-5, #e0e0e0);
-  border-radius: 8px;
   border-style: solid;
   border-width: 1px;
+  border-radius: 8px;
   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, #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%;
+}
+
+:global(.dark) .input {
+  background-color: var(--color-gray-2, #101010);
+}
+
+@supports (corner-shape: squircle) {
+  .input {
+    border-radius: 9999px;
+    corner-shape: squircle;
+  }
 }
 
 .input::placeholder {
@@ -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.22",
+  "version": "0.0.24",
   "description": "A collection of reusable React components built with TypeScript and CSS Modules",
   "keywords": [
     "components",
@@ -31,6 +31,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "check:type": "tsc",
     "dev": "tsup --watch",
     "prepublishOnly": "pnpm run build"
   },

package/dist/{button-spinner.module-4TBETQ4T.module.css → button-spinner.module-T3OGVJS4.module.css}

@@ -1,9 +1,9 @@
 .button_spinner {
-  animation: spinner 1000ms steps(12, end) infinite;
-  height: var(--size);
   position: relative;
-  scale: -1 1;
   width: var(--size);
+  height: var(--size);
+  scale: -1 1;
+  animation: spinner 1000ms steps(12, end) infinite;
 }
 
 @keyframes spinner {
@@ -13,25 +13,25 @@
 }
 
 .button_spinner > div {
-  height: calc(var(--size) / 12);
-  pointer-events: none;
   position: absolute;
-  right: 0;
   top: 50%;
+  right: 0;
+  width: calc(var(--size) / 2);
+  height: calc(var(--size) / 12);
+  pointer-events: none;
   transform-origin: center left;
-  transition: all 150ms;
   translate: 0 -50%;
-  width: calc(var(--size) / 2);
+  transition: all 150ms;
 }
 
 .button_spinner > div::after {
-  background-color: currentColor;
-  border-radius: 9999px;
-  content: "";
-  height: 100%;
   position: absolute;
   right: 0;
   width: 50%;
+  height: 100%;
+  content: "";
+  background-color: currentColor;
+  border-radius: 9999px;
 }
 
 .button_spinner > div:nth-child(1) {

package/dist/{label.module-4CZ6ETIR.module.css → label.module-3W6OLN6C.module.css}

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