willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-form/src/components/FormMessage/index.css

@@ -0,0 +1,77 @@
+.willa-form-message {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  align-items: flex-start;
+  border: 1px solid var(--willa-form-message-border);
+  border-radius: 0.68rem;
+  background: var(--willa-form-message-bg);
+  color: var(--willa-form-message-text);
+  font-family: var(--willa-body-font);
+  font-size: 0.9rem;
+  gap: 0.62rem;
+  line-height: 1.48;
+  padding: 0.62rem 0.68rem;
+}
+
+.willa-form-message--info {
+  --willa-form-message-bg: var(--willa-toast-info-card-bg);
+  --willa-form-message-border: var(--willa-toast-info-border);
+  --willa-form-message-text: var(--willa-toast-text);
+  --willa-form-message-icon-bg: var(--willa-toast-info-bg);
+  --willa-form-message-icon-text: var(--willa-toast-info);
+}
+
+.willa-form-message--success {
+  --willa-form-message-bg: var(--willa-toast-success-card-bg);
+  --willa-form-message-border: var(--willa-toast-success-border);
+  --willa-form-message-text: var(--willa-toast-text);
+  --willa-form-message-icon-bg: var(--willa-toast-success-bg);
+  --willa-form-message-icon-text: var(--willa-toast-success);
+}
+
+.willa-form-message--warning {
+  --willa-form-message-bg: var(--willa-toast-warning-card-bg);
+  --willa-form-message-border: var(--willa-toast-warning-border);
+  --willa-form-message-text: var(--willa-toast-text);
+  --willa-form-message-icon-bg: var(--willa-toast-warning-bg);
+  --willa-form-message-icon-text: var(--willa-toast-warning);
+}
+
+.willa-form-message--error {
+  --willa-form-message-bg: var(--willa-toast-error-card-bg);
+  --willa-form-message-border: var(--willa-toast-error-border);
+  --willa-form-message-text: var(--willa-toast-text);
+  --willa-form-message-icon-bg: var(--willa-toast-error-bg);
+  --willa-form-message-icon-text: var(--willa-toast-error);
+}
+
+.willa-form-message-icon {
+  display: inline-flex;
+  width: 1.55rem;
+  height: 1.55rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.42rem;
+  background: var(--willa-form-message-icon-bg);
+  color: var(--willa-form-message-icon-text);
+  margin-top: 0.02rem;
+}
+
+.willa-form-message-icon svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.willa-form-message-content {
+  min-width: 0;
+}
+
+@media (max-width: 767px) {
+  .willa-form-message {
+    font-size: 0.88rem;
+  }
+}

package/packages/willa-form/src/components/FormMessage/index.tsx

@@ -0,0 +1,57 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import {
+  CheckCircledIcon,
+  CrossCircledIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+} from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+export type FormMessageTone = "info" | "success" | "warning" | "error";
+
+export type FormMessageProps = ComponentPropsWithoutRef<"div"> & {
+  children: ReactNode;
+  tone?: FormMessageTone;
+  icon?: ReactNode;
+};
+
+export function FormMessage(props: FormMessageProps) {
+  const {
+    children,
+    tone = "info",
+    icon,
+    className,
+    role,
+    ...messageProps
+  } = props;
+  const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
+  const resolvedIcon = icon ?? defaultFormMessageIcons[tone];
+
+  return (
+    <div
+      {...messageProps}
+      className={classNames(
+        "willa-form-message",
+        `willa-form-message--${tone}`,
+        className,
+      )}
+      role={resolvedRole}
+    >
+      {resolvedIcon ? (
+        <span className="willa-form-message-icon" aria-hidden="true">
+          {resolvedIcon}
+        </span>
+      ) : null}
+      <span className="willa-form-message-content">{children}</span>
+    </div>
+  );
+}
+
+const defaultFormMessageIcons: Record<FormMessageTone, ReactNode> = {
+  info: <InfoCircledIcon />,
+  success: <CheckCircledIcon />,
+  warning: <ExclamationTriangleIcon />,
+  error: <CrossCircledIcon />,
+};
+
+FormMessage.displayName = "FormMessage";

package/packages/willa-form/src/components/Input/index.css

