@nattui/react-components 0.0.8 → 0.0.10

package/src/button.module.css

@@ -10,6 +10,8 @@
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
   font-weight: 500;
   justify-content: safe center;
   line-height: 1.5;
@@ -21,7 +23,8 @@
   position: relative;
   transition-duration: 150ms;
   transition-property:
-    background-color, border-color, box-shadow, color, opacity, scale, translate;
+    background-color, border-color, box-shadow, color, filter, opacity, scale,
+    translate;
   user-select: none;
 }
 
@@ -85,28 +88,24 @@
 /* ===================================================== */
 .button__size_32 {
   --size: 32px;
-  font-size: 14px;
   height: var(--size);
   padding: 0 8px;
 }
 
 .button__size_36 {
   --size: 36px;
-  font-size: 14px;
   height: var(--size);
   padding: 0 12px;
 }
 
 .button__size_40 {
   --size: 40px;
-  font-size: 14px;
   height: var(--size);
   padding: 0 16px;
 }
 
-.button__size_48 {
-  --size: 48px;
-  font-size: 16px;
+.button__size_44 {
+  --size: 44px;
   height: var(--size);
   padding: 0 20px;
 }
@@ -220,11 +219,17 @@
   filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.1));
 }
 
+.button__variant_accent:enabled:active,
 .button__variant_accent:enabled:hover,
+.button__variant_accent:enabled[aria-pressed="true"],
+.button__variant_primary:enabled:active,
 .button__variant_primary:enabled:hover,
-.button__variant_secondary:enabled:hover {
+.button__variant_primary:enabled[aria-pressed="true"],
+.button__variant_secondary:enabled:active,
+.button__variant_secondary:enabled:hover,
+.button__variant_secondary:enabled[aria-pressed="true"] {
   box-shadow: inset 0 0 0 0 transparent;
-  filter: none;
+  filter: drop-shadow(0 1px 0 transparent);
 }
 
 .button__variant_ghost:enabled:hover,

package/src/button.tsx

@@ -5,15 +5,15 @@ import styles from "@/button.module.css"
 
 export interface ButtonProps
   extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
-  fullWidth?: boolean
   iconEnd?: ReactNode
   iconOnly?: boolean
   iconStart?: ReactNode
   isActive?: boolean
   isDisabled?: boolean
+  isFullWidth?: boolean
   isLoading?: boolean
   isRounded?: boolean
-  size?: 32 | 36 | 40 | 48
+  size?: 32 | 36 | 40 | 44
   variant?: "accent" | "ghost" | "primary" | "secondary"
 }
 
@@ -21,7 +21,9 @@ type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText
 
 interface ButtonPropsWithIcon extends ButtonProps {
   children?: ReactNode
+  iconEnd?: never
   iconOnly: true
+  iconStart?: never
 }
 
 interface ButtonPropsWithText extends ButtonProps {
@@ -33,12 +35,12 @@ export function Button(props: ButtonPropsInternal): JSX.Element {
   const {
     children = "",
     className: customClassName = "",
-    fullWidth = false,
     iconEnd = "",
     iconOnly = false,
     iconStart = "",
     isActive = false,
     isDisabled = false,
+    isFullWidth = false,
     isLoading = false,
     isRounded = false,
     size = 36,
@@ -51,7 +53,7 @@ export function Button(props: ButtonPropsInternal): JSX.Element {
     ${BUTTON_CLASS_NAME.BASE}
     ${BUTTON_CLASS_NAME.SIZE[size]}
     ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase() as keyof typeof BUTTON_CLASS_NAME.VARIANT]}
-    ${fullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}
+    ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}
     ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : ""}
     ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
     ${customClassName}
@@ -87,7 +89,7 @@ export const BUTTON_CLASS_NAME = {
     32: styles.button__size_32,
     36: styles.button__size_36,
     40: styles.button__size_40,
-    48: styles.button__size_48,
+    44: styles.button__size_44,
   },
   VARIANT: {
     ACCENT: styles.button__variant_accent,

package/src/index.ts

@@ -1 +1,3 @@
 export * from "@/button"
+export * from "@/input"
+export * from "@/label"

package/src/input.module.css

@@ -0,0 +1,57 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.input {
+  appearance: none;
+  background-color: var(--color-gray-1, #fcfcfc);
+  border-color: var(--color-gray-5, #e0e0e0);
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 1px;
+  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-9, #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);
+  user-select: none;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.input:enabled:active,
+.input:enabled:focus,
+.input:enabled:hover,
+.input:enabled[aria-pressed="true"] {
+  border-color: var(--color-gray-8, #bbbbbb);
+  box-shadow: 0 1px transparent;
+}
+
+.input:focus-visible {
+  outline-width: 2px;
+}
+
+/* ===================================================== */
+/* Password */
+/* ===================================================== */
+.input__password {
+  font-family: var(--font-mono, monospace);
+}

package/src/input.tsx

@@ -0,0 +1,49 @@
+import type { ComponentProps, JSX } from "react"
+import styles from "@/input.module.css"
+
+export interface InputProps
+  extends Omit<
+    ComponentProps<"input">,
+    "aria-pressed" | "disabled" | "readOnly"
+  > {
+  isActive?: boolean
+  isDisabled?: boolean
+  isReadOnly?: boolean
+}
+
+export function Input(props: InputProps): JSX.Element {
+  const {
+    className: customClassName = "",
+    isActive = false,
+    isDisabled = false,
+    isReadOnly = false,
+    type = "text",
+    ...rest
+  } = props
+
+  const isPassword = type === "password"
+
+  const combinedClassName = `
+    ${INPUT_CLASS_NAME.BASE}
+    ${isPassword ? INPUT_CLASS_NAME.PASSWORD : ""}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <input
+      aria-pressed={isActive}
+      className={combinedClassName}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      type={type}
+      {...rest}
+    />
+  )
+}
+
+export const INPUT_CLASS_NAME = {
+  BASE: styles.input,
+  PASSWORD: styles.input__password,
+} as const

package/src/label.module.css

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

package/src/label.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps, JSX } from "react"
+import styles from "@/label.module.css"
+
+export interface LabelProps extends ComponentProps<"label"> {}
+
+export function Label(props: LabelProps): JSX.Element {
+  const { className: customClassName = "", ...rest } = props
+
+  const combinedClassName = `
+    ${LABEL_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return <label className={combinedClassName} {...rest} />
+}
+
+export const LABEL_CLASS_NAME = {
+  BASE: styles.label,
+} as const

package/tsup.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   dts: true,
   entry: ["src/index.ts"],
   external: ["react", "react-dom"],
-  format: ["esm", "cjs"],
+  format: ["cjs", "esm"],
   loader: { ".css": "copy" },
   sourcemap: true,
   splitting: true,

package/.prettierrc

@@ -1,10 +0,0 @@
-{
-  "cssDeclarationSorterOrder": "alphabetical",
-  "jsonRecursiveSort": true,
-  "plugins": [
-    "prettier-plugin-css-order",
-    "prettier-plugin-packagejson",
-    "prettier-plugin-sort-json"
-  ],
-  "semi": false
-}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Natt Nguyen
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.