@neo-ui-kit/react 1.3.18 → 1.4.1

package/README.md

@@ -65,7 +65,7 @@ import "@neo-ui-kit/react/styles.css";
 To test repository changes before publishing, run `npm run package` from the repository root and install the resulting archive in a separate application:
 
 ```bash
-npm install /path/to/adui/release/neo-ui-kit-react-1.3.18.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.4.1.tgz
 ```
 
 Maintainers publish new versions from `Pro100Dimka/adui` using the `release.yml` GitHub Actions workflow, a matching `v<version>` tag, and the `npm-publication` environment. npm trusts its OIDC identity; no `NPM_TOKEN` is required. The workflow checks the project and packed consumer before publishing the tested archive. Published `1.0.0` cannot be overwritten: code and README changes in npm require a new package version. See the [repository release instructions](https://github.com/Pro100Dimka/adui#npm-пакет).
@@ -404,3 +404,24 @@ const [transport, setTransport] = useState<QuantumBackgroundTransport>();
 ```
 
 The documentation page builds exactly such a panel (song, player, microphone, snapshot, fullscreen, field and sensitivity, plus a closed “Тонкая настройка” section) outside the component. `QuantumFieldExperience`, `QuantumFieldExperienceProps` and `quantumFieldExperienceControls` remain compatible aliases; note that `QuantumFieldExperience` no longer renders its own control panel. The separate lightweight `QuantumField` primitive documented above keeps its original props and rendering; it is not an alias of the full background.
+
+
+### Viewport sizes
+
+Responsive Grid, Stack and FormFields layout uses the available window width in CSS pixels:
+
+| Name | Window width |
+| --- | --- |
+| xs | Below 768 px |
+| sm | 768 to 1023 px |
+| md | 1024 to 1919 px |
+| lg | 1920 to 2559 px |
+| xlg | 2560 px and above |
+
+Values carry forward until the next specified breakpoint. `base` remains an alias for `xs`, and `xl` for `xlg`; explicit canonical keys take priority. Nested layouts resolve their own values independently.
+
+```tsx
+<Grid columns={{ xs: 1, sm: 2, md: 3, lg: 4, xlg: 5 }} gap={3} />
+```
+
+Control `size` selects physical geometry (`xs`, `sm`, `md`, `lg`, `xlg`); it does not limit a component to a particular screen. Explicit compact controls remain compact on large displays. Numeric and CSS-length dimensions remain supported by Icon and Loader. Card padding also includes `xs` and `xlg`.

package/dist/chunks/{chunk-NTNL3ELP.js → chunk-KYKVBAMI.js}

@@ -69,7 +69,7 @@ var illustrations = illustrations_default;
 
 // src/components/layout/Icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";
-var iconSizes = { xs: "1rem", sm: "1.25rem", md: "1.5rem", lg: "2rem" };
+var iconSizes = { xs: "1rem", sm: "1.25rem", md: "1.5rem", lg: "2rem", xlg: "2.5rem" };
 var Icon = ({
   name = "music",
   size,
@@ -1128,7 +1128,7 @@ import { jsx as jsx14 } from "react/jsx-runtime";
 var Switch = (p) => /* @__PURE__ */ jsx14(BooleanControl, { kind: "Switch", ...p });
 
 // src/core/responsive.ts
-var BREAKPOINTS = ["base", "sm", "md", "lg", "xl"];
+var BREAKPOINTS = ["xs", "sm", "md", "lg", "xlg"];
 function spacing(value) {
   if (typeof value !== "number") return value;
   if (value === 0) return "0";
@@ -1137,11 +1137,11 @@ function spacing(value) {
 function responsiveVars(name, value, format = String, fallback) {
   const values = value != null && typeof value === "object" && !Array.isArray(value) ? value : { base: value ?? fallback };
   const result = {};
-  let current = values.base ?? fallback;
+  let current = values.xs ?? values.base ?? fallback;
   for (const bp of BREAKPOINTS) {
-    current = values[bp] ?? current;
+    current = values[bp] ?? (bp === "xlg" ? values.xl : void 0) ?? current;
     if (current != null)
-      result[`--ad-${name}${bp === "base" ? "" : `-${bp}`}`] = format(current);
+      result[`--ad-${name}${bp === "xs" ? "" : `-${bp}`}`] = format(current);
   }
   return result;
 }
@@ -2624,7 +2624,7 @@ var RotaryKnob = (p) => {
   const initialRef = useRef14(initial);
   const resetRef = useRef14(void 0);
   resetRef.current = p.resetValue === void 0 ? void 0 : toPosition(p.resetValue);
-  const diameter = p.diameter ?? { xs: 84, sm: 124, md: 220, lg: 320 }[normalizeSize(p.size) ?? "md"];
+  const diameter = p.diameter ?? { xs: 84, sm: 124, md: 220, lg: 320, xlg: 400 }[normalizeSize(p.size) ?? "md"];
   useLayoutEffect4(() => {
     const root = rootRef.current;
     const canvas = baseRef.current;
@@ -2679,12 +2679,16 @@ var RotaryKnob = (p) => {
       const padding = Math.ceil(parseFloat(getComputedStyle(root).fontSize) * 8);
       const extent = size + padding * 2;
       raster.width = raster.height = Math.ceil(extent * ratio);
-      Object.assign(raster.style, {
-        left: `${-padding}px`,
-        top: `${-padding}px`,
-        width: `${raster.width / ratio}px`,
-        height: `${raster.height / ratio}px`
-      });
+      const viewport = raster.closest("svg");
+      const frame = raster.parentElement;
+      if (!viewport || !frame) return;
+      viewport.setAttribute("viewBox", `0 0 ${size} ${size}`);
+      for (const [name, value2] of Object.entries({
+        x: -padding,
+        y: -padding,
+        width: raster.width / ratio,
+        height: raster.height / ratio
+      })) frame.setAttribute(name, String(value2));
       const turned = document.createElement("canvas");
       turned.width = turned.height = Math.ceil(size * ratio);
       const turning = turned.getContext("2d");
@@ -3426,7 +3430,7 @@ var RotaryKnob = (p) => {
           }
         ),
         /* @__PURE__ */ jsx29("span", { className: "knob__surface knob__rotor-frame", "aria-hidden": "true", children: /* @__PURE__ */ jsx29("canvas", { className: "knob__rotor", ref: rotorRef }) }),
-        /* @__PURE__ */ jsx29("canvas", { className: "knob__raster", ref: rasterRef, hidden: true, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx29("svg", { className: "knob__raster", "aria-hidden": "true", children: /* @__PURE__ */ jsx29("foreignObject", { children: /* @__PURE__ */ jsx29("canvas", { ref: rasterRef, hidden: true }) }) }),
         /* @__PURE__ */ jsx29("span", { className: "knob__sheen", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx29(
           "div",

package/dist/components/controls/Slider/styles.css

@@ -136,3 +136,5 @@
 .ad-slider-field:has(.ad-slider:disabled) .ad-field-label {
   opacity: 0.5;
 }
+
+.ad-slider[data-ad-size="xlg"] { --ad-slider-track: 0.75rem; --ad-slider-thumb: 1.5rem; }

package/dist/components/controls/Tabs/styles.css

@@ -114,6 +114,7 @@
 }
 /* Neon edge: the blade's own background is the edge, a glint runs along it. */
 .ad-tabs-blade {
+  overflow: clip;
   position: absolute;
   inset: 0;
   isolation: isolate;

package/dist/components/controls/shared.css

@@ -120,6 +120,30 @@
   --ad-size-pad-x: 0.95rem;
   --ad-size-gap: 0.72rem;
 }
+:is(
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button,
+  .ad-split-button,
+  .ad-input-base,
+  .ad-text-field-shell,
+  .ad-text-area,
+  .ad-number-field,
+  .ad-select,
+  .ad-switch,
+  .ad-checkbox,
+  .ad-slider,
+  .ad-file-picker,
+  .ad-tabs,
+  .ad-tab,
+  .ad-segmented-control
+)[data-ad-size="xlg"] {
+  --ad-size-h: 3.5rem;
+  --ad-size-font: 1.0625rem;
+  --ad-size-radius: 1rem;
+  --ad-size-pad-x: 1.125rem;
+  --ad-size-gap: 0.85rem;
+}
 
 @keyframes ad-btn-breathe {
   50% {

package/dist/components/feedback/Badge/styles.css

@@ -89,3 +89,5 @@
     opacity: 0.35;
   }
 }
+
+.ad-badge[data-ad-size="xlg"] { --ad-badge-cut: 0.5rem; padding: 0.4rem 1rem; font-size: 1rem; line-height: 1.5rem; }

package/dist/components/foundation/Loader/Loader.d.ts

@@ -8,7 +8,7 @@ export interface LoaderProps extends Omit<CommonProps, "size"> {
     /** The picture that moves: a logo, an icon, any image (transparent PNG/SVG/WebP look best). */
     src?: string;
     animation?: LoaderAnimation;
-    /** xs/sm/md/lg, a CSS length, or pixels converted to rem at the 16px design baseline. */
+    /** xs/sm/md/lg/xlg, a CSS length, or pixels converted to rem at the 16px design baseline. */
     size?: number | string;
     /** Speed multiplier: 2 is twice as fast. */
     speed?: number;

package/dist/components/foundation/LoaderGenerator/LoaderGenerator.d.ts

@@ -21,6 +21,7 @@ export declare const loaderSizes: {
     readonly sm: 6.5;
     readonly md: 9;
     readonly lg: 12;
+    readonly xlg: 16;
 };
 export declare const loaderRenderKey: ({ animation }: Pick<LoaderSettings, "animation">) => "flip" | "fill" | "wave" | "palette" | "glow" | "pulse" | "spin" | "breathe" | "bounce" | "orbit" | "shine" | "wobble" | "radar";
 /** Removes large, smoothly connected background regions while preserving enclosed logo details. */

package/dist/components/layout/Avatar/styles.css

@@ -164,3 +164,6 @@
   background: var(--ad-neutral-600, #555);
   box-shadow: none;
 }
+
+.ad-avatar[data-ad-size="xlg"] { --ad-avatar: 5rem; }
+.ad-avatar[data-variant="host"][data-ad-size="xlg"] { --ad-avatar: 10rem; }

package/dist/components/layout/Card/Card.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { CardProps } from "../shared";
 export declare const Card: ({ as, border, shell, padding, title, description, eyebrow, icon, actions, level, children, ...p }: CardProps) => React.DetailedReactHTMLElement<{
     ref: React.RefObject<HTMLElement | null>;
-    "data-ad-padding": "sm" | "md" | "lg" | "none";
+    "data-ad-padding": "xs" | "sm" | "md" | "lg" | "xlg" | "none";
     onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
     id: string | undefined;
     className: string;

package/dist/components/layout/Card/styles.css

@@ -48,3 +48,6 @@
 .ad-card:hover > .ad-card-light {
   opacity: 1;
 }
+
+.ad-card[data-ad-padding="xs"] { padding: var(--ad-space-1); }
+.ad-card[data-ad-padding="xlg"] { padding: var(--ad-space-8); }

package/dist/components/layout/Grid/styles.css

@@ -24,7 +24,7 @@
   grid-column: var(--ad-grid-column-start) / var(--ad-grid-column-end);
   grid-row: var(--ad-grid-row-start) / var(--ad-grid-row-end);
 }
-@media (min-width: 40rem) {
+@media (min-width: 768px) {
   .ad-grid:not(.ad-grid--auto-fit) {
     grid-template-columns: var(--ad-grid-columns-sm);
   }
@@ -40,7 +40,7 @@
     grid-row: var(--ad-grid-row-start-sm) / var(--ad-grid-row-end-sm);
   }
 }
-@media (min-width: 56.25rem) {
+@media (min-width: 1024px) {
   .ad-grid:not(.ad-grid--auto-fit) {
     grid-template-columns: var(--ad-grid-columns-md);
   }
@@ -56,7 +56,7 @@
     grid-row: var(--ad-grid-row-start-md) / var(--ad-grid-row-end-md);
   }
 }
-@media (min-width: 75rem) {
+@media (min-width: 1920px) {
   .ad-grid:not(.ad-grid--auto-fit) {
     grid-template-columns: var(--ad-grid-columns-lg);
   }
@@ -72,19 +72,19 @@
     grid-row: var(--ad-grid-row-start-lg) / var(--ad-grid-row-end-lg);
   }
 }
-@media (min-width: 96rem) {
+@media (min-width: 2560px) {
   .ad-grid:not(.ad-grid--auto-fit) {
-    grid-template-columns: var(--ad-grid-columns-xl);
+    grid-template-columns: var(--ad-grid-columns-xlg);
   }
   .ad-grid {
-    row-gap: var(--ad-grid-row-gap-xl);
-    column-gap: var(--ad-grid-column-gap-xl);
-    align-items: var(--ad-grid-align-xl);
-    justify-items: var(--ad-grid-justify-xl);
-    justify-content: var(--ad-grid-distribution-xl);
+    row-gap: var(--ad-grid-row-gap-xlg);
+    column-gap: var(--ad-grid-column-gap-xlg);
+    align-items: var(--ad-grid-align-xlg);
+    justify-items: var(--ad-grid-justify-xlg);
+    justify-content: var(--ad-grid-distribution-xlg);
   }
   .ad-grid-item {
-    grid-column: var(--ad-grid-column-start-xl) / var(--ad-grid-column-end-xl);
-    grid-row: var(--ad-grid-row-start-xl) / var(--ad-grid-row-end-xl);
+    grid-column: var(--ad-grid-column-start-xlg) / var(--ad-grid-column-end-xlg);
+    grid-row: var(--ad-grid-row-start-xlg) / var(--ad-grid-row-end-xlg);
   }
 }

package/dist/components/layout/Stack/styles.css

@@ -15,7 +15,7 @@
 .ad-stack__divider {
   display: contents;
 }
-@media (min-width: 40rem) {
+@media (min-width: 768px) {
   .ad-stack {
     flex-direction: var(--ad-stack-direction-sm);
     gap: var(--ad-stack-gap-sm);
@@ -24,7 +24,7 @@
     flex-wrap: var(--ad-stack-wrap-sm);
   }
 }
-@media (min-width: 56.25rem) {
+@media (min-width: 1024px) {
   .ad-stack {
     flex-direction: var(--ad-stack-direction-md);
     gap: var(--ad-stack-gap-md);
@@ -33,7 +33,7 @@
     flex-wrap: var(--ad-stack-wrap-md);
   }
 }
-@media (min-width: 75rem) {
+@media (min-width: 1920px) {
   .ad-stack {
     flex-direction: var(--ad-stack-direction-lg);
     gap: var(--ad-stack-gap-lg);
@@ -42,12 +42,12 @@
     flex-wrap: var(--ad-stack-wrap-lg);
   }
 }
-@media (min-width: 96rem) {
+@media (min-width: 2560px) {
   .ad-stack {
-    flex-direction: var(--ad-stack-direction-xl);
-    gap: var(--ad-stack-gap-xl);
-    align-items: var(--ad-stack-align-xl);
-    justify-content: var(--ad-stack-justify-xl);
-    flex-wrap: var(--ad-stack-wrap-xl);
+    flex-direction: var(--ad-stack-direction-xlg);
+    gap: var(--ad-stack-gap-xlg);
+    align-items: var(--ad-stack-align-xlg);
+    justify-content: var(--ad-stack-justify-xlg);
+    flex-wrap: var(--ad-stack-wrap-xlg);
   }
 }

package/dist/components/layout/shared.d.ts

@@ -31,7 +31,7 @@ export interface CardProps extends CommonProps, Omit<HeaderProps, "as"> {
     as?: "section" | "div" | "article";
     border?: boolean;
     shell?: boolean;
-    padding?: "none" | "sm" | "md" | "lg";
+    padding?: "none" | "xs" | "sm" | "md" | "lg" | "xlg";
     material?: Material;
 }
 export interface AvatarProps extends CommonProps {

package/dist/components/media/RotaryKnob/styles.css

@@ -78,8 +78,16 @@
 }
 .ad-rotary-knob .knob__raster {
   position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
   pointer-events: none;
 }
+.ad-rotary-knob .knob__raster canvas {
+  width: 100%;
+  height: 100%;
+}
 .ad-rotary-knob[data-rasterized] .knob__surface {
   visibility: hidden;
 }

package/dist/core/base.d.ts

@@ -1,7 +1,7 @@
 import type { AriaRole, CSSProperties, ReactNode, Ref } from "react";
 export type Material = "shell" | "card" | "glass" | "ruby" | "tile" | "input" | "dialog" | "ghost" | "danger";
 export type Variant = "primary" | "secondary" | "ghost" | "danger";
-export type ControlSize = "xs" | "sm" | "md" | "lg";
+export type ControlSize = "xs" | "sm" | "md" | "lg" | "xlg";
 export type LegacySize = "small" | "medium" | "large";
 export type Size = ControlSize | LegacySize;
 export type Tone = "success" | "warning" | "error" | "processing" | "pending" | "offline" | "info";

package/dist/core/responsive.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xlg" | "base" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
 export type Spacing = number | string;
 /** Numbers are steps of the spacing scale; strings are raw CSS lengths. */

package/dist/forms.js

@@ -4,7 +4,7 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-NTNL3ELP.js";
+} from "./chunks/chunk-KYKVBAMI.js";
 import "./chunks/chunk-6VPAU3TV.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-NTNL3ELP.js";
+} from "./chunks/chunk-KYKVBAMI.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -369,7 +369,7 @@ var Card = ({
 import { useInsertionEffect, useRef as useRef2 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var loaderAnimations = ["spin", "pulse", "breathe", "bounce", "flip", "orbit", "wave", "glow", "fill", "shine", "wobble", "radar", "palette"];
-var loaderSizes = { xs: "2rem", sm: "3rem", md: "4rem", lg: "6rem" };
+var loaderSizes = { xs: "2rem", sm: "3rem", md: "4rem", lg: "6rem", xlg: "8rem" };
 var loaderAnimationLabel = (animation, translate2 = tr) => translate2(
   {
     spin: "\u0412\u0440\u0430\u0449\u0435\u043D\u0438\u0435",
@@ -520,7 +520,7 @@ import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var loaderGeneratorAnimations = loaderAnimations.filter(
   (animation) => animation !== "orbit" && animation !== "radar"
 );
-var loaderSizes2 = { xs: 4.5, sm: 6.5, md: 9, lg: 12 };
+var loaderSizes2 = { xs: 4.5, sm: 6.5, md: 9, lg: 12, xlg: 16 };
 var loaderRenderKey = ({ animation }) => animation;
 var loaderSizeItems = Object.keys(loaderSizes2).map((value) => ({
   value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo-ui-kit/react",
-  "version": "1.3.18",
+  "version": "1.4.1",
   "description": "NEO UI — React component library",
   "type": "module",
   "license": "MIT",