@@ -0,0 +1,131 @@
+.willa-input {
+  display: inline-flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  align-items: center;
+  border: 1px solid var(--willa-input-border);
+  border-radius: 0.6rem;
+  background: var(--willa-input-custom-bg, var(--willa-input-bg));
+  color: var(--willa-input-custom-text, var(--willa-input-text));
+  font-family: var(--willa-body-font);
+  font-weight: 400;
+  line-height: 1.4;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.willa-input--soft {
+  background: var(--willa-input-custom-bg, var(--willa-input-soft-bg));
+}
+
+.willa-input:hover:not(.willa-input--disabled) {
+  border-color: var(--willa-input-border-hover);
+  background: var(--willa-input-custom-bg, var(--willa-input-bg-hover));
+}
+
+.willa-input:focus-within {
+  border-color: var(--willa-input-border-focus);
+  background: var(--willa-input-custom-bg, var(--willa-input-bg-focus));
+  box-shadow: 0 0 0 3px var(--willa-input-ring);
+}
+
+.willa-input--invalid {
+  border-color: var(--willa-input-invalid-border);
+}
+
+.willa-input--invalid:focus-within {
+  border-color: var(--willa-input-invalid-border);
+  box-shadow: 0 0 0 3px var(--willa-input-invalid-ring);
+}
+
+.willa-input--disabled {
+  background: var(--willa-input-disabled-bg);
+  color: var(--willa-input-disabled-text);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.willa-input--sm {
+  min-height: 2rem;
+  gap: 0.42rem;
+  padding: 0.35rem 0.62rem;
+  font-size: 0.82rem;
+}
+
+.willa-input--md {
+  min-height: 2.44rem;
+  gap: 0.5rem;
+  padding: 0.48rem 0.76rem;
+  font-size: 0.94rem;
+}
+
+.willa-input--lg {
+  min-height: 2.88rem;
+  gap: 0.56rem;
+  padding: 0.62rem 0.92rem;
+  font-size: 1.04rem;
+}
+
+.willa-input-control {
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: 0;
+}
+
+.willa-input-control::placeholder {
+  color: var(--willa-input-placeholder);
+  font-weight: 450;
+  opacity: 1;
+}
+
+.willa-input-control:disabled {
+  cursor: not-allowed;
+}
+
+.willa-input-icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--willa-input-addon-text);
+}
+
+.willa-input-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-input-addon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--willa-input-addon-text);
+  font-size: 0.92em;
+  white-space: nowrap;
+}
+
+@media (max-width: 767px) {
+  .willa-input--sm {
+    min-height: 2.25rem;
+  }
+
+  .willa-input--md {
+    min-height: 2.62rem;
+  }
+
+  .willa-input--lg {
+    min-height: 3rem;
+  }
+}

package/packages/willa-form/src/components/Input/index.tsx

