@nattui/react-components 0.0.12 → 0.0.14

package/src/button.module.css

@@ -1,248 +0,0 @@
-/* ===================================================== */
-/* Base */
-/* ===================================================== */
-.button {
-  align-items: safe center;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 1px;
-  column-gap: 8px;
-  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;
-  outline-color: var(--color-primary-9, #e93d82);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: 0;
-  overflow: hidden;
-  position: relative;
-  transition-duration: 150ms;
-  transition-property:
-    background-color, border-color, box-shadow, color, filter, opacity,
-    translate;
-  user-select: none;
-}
-
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.button:focus-visible {
-  outline-width: 2px;
-}
-
-.button:enabled[aria-pressed="true"],
-.button:enabled:active {
-  translate: 0 1px;
-}
-
-/* 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;
-  height: var(--size);
-  padding: 0 8px;
-}
-
-.button__size_36 {
-  --size: 36px;
-  height: var(--size);
-  padding: 0 12px;
-}
-
-.button__size_40 {
-  --size: 40px;
-  height: var(--size);
-  padding: 0 16px;
-}
-
-.button__size_44 {
-  --size: 44px;
-  height: var(--size);
-  padding: 0 20px;
-}
-
-/* ===================================================== */
-/* Variant */
-/* ===================================================== */
-/* Accent */
-.button__variant_accent {
-  background-image: linear-gradient(
-    to bottom,
-    var(--color-primary-9, #e93d82),
-    var(--color-primary-10, #e03177)
-  );
-  border-color: var(--color-primary-9, #e93d82);
-  box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-  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 var(--color-primary-11, #d31e66) !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 {
-  background-image: linear-gradient(
-    to bottom,
-    color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
-    var(--color-gray-12, #1a1523)
-  );
-  border-color: var(--color-gray-12, #1a1523);
-  box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-  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 var(--color-gray-12, #1a1523) !important;
-}
-
-/* Secondary */
-.button__variant_secondary {
-  background-image: linear-gradient(
-    to bottom,
-    var(--color-gray-1, #fdfcfd),
-    var(--color-gray-3, #f4f2f4)
-  );
-  border-color: var(--color-gray-6, #e4e2e4);
-  box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-  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: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_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: drop-shadow(0 1px 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

@@ -1,104 +0,0 @@
-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 Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
-  iconEnd?: ReactNode
-  iconOnly?: boolean
-  iconStart?: ReactNode
-  isActive?: boolean
-  isDisabled?: boolean
-  isFullWidth?: boolean
-  isLoading?: boolean
-  isRounded?: boolean
-  size?: 32 | 36 | 40 | 44
-  variant?: "accent" | "ghost" | "primary" | "secondary"
-}
-
-type ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText
-
-interface ButtonPropsWithIcon extends ButtonProps {
-  children?: ReactNode
-  iconEnd?: never
-  iconOnly: true
-  iconStart?: never
-}
-
-interface ButtonPropsWithText extends ButtonProps {
-  children?: string
-  iconOnly?: false
-}
-
-export function Button(props: ButtonPropsInternal): JSX.Element {
-  const {
-    children = "",
-    className: customClassName = "",
-    iconEnd = "",
-    iconOnly = false,
-    iconStart = "",
-    isActive = false,
-    isDisabled = false,
-    isFullWidth = false,
-    isLoading = false,
-    isRounded = 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]}
-    ${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}
-  `
-    .replaceAll(/\s+/g, " ")
-    .trim()
-
-  return (
-    <button
-      aria-pressed={isActive}
-      className={combinedClassName}
-      disabled={isDisabled || isLoading}
-      type={type}
-      {...rest}
-    >
-      <ButtonBackground isRounded={isRounded} variant={variant} />
-      {isLoading && <ButtonSpinner />}
-      {!isLoading && iconStart}
-      {iconOnly ? children : <span>{children}</span>}
-      {!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,
-    44: styles.button__size_44,
-  },
-  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

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

package/src/input.module.css

@@ -1,57 +0,0 @@
-/* ===================================================== */
-/* 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

@@ -1,52 +0,0 @@
-import type { ComponentProps, JSX } from "react"
-import styles from "@/input.module.css"
-
-export interface InputProps
-  extends Omit<
-    ComponentProps<"input">,
-    "aria-pressed" | "disabled" | "readOnly" | "required"
-  > {
-  isActive?: boolean
-  isDisabled?: boolean
-  isReadOnly?: boolean
-  isRequired?: boolean
-}
-
-export function Input(props: InputProps): JSX.Element {
-  const {
-    className: customClassName = "",
-    isActive = false,
-    isDisabled = false,
-    isReadOnly = false,
-    isRequired = 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}
-      required={isRequired}
-      type={type}
-      {...rest}
-    />
-  )
-}
-
-export const INPUT_CLASS_NAME = {
-  BASE: styles.input,
-  PASSWORD: styles.input__password,
-} as const

package/src/label.module.css

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

package/src/label.tsx

@@ -1,21 +0,0 @@
-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/tsconfig.json

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

package/tsup.config.ts

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

package/{src/button-background.module.css → dist/button-background.module-Y3DFESUY.module.css}

@@ -1,15 +1,15 @@
 /* Base */
 .button_background {
+  position: absolute;
+  top: 0;
+  right: 0;
   bottom: 50%;
-  filter: none !important;
   left: 0;
+  z-index: -1;
   opacity: 0.2;
-  position: absolute;
-  right: 0;
-  top: 0;
+  filter: none !important;
   transition-duration: inherit;
   transition-property: opacity;
-  z-index: -1;
 }
 
 /* Rounded */

package/dist/{button-spinner.module-4TBETQ4T.module.css → button-spinner.module-T3OGVJS4.module.css}

@@ -1,9 +1,9 @@
 .button_spinner {
-  animation: spinner 1000ms steps(12, end) infinite;
-  height: var(--size);
   position: relative;
-  scale: -1 1;
   width: var(--size);
+  height: var(--size);
+  scale: -1 1;
+  animation: spinner 1000ms steps(12, end) infinite;
 }
 
 @keyframes spinner {
@@ -13,25 +13,25 @@
 }
 
 .button_spinner > div {
-  height: calc(var(--size) / 12);
-  pointer-events: none;
   position: absolute;
-  right: 0;
   top: 50%;
+  right: 0;
+  width: calc(var(--size) / 2);
+  height: calc(var(--size) / 12);
+  pointer-events: none;
   transform-origin: center left;
-  transition: all 150ms;
   translate: 0 -50%;
-  width: calc(var(--size) / 2);
+  transition: all 150ms;
 }
 
 .button_spinner > div::after {
-  background-color: currentColor;
-  border-radius: 9999px;
-  content: "";
-  height: 100%;
   position: absolute;
   right: 0;
   width: 50%;
+  height: 100%;
+  content: "";
+  background-color: currentColor;
+  border-radius: 9999px;
 }
 
 .button_spinner > div:nth-child(1) {