@nattui/react-components 0.0.21 → 0.0.22

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

@@ -2,30 +2,30 @@
 /* Base */
 /* ===================================================== */
 .button {
-  position: relative;
+  align-items: safe center;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  column-gap: 8px;
+  cursor: pointer;
   display: flex;
   flex-shrink: 0;
-  column-gap: 8px;
-  align-items: safe center;
-  justify-content: safe center;
-  overflow: hidden;
   font-family: var(--font-sans, sans-serif);
   font-size: 14px;
   font-weight: 500;
+  justify-content: safe center;
   line-height: 1.5;
-  cursor: pointer;
-  user-select: none;
-  outline-width: 0;
-  outline-style: solid;
-  outline-color: var(--color-primary-9, #e93d82);
+  outline-color: var(--color-primary, #e93d82);
   outline-offset: 2px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 1px;
+  outline-style: solid;
+  outline-width: 0;
+  overflow: hidden;
+  position: relative;
   transition-duration: 150ms;
   transition-property:
     background-color, border-color, box-shadow, color, filter, opacity,
     translate;
+  user-select: none;
 }
 
 .button:disabled {
@@ -67,8 +67,8 @@
 /* Icon only */
 /* ===================================================== */
 .button__icon_only {
-  width: var(--size) !important;
   padding: 0 !important;
+  width: var(--size) !important;
 }
 
 /* ===================================================== */
@@ -114,16 +114,16 @@
 /* ===================================================== */
 /* Accent */
 .button__variant_accent {
-  color: var(--color-gray-1, #fdfcfd);
   background-image: linear-gradient(
     to bottom,
-    var(--color-primary-9, #e93d82),
+    var(--color-primary, #e93d82),
     var(--color-primary-10, #e03177)
   );
-  border-color: var(--color-primary-9, #e93d82);
+  border-color: var(--color-primary, #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,28 +135,27 @@
 
 /* Ghost */
 .button__variant_ghost {
-  color: var(--color-gray-11, #6f6e77);
   background-color: transparent;
+  color: var(--color-gray-11, #6f6e77);
 }
 
 .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-gray-12, #1a1523);
 }
 
 .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-gray-12, #1a1523);
 }
 
 /* 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),
@@ -166,6 +165,7 @@
   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,7 +177,6 @@
 
 /* Secondary */
 .button__variant_secondary {
-  color: var(--color-gray-11, #6f6e77);
   background-image: linear-gradient(
     to bottom,
     var(--color-gray-1, #fdfcfd),
@@ -187,13 +186,14 @@
   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 {
-  color: var(--color-gray-12, #1a1523);
   border-color: var(--color-gray-8, #c8c7cb);
+  color: var(--color-gray-12, #1a1523);
 }
 
 .button__variant_secondary:enabled[aria-pressed="true"],

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: {

package/dist/index.js

@@ -1,8 +1,5 @@
-// src/button.tsx
-import styles3 from "./button.module-VAXL2INY.module.css";
-
 // src/button-background.tsx
-import styles from "./button-background.module-Y3DFESUY.module.css";
+import styles from "./button-background.module-T5B7XZ2Z.module.css";
 import { Fragment, jsx } from "react/jsx-runtime";
 function ButtonBackground(props) {
   const { isRounded = false, variant = "primary" } = props;
@@ -34,7 +31,7 @@ var BUTTON_BACKGROUND_CLASS_NAME = {
 };
 
 // src/button-spinner.tsx
-import styles2 from "./button-spinner.module-T3OGVJS4.module.css";
+import styles2 from "./button-spinner.module-4TBETQ4T.module.css";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function ButtonSpinner(props) {
   const { size = 16 } = props;
@@ -49,6 +46,7 @@ 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 {
@@ -120,7 +118,7 @@ var BUTTON_CLASS_NAME = {
 };
 
 // src/input.tsx
-import styles4 from "./input.module-GMZ6XJ62.module.css";
+import styles4 from "./input.module-GJV5YJKN.module.css";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function Input(props) {
   const {
@@ -157,7 +155,7 @@ var INPUT_CLASS_NAME = {
 };
 
 // src/label.tsx
-import styles5 from "./label.module-3W6OLN6C.module.css";
+import styles5 from "./label.module-4CZ6ETIR.module.css";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function Label(props) {
   const { className: customClassName = "", ...rest } = props;

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

@@ -2,33 +2,33 @@
 /* Base */
 /* ===================================================== */
 .input {
-  width: 100%;
-  height: 40px;
-  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%;
 }
 
 .input::placeholder {
-  color: var(--color-gray-9, #8d8d8d);
+  color: var(--color-gray, #8d8d8d);
   user-select: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattui/react-components",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "A collection of reusable React components built with TypeScript and CSS Modules",
   "keywords": [
     "components",
@@ -31,14 +31,10 @@
   ],
   "scripts": {
     "build": "tsup",
-    "check": "biome check",
-    "check:fix": "biome check --write",
     "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:"

package/dist/{button-background.module-Y3DFESUY.module.css → button-background.module-T5B7XZ2Z.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;
-  filter: none !important;
+  position: absolute;
+  right: 0;
+  top: 0;
   transition-duration: inherit;
   transition-property: opacity;
+  z-index: -1;
 }
 
 /* Rounded */

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

@@ -1,9 +1,9 @@
 .button_spinner {
-  position: relative;
-  width: var(--size);
+  animation: spinner 1000ms steps(12, end) infinite;
   height: var(--size);
+  position: relative;
   scale: -1 1;
-  animation: spinner 1000ms steps(12, end) infinite;
+  width: var(--size);
 }
 
 @keyframes spinner {
@@ -13,25 +13,25 @@
 }
 
 .button_spinner > div {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  width: calc(var(--size) / 2);
   height: calc(var(--size) / 12);
   pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 50%;
   transform-origin: center left;
-  translate: 0 -50%;
   transition: all 150ms;
+  translate: 0 -50%;
+  width: calc(var(--size) / 2);
 }
 
 .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-3W6OLN6C.module.css → label.module-4CZ6ETIR.module.css}

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