@infonomic/uikit 2.0.0 → 2.1.0

package/src/components/button/button.module.css

@@ -0,0 +1,533 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .button {
+    border: none;
+    cursor: pointer;
+    font-weight: normal;
+    text-align: center;
+    display: inline-flex;
+    gap: var(--gap-2);
+    line-height: 0;
+    align-items: center;
+    white-space: nowrap;
+    justify-content: center;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .button:disabled,
+  .button[disabled] {
+    pointer-events: none;
+  }
+
+  .button:focus,
+  .button:active {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .button.square {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .button.round {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    border-radius: var(--border-radius-full);
+  }
+
+  /* Sizes */
+  .xs {
+    min-height: 26px;
+    font-size: 0.7rem;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .sm {
+    min-height: 32px;
+    font-size: 0.775rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .md {
+    min-height: 38px;
+    font-size: 0.95rem;
+    padding: 0.625rem 1.25rem;
+  }
+
+  .lg {
+    min-height: 46px;
+    font-size: 1.1rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  .xl {
+    min-height: 54px;
+    font-size: 1.2rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  /* Variants */
+  .filled {
+    color: var(--button-variant-filled-foreground);
+    background-color: var(--button-variant-filled);
+  }
+
+  .filled:hover {
+    background-color: var(--button-variant-filled-hover);
+  }
+
+  .filled:focus,
+  .filled:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .filled:disabled,
+  .filled[disabled] {
+    background-color: oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h);
+    color: oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h);
+  }
+
+  .outlined {
+    border: 1px solid var(--button-variant-outlined-border);
+    color: var(--button-variant-outlined-foreground);
+    background-color: var(--button-variant-outlined);
+  }
+
+  .outlined:disabled,
+  .outlined[disabled] {
+    border-color: oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h);
+    color: oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h);
+  }
+
+  .outlined:hover {
+    background-color: var(--button-variant-outlined-hover);
+  }
+
+  .outlined:focus,
+  .outlined:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .gradient {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg,
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
+  }
+
+  .gradient:disabled,
+  .gradient[disabled] {
+    background: unset;
+    background-color: oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h);
+    color: oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h);
+  }
+
+  .gradient:hover {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg,
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
+  }
+
+  .gradient:focus,
+  .gradient:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .text {
+    background-color: var(--button-variant-text);
+    color: var(--button-variant-text-foreground);
+  }
+
+  .text:disabled,
+  .text[disabled] {
+    color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
+  }
+
+  .text:hover {
+    background-color: var(--button-variant-text-hover);
+  }
+
+  .text:focus,
+  .text:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  /* Intents */
+  .primary {
+    --button: var(--primary-600);
+    --button-ring-color: var(--button);
+  }
+
+  .primary.filled {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+  }
+
+  .primary.outlined {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--primary-700);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 2.15) calc(c * 0.2) h);
+    --button-variant-outlined-border: var(--primary-700);
+  }
+
+  .primary.text {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+  }
+
+  .primary.gradient {
+    --button-variant-gradient-start: var(--primary-500);
+    --button-variant-gradient-end: var(--primary-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .secondary {
+    --button: var(--secondary-500);
+    --button-ring-color: var(--button);
+  }
+
+  .secondary.filled {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: black;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
+  }
+
+  .secondary.outlined {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--secondary-950);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.6) calc(c * 0.2) h);
+    --button-variant-outlined-border: var(--secondary-700);
+  }
+
+  .secondary.text {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+  }
+
+  .secondary.gradient {
+    --button-variant-gradient-start: var(--secondary-500);
+    --button-variant-gradient-end: var(--secondary-700);
+    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .noeffect {
+    --button: var(--gray-100);
+    --button-ring-color: var(--gray-200);
+  }
+
+  .noeffect.filled {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: black;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
+  }
+
+  .noeffect.outlined {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--gray-800);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 2.9) calc(c * 0.2) h);
+    --button-variant-outlined-border: var(--gray-500);
+  }
+
+  .noeffect.text {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.5) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+  }
+
+  .noeffect.gradient {
+    --button-variant-gradient-start: var(--gray-100);
+    --button-variant-gradient-end: var(--gray-200);
+    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-hover: var(--gray-400);
+  }
+
+  .success {
+    --button: var(--green-400);
+    --button-ring-color: var(--button);
+  }
+
+  .success.filled {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+  }
+
+  .success.outlined {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--green-600);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.6) calc(c * 0.2) h);
+    --button-variant-outlined-border: var(--green-600);
+  }
+
+  .success.text {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+  }
+
+  .success.gradient {
+    --button-variant-gradient-start: var(--green-500);
+    --button-variant-gradient-end: var(--green-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .info {
+    --button: var(--blue-400);
+    --button-ring-color: var(--button);
+  }
+
+  .info.filled {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+  }
+
+  .info.outlined {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--blue-300);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.9) calc(c * 0.2) h);
+    --button-variant-outlined-border: var(--blue-500);
+  }
+
+  .info.text {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+  }
+
+  .info.gradient {
+    --button-variant-gradient-start: var(--blue-500);
+    --button-variant-gradient-end: var(--blue-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .warning {
+    --button: var(--yellow-300);
+    --button-ring-color: var(--button);
+  }
+
+  .warning.filled {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: black;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
+  }
+
+  .warning.outlined {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--yellow-700);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.9) calc(c * 0.2) h);
+    --button-variant-outlined-border: var(--yellow-500);
+  }
+
+  .warning.text {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.6) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+  }
+
+  .warning.gradient {
+    --button-variant-gradient-start: var(--yellow-300);
+    --button-variant-gradient-end: var(--yellow-400);
+    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .danger {
+    --button: var(--red-400);
+    --button-ring-color: var(--button);
+  }
+
+  .danger.filled {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+  }
+
+  .danger.outlined {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--red-500);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.8) calc(c * 0.3) h);
+    --button-variant-outlined-border: var(--red-500);
+  }
+
+  .danger.text {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+  }
+
+  .danger.gradient {
+    --button-variant-gradient-start: var(--red-500);
+    --button-variant-gradient-end: var(--red-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  /* Full width */
+  .fullWidth {
+    width: 100%;
+    display: flex;
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+
+    .button:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .button:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --ring-offset-color: var(--background);
+    }
+
+    .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button: var(--primary-600);
+      --button-ring-color: var(--button);
+    }
+
+    .primary.filled:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-filled: var(--button);
+      --button-variant-filled-foreground: white;
+      --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+    }
+
+    .primary.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-outlined-foreground: var(--primary-100);
+      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.45) calc(c * 0.1) h);
+      --button-variant-outlined-border: var(--primary-500);
+    }
+
+    .primary.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-text: transparent;
+      --button-variant-text-foreground: var(--button);
+      --button-variant-text-hover: var(--canvas-800);
+    }
+
+    .secondary.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-outlined-foreground: var(--secondary-500);
+      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.3) calc(c * 0.1) h);
+      --button-variant-outlined-border: var(--secondary-500);
+    }
+
+    .secondary.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-text-foreground: var(--button);
+      --button-variant-text-hover: var(--canvas-800);
+    }
+
+    .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button: var(--gray-900);
+      --button-ring-color: var(--gray-900);
+    }
+
+    .noeffect.filled:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-filled: var(--button);
+      --button-variant-filled-foreground: white;
+      --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
+    }
+
+    .noeffect.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-outlined: transparent;
+      --button-variant-outlined-foreground: var(--gray-300);
+      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.75) calc(c * 0.2) h);
+      --button-variant-outlined-border: var(--gray-500);
+    }
+
+    .noeffect.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-text: transparent;
+      --button-variant-text-foreground: var(--gray-300);
+      --button-variant-text-hover: var(--canvas-800);
+    }
+
+    .noeffect.gradient:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-gradient-start: var(--gray-950);
+      --button-variant-gradient-end: var(--gray-900);
+      --button-variant-gradient-foreground: white;
+      --button-variant-gradient-hover: var(--gray-900);
+    }
+
+    .success.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-outlined-foreground: var(--green-500);
+      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.35) calc(c * 0.1) h);
+      --button-variant-outlined-border: var(--green-500);
+    }
+
+    .success.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-text-foreground: var(--button);
+      --button-variant-text-hover: var(--canvas-800);
+    }
+
+    .info.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-outlined-foreground: var(--blue-300);
+      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.43) calc(c * 0.1) h);
+      --button-variant-outlined-border: var(--blue-500);
+    }
+
+    .info.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-text-foreground: var(--button);
+      --button-variant-text-hover: var(--canvas-800);
+    }
+
+    .warning.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-outlined-foreground: var(--yellow-500);
+      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.31) calc(c * 0.1) h);
+      --button-variant-outlined-border: var(--yellow-500);
+    }
+
+    .warning.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-text-foreground: var(--button);
+      --button-variant-text-hover: var(--canvas-800);
+    }
+
+    .danger.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-outlined-foreground: var(--red-500);
+      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.4) calc(c * 0.1) h);
+      --button-variant-outlined-border: var(--red-500);
+    }
+
+    .danger.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --button-variant-text-foreground: var(--button);
+      --button-variant-text-hover: var(--canvas-800);
+    }
+
+    .filled:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .filled[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: oklch(from var(--button-variant-filled) calc(l * 0.85) calc(c * 0.85) h);
+      color: oklch(from var(--button-variant-filled-foreground) calc(l * 0.85) calc(c * 0.85) h);
+    }
+
+    .outlined:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .outlined[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      border-color: oklch(from var(--button-variant-outlined-border) calc(l * 0.8) calc(c * 0.8) h);
+      color: oklch(from var(--button-variant-outlined-foreground) calc(l * 0.8) calc(c * 0.8) h);
+    }
+
+    .gradient:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .gradient[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background: unset;
+      background-color: oklch(from var(--button-variant-gradient-end) calc(l * 0.85) calc(c * 0.85) h);
+      color: oklch(from var(--button-variant-gradient-foreground) calc(l * 0.85) calc(c * 0.85) h);
+    }
+
+    .text:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .text[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      color: oklch(from var(--button-variant-text-foreground) calc(l * 0.85) calc(c * 0.85) h);
+    }
+  }
+}

