@nattui/react-components 0.0.33 → 0.0.34

package/dist/{button.module-BMN5S7JE.module.css → button.module-VWVBUUZO.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 {

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,32 @@ 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" | "required" | "readOnly" | "nativeButton"> {
+    isChecked?: boolean;
+    isDefaultChecked?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+}
+declare function Switch(props: SwitchProps): JSX.Element;
+
+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, Spacer, type SpacerProps, Switch, type SwitchProps, TEXTAREA_CLASS_NAME, Textarea, type TextareaProps };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/button.tsx
-import styles2 from "./button.module-BMN5S7JE.module.css";
+import styles2 from "./button.module-VWVBUUZO.module.css";
 
 // src/button-spinner.tsx
 import styles from "./button-spinner.module-T3OGVJS4.module.css";
@@ -88,7 +88,7 @@ var BUTTON_CLASS_NAME = {
 };
 
 // src/input.tsx
-import styles3 from "./input.module-FRZMYZZD.module.css";
+import styles3 from "./input.module-7OP5B7X3.module.css";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Input(props) {
   const {
@@ -98,6 +98,7 @@ function Input(props) {
     isInvalid = void 0,
     isReadOnly = false,
     isRequired = false,
+    isRounded = false,
     isValid = void 0,
     size = 40,
     type = "text",
@@ -108,6 +109,7 @@ 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(
@@ -128,6 +130,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,
@@ -178,6 +184,86 @@ function Spacer(props) {
 var SPACER_CLASS_NAME = {
   BASE: styles5.spacer
 };
+
+// src/switch.tsx
+import { Switch as BaseSwitch } from "@base-ui/react";
+import styles6 from "./switch.module-QVZRQ4BT.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,
+    ...rest
+  } = props;
+  const combinedClassName = `
+    ${styles6.switch}
+    ${customClassName}
+  `.replaceAll(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx6(
+    BaseSwitch.Root,
+    {
+      checked: isChecked,
+      className: combinedClassName,
+      defaultChecked: isDefaultChecked,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      ...rest,
+      children: /* @__PURE__ */ jsx6(BaseSwitch.Thumb, { className: styles6.switch__thumb })
+    }
+  );
+}
+
+// src/textarea.tsx
+import inputStyles from "./input.module-7OP5B7X3.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",
+    {
+      "aria-pressed": isActive,
+      className: combinedClassName,
+      "data-is-invalid": isInvalid,
+      "data-is-valid": isValid,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      rows,
+      ...rest
+    }
+  );
+}
+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,
   Button,
@@ -186,5 +272,8 @@ export {
   LABEL_CLASS_NAME,
   Label,
   SPACER_CLASS_NAME,
-  Spacer
+  Spacer,
+  Switch,
+  TEXTAREA_CLASS_NAME,
+  Textarea
 };

package/dist/{input.module-FRZMYZZD.module.css → input.module-7OP5B7X3.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;
@@ -27,13 +27,6 @@
   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;
@@ -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-QVZRQ4BT.module.css

@@ -0,0 +1,48 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.switch {
+  display: flex;
+  width: 40px;
+  height: 24px;
+  padding: 2px;
+  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(16px);
+}

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

@@ -3,6 +3,9 @@
   "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:",
@@ -46,5 +49,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.33"
+  "version": "0.0.34"
 }