@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/chunk-Y6KT7ZTR.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+// src/components/layout/resizable-region/internal/resize-grip.tsx
+function ResizeGrip({ axis }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      children: axis === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M9 6v12" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 6v12" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 9h12" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 15h12" })
+      ] })
+    }
+  );
+}
+var clampRegionSize = (size, min, max) => Math.min(max, Math.max(min, Math.round(size)));
+var resizeRegionFromPointer = (startSize, delta, edge) => startSize + delta * (edge === "start" ? -1 : 1);
+function ResizableRegion({
+  id,
+  label,
+  size,
+  min,
+  max,
+  axis = "horizontal",
+  edge = "end",
+  collapsed = false,
+  transitioning = false,
+  separator = "auto",
+  collapseMotion = "slide",
+  contentOverflow = "clip",
+  presentation = "inline",
+  restoreControl,
+  restorePosition = axis === "horizontal" && edge === "end" ? "bottom-start" : "bottom-end",
+  restorePlacement = "corner",
+  restoreInset,
+  responsiveFillAt,
+  handleIcon,
+  children
+}) {
+  const expandedSize = clampRegionSize(size, min, max);
+  const resolved = collapsed ? 0 : expandedSize;
+  const orientation = axis === "horizontal" ? "vertical" : "horizontal";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        class: "kui-resizable-region",
+        "data-component": "resizable-region",
+        "data-region-id": id,
+        "data-axis": axis,
+        "data-edge": edge,
+        "data-collapsed": String(collapsed),
+        "data-transitioning": String(transitioning),
+        "data-separator": separator,
+        "data-collapse-motion": collapseMotion,
+        "data-content-overflow": contentOverflow,
+        "data-presentation": presentation,
+        "data-responsive-fill-at": responsiveFillAt,
+        style: `--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`,
+        "aria-label": label,
+        "aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
+        inert: collapsed,
+        children: [
+          /* @__PURE__ */ jsx("div", { class: "kui-resizable-region__content", inert: collapsed, children }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "kui-resizable-region__handle",
+              role: "separator",
+              tabindex: collapsed || presentation !== "inline" ? "-1" : "0",
+              "aria-label": `Resize ${label}`,
+              "aria-orientation": orientation,
+              "aria-valuemin": collapsed ? 0 : min,
+              "aria-valuemax": max,
+              "aria-valuenow": resolved,
+              "aria-hidden": collapsed || presentation !== "inline" ? "true" : void 0,
+              "data-kui-resize-handle": true,
+              "data-region-id": id,
+              children: /* @__PURE__ */ jsx("span", { class: "kui-resizable-region__handle-icon", "aria-hidden": "true", children: handleIcon ?? /* @__PURE__ */ jsx(ResizeGrip, { axis }) })
+            }
+          )
+        ]
+      }
+    ),
+    collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "kui-resizable-region__restore",
+        "data-region-restore": id,
+        "data-position": restorePosition,
+        "data-placement": restorePlacement,
+        style: restoreInset ? `--kui-resizable-region-restore-inset:${restoreInset}` : void 0,
+        children: restoreControl
+      }
+    )
+  ] });
+}
+
+export { ResizableRegion, ResizeGrip, clampRegionSize, resizeRegionFromPointer };
+
+//# sourceMappingURL=chunk-Y6KT7ZTR.js.map

