@nattui/react-components 0.0.33 → 0.0.35

package/dist/{button.module-BMN5S7JE.module.css → button.module-NXMK7IBS.module.css}

@@ -52,14 +52,7 @@
 /* Rounded */
 /* ===================================================== */
 .button__rounded_base {
-  border-radius: 8px;
-}
-
-@supports (corner-shape: squircle) {
-  .button__rounded_base {
-    border-radius: 9999px;
-    corner-shape: squircle;
-  }
+  border-radius: 12px;
 }
 
 .button__rounded_full {
@@ -217,8 +210,8 @@
     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 */
+    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,
@@ -241,8 +234,8 @@
     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 */
+    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

@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode, JSX } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Switch as Switch$1 } from '@base-ui/react';
 
 interface ButtonIconProps extends ButtonPropsInternal {
     children?: ReactNode;
@@ -57,6 +58,7 @@ interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "dis
     isInvalid?: boolean;
     isReadOnly?: boolean;
     isRequired?: boolean;
+    isRounded?: boolean;
     isValid?: boolean;
     size?: 32 | 36 | 40 | 44 | 48;
 }
@@ -64,6 +66,10 @@ declare function Input(props: InputProps): JSX.Element;
 declare const INPUT_CLASS_NAME: {
     readonly BASE: string;
     readonly PASSWORD: string;
+    readonly ROUNDED: {
+        readonly BASE: string;
+        readonly FULL: string;
+    };
     readonly SIZE: {
         readonly 32: string;
         readonly 36: string;
@@ -87,4 +93,40 @@ 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 };
+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;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isRounded?: boolean;
+    isValid?: boolean;
+}
+declare function Textarea(props: TextareaProps): JSX.Element;
+declare const TEXTAREA_CLASS_NAME: {
+    readonly BASE: string;
+    readonly INPUT: string;
+    readonly ROUNDED: {
+        readonly BASE: string;
+        readonly FULL: 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, 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-BMN5S7JE.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-NXMK7IBS.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-FRZMYZZD.module.css";
+import styles3 from "./input.module-45RAFIJZ.module.css";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Input(props) {
   const {
@@ -98,6 +89,7 @@ function Input(props) {
     isInvalid = void 0,
     isReadOnly = false,
     isRequired = false,
+    isRounded = false,
     isValid = void 0,
     size = 40,
     type = "text",
@@ -108,13 +100,14 @@ function Input(props) {
     ${INPUT_CLASS_NAME.BASE}
     ${INPUT_CLASS_NAME.SIZE[size]}
     ${isPassword ? INPUT_CLASS_NAME.PASSWORD : ""}
+    ${isRounded ? INPUT_CLASS_NAME.ROUNDED.FULL : INPUT_CLASS_NAME.ROUNDED.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
   return /* @__PURE__ */ jsx3(
     "input",
     {
-      "aria-pressed": isActive,
       className: combinedClassName,
+      "data-is-active": isActive,
       "data-is-invalid": isInvalid,
       "data-is-valid": isValid,
       disabled: isDisabled,
@@ -128,6 +121,10 @@ function Input(props) {
 var INPUT_CLASS_NAME = {
   BASE: styles3.input,
   PASSWORD: styles3.input__password,
+  ROUNDED: {
+    BASE: styles3.input__rounded_base,
+    FULL: styles3.input__rounded_full
+  },
   SIZE: {
     32: styles3.input__size_32,
     36: styles3.input__size_36,
@@ -141,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
@@ -167,16 +158,99 @@ function Spacer(props) {
     ${SPACER_CLASS_NAME.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx5(
-    "div",
+  return /* @__PURE__ */ jsx5("div", { className: `${styles5.spacer} ${combinedClassName}`.trim(), ...rest });
+}
+var SPACER_CLASS_NAME = {
+  BASE: styles5.spacer
+};
+
+// src/switch.tsx
+import { Switch as BaseSwitch } from "@base-ui/react";
+import styles6 from "./switch.module-SEKLTDNC.module.css";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Switch(props) {
+  const {
+    className: customClassName = "",
+    isChecked = void 0,
+    isDefaultChecked = false,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    size = 24,
+    ...rest
+  } = props;
+  const combinedClassName = `
+    ${SWITCH_CLASS_NAME.BASE}
+    ${SWITCH_CLASS_NAME.SIZE[size]}
+    ${customClassName}
+  `.replaceAll(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx6(
+    BaseSwitch.Root,
     {
-      className: `${styles5.spacer} ${combinedClassName}`.trim(),
+      checked: isChecked,
+      className: combinedClassName,
+      defaultChecked: isDefaultChecked,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      ...rest,
+      children: /* @__PURE__ */ jsx6(BaseSwitch.Thumb, { className: styles6.switch__thumb })
+    }
+  );
+}
+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-45RAFIJZ.module.css";
+import styles7 from "./textarea.module-6GUVSFC7.module.css";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Textarea(props) {
+  const {
+    className: customClassName = "",
+    isActive = false,
+    isDisabled = false,
+    isInvalid = void 0,
+    isReadOnly = false,
+    isRequired = false,
+    isRounded = false,
+    isValid = void 0,
+    rows = 2,
+    ...rest
+  } = props;
+  const combinedClassName = `
+    ${TEXTAREA_CLASS_NAME.INPUT}
+    ${TEXTAREA_CLASS_NAME.BASE}
+    ${isRounded ? TEXTAREA_CLASS_NAME.ROUNDED.FULL : TEXTAREA_CLASS_NAME.ROUNDED.BASE}
+    ${customClassName}
+  `.replaceAll(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx7(
+    "textarea",
+    {
+      className: combinedClassName,
+      "data-is-active": isActive,
+      "data-is-invalid": isInvalid,
+      "data-is-valid": isValid,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      rows,
       ...rest
     }
   );
 }
-var SPACER_CLASS_NAME = {
-  BASE: styles5.spacer
+var TEXTAREA_CLASS_NAME = {
+  BASE: styles7.textarea,
+  INPUT: inputStyles.input,
+  ROUNDED: {
+    BASE: inputStyles.input__rounded_base,
+    FULL: inputStyles.input__rounded_full
+  }
 };
 export {
   BUTTON_CLASS_NAME,
@@ -186,5 +260,9 @@ export {
   LABEL_CLASS_NAME,
   Label,
   SPACER_CLASS_NAME,
-  Spacer
+  SWITCH_CLASS_NAME,
+  Spacer,
+  Switch,
+  TEXTAREA_CLASS_NAME,
+  Textarea
 };

package/dist/{input.module-FRZMYZZD.module.css → input.module-45RAFIJZ.module.css}

@@ -3,8 +3,8 @@
 /* ===================================================== */
 .input {
   width: 100%;
-  min-height: var(--size);
-  max-height: var(--size);
+  min-height: var(--height);
+  max-height: var(--height);
   padding: 0 12px;
   font-family: var(--font-sans, sans-serif);
   font-size: 14px;
@@ -21,19 +21,12 @@
   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 */
+    0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
+    /* Bottom */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
   transition-duration: 150ms;
   transition-property: box-shadow, opacity;
 }
 
-@supports (corner-shape: squircle) {
-  .input {
-    border-radius: 9999px;
-    corner-shape: squircle;
-  }
-}
-
 .input::placeholder {
   color: var(--color-gray-9, #8d8d8d);
   user-select: none;
@@ -47,10 +40,10 @@
 .input:enabled:active,
 .input:enabled:focus,
 .input:enabled:hover,
-.input:enabled[aria-pressed="true"] {
+.input:enabled[data-is-active="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 */
+    0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
+    /* Bottom */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
 }
 
 .input[data-is-valid="true"] {
@@ -69,17 +62,17 @@
 :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 */
+    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"] {
+:global(.dark) .input:enabled[data-is-active="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 */
+    0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
+    /* Top */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
 }
 
 /* ===================================================== */
@@ -89,25 +82,36 @@
   font-family: var(--font-mono, monospace);
 }
 
+/* ===================================================== */
+/* Rounded */
+/* ===================================================== */
+.input__rounded_base {
+  border-radius: 12px;
+}
+
+.input__rounded_full {
+  border-radius: 9999px;
+}
+
 /* ===================================================== */
 /* Size */
 /* ===================================================== */
 .input__size_32 {
-  --size: 32px;
+  --height: 32px;
 }
 
 .input__size_36 {
-  --size: 36px;
+  --height: 36px;
 }
 
 .input__size_40 {
-  --size: 40px;
+  --height: 40px;
 }
 
 .input__size_44 {
-  --size: 44px;
+  --height: 44px;
 }
 
 .input__size_48 {
-  --size: 48px;
+  --height: 48px;
 }

package/dist/switch.module-SEKLTDNC.module.css

@@ -0,0 +1,62 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.switch {
+  display: flex;
+  padding: 2px;
+  overflow: hidden;
+  cursor: pointer;
+  outline-width: 2px;
+  outline-style: none;
+  outline-color: var(--color-primary-9);
+  outline-offset: 2px;
+  background-color: var(--color-gray-6);
+  border-radius: 9999px;
+  transition-duration: 150ms;
+  transition-property: background-color;
+}
+
+.switch:focus-visible {
+  outline-style: solid;
+}
+
+.switch[data-checked] {
+  background-color: var(--color-primary-9);
+}
+
+.switch[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ===================================================== */
+/* Thumb */
+/* ===================================================== */
+
+.switch__thumb {
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  background-color: var(--color-white);
+  border-radius: 9999px;
+  transition-duration: 150ms;
+  transition-property: transform;
+}
+
+.switch__thumb[data-checked] {
+  transform: translateX(var(--translateX));
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.switch__size_14 {
+  --translateX: 12px;
+  width: 30px;
+  height: 18px;
+}
+
+.switch__size_24 {
+  --translateX: 16px;
+  width: 40px;
+  height: 24px;
+}

package/dist/textarea.module-6GUVSFC7.module.css

@@ -0,0 +1,9 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.textarea {
+  min-height: 66px;
+  max-height: none;
+  padding: 12px !important;
+  resize: vertical;
+}

package/package.json

@@ -1,50 +1,53 @@
 {
-  "author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
+  "name": "@nattui/react-components",
+  "version": "0.0.35",
+  "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"
   },
-  "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.33"
+  "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"
+  }
 }