@@ -0,0 +1,116 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+
+export type InputSize = "sm" | "md" | "lg";
+export type InputVariant = "outline" | "soft";
+
+export type InputProps = Omit<
+  ComponentPropsWithoutRef<"input">,
+  "prefix" | "size"
+> & {
+  size?: InputSize;
+  variant?: InputVariant;
+  width?: CSSProperties["width"];
+  invalid?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  leadingAddon?: ReactNode;
+  trailingAddon?: ReactNode;
+  inputClassName?: string;
+  backgroundColor?: string;
+  textColor?: string;
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    size = "md",
+    variant = "outline",
+    width,
+    invalid = false,
+    leadingIcon,
+    trailingIcon,
+    leadingAddon,
+    trailingAddon,
+    inputClassName,
+    backgroundColor,
+    textColor,
+    className,
+    disabled,
+    style,
+    ...inputProps
+  } = props;
+  const isInvalid =
+    invalid ||
+    inputProps["aria-invalid"] === true ||
+    inputProps["aria-invalid"] === "true";
+  const inputStyle = getInputStyle({
+    backgroundColor,
+    textColor,
+    width,
+    style,
+  });
+
+  return (
+    <span
+      className={classNames(
+        "willa-input",
+        `willa-input--${size}`,
+        `willa-input--${variant}`,
+        disabled && "willa-input--disabled",
+        isInvalid && "willa-input--invalid",
+        className,
+      )}
+      style={inputStyle}
+      aria-disabled={disabled || undefined}
+    >
+      {leadingAddon ? (
+        <span className="willa-input-addon">{leadingAddon}</span>
+      ) : null}
+      {leadingIcon ? (
+        <span className="willa-input-icon" aria-hidden="true">
+          {leadingIcon}
+        </span>
+      ) : null}
+      <input
+        {...inputProps}
+        ref={ref}
+        className={classNames("willa-input-control", inputClassName)}
+        disabled={disabled}
+        aria-invalid={isInvalid || inputProps["aria-invalid"]}
+      />
+      {trailingIcon ? (
+        <span className="willa-input-icon" aria-hidden="true">
+          {trailingIcon}
+        </span>
+      ) : null}
+      {trailingAddon ? (
+        <span className="willa-input-addon">{trailingAddon}</span>
+      ) : null}
+    </span>
+  );
+});
+
+Input.displayName = "Input";
+
+const getInputStyle = (options: {
+  backgroundColor?: string;
+  textColor?: string;
+  width?: CSSProperties["width"];
+  style?: CSSProperties;
+}) => {
+  const { backgroundColor, textColor, width, style } = options;
+
+  return {
+    ...style,
+    ...(width === undefined ? undefined : { width }),
+    ...(backgroundColor
+      ? { "--willa-input-custom-bg": backgroundColor }
+      : undefined),
+    ...(textColor ? { "--willa-input-custom-text": textColor } : undefined),
+  } as CSSProperties;
+};

package/packages/willa-form/src/components/NumberInput/index.css