package/dist/chunk-Y6KT7ZTR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/resizable-region/internal/resize-grip.tsx","../src/components/layout/resizable-region/resizable-region.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":"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","file":"chunk-Y6KT7ZTR.js","sourcesContent":["import type { ResizableRegionAxis } from '../resizable-region.js';\n\n/**\n * The dormant two-line grip a resize separator shows on hover and focus. Shared\n * by `ResizableRegion` and resizable `Workbench` panels so both separators read\n * the same. Internal.\n */\nexport function ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    >\n      {axis === 'horizontal' ? (\n        <>\n          <path d=\"M9 6v12\" />\n          <path d=\"M15 6v12\" />\n        </>\n      ) : (\n        <>\n          <path d=\"M6 9h12\" />\n          <path d=\"M6 15h12\" />\n        </>\n      )}\n    </svg>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { ResizeGrip } from './internal/resize-grip.js';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\nexport type ResizableRegionSeparator = 'auto' | 'hidden';\nexport type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';\nexport type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';\nexport type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';\nexport type ResizableRegionRestorePosition =\n  'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\nexport type ResizableRegionResponsiveFillAt = 'compact' | 'narrow';\n\nexport interface ResizableRegionProps {\n  id: string;\n  label: string;\n  size: number;\n  min: number;\n  max: number;\n  axis?: ResizableRegionAxis;\n  edge?: ResizableRegionEdge;\n  /** Snap the track to zero. The region renders `inert` and `aria-hidden`\n   * while collapsed, so neither Tab nor assistive technology reaches it or\n   * lands on an empty landmark; `restoreControl` renders outside the region. */\n  collapsed?: boolean;\n  transitioning?: boolean;\n  /** Whether the separator line is painted. The resize hit target remains available. */\n  separator?: ResizableRegionSeparator;\n  /** Keep the track change instant while optionally sliding the fixed-size content. */\n  collapseMotion?: ResizableRegionCollapseMotion;\n  /** Use `visible` while an anchored popup must escape the content box; it raises the region to the popup layer. */\n  contentOverflow?: ResizableRegionContentOverflow;\n  /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */\n  presentation?: ResizableRegionPresentation;\n  /** Always-available control rendered while collapsed, outside the clipped region. */\n  restoreControl?: SafeHtml;\n  /** Safe-area-aware corner of the region's container (not the viewport) for `restoreControl`. */\n  restorePosition?: ResizableRegionRestorePosition;\n  /** Position a restore control in its container corner or leave it in normal flow. */\n  restorePlacement?: 'corner' | 'inline';\n  /** Corner distance before the container's safe-area inset. */\n  restoreInset?: CssLength;\n  /** Fill the available inline track and hide the separator below a container breakpoint. */\n  responsiveFillAt?: ResizableRegionResponsiveFillAt;\n  /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */\n  handleIcon?: SafeHtml;\n  children: KerfUiContent;\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) =>\n  Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (\n  startSize: number,\n  delta: number,\n  edge: ResizableRegionEdge,\n) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nexport function ResizableRegion({\n  id,\n  label,\n  size,\n  min,\n  max,\n  axis = 'horizontal',\n  edge = 'end',\n  collapsed = false,\n  transitioning = false,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = axis === 'horizontal' && edge === 'end'\n    ? 'bottom-start'\n    : 'bottom-end',\n  restorePlacement = 'corner',\n  restoreInset,\n  responsiveFillAt,\n  handleIcon,\n  children,\n}: ResizableRegionProps) {\n  const expandedSize = clampRegionSize(size, min, max);\n  const resolved = collapsed ? 0 : expandedSize;\n  const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n  return (\n    <>\n      <section\n        class=\"kui-resizable-region\"\n        data-component=\"resizable-region\"\n        data-region-id={id}\n        data-axis={axis}\n        data-edge={edge}\n        data-collapsed={String(collapsed)}\n        data-transitioning={String(transitioning)}\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        data-responsive-fill-at={responsiveFillAt}\n        style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`}\n        aria-label={label}\n        // Collapsed, the labeled region leaves the accessibility tree whole\n        // (its content is inert and its separator already hidden), so no\n        // empty landmark stays behind; the restore control is a sibling.\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        inert={collapsed}\n      >\n        <div class=\"kui-resizable-region__content\" inert={collapsed}>\n          {children}\n        </div>\n        <div\n          class=\"kui-resizable-region__handle\"\n          role=\"separator\"\n          tabindex={collapsed || presentation !== 'inline' ? '-1' : '0'}\n          aria-label={`Resize ${label}`}\n          aria-orientation={orientation}\n          aria-valuemin={collapsed ? 0 : min}\n          aria-valuemax={max}\n          aria-valuenow={resolved}\n          aria-hidden={\n            collapsed || presentation !== 'inline' ? 'true' : undefined\n          }\n          data-kui-resize-handle\n          data-region-id={id}\n        >\n          <span class=\"kui-resizable-region__handle-icon\" aria-hidden=\"true\">\n            {handleIcon ?? <ResizeGrip axis={axis} />}\n          </span>\n        </div>\n      </section>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-resizable-region__restore\"\n          data-region-restore={id}\n          data-position={restorePosition}\n          data-placement={restorePlacement}\n          style={\n            restoreInset\n              ? `--kui-resizable-region-restore-inset:${restoreInset}`\n              : undefined\n          }\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/dist/chunk-YMUIQRWK.js

@@ -0,0 +1,44 @@
+import { space } from './chunk-IQSRHXZR.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var spaceNames = [
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl"
+];
+function dimension(value) {
+  return spaceNames.includes(value) ? space(value) : value;
+}
+function Spacer({
+  flex = false,
+  width,
+  height,
+  className = "",
+  slot
+}) {
+  const widthValue = dimension(width);
+  const heightValue = dimension(height);
+  const style = [
+    widthValue ? `width:${widthValue}` : "",
+    heightValue ? `height:${heightValue}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-spacer ${className}`.trim(),
+      "data-component": "spacer",
+      "data-flex": String(flex),
+      "aria-hidden": "true",
+      style: style || void 0,
+      slot
+    }
+  );
+}
+
+export { Spacer };
+
+//# sourceMappingURL=chunk-YMUIQRWK.js.map

