@nattui/react-components 0.0.34 → 0.0.36

package/dist/{button.module-VWVBUUZO.module.css → button.module-4LEXZ25X.module.css}

@@ -96,21 +96,9 @@
   background-color: var(--color-primary-9);
   background-image: linear-gradient(
     to bottom,
-    color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
     color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
   );
-  box-shadow:
-    0 0 0 1px var(--color-primary-9) inset,
-    0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
-    0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
-}
-
-.button__variant_accent:active:enabled,
-.button__variant_accent[aria-pressed="true"]:enabled {
-  box-shadow:
-    0 0 0 1px var(--color-primary-9) inset,
-    0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
-    0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
 }
 
 .button__variant_accent:active:enabled,
@@ -123,7 +111,7 @@
   background-image: linear-gradient(
     to bottom,
     color-mix(in oklab, transparent 100%, #000000 0%) 50%,
-    color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
+    color-mix(in oklab, transparent 100%, #000000 5%) 50%
   );
 }
 
@@ -136,7 +124,7 @@
 .button__variant_ghost:active:enabled,
 .button__variant_ghost:hover:enabled,
 .button__variant_ghost[aria-pressed="true"]:enabled {
-  background-color: var(--color-gray-4);
+  background-color: var(--color-gray-3);
 }
 
 :global(.dark) .button__variant_ghost {
@@ -146,24 +134,12 @@
 /* Primary */
 .button__variant_primary {
   color: var(--color-white);
-  background-color: var(--color-gray-dark-2);
+  background-color: var(--color-gray-dark-1);
   background-image: linear-gradient(
     to bottom,
-    color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
     color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
   );
-  box-shadow:
-    0 0 0 1px var(--color-gray-dark-2) inset,
-    0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
-    0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
-}
-
-.button__variant_primary:active:enabled,
-.button__variant_primary[aria-pressed="true"]:enabled {
-  box-shadow:
-    0 0 0 1px var(--color-gray-dark-2) inset,
-    0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
-    0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
 }
 
 .button__variant_primary:active:enabled,
@@ -178,20 +154,8 @@
   background-image: linear-gradient(
     to bottom,
     color-mix(in oklab, transparent 100%, #000000 0%) 50%,
-    color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
+    color-mix(in oklab, transparent 100%, #000000 5%) 50%
   );
-  box-shadow:
-    0 0 0 1px var(--color-gray-light-1) inset,
-    0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
-    0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
-}
-
-:global(.dark) .button__variant_primary:active:enabled,
-:global(.dark) .button__variant_primary[aria-pressed="true"]:enabled {
-  box-shadow:
-    0 0 0 1px var(--color-gray-light-2) inset,
-    0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
-    0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
 }
 
 :global(.dark) .button__variant_primary:active:enabled,
@@ -209,33 +173,23 @@
     color-mix(in oklab, transparent 100%, #000000 0%) 50%,
     color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
   );
-  box-shadow:
-    0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset, /* Bottom */
-    0 0 0 1px var(--color-gray-4) inset; /* Border */
-}
-
-.button__variant_secondary:active:enabled,
-.button__variant_secondary[aria-pressed="true"]:enabled {
-  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
+  box-shadow: 0 0 0 1px var(--color-gray-4) inset;
 }
 
 .button__variant_secondary:active:enabled,
 .button__variant_secondary:hover:enabled,
 .button__variant_secondary[aria-pressed="true"]:enabled {
-  background-color: var(--color-gray-3);
+  background-color: var(--color-gray-2);
+  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
 }
 
 :global(.dark) .button__variant_secondary {
   color: var(--color-white);
-  background-color: var(--color-gray-2);
   background-image: linear-gradient(
     to bottom,
     color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
     color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
   );
-  box-shadow:
-    0 1px 0 0px rgba(255, 255, 255, 7.5%) inset, /* Top */
-    0 0 0 1px var(--color-gray-4) inset; /* Border */
 }
 
 /* ===================================================== */

package/dist/index.d.ts

@@ -93,14 +93,22 @@ declare const SPACER_CLASS_NAME: {
     readonly BASE: string;
 };
 
-interface SwitchProps extends Omit<ComponentProps<typeof Switch$1.Root>, "checked" | "defaultChecked" | "disabled" | "required" | "readOnly" | "nativeButton"> {
+interface SwitchProps extends Omit<ComponentProps<typeof Switch$1.Root>, "checked" | "defaultChecked" | "disabled" | "nativeButton" | "readOnly" | "required"> {
     isChecked?: boolean;
     isDefaultChecked?: boolean;
     isDisabled?: boolean;
     isReadOnly?: boolean;
     isRequired?: boolean;
+    size?: 14 | 24;
 }
 declare function Switch(props: SwitchProps): JSX.Element;
+declare const SWITCH_CLASS_NAME: {
+    readonly BASE: string;
+    readonly SIZE: {
+        readonly 14: string;
+        readonly 24: string;
+    };
+};
 
 interface TextareaProps extends Omit<ComponentProps<"textarea">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
     isActive?: boolean;
@@ -121,4 +129,4 @@ declare const TEXTAREA_CLASS_NAME: {
     };
 };
 
-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, Switch, type SwitchProps, TEXTAREA_CLASS_NAME, Textarea, type TextareaProps };
+export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, type SpacerProps, Switch, type SwitchProps, TEXTAREA_CLASS_NAME, Textarea, type TextareaProps };

