@nattui/react-components 0.0.1

package/src/button.module.css

@@ -0,0 +1,238 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.button {
+  display: flex;
+  position: relative;
+  column-gap: 8px;
+  flex-shrink: 0;
+  justify-content: safe center;
+  align-items: safe center;
+  transition-duration: 150ms;
+  transition-property: all;
+  cursor: pointer;
+  outline-width: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+  font-weight: 500;
+  line-height: 1.5;
+  user-select: none;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Active */
+.button:enabled[aria-pressed="true"] > *,
+.button:enabled:active > * {
+  transform: translateY(1px);
+  transition-duration: 150ms;
+  transition-property: transform;
+}
+
+/* Disable child shadow */
+.button:enabled[aria-pressed="true"] > *,
+.button:enabled:active > *,
+.button:enabled:hover > * {
+  filter: none !important;
+}
+
+/* Hover */
+.button:enabled[aria-pressed="true"],
+.button:enabled:active,
+.button:enabled:hover {
+  opacity: 0.85;
+}
+
+/* Button background */
+.button:enabled[aria-pressed="true"] > [data-element="button-background"],
+.button:enabled:active > [data-element="button-background"],
+.button:enabled:hover > [data-element="button-background"] {
+  opacity: 0;
+}
+
+/* ===================================================== */
+/* Icon only */
+/* ===================================================== */
+.button__icon_only {
+  padding: 0 !important;
+  width: var(--size) !important;
+}
+
+/* ===================================================== */
+/* Rounded */
+/* ===================================================== */
+.button__rounded_base {
+  border-radius: 8px;
+}
+
+.button__rounded_full {
+  border-radius: 9999px;
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.button__size_32 {
+  --size: 32px;
+  padding: 0 8px;
+  height: var(--size);
+  font-size: 14px;
+}
+
+.button__size_36 {
+  --size: 36px;
+  padding: 0 12px;
+  height: var(--size);
+  font-size: 14px;
+}
+
+.button__size_40 {
+  --size: 40px;
+  padding: 0 16px;
+  height: var(--size);
+  font-size: 14px;
+}
+
+.button__size_48 {
+  --size: 48px;
+  padding: 0 20px;
+  height: var(--size);
+  font-size: 16px;
+}
+
+/* ===================================================== */
+/* Variant */
+/* ===================================================== */
+/* Accent */
+.button__variant_accent {
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+  border-color: var(--color-primary-9, #e93d82);
+  background-image: linear-gradient(
+    to bottom,
+    var(--color-primary-9, #e93d82),
+    var(--color-primary-10, #e03177)
+  );
+  color: var(--color-gray-1, #fdfcfd);
+}
+
+.button__variant_accent:enabled[aria-pressed="true"],
+.button__variant_accent:enabled:active {
+  box-shadow:
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Ghost */
+.button__variant_ghost {
+  background-color: transparent;
+  color: var(--color-gray-11, #6f6e77);
+}
+
+.button__variant_ghost:enabled[aria-pressed="true"],
+.button__variant_ghost:enabled:active {
+  background-color: var(--color-gray-5, #e9e8ea) !important;
+  color: var(--color-gray-12, #1a1523);
+}
+
+.button__variant_ghost:enabled:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--color-gray-5, #e9e8ea) 75%,
+    transparent
+  );
+  color: var(--color-gray-12, #1a1523);
+}
+
+/* Primary */
+.button__variant_primary {
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+  border-color: var(--color-gray-12, #1a1523);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
+    var(--color-gray-12, #1a1523)
+  );
+  color: var(--color-gray-1, #fdfcfd);
+}
+
+.button__variant_primary:enabled[aria-pressed="true"],
+.button__variant_primary:enabled:active {
+  box-shadow:
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 1px 0 0 rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Secondary */
+.button__variant_secondary {
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+  border-color: var(--color-gray-6, #e4e2e4);
+  background-image: linear-gradient(
+    to bottom,
+    var(--color-gray-1, #fdfcfd),
+    var(--color-gray-3, #f4f2f4)
+  );
+  color: var(--color-gray-11, #6f6e77);
+}
+
+.button__variant_secondary:enabled[aria-pressed="true"],
+.button__variant_secondary:enabled:active,
+.button__variant_secondary:enabled:hover {
+  border-color: var(--color-gray-8, #c8c7cb);
+  color: var(--color-gray-12, #1a1523);
+}
+
+.button__variant_secondary:enabled[aria-pressed="true"],
+.button__variant_secondary:enabled:active {
+  box-shadow:
+    inset 0 -1px 0 0 var(--color-gray-1, #fdfcfd),
+    inset 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Group */
+.button__variant_accent,
+.button__variant_primary,
+.button__variant_secondary {
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
+}
+
+.button__variant_accent > * {
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
+}
+
+.button__variant_primary > * {
+  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.1));
+}
+
+.button__variant_accent:enabled:hover,
+.button__variant_primary:enabled:hover,
+.button__variant_secondary:enabled:hover {
+  filter: none;
+  box-shadow: inset 0 0 0 0 transparent;
+}
+
+.button__variant_ghost:enabled:hover,
+.button__variant_secondary:enabled:hover {
+  color: var(--color-gray-12, #1a1523);
+}
+
+/* ===================================================== */
+/* Width */
+/* ===================================================== */
+.button__width_base {
+  width: max-content;
+}
+
+.button__width_full {
+  width: 100%;
+}

package/src/button.tsx

@@ -0,0 +1,97 @@
+import type { ComponentProps, JSX, ReactNode } from "react"
+import { ButtonBackground } from "@/button-background"
+import { ButtonSpinner } from "@/button-spinner"
+import styles from "@/button.module.css"
+
+export interface ButtonProps extends ComponentProps<"button"> {
+  fullWidth?: boolean
+  iconEnd?: ReactNode
+  iconOnly?: boolean
+  iconStart?: ReactNode
+  isLoading?: boolean
+  rounded?: boolean
+  size?: 32 | 36 | 40 | 48
+  variant?: "accent" | "ghost" | "primary" | "secondary"
+}
+
+type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText
+
+interface ButtonPropsWithIcon extends ButtonProps {
+  children?: ReactNode
+  iconOnly: true
+}
+
+interface ButtonPropsWithText extends ButtonProps {
+  children?: string
+  iconOnly?: false
+}
+
+export function Button(props: ButtonPropsInternal): JSX.Element {
+  const {
+    children = "",
+    className: customClassName = "",
+    disabled = false,
+    fullWidth = false,
+    iconEnd = "",
+    iconOnly = false,
+    iconStart = "",
+    isLoading = false,
+    rounded = false,
+    size = 36,
+    type = "button",
+    variant = "primary",
+    ...rest
+  } = props
+
+  const combinedClassName = `
+    ${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}
+    ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : ""}
+    ${rounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <button
+      className={combinedClassName}
+      disabled={disabled || isLoading}
+      type={type}
+      {...rest}
+    >
+      <ButtonBackground rounded={rounded} variant={variant} />
+      {isLoading && <ButtonSpinner />}
+      {!isLoading && iconStart}
+      {children}
+      {!isLoading && iconEnd}
+    </button>
+  )
+}
+
+export const BUTTON_CLASS_NAME = {
+  BASE: styles.button,
+  ICON_ONLY: styles.button__icon_only,
+  ROUNDED: {
+    BASE: styles.button__rounded_base,
+    FULL: styles.button__rounded_full,
+  },
+  SIZE: {
+    32: styles.button__size_32,
+    36: styles.button__size_36,
+    40: styles.button__size_40,
+    48: styles.button__size_48,
+  },
+  VARIANT: {
+    ACCENT: styles.button__variant_accent,
+    GHOST: styles.button__variant_ghost,
+    PRIMARY: styles.button__variant_primary,
+    SECONDARY: styles.button__variant_secondary,
+  },
+  WIDTH: {
+    BASE: styles.button__width_base,
+    FULL: styles.button__width_full,
+  },
+} as const

package/src/index.ts

@@ -0,0 +1 @@
+export * from "@/button"

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig({
+  clean: true,
+  dts: true,
+  entry: ["src/index.ts"],
+  external: ["react", "react-dom"],
+  format: ["esm", "cjs"],
+  loader: { ".css": "copy" },
+  sourcemap: true,
+  splitting: true,
+  treeshake: true,
+})