@wallarm-org/design-system 4.5.1 → 4.6.0-rc-feat-claude-design.1

package/README.md

@@ -115,6 +115,19 @@ pnpm --filter @wallarm-org/design-system icons:sync --only Bell,BellOff    # ref
 
 The command writes the component files, `src/icons/index.ts`, the gallery category (`module/const.ts`) and Code Connect (`module/Icons.figma.batch.json` + its `Icons.figma.batch.ts` template). `scripts/icons/manifest.json` maps Figma nodes to component names, and also holds excluded nodes and the `keep` list of hand-maintained icons. When a new layer's name collides with an existing icon, map it there. Brand icons without a Neutral variant in Figma get a generated `*Neutral` twin. Commit with `[update-screenshots]` so CI refreshes the icon gallery baselines.
 
+## Claude Design
+
+Choose **Wallarm Design System** in Claude Design to prototype with the generated component
+bundle, tokens, fonts and icons. See the [designer guide](https://wallarm.github.io/design-system/ai/claude-design).
+Run `pnpm --filter @wallarm-org/design-system build:claude-design` to build the package and
+generate the ignored `.claude-design/project/` folder. The bundle and story previews share
+an Rslib IIFE configuration with the native SWC React Compiler targeting React 18.
+Run `pnpm --filter @wallarm-org/design-system test:claude-design` for the React 18 harness and
+producer checks, or `pnpm --filter @wallarm-org/design-system claude-design:verify` to compare
+every output file across two consecutive builds. The repository's `/claude-design-sync`
+skill previews and manually publishes release changes; the first sync and remote deletions
+require confirmation. The npm package remains React 19; the separate canvas bundle uses React 18.
+
 ## 📖 Resources
 
 - [Docs site](https://wallarm.github.io/design-system/) - Guides and component docs

package/dist/components/Calendar/CalendarContent.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { DatePicker, Portal } from "@ark-ui/react";
+import { DatePicker } from "@ark-ui/react";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 const CalendarContent = (t0)=>{

package/dist/components/Drawer/DrawerPortal.d.ts

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { type PortalProps } from '@ark-ui/react/portal';
+import type { PortalProps } from '@ark-ui/react/portal';
 export interface DrawerPortalProps extends PortalProps {
     children: ReactNode;
 }

package/dist/components/Drawer/DrawerPortal.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 const DrawerPortal = (t0)=>{
     const $ = c(6);
     let children;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -146,7 +146,7 @@ const DropdownMenu = (t0)=>{
     const root = t8;
     let t9;
     if ($[36] !== root || $[37] !== testId) {
-        t9 = /*#__PURE__*/ jsx(DropdownMenuContext, {
+        t9 = /*#__PURE__*/ jsx(DropdownMenuContext.Provider, {
             value: ctx,
             children: /*#__PURE__*/ jsx(TestIdProvider, {
                 value: testId,

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement } from "react";
 import { Menu } from "@ark-ui/react/menu";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { TestIdProvider, useTestId } from "../../utils/testId.js";

package/dist/components/FeedbackPulse/FeedbackPulse.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { Presence } from "@ark-ui/react/presence";
 import { Check, X } from "../../icons/index.js";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { Button } from "../Button/index.js";
 import { Textarea } from "../Textarea/index.js";

package/dist/components/FilterCascade/FilterCascadeContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement, useLayoutEffect, useRef } from "react";
-import { Portal } from "@zag-js/react";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { useTestId } from "../../utils/testId.js";

package/dist/components/Popover/PopoverContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Popover, usePopoverContext } from "@ark-ui/react";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { useTestId } from "../../utils/testId.js";

package/dist/components/SearchModal/SearchModalContent.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";
 import { Dialog } from "@ark-ui/react/dialog";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Overlay } from "../Overlay/index.js";

package/dist/components/Select/SelectPositioner.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Select } from "@ark-ui/react/select";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { dropdownMenuClassNames } from "../DropdownMenu/index.js";

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBar.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { Presence } from "@ark-ui/react/presence";
+import { Portal } from "../../../lib/portal/Portal.js";
 import { useTestId } from "../../../utils/testId.js";
 import { BulkBarSummary, BulkBarSummaryClear, BulkBarSummaryCount, BulkBarSummarySelectAll, BulkBarSummarySeparator } from "../../BulkBar/index.js";
 import { HStack } from "../../Stack/index.js";

package/dist/components/Table/TableActionBar/TableActionBar.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement } from "react";
 import { Popover } from "@ark-ui/react/popover";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../../lib/portal/Portal.js";
 import { useTestId } from "../../../utils/testId.js";
 import { bulkBarSurfaceClasses } from "../../BulkBar/classes.js";
 import { HStack } from "../../Stack/index.js";

package/dist/components/Table/TableInner/TableInnerWindow.js

@@ -200,7 +200,7 @@ const TableInnerWindow = (t0)=>{
     } else t17 = $[45];
     let t18;
     if ($[46] !== isEmpty || $[47] !== scrollRoot) {
-        t18 = !isEmpty && /*#__PURE__*/ jsx(WindowScrollRootContext, {
+        t18 = !isEmpty && /*#__PURE__*/ jsx(WindowScrollRootContext.Provider, {
             value: scrollRoot,
             children: /*#__PURE__*/ jsx(TableBody, {})
         });

package/dist/components/Toast/Toaster.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Toaster, createToaster } from "@ark-ui/react/toast";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { EXTENDED_TOAST_DURATION_MS, SIMPLE_TOAST_DURATION_MS, Toast, resolveToastVariant } from "./Toast.js";
 const DEFAULT_TOAST_PRIORITY = {

package/dist/components/Tooltip/TooltipContent.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Tooltip } from "@ark-ui/react/tooltip";
 import { cva } from "class-variance-authority";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { hasNonTextEnd } from "../../utils/hasNonTextEnd.js";
 import { useTestId } from "../../utils/testId.js";

package/dist/components/Tour/TourInner.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal, useTourContext } from "@ark-ui/react";
+import { useTourContext } from "@ark-ui/react";
+import { Portal } from "../../lib/portal/Portal.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { TourBody } from "./TourBody.js";
 import { TourClose } from "./TourClose.js";

package/dist/components/WallyAssistant/WallyAssistant.js

@@ -487,7 +487,7 @@ const WallyAssistant = (t0)=>{
         onFeedback: onFeedback,
         onCopy: onCopy,
         onRetry: onRetry,
-        children: /*#__PURE__*/ jsx(AdapterContext, {
+        children: /*#__PURE__*/ jsx(AdapterContext.Provider, {
             value: outerAdapter ?? LAZY_PRISM,
             children: /*#__PURE__*/ jsxs(Chat, {
                 "aria-label": labels.region,

package/dist/components/WallyAssistant/views/ChatViewProvider.js

@@ -82,7 +82,7 @@ const ChatViewProvider = (t0)=>{
     const value = t11;
     let t12;
     if ($[22] !== children || $[23] !== value) {
-        t12 = /*#__PURE__*/ jsx(ChatViewContext, {
+        t12 = /*#__PURE__*/ jsx(ChatViewContext.Provider, {
             value: value,
             children: children
         });

package/dist/lib/portal/Portal.d.ts

@@ -0,0 +1,3 @@
+import { type PropsWithChildren } from 'react';
+import { type PortalProps } from '@ark-ui/react/portal';
+export declare const Portal: (props: PropsWithChildren<PortalProps>) => import("react").JSX.Element;

package/dist/lib/portal/Portal.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { PortalContainerContext } from "./PortalContainerContext.js";
+const Portal_Portal = (props)=>{
+    const $ = c(3);
+    const container = useContext(PortalContainerContext);
+    const t0 = props.container ?? container ?? void 0;
+    let t1;
+    if ($[0] !== props || $[1] !== t0) {
+        t1 = /*#__PURE__*/ jsx(Portal, {
+            ...props,
+            container: t0
+        });
+        $[0] = props;
+        $[1] = t0;
+        $[2] = t1;
+    } else t1 = $[2];
+    return t1;
+};
+export { Portal_Portal as Portal };

package/dist/lib/portal/PortalContainerContext.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+/** Internal canvas integration; without a provider Ark keeps its normal portal destination. */
+export declare const PortalContainerContext: import("react").Context<RefObject<HTMLElement | null> | null>;

package/dist/lib/portal/PortalContainerContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const PortalContainerContext = createContext(null);
+export { PortalContainerContext };