package/dist/index.js

@@ -1,22 +1,13 @@
-// src/button.tsx
-import styles2 from "./button.module-VWVBUUZO.module.css";
-
 // src/button-spinner.tsx
 import styles from "./button-spinner.module-T3OGVJS4.module.css";
 import { jsx } from "react/jsx-runtime";
 function ButtonSpinner(props) {
   const { size = 16 } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: styles.button_spinner,
-      style: { "--size": `${size}px` },
-      children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx("div", {}, index))
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: styles.button_spinner, style: { "--size": `${size}px` }, children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx("div", {}, index)) });
 }
 
 // src/button.tsx
+import styles2 from "./button.module-4LEXZ25X.module.css";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Button(props) {
   const {
@@ -88,7 +79,7 @@ var BUTTON_CLASS_NAME = {
 };
 
 // src/input.tsx
-import styles3 from "./input.module-7OP5B7X3.module.css";
+import styles3 from "./input.module-JBNVVC6S.module.css";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Input(props) {
   const {
@@ -115,8 +106,8 @@ function Input(props) {
   return /* @__PURE__ */ jsx3(
     "input",
     {
-      "aria-pressed": isActive,
       className: combinedClassName,
+      "data-is-active": isActive,
       "data-is-invalid": isInvalid,
       "data-is-valid": isValid,
       disabled: isDisabled,
@@ -147,18 +138,12 @@ var INPUT_CLASS_NAME = {
 import styles4 from "./label.module-HUBUIUFV.module.css";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function Label(props) {
-  const { className: customClassName = "", ...rest } = props;
+  const { className: customClassName = "", htmlFor = void 0, children = "", ...rest } = props;
   const combinedClassName = `
     ${LABEL_CLASS_NAME.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx4(
-    "label",
-    {
-      className: combinedClassName,
-      ...rest
-    }
-  );
+  return /* @__PURE__ */ jsx4("label", { className: combinedClassName, htmlFor, ...rest, children });
 }
 var LABEL_CLASS_NAME = {
   BASE: styles4.label
@@ -173,13 +158,7 @@ function Spacer(props) {
     ${SPACER_CLASS_NAME.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      className: `${styles5.spacer} ${combinedClassName}`.trim(),
-      ...rest
-    }
-  );
+  return /* @__PURE__ */ jsx5("div", { className: `${styles5.spacer} ${combinedClassName}`.trim(), ...rest });
 }
 var SPACER_CLASS_NAME = {
   BASE: styles5.spacer
@@ -187,7 +166,7 @@ var SPACER_CLASS_NAME = {
 
 // src/switch.tsx
 import { Switch as BaseSwitch } from "@base-ui/react";
-import styles6 from "./switch.module-QVZRQ4BT.module.css";
+import styles6 from "./switch.module-SEKLTDNC.module.css";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function Switch(props) {
   const {
@@ -197,10 +176,12 @@ function Switch(props) {
     isDisabled = false,
     isReadOnly = false,
     isRequired = false,
+    size = 24,
     ...rest
   } = props;
   const combinedClassName = `
-    ${styles6.switch}
+    ${SWITCH_CLASS_NAME.BASE}
+    ${SWITCH_CLASS_NAME.SIZE[size]}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
   return /* @__PURE__ */ jsx6(
@@ -217,9 +198,16 @@ function Switch(props) {
     }
   );
 }
+var SWITCH_CLASS_NAME = {
+  BASE: styles6.switch,
+  SIZE: {
+    14: styles6.switch__size_14,
+    24: styles6.switch__size_24
+  }
+};
 
 // src/textarea.tsx
-import inputStyles from "./input.module-7OP5B7X3.module.css";
+import inputStyles from "./input.module-JBNVVC6S.module.css";
 import styles7 from "./textarea.module-6GUVSFC7.module.css";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function Textarea(props) {
@@ -244,8 +232,8 @@ function Textarea(props) {
   return /* @__PURE__ */ jsx7(
     "textarea",
     {
-      "aria-pressed": isActive,
       className: combinedClassName,
+      "data-is-active": isActive,
       "data-is-invalid": isInvalid,
       "data-is-valid": isValid,
       disabled: isDisabled,
@@ -272,6 +260,7 @@ export {
   LABEL_CLASS_NAME,
   Label,
   SPACER_CLASS_NAME,
+  SWITCH_CLASS_NAME,
   Spacer,
   Switch,
   TEXTAREA_CLASS_NAME,

package/dist/{input.module-7OP5B7X3.module.css → input.module-JBNVVC6S.module.css}

@@ -20,9 +20,7 @@
   outline-offset: -2px;
   background-color: var(--color-gray-1, #fcfcfc);
   border-style: none;
-  box-shadow:
-    0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset, /* Bottom */
-    0 0 0 1px var(--color-gray-4) inset; /* Border */
+  box-shadow: 0 0 0 1px var(--color-gray-4) inset;
   transition-duration: 150ms;
   transition-property: box-shadow, opacity;
 }
@@ -40,10 +38,8 @@
 .input:enabled:active,
 .input:enabled:focus,
 .input:enabled:hover,
-.input:enabled[aria-pressed="true"] {
-  box-shadow:
-    0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset, /* Bottom */
-    0 0 0 1px var(--color-gray-6) inset; /* Border */
+.input:enabled[data-is-active="true"] {
+  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
 }
 
 .input[data-is-valid="true"] {
@@ -59,22 +55,6 @@
   outline-color: var(--color-primary-9, #e93d82);
 }
 
-:global(.dark) .input {
-  background-color: var(--color-gray-2, #101010);
-  box-shadow:
-    0 1px 0 0px rgba(255, 255, 255, 7.5%) inset, /* Top */
-    0 0 0 1px var(--color-gray-4) inset; /* Border */
-}
-
-:global(.dark) .input:enabled:active,
-:global(.dark) .input:enabled:focus,
-:global(.dark) .input:enabled:hover,
-:global(.dark) .input:enabled[aria-pressed="true"] {
-  box-shadow:
-    0 1px 0 0px rgba(255, 255, 255, 7.5%) inset, /* Top */
-    0 0 0 1px var(--color-gray-6) inset; /* Border */
-}
-
 /* ===================================================== */
 /* Password */
 /* ===================================================== */

package/dist/{switch.module-QVZRQ4BT.module.css → switch.module-SEKLTDNC.module.css}

@@ -3,9 +3,8 @@
 /* ===================================================== */
 .switch {
   display: flex;
-  width: 40px;
-  height: 24px;
   padding: 2px;
+  overflow: hidden;
   cursor: pointer;
   outline-width: 2px;
   outline-style: none;
@@ -44,5 +43,20 @@
 }
 
 .switch__thumb[data-checked] {
-  transform: translateX(16px);
+  transform: translateX(var(--translateX));
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.switch__size_14 {
+  --translateX: 12px;
+  width: 30px;
+  height: 18px;
+}
+
+.switch__size_24 {
+  --translateX: 16px;
+  width: 40px;
+  height: 24px;
 }

package/package.json

@@ -1,53 +1,53 @@
 {
-  "author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
+  "name": "@nattui/react-components",
+  "version": "0.0.36",
+  "description": "A collection of reusable React components built with TypeScript and CSS Modules",
+  "keywords": [
+    "components",
+    "react",
+    "ui"
+  ],
+  "homepage": "https://github.com/nattui/react-components#readme",
   "bugs": {
     "url": "https://github.com/nattui/react-components/issues"
   },
-  "dependencies": {
-    "@base-ui/react": "1.1.0"
-  },
-  "description": "A collection of reusable React components built with TypeScript and CSS Modules",
-  "devDependencies": {
-    "@types/react": "catalog:",
-    "tsup": "8.5.1",
-    "typescript": "catalog:"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
+  "author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nattui/react-components.git"
   },
   "files": [
     "dist"
   ],
-  "homepage": "https://github.com/nattui/react-components#readme",
-  "keywords": [
-    "components",
-    "react",
-    "ui"
-  ],
+  "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "name": "@nattui/react-components",
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
   },
   "publishConfig": {
     "access": "public"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nattui/react-components.git"
-  },
   "scripts": {
     "build": "tsup",
     "check:type": "tsc",
     "dev": "tsup --watch",
     "prepublishOnly": "pnpm run build"
   },
-  "type": "module",
-  "types": "./dist/index.d.ts",
-  "version": "0.0.34"
+  "dependencies": {
+    "@base-ui/react": "1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "catalog:",
+    "tsup": "8.5.1",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
 }