aplance-ui 1.0.1

package/registry/components/ui/button/button.module.css

@@ -0,0 +1,216 @@
+/* contains all possible styles of button component
+with selectors for different variants and sizes and states
+*/
+
+.base {
+  --button-fg: var(--color-foreground);
+  --button-placeholder: var(--button-fg);
+  --button-icon: var(--button-fg);
+
+  width: fit-content;
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  padding: var(--spacing-3) var(--spacing-6);
+  min-height: var(--spacing-11);
+  border-radius: var(--radius-md);
+  display: flex;
+  min-width: fit-content;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  transition:
+    background-color var(--transition-base),
+    border-color var(--transition-base),
+    opacity var(--transition-base);
+  cursor: pointer;
+  white-space: nowrap;
+  outline: none;
+  border: none;
+
+  /* necessary */
+  line-height: 1.125;
+
+  svg {
+    cursor: pointer;
+  }
+
+  &.sm:not(.border_b):not(.box) {
+    padding: var(--spacing-2) var(--spacing-4);
+    min-height: var(--spacing-8);
+    font-size: var(--font-size-xs);
+  }
+
+  /* Box layout - perfect square with centered content */
+  &.box {
+    width: var(--spacing-11);
+    min-height: unset;
+    justify-content: center;
+    height: var(--spacing-11);
+    padding: var(--spacing-2);
+
+    &.sm {
+      width: var(--spacing-10);
+      height: var(--spacing-10);
+      font-size: var(--font-size-xs);
+      border-radius: var(--radius-md);
+    }
+  }
+
+  &.disabled,
+  &:disabled,
+  &[data-disabled="true"] {
+    pointer-events: none !important;
+    opacity: 0.5 !important;
+    cursor: not-allowed;
+  }
+}
+
+/*
+  CSS custom property contract: these vars publish the variant's colors so
+  consumers down the DOM tree can read them via inheritance - no JS, no prop
+  drilling, no hardcoded token duplication.
+
+  :is() covers both the direct variant (.primary) and the tone alias (.tone_primary).
+  .tone_* is applied by input-field components (Input, Select, Textarea, OTP, MediaInput,
+  SelectButton) via sButton[`tone_${variant}`]. It goes on both the field wrapper div
+  (so --button-* vars inherit into field_wrapper_variant for icons/placeholder coloring)
+  and on the input element itself alongside .base + the variant class for full button paint.
+
+  Consumers:
+    - input-field-common (.field_wrapper_variant) → maps to --field-content/placeholder/icon-color
+    - picker-popover-common (.picker_value_placeholder) → reads --button-placeholder directly
+    - media-input (.clear_all) → overrides --button-fg locally to muted
+  All consumers use var(--button-*, fallback) so they work standalone too.
+*/
+:is(.primary, .tone_primary) {
+  --button-fg: var(--color-primary-foreground);
+  --button-placeholder: var(--color-primary-foreground);
+  --button-icon: var(--color-primary-foreground);
+}
+
+.primary {
+  background-color: var(--color-primary);
+  color: var(--button-fg);
+  box-shadow: var(--shadow-sm);
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &:hover:not(.disabled),
+  &:active:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    background-color: var(--color-primary-muted);
+  }
+}
+
+/* Same pattern as :is(.primary, .tone_primary) - vars shared between the direct
+   variant class and the tone alias used by composing components. */
+:is(.secondary, .tone_secondary) {
+  --button-fg: var(--color-secondary-foreground);
+  --button-placeholder: var(--color-secondary-foreground);
+  --button-icon: var(--color-secondary-foreground);
+}
+
+.secondary {
+  background-color: var(--color-secondary);
+  color: var(--button-fg);
+  box-shadow: var(--shadow-sm);
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &:hover:not(.disabled),
+  &:active:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    background-color: var(--color-secondary-muted);
+  }
+}
+
+/* Same pattern - note .bordered uses --color-muted-foreground for placeholder
+   (subdued hint text) while fg/icon stay on full --color-foreground. */
+:is(.bordered, .tone_bordered) {
+  --button-fg: var(--color-foreground);
+  --button-placeholder: var(--color-muted-foreground);
+  --button-icon: var(--color-foreground);
+}
+
+.bordered {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  color: var(--button-fg);
+  box-shadow: var(--shadow-sm);
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &:hover:not(.disabled),
+  &:active:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    background-color: var(--color-muted);
+  }
+}
+
+/* Same pattern - border_b (dotted underline style) shares the bordered color
+   palette, so tone alias gets the same muted-placeholder treatment. */
+:is(.border_b, .tone_border_b) {
+  --button-fg: var(--color-foreground);
+  --button-placeholder: var(--color-muted-foreground);
+  --button-icon: var(--color-foreground);
+}
+
+.border_b {
+  padding: 0;
+  min-height: unset;
+  border-bottom: 2px dotted var(--color-border);
+  border-radius: 0;
+  color: var(--button-fg);
+  box-shadow: none;
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &.sm {
+    font-size: var(--font-size-xs);
+  }
+
+  &:hover:not(.disabled),
+  &.active:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    border-bottom-color: var(--color-foreground);
+  }
+}
+
+/* Same pattern - ghost is transparent background; tone alias lets composing
+   components inherit these vars without applying the full ghost layout rules. */
+:is(.ghost, .tone_ghost) {
+  --button-fg: var(--color-foreground);
+  --button-placeholder: var(--color-muted-foreground);
+  --button-icon: var(--color-foreground);
+}
+
+.ghost {
+  width: fit-content;
+  height: fit-content;
+  color: var(--button-fg);
+  background-color: transparent;
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &:active:not(.disabled),
+  &:hover:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    background-color: var(--color-muted);
+  }
+}