package/src/components/button/button.tsx

@@ -0,0 +1,81 @@
+'use client'
+import { Slot } from '@radix-ui/react-slot'
+import cx from 'classnames'
+// @ts-ignore
+import Ripple from 'material-ripple-effects'
+import type React from 'react'
+
+import type { Intent, Size, Variant } from './@types/button.js'
+
+import styles from './button.module.css'
+
+export type ButtonRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']
+
+type AsButton = { asChild?: false } & React.ComponentPropsWithoutRef<'button'>
+
+interface AsSlot {
+  asChild?: true
+}
+
+export type ButtonProps<C extends React.ElementType = 'button'> = {
+  variant?: Variant
+  size?: Size
+  type?: 'submit' | 'reset' | 'button'
+  intent?: Intent
+  fullWidth?: boolean
+  ripple?: boolean
+  className?: string
+  children: React.ReactNode
+  ref?: React.RefObject<ButtonRefType<C>>
+} & (AsButton | AsSlot) &
+  React.HTMLAttributes<HTMLElement>
+
+export const Button = <C extends React.ElementType = 'button'>({
+  variant = 'filled',
+  size = 'md',
+  type = 'button',
+  intent = 'primary',
+  fullWidth = false,
+  ripple = true,
+  className,
+  children,
+  asChild,
+  ref,
+  ...rest
+}: ButtonProps<C>) => {
+  const Comp: React.ElementType = asChild != null && asChild === true ? Slot : 'button'
+
+  let onMouseDown: React.MouseEventHandler<HTMLButtonElement> | undefined
+  if (ripple === true) {
+    const rippleEffect = new Ripple()
+    onMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (rest.onMouseDown) {
+        ;(rest.onMouseDown as React.MouseEventHandler<HTMLButtonElement>)(e)
+      }
+      rippleEffect.create(e, variant === 'filled' || variant === 'gradient' ? 'light' : 'dark')
+    }
+  }
+
+  return (
+    <Comp
+      ref={ref}
+      type={type}
+      className={cx(
+        'button',
+        intent,
+        variant,
+        size,
+        styles.button,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        { [styles.fullWidth]: fullWidth === true },
+        className
+      )}
+      onMouseDown={onMouseDown}
+      {...rest}
+    >
+      {children}
+    </Comp>
+  )
+}