neatkit 0.2.0 → 0.3.0

package/dist/tokens.d.ts

@@ -0,0 +1,84 @@
+/** The canonical Neatkit grid cell size in CSS pixels. */
+export declare const CELL_SIZE = 36;
+/** The canonical Neatkit spacing scale in CSS pixels. */
+export declare const SPACE_SIZES: readonly [2, 4, 8, 12, 16, 24, 32, 48];
+/** A supported value from the Neatkit spacing scale. */
+export type SpaceSize = (typeof SPACE_SIZES)[number];
+/** The canonical Neatkit responsive breakpoints in CSS pixels. */
+export declare const BREAKPOINTS: {
+    readonly sm: 768;
+    readonly md: 960;
+    readonly lg: 1440;
+    readonly xl: 1920;
+};
+/** A supported Neatkit responsive breakpoint name. */
+export type BreakpointName = keyof typeof BREAKPOINTS;
+/** Theme-independent design tokens used by every Neatkit theme. */
+export declare const BASE_TOKENS: {
+    readonly "--nk-duration-fast": "200ms";
+    readonly "--nk-duration-normal": "300ms";
+    readonly "--nk-easing-standard": "ease";
+    readonly "--nk-focus-ring-width": "2px";
+    readonly "--nk-focus-ring-offset": "2px";
+    readonly "--nk-shadow-subtle": string;
+    readonly "--nk-shadow-medium": string;
+    readonly "--nk-shadow-strong": "0 var(--nk-space-16) var(--nk-space-48) rgb(0 0 0 / 20%)";
+    readonly "--nk-font-family-sans": "\"Albert Sans\", system-ui, sans-serif";
+    readonly "--nk-font-size-caption": "12px";
+    readonly "--nk-font-size-root": "14px";
+    readonly "--nk-font-size-body": "var(--nk-font-size-root)";
+    readonly "--nk-font-size-subtitle": "16px";
+    readonly "--nk-font-size-title": "21px";
+    readonly "--nk-font-size-heading": "24px";
+    readonly "--nk-font-weight-medium": "500";
+    readonly "--nk-font-weight-semibold": "650";
+    readonly "--nk-radius-small": "4px";
+    readonly "--nk-radius-medium": "8px";
+    readonly "--nk-radius-large": "12px";
+    readonly "--nk-control-height": "calc(var(--nk-cell) * 0.9)";
+    readonly "--nk-choice-size": "calc(var(--nk-cell) * 0.5)";
+    readonly "--nk-space-control-gap": "var(--nk-space-8)";
+    readonly "--nk-space-control-inline": "var(--nk-space-12)";
+    readonly "--nk-space-group-gap": "var(--nk-space-8)";
+    readonly "--nk-cell": "36px";
+};
+/** Default theme tokens inherited unless a theme overrides them. */
+export declare const BASE_THEME_TOKENS: {
+    readonly "--nk-accent": "#2563eb";
+    readonly "--nk-accent-soft": "color-mix(in srgb, var(--nk-accent) 12%, transparent)";
+    readonly "--nk-accent-subtle": "color-mix(in srgb, var(--nk-accent) 6%, transparent)";
+    readonly "--nk-color-background": "#fff";
+    readonly "--nk-color-surface": "#fff";
+    readonly "--nk-color-text": "#000";
+    readonly "--nk-color-text-muted": "rgb(0 0 0 / 65%)";
+    readonly "--nk-color-border": "rgb(0 0 0 / 12.5%)";
+    readonly "--nk-color-emphasis-fill": "#000";
+    readonly "--nk-color-emphasis-fill-foreground": "#fff";
+    readonly "--nk-color-info-foreground": "#2563eb";
+    readonly "--nk-color-info-fill": "#2563eb";
+    readonly "--nk-color-info-fill-foreground": "#fff";
+    readonly "--nk-color-success-foreground": "#15803d";
+    readonly "--nk-color-success-fill": "#15803d";
+    readonly "--nk-color-success-fill-foreground": "#fff";
+    readonly "--nk-color-warning-foreground": "#b84800";
+    readonly "--nk-color-warning-fill": "#f97316";
+    readonly "--nk-color-warning-fill-foreground": "#000";
+    readonly "--nk-color-danger-foreground": "#d32f2f";
+    readonly "--nk-color-danger-fill": "#d32f2f";
+    readonly "--nk-color-danger-fill-foreground": "#fff";
+    readonly "--nk-focus-ring-color": "var(--nk-accent)";
+};
+/** Dark-theme overrides applied on top of the base theme. */
+export declare const DARK_THEME_TOKENS: {
+    readonly "--nk-color-background": "#000";
+    readonly "--nk-color-surface": "#111";
+    readonly "--nk-color-text": "#fff";
+    readonly "--nk-color-text-muted": "rgb(255 255 255 / 65%)";
+    readonly "--nk-color-border": "rgb(255 255 255 / 15%)";
+    readonly "--nk-color-emphasis-fill": "#fff";
+    readonly "--nk-color-emphasis-fill-foreground": "#000";
+    readonly "--nk-color-info-foreground": "#60a5fa";
+    readonly "--nk-color-success-foreground": "#4ade80";
+    readonly "--nk-color-warning-foreground": "#fb923c";
+    readonly "--nk-color-danger-foreground": "#ff6b6b";
+};

package/dist/utils/{react-reference.d.ts → reference.d.ts}

@@ -1,4 +1,4 @@
-import type { ReactElement, Ref } from "react";
+import { type ReactElement, type Ref } from "react";
 /**
  * Returns the reference assigned to a React element across React versions.
  *

package/dist/utils/units.d.ts

@@ -0,0 +1,33 @@
+import { type BreakpointName, type SpaceSize } from "../tokens";
+/**
+ * Resolves a number of canonical grid cells in CSS pixels.
+ *
+ * @param amount - The finite number of cells to resolve.
+ *
+ * @returns The corresponding number of CSS pixels.
+ */
+export declare function cell(amount: number): number;
+/**
+ * Resolves a canonical spacing size in CSS pixels.
+ *
+ * @param size - A supported value from the Neatkit spacing scale.
+ *
+ * @returns The spacing size as a unitless number.
+ */
+export declare function space(size: SpaceSize): number;
+/**
+ * Resolves a named canonical breakpoint in CSS pixels.
+ *
+ * @param name - A supported Neatkit breakpoint name.
+ *
+ * @returns The breakpoint as a unitless number.
+ */
+export declare function breakpoint(name: BreakpointName): number;
+/**
+ * Serializes a finite numeric value as a CSS pixel length.
+ *
+ * @param value - The numeric value to serialize.
+ *
+ * @returns The value followed by the CSS pixel unit.
+ */
+export declare function px(value: number): `${number}px`;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "neatkit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A modern, composable UI library for the web.",
+  "keywords": ["library", "react", "typescript", "ui"],
   "type": "module",
-  "license": "GPL-3.0-only",
+  "license": "MPL-2.0",
   "engines": {
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0",
     "npm": ">=10.0.0"