package/dist/chunk-YMUIQRWK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/spacer/spacer.tsx"],"names":[],"mappings":";;;AAMA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAcA,SAAS,UAAU,KAAA,EAAwD;AACzE,EAAA,OAAO,WAAW,QAAA,CAAS,KAAoB,CAAA,GAC3C,KAAA,CAAM,KAAoB,CAAA,GACzB,KAAA;AACP;AAGO,SAAS,MAAA,CAAO;AAAA,EACrB,IAAA,GAAO,KAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,UAAA,GAAa,UAAU,KAAK,CAAA;AAClC,EAAA,MAAM,WAAA,GAAc,UAAU,MAAM,CAAA;AACpC,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA,GAAa,CAAA,MAAA,EAAS,UAAU,CAAA,CAAA,GAAK,EAAA;AAAA,IACrC,WAAA,GAAc,CAAA,OAAA,EAAU,WAAW,CAAA,CAAA,GAAK;AAAA,GAC1C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,WAAA,EAAc,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACtC,gBAAA,EAAe,QAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,aAAA,EAAY,MAAA;AAAA,MACZ,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB;AAAA;AAAA,GACF;AAEJ","file":"chunk-YMUIQRWK.js","sourcesContent":["import {\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface SpacerProps {\n  /** Grow and shrink to fill the available space along a parent's flex axis. */\n  flex?: boolean;\n  /** A named UI spacing token or typed physical width. */\n  width?: UiSpaceName | CssLength;\n  /** A named UI spacing token or typed physical height. */\n  height?: UiSpaceName | CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction dimension(value?: UiSpaceName | CssLength): CssLength | undefined {\n  return spaceNames.includes(value as UiSpaceName)\n    ? space(value as UiSpaceName)\n    : (value as CssLength | undefined);\n}\n\n/** A decorative fixed-size or flexible gap for Row, List, and other flex layouts. */\nexport function Spacer({\n  flex = false,\n  width,\n  height,\n  className = '',\n  slot,\n}: SpacerProps) {\n  const widthValue = dimension(width);\n  const heightValue = dimension(height);\n  const style = [\n    widthValue ? `width:${widthValue}` : '',\n    heightValue ? `height:${heightValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-spacer ${className}`.trim()}\n      data-component=\"spacer\"\n      data-flex={String(flex)}\n      aria-hidden=\"true\"\n      style={style || undefined}\n      slot={slot}\n    />\n  );\n}\n\nexport type {\n  CssLength,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}