@@ -0,0 +1,315 @@
+.willa-number-input {
+  --willa-number-input-control-width: 1.38rem;
+
+  position: relative;
+  min-width: min(100%, 9.5rem);
+  overflow: hidden;
+}
+
+.willa-number-input--with-suffix {
+  min-width: min(100%, 11rem);
+}
+
+.willa-number-input--segmented {
+  min-width: min(100%, 10rem);
+}
+
+.willa-number-input .willa-input-control {
+  font-variant-numeric: tabular-nums;
+  width: 0;
+  min-width: 3.5rem;
+  text-align: left;
+}
+
+.willa-number-input .willa-input-addon {
+  display: inline-flex;
+  min-width: 0;
+  align-self: stretch;
+  align-items: stretch;
+}
+
+.willa-number-input--with-trailing.willa-input--sm {
+  padding-block: 0;
+  padding-inline-end: 0;
+}
+
+.willa-number-input--with-trailing.willa-input--md {
+  padding-block: 0;
+  padding-inline-end: 0;
+}
+
+.willa-number-input--with-trailing.willa-input--lg {
+  padding-block: 0;
+  padding-inline-end: 0;
+}
+
+.willa-number-input--with-addon-before.willa-input--sm,
+.willa-number-input--with-addon-before.willa-input--md,
+.willa-number-input--with-addon-before.willa-input--lg {
+  padding-block: 0;
+  padding-inline-start: 0;
+}
+
+.willa-number-input--segmented.willa-input--sm,
+.willa-number-input--segmented.willa-input--md,
+.willa-number-input--segmented.willa-input--lg {
+  gap: 0;
+}
+
+.willa-number-input--segmented .willa-input-control {
+  text-align: center;
+}
+
+.willa-number-input--warning {
+  border-color: var(--willa-input-warning-border);
+}
+
+.willa-number-input--warning:focus-within {
+  border-color: var(--willa-input-warning-border);
+  box-shadow: 0 0 0 3px var(--willa-input-warning-ring);
+}
+
+.willa-number-input--borderless {
+  border-color: transparent;
+  background: transparent;
+}
+
+.willa-number-input--borderless:hover:not(.willa-input--disabled),
+.willa-number-input--borderless:focus-within {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.willa-number-input--underlined {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-radius: 0;
+  background: transparent;
+}
+
+.willa-number-input--underlined:hover:not(.willa-input--disabled),
+.willa-number-input--underlined:focus-within {
+  background: transparent;
+}
+
+.willa-number-input-leading,
+.willa-number-input-trailing {
+  display: inline-flex;
+  flex: none;
+  align-self: stretch;
+  align-items: stretch;
+}
+
+.willa-number-input-leading {
+  gap: 0.38rem;
+}
+
+.willa-number-input-addon-before,
+.willa-number-input-addon-after,
+.willa-number-input-prefix,
+.willa-number-input-suffix {
+  display: inline-flex;
+  align-items: center;
+  color: var(--willa-input-addon-text);
+  font-size: 0.92em;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.willa-number-input-addon-before,
+.willa-number-input-addon-after {
+  height: 100%;
+  align-self: stretch;
+  justify-content: center;
+  min-width: 2.6rem;
+  padding-inline: 0.7rem;
+  border-color: var(--willa-input-border);
+  background: var(--willa-input-soft-bg);
+  color: var(--willa-input-text);
+}
+
+.willa-number-input-addon-before {
+  border-right: 1px solid var(--willa-input-border);
+  border-radius: calc(0.6rem - 1px) 0 0 calc(0.6rem - 1px);
+}
+
+.willa-number-input-addon-after {
+  border-left: 1px solid var(--willa-input-border);
+  border-radius: 0 calc(0.6rem - 1px) calc(0.6rem - 1px) 0;
+}
+
+.willa-number-input-addon-action {
+  display: inline-flex;
+  width: 100%;
+  min-width: 1.4rem;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.willa-number-input-addon-action:hover:not(:disabled) {
+  color: var(--willa-input-border-focus);
+}
+
+.willa-number-input-addon-action:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: -2px;
+}
+
+.willa-number-input-addon-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.willa-number-input-addon-action svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-number-input-prefix {
+  color: var(--willa-input-text);
+}
+
+.willa-number-input-trailing {
+  min-width: 0;
+  max-width: none;
+  overflow: hidden;
+}
+
+.willa-number-input--segmented .willa-number-input-trailing {
+  max-width: none;
+}
+
+.willa-number-input-suffix {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  min-width: max-content;
+  max-width: none;
+  align-self: stretch;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-inline: 0.5rem;
+}
+
+.willa-number-input-controls {
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: inline-grid;
+  width: var(--willa-number-input-control-width);
+  min-height: 100%;
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  overflow: hidden;
+  border-left: 1px solid transparent;
+  border-radius: 0 0.5rem 0.5rem 0;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.willa-number-input:hover:not(.willa-input--disabled)
+  .willa-number-input-controls,
+.willa-number-input:focus-within .willa-number-input-controls {
+  border-color: var(--willa-input-border);
+  background: var(--willa-number-input-controls-bg);
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+.willa-number-input-control-button {
+  display: inline-flex;
+  width: 100%;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: var(--willa-input-addon-text);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease;
+}
+
+.willa-number-input-control-button + .willa-number-input-control-button {
+  border-top: 1px solid var(--willa-input-border);
+}
+
+.willa-number-input-control-button:hover:not(:disabled) {
+  background: var(--willa-number-input-control-bg-hover);
+  color: var(--willa-input-border-focus);
+}
+
+.willa-number-input-control-button:active:not(:disabled) {
+  background: var(--willa-number-input-control-bg-active);
+}
+
+.willa-number-input-control-button:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: -2px;
+}
+
+.willa-number-input-control-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+
+.willa-number-input-control-icon {
+  display: inline-flex;
+  width: 0.78rem;
+  height: 0.78rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.willa-number-input-control-icon svg {
+  width: 0.78rem;
+  height: 0.78rem;
+}
+
+.willa-input--sm .willa-number-input-controls {
+  --willa-number-input-control-width: 1.22rem;
+}
+
+.willa-number-input.willa-input--sm {
+  --willa-number-input-control-width: 1.22rem;
+}
+
+.willa-input--sm .willa-number-input-control-icon,
+.willa-input--sm .willa-number-input-control-icon svg {
+  width: 0.68rem;
+  height: 0.68rem;
+}
+
+.willa-input--lg .willa-number-input-controls {
+  --willa-number-input-control-width: 1.52rem;
+}
+
+.willa-number-input.willa-input--lg {
+  --willa-number-input-control-width: 1.52rem;
+}
+
+.willa-input--lg .willa-number-input-control-icon,
+.willa-input--lg .willa-number-input-control-icon svg {
+  width: 0.88rem;
+  height: 0.88rem;
+}