package/registry/components/ui/button/button.tsx

@@ -0,0 +1,133 @@
+import type {
+  ElementType,
+  ComponentProps,
+  CSSProperties,
+  MouseEvent,
+} from "react";
+import clsx from "clsx";
+import s from "./button.module.css";
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "bordered"
+  | "border_b"
+  | "ghost";
+export type ButtonSize = "default" | "sm";
+export type ButtonLayout = "default" | "box";
+export type AsProp = "button" | "div" | "span" | "link";
+
+type BaseProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  layout?: ButtonLayout;
+  className?: string;
+  style?: CSSProperties;
+  isActive?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  as?: AsProp;
+};
+
+// In case of different routers can update props
+type LinkModeProps = BaseProps & {
+  as: "link";
+  href?: string;
+  to?: string;
+  target?: string;
+  rel?: string;
+  linkComponent?: ElementType;
+  linkProps?: Record<string, unknown>;
+} & Omit<ComponentProps<"a">, "href" | "className" | "style" | "children">;
+
+type ElementModeProps<T extends "button" | "div" | "span"> = BaseProps & {
+  as?: T;
+  href?: never;
+} & ComponentProps<T>;
+
+type ButtonProps =
+  | LinkModeProps
+  | ElementModeProps<"button">
+  | ElementModeProps<"div">
+  | ElementModeProps<"span">;
+
+export const Button = ({
+  variant,
+  size = "default",
+  layout = "default",
+  className,
+  style,
+  isActive = false,
+  disabled = false,
+  children = "Button",
+  as = "button",
+  ...rest
+}: ButtonProps) => {
+  const classes = clsx(
+    s.base,
+    variant && s[variant],
+    size === "sm" && s.sm,
+    layout === "box" && s.box,
+    isActive && s.active,
+    disabled && s.disabled,
+    className,
+  );
+
+  const handleClick = disabled
+    ? (e: MouseEvent) => e.preventDefault()
+    : undefined;
+
+  if (as === "link") {
+    const {
+      href,
+      to,
+      target,
+      rel,
+      linkComponent: LinkComponent,
+      linkProps,
+      ...linkRest
+    } = rest as LinkModeProps;
+    const LinkElement = LinkComponent ?? "a";
+    const resolvedHref = href ?? to ?? "#";
+    const safeRel = target === "_blank" ? (rel ?? "noopener noreferrer") : rel;
+
+    const customLinkProps: Record<string, unknown> = {
+      href: resolvedHref,
+      ...(to && { to }),
+      target,
+      rel: safeRel,
+      ...(linkProps ?? {}),
+    };
+
+    return (
+      <LinkElement
+        className={classes}
+        style={style}
+        aria-disabled={disabled}
+        onClick={handleClick}
+        {...(LinkComponent
+          ? customLinkProps
+          : { href: resolvedHref, target, rel: safeRel })}
+        {...linkRest}
+      >
+        {children}
+      </LinkElement>
+    );
+  }
+
+  const ButtonComponent = as as ElementType;
+
+  return (
+    <ButtonComponent
+      className={classes}
+      style={style}
+
+      aria-disabled={disabled}
+      {...(as === "button" && { disabled })}
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </ButtonComponent>
+  );
+};

package/registry/components/ui/chart/chart.module.css

@@ -0,0 +1,168 @@
+/* ── Container card ───────────────────────────────────────────── */
+.card {
+  width: 100%;
+  background-color: var(--color-background);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-7);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-foreground);
+}
+
+.description {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+}
+
+.canvas {
+  width: 100%;
+  position: relative;
+}
+
+.plot {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+}
+
+.plot :global(.recharts-cartesian-axis-tick-value) {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Loading & empty states ──────────────────────────────────── */
+/* Shared layout - same dimensions/centering so swapping between them
+   doesn't shift the surrounding card height. */
+.loading_state,
+.empty_state {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+}
+
+/* Empty state adds the muted text + dashed boundary; the loader
+   variant intentionally has neither so the spinner stands cleanly. */
+.empty_state {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  border: var(--border-1) dashed var(--color-border);
+}
+
+/* ── Tooltip ─────────────────────────────────────────────────── */
+/* Match the page surface so series colors (designed against the page bg)
+   stay readable inside the tooltip. Border defines the floating edge
+   without relying on shadow alone. */
+.tooltip {
+  min-width: 10rem;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4) var(--spacing-5);
+  box-shadow: var(--shadow-md);
+}
+
+.tooltip_label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--spacing-2);
+}
+
+.tooltip_row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  font-size: var(--font-size-xs);
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-2);
+  }
+}
+
+.tooltip_dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.tooltip_value {
+  margin-left: auto;
+  font-weight: var(--font-weight-semibold);
+  padding-left: var(--spacing-3);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Legend (shared across all chart types) ──────────────────── */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-3) var(--spacing-6);
+  justify-content: center;
+}
+
+.legend_item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+}
+
+.legend_dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.center_overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none;
+  max-width: calc(100% - var(--spacing-8));
+  max-height: calc(100% - var(--spacing-8));
+}
+
+@media (width <= 600px) {
+  .card {
+    padding: var(--spacing-5);
+    gap: var(--spacing-5);
+  }
+
+  .tooltip {
+    min-width: 8rem;
+    padding: var(--spacing-3) var(--spacing-4);
+  }
+
+  .legend {
+    justify-content: flex-start;
+    gap: var(--spacing-3) var(--spacing-5);
+  }
+}