@nattui/react-components 0.0.24 → 0.0.26

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

@@ -17,6 +17,13 @@
   border-radius: 7px;
 }
 
+@supports (corner-shape: squircle) {
+  .button_background__rounded_base {
+    border-radius: 9999px;
+    corner-shape: squircle;
+  }
+}
+
 .button_background__rounded_full {
   border-radius: 9999px;
 }
@@ -30,3 +37,11 @@
     var(--color-white-a5, rgba(0, 0, 0, 0.3))
   );
 }
+
+.button_background__variant_secondary {
+  background: linear-gradient(
+    to bottom,
+    var(--color-black-a2, rgba(0, 0, 0, 0.4)),
+    var(--color-black-a3, rgba(0, 0, 0, 0.3))
+  );
+}

package/dist/{button.module-JEUFP4EH.module.css → button.module-BGP72ND4.module.css}

@@ -2,6 +2,32 @@
 /* Base */
 /* ===================================================== */
 .button {
+  --color-button-gray-1: var(--color-gray-1);
+  --color-button-gray-2: var(--color-gray-2);
+  --color-button-gray-3: var(--color-gray-3);
+  --color-button-gray-4: var(--color-gray-4);
+  --color-button-gray-5: var(--color-gray-5);
+  --color-button-gray-6: var(--color-gray-6);
+  --color-button-gray-7: var(--color-gray-7);
+  --color-button-gray-8: var(--color-gray-8);
+  --color-button-gray-9: var(--color-gray-9);
+  --color-button-gray-10: var(--color-gray-10);
+  --color-button-gray-11: var(--color-gray-11);
+  --color-button-gray-12: var(--color-gray-12);
+
+  --color-button-primary-1: var(--color-primary-light-1);
+  --color-button-primary-2: var(--color-primary-light-2);
+  --color-button-primary-3: var(--color-primary-light-3);
+  --color-button-primary-4: var(--color-primary-light-4);
+  --color-button-primary-5: var(--color-primary-light-5);
+  --color-button-primary-6: var(--color-primary-light-6);
+  --color-button-primary-7: var(--color-primary-light-7);
+  --color-button-primary-8: var(--color-primary-light-8);
+  --color-button-primary-9: var(--color-primary-light-9);
+  --color-button-primary-10: var(--color-primary-light-10);
+  --color-button-primary-11: var(--color-primary-light-11);
+  --color-button-primary-12: var(--color-primary-light-12);
+
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -19,7 +45,7 @@
   user-select: none;
   outline-width: 0;
   outline-style: solid;
-  outline-color: var(--color-primary-9, #e93d82);
+  outline-color: var(--color-button-primary-9);
   outline-offset: 2px;
   border-color: transparent;
   border-style: solid;
@@ -113,6 +139,11 @@
   --padding: 0 16px;
 }
 
+.button__size_48 {
+  --size: 48px;
+  --padding: 0 18px;
+}
+
 /* ===================================================== */
 /* Variant */
 /* ===================================================== */
@@ -121,10 +152,10 @@
   color: var(--color-white, #ffffff);
   background-image: linear-gradient(
     to bottom,
-    var(--color-primary-9, #e93d82),
-    var(--color-primary-10, #e03177)
+    var(--color-button-primary-9),
+    var(--color-button-primary-10)
   );
-  border-color: var(--color-primary-9, #e93d82);
+  border-color: var(--color-button-primary-9);
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
     inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
@@ -134,35 +165,35 @@
 .button__variant_accent:enabled:active {
   box-shadow:
     inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 1px 0 0 var(--color-primary-11, #d31e66) !important;
+    inset 0 1px 0 0 var(--color-button-primary-11) !important;
 }
 
 /* Ghost */
 .button__variant_ghost {
-  color: var(--color-gray-11, #6f6e77);
+  color: var(--color-button-gray-11);
   background-color: transparent;
 }
 
 .button__variant_ghost:enabled[aria-pressed="true"],
 .button__variant_ghost:enabled:active {
-  color: var(--color-gray-12, #1a1523);
-  background-color: var(--color-gray-5, #e9e8ea) !important;
+  color: var(--color-button-gray-12);
+  background-color: var(--color-button-gray-5) !important;
 }
 
 .button__variant_ghost:enabled:hover {
-  color: var(--color-gray-12, #1a1523);
-  background-color: color-mix(in oklab, var(--color-gray-5, #e9e8ea) 75%, transparent);
+  color: var(--color-button-gray-12);
+  background-color: color-mix(in oklab, var(--color-button-gray-5) 75%, transparent);
 }
 
 /* Primary */
 .button__variant_primary {
-  color: var(--color-gray-1, #fdfcfd);
+  color: var(--color-button-gray-1);
   background-image: linear-gradient(
     to bottom,
-    color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
-    var(--color-gray-12, #1a1523)
+    color-mix(in oklab, var(--color-button-gray-12) 90%, transparent),
+    var(--color-button-gray-12)
   );
-  border-color: var(--color-gray-12, #1a1523);
+  border-color: var(--color-button-gray-12);
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
     inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
@@ -172,34 +203,30 @@
 .button__variant_primary:enabled:active {
   box-shadow:
     inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 1px 0 0 var(--color-gray-12, #1a1523) !important;
+    inset 0 1px 0 0 var(--color-button-gray-12) !important;
 }
 
 /* Secondary */
 .button__variant_secondary {
-  color: var(--color-gray-11, #6f6e77);
-  background-image: linear-gradient(
-    to bottom,
-    var(--color-gray-1, #fdfcfd),
-    var(--color-gray-3, #f4f2f4)
-  );
-  border-color: var(--color-gray-6, #e4e2e4);
+  color: var(--color-button-gray-11);
+  background-color: var(--color-button-gray-2);
+  border-color: var(--color-button-gray-6);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 1px 0 0 rgba(255, 255, 255, 1),
     inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
 }
 
 .button__variant_secondary:enabled[aria-pressed="true"],
 .button__variant_secondary:enabled:active,
 .button__variant_secondary:enabled:hover {
-  color: var(--color-gray-12, #1a1523);
-  border-color: var(--color-gray-8, #c8c7cb);
+  color: var(--color-button-gray-12);
+  border-color: var(--color-button-gray-8);
 }
 
 .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(255, 255, 255, 1),
     inset 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
 }
 
@@ -233,7 +260,7 @@
 
 .button__variant_ghost:enabled:hover,
 .button__variant_secondary:enabled:hover {
-  color: var(--color-gray-12, #1a1523);
+  color: var(--color-button-gray-12);
 }
 
 /* ===================================================== */

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ComponentProps, ReactNode, JSX } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonIconProps extends ButtonPropsInternal {
     children?: ReactNode;
@@ -19,7 +20,7 @@ interface ButtonPropsInternal extends Omit<ComponentProps<"button">, "aria-press
     isFullWidth?: boolean;
     isLoading?: boolean;
     isRounded?: boolean;
-    size?: 32 | 36 | 40 | 44;
+    size?: 32 | 36 | 40 | 44 | 48;
     variant?: "accent" | "ghost" | "primary" | "secondary";
 }
 type ButtonUnionProps = ButtonIconProps | ButtonProps;
@@ -36,6 +37,7 @@ declare const BUTTON_CLASS_NAME: {
         readonly 36: string;
         readonly 40: string;
         readonly 44: string;
+        readonly 48: string;
     };
     readonly VARIANT: {
         readonly ACCENT: string;
@@ -75,4 +77,11 @@ declare const LABEL_CLASS_NAME: {
     readonly BASE: string;
 };
 
-export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps };
+interface SpacerProps extends ComponentProps<"div"> {
+}
+declare function Spacer(props: SpacerProps): react_jsx_runtime.JSX.Element;
+declare const SPACER_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps, SPACER_CLASS_NAME, Spacer, type SpacerProps };

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/button.tsx
-import styles3 from "./button.module-JEUFP4EH.module.css";
+import styles3 from "./button.module-BGP72ND4.module.css";
 
 // src/button-background.tsx
-import styles from "./button-background.module-EWE3JTY4.module.css";
+import styles from "./button-background.module-IXCWW4XS.module.css";
 import { Fragment, jsx } from "react/jsx-runtime";
 function ButtonBackground(props) {
   const { isRounded = false, variant = "primary" } = props;
@@ -11,8 +11,9 @@ function ButtonBackground(props) {
     ${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 : ""}
+    ${variant === "secondary" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.SECONDARY : ""}
   `.replaceAll(/\s+/g, " ").trim();
-  if (!(variant === "accent" || variant === "primary")) return /* @__PURE__ */ jsx(Fragment, {});
+  if (!(variant === "accent" || variant === "primary" || variant === "secondary")) return /* @__PURE__ */ jsx(Fragment, {});
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -29,7 +30,8 @@ var BUTTON_BACKGROUND_CLASS_NAME = {
   },
   VARIANT: {
     ACCENT: styles.button_background__variant_accent,
-    PRIMARY: styles.button_background__variant_primary
+    PRIMARY: styles.button_background__variant_primary,
+    SECONDARY: styles.button_background__variant_secondary
   }
 };
 
@@ -62,7 +64,7 @@ function Button(props) {
     isFullWidth = false,
     isLoading = false,
     isRounded = false,
-    size = 36,
+    size = 40,
     type = "button",
     variant = "primary",
     ...rest
@@ -111,7 +113,8 @@ var BUTTON_CLASS_NAME = {
     32: styles3.button__size_32,
     36: styles3.button__size_36,
     40: styles3.button__size_40,
-    44: styles3.button__size_44
+    44: styles3.button__size_44,
+    48: styles3.button__size_48
   },
   VARIANT: {
     ACCENT: styles3.button__variant_accent,
@@ -190,11 +193,34 @@ function Label(props) {
 var LABEL_CLASS_NAME = {
   BASE: styles5.label
 };
+
+// src/spacer.tsx
+import styles6 from "./spacer.module-ZYYYWYEB.module.css";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Spacer(props) {
+  const { className: customClassName = "", ...rest } = props;
+  const combinedClassName = `
+    ${SPACER_CLASS_NAME.BASE}
+    ${customClassName}
+  `.replaceAll(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: `${styles6.spacer} ${combinedClassName}`.trim(),
+      ...rest
+    }
+  );
+}
+var SPACER_CLASS_NAME = {
+  BASE: styles6.spacer
+};
 export {
   BUTTON_CLASS_NAME,
   Button,
   INPUT_CLASS_NAME,
   Input,
   LABEL_CLASS_NAME,
-  Label
+  Label,
+  SPACER_CLASS_NAME,
+  Spacer
 };

package/dist/spacer.module-ZYYYWYEB.module.css

@@ -0,0 +1,3 @@
+.spacer {
+  flex-shrink: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattui/react-components",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "A collection of reusable React components built with TypeScript and CSS Modules",
   "keywords": [
     "components",