@smwb/ui-react 2.6.3 → 2.7.0

package/dist/headless/components/inputs/timePicker/timePicker.js

@@ -1,114 +1,116 @@
-import { jsxs as I, Fragment as N, jsx as n } from "react/jsx-runtime";
-import _, { useMemo as U, useState as h, useRef as C, useCallback as i } from "react";
-import { useFloating as $, autoUpdate as q } from "@floating-ui/react";
-import z from "react-transition-group/Transition";
-import { resolvePlacement as G, buildFloatingMiddleware as H } from "../../../utils/floating.js";
-import { useSafeLayoutEffect as J } from "../../../hooks/useSafeLayoutEffect.js";
-import { useForkRef as R } from "../../../hooks/useForkRef.js";
-import { TimePickerInput as K } from "./timePickerInput.js";
-import { TimePickerColumns as Q } from "./timePickerColumns.js";
-import { isValidTimeDate as T } from "./timeUtils.js";
-import { createPortal as W } from "react-dom";
-import { ClickAwayListener as X } from "../../clickAwayListener/clickAwayListener.js";
-const Y = (m) => ({
-  transition: `opacity ${m}ms ease-in-out`,
+import { jsxs as U, Fragment as $, jsx as n } from "react/jsx-runtime";
+import q, { useMemo as z, useState as m, useRef as C, useCallback as a } from "react";
+import { useFloating as G, autoUpdate as H } from "@floating-ui/react";
+import J from "react-transition-group/Transition";
+import { resolvePlacement as K, buildFloatingMiddleware as Q } from "../../../utils/floating.js";
+import { useSafeLayoutEffect as P } from "../../../hooks/useSafeLayoutEffect.js";
+import { useForkRef as T } from "../../../hooks/useForkRef.js";
+import { TimePickerInput as W } from "./timePickerInput.js";
+import { TimePickerColumns as X } from "./timePickerColumns.js";
+import { isValidTimeDate as F } from "./timeUtils.js";
+import { createPortal as Y } from "react-dom";
+import { ClickAwayListener as Z } from "../../clickAwayListener/clickAwayListener.js";
+const ee = (u) => ({
+  transition: `opacity ${u}ms ease-in-out`,
   opacity: 0
-}), Z = {
+}), te = {
   entering: { opacity: 1 },
   entered: { opacity: 1 },
   exiting: { opacity: 0 }
-}, ue = _.forwardRef(function(a, F) {
+}, pe = q.forwardRef(function(i, S) {
   const {
     value: l,
     onChange: r,
-    placement: P = "bottom-start",
+    placement: x = "bottom-start",
     disabled: t,
     disableClock: f,
-    clockAriaLabel: S = "Choose time",
-    format: u,
-    onBlur: x,
-    ...D
-  } = a, o = U(() => l === void 0 ? void 0 : new Date(l), [l]), [E, d] = h(() => T(o) ? o : /* @__PURE__ */ new Date()), [p, s] = h(!1), k = C(null), c = C(null), g = G(P), { refs: w, floatingStyles: O } = $({
-    open: p,
-    placement: g.placement,
-    whileElementsMounted: q,
-    middleware: H(g)
-  }), V = R(k, w.setReference, F), A = R(c, w.setFloating);
-  J(() => {
-    t || d(T(o) ? o : /* @__PURE__ */ new Date());
+    clockAriaLabel: D = "Choose time",
+    format: d,
+    onBlur: E,
+    ...O
+  } = i, o = z(() => l === void 0 ? void 0 : new Date(l), [l]), [V, p] = m(() => F(o) ? o : /* @__PURE__ */ new Date()), [k, s] = m(!1), g = C(null), c = C(null), w = K(x), { refs: y, floatingStyles: A } = G({
+    open: k,
+    placement: w.placement,
+    whileElementsMounted: H,
+    middleware: Q(w)
+  }), B = T(g, y.setReference, S), L = T(c, y.setFloating), [v, M] = m();
+  P(() => {
+    M(document.body);
+  }, []), P(() => {
+    t || p(F(o) ? o : /* @__PURE__ */ new Date());
   }, [o, t]);
-  const B = i(() => {
+  const j = a(() => {
     t || s((e) => !e);
-  }, [t]), L = i((e) => {
-    var v, b;
-    const y = e.target;
-    (v = c.current) != null && v.contains(y) || (b = k.current) != null && b.contains(y) || s(!1);
-  }, []), M = i(
+  }, [t]), I = a((e) => {
+    var h, R;
+    const b = e.target;
+    (h = c.current) != null && h.contains(b) || (R = g.current) != null && R.contains(b) || s(!1);
+  }, []), N = a(
     (e) => {
-      d(e), r == null || r(void 0, e, a);
+      p(e), r == null || r(void 0, e, i);
     },
-    [r, a]
-  ), j = i(() => {
+    [r, i]
+  ), _ = a(() => {
     s(!1);
   }, []);
-  return /* @__PURE__ */ I(N, { children: [
+  return /* @__PURE__ */ U($, { children: [
     /* @__PURE__ */ n(
-      K,
+      W,
       {
-        ref: V,
+        ref: B,
         value: o,
         onChange: r,
-        onBlur: x,
-        onToggle: B,
+        onBlur: E,
+        onToggle: j,
         disabled: t,
         disableClock: f,
-        format: u,
-        ...D
+        format: d,
+        ...O
       }
     ),
-    W(
+    v ? Y(
       /* @__PURE__ */ n(
-        z,
+        J,
         {
           nodeRef: c,
-          in: p && !t && !f,
+          in: k && !t && !f,
           timeout: 150,
           mountOnEnter: !0,
           unmountOnExit: !0,
-          children: (e) => /* @__PURE__ */ n(X, { onClickAway: L, children: /* @__PURE__ */ n(
+          children: (e) => /* @__PURE__ */ n(Z, { onClickAway: I, children: /* @__PURE__ */ n(
             "div",
             {
-              ref: A,
+              ref: L,
               className: "smwb-date-picker smwb-time-picker",
               style: {
-                ...O,
-                ...Y(150),
-                ...Z[e]
+                ...A,
+                ...ee(150),
+                ...te[e]
               },
               "data-testid": "time-picker",
               "data-smwb-overlay-layer": "",
               role: "dialog",
               "aria-modal": "false",
-              "aria-label": S,
+              "aria-label": D,
               children: /* @__PURE__ */ n("div", { className: "smwb-date-picker__inner", children: /* @__PURE__ */ n(
-                Q,
+                X,
                 {
-                  value: E,
-                  format: u,
-                  onChange: M,
-                  onComplete: j
+                  value: V,
+                  format: d,
+                  onChange: N,
+                  onComplete: _
                 }
               ) })
             }
           ) })
         }
       ),
-      document.body
-    )
+      v
+    ) : null
   ] });
 });
 export {
-  ue as TimePicker,
-  ue as default
+  pe as TimePicker,
+  pe as default
 };
 //# sourceMappingURL=timePicker.js.map

package/dist/headless/components/inputs/timePicker/timePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timePicker.js","sources":["../../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface TimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string;\n  placement?: Placement;\n  disableClock?: boolean;\n  label?: string;\n  clockAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  clockIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n}\n\nexport const TimePicker = React.forwardRef(function TimePicker(props: TimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    placement = \"bottom-start\",\n    disabled,\n    disableClock,\n    clockAriaLabel = \"Choose time\",\n    format,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidTimeDate(value) ? value : new Date()));\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const clockRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const clockForkRef = useForkRef(clockRef, refs.setFloating);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (clockRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const onTimeChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onComplete = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <>\n      <TimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableClock={disableClock}\n        format={format}\n        {...rest}\n      />\n      {createPortal(\n        <Transition\n          nodeRef={clockRef}\n          in={isOpen && !disabled && !disableClock}\n          timeout={150}\n          mountOnEnter\n          unmountOnExit\n        >\n          {(state) => (\n            <ClickAwayListener onClickAway={onClickAway}>\n              <div\n                ref={clockForkRef}\n                className=\"smwb-date-picker smwb-time-picker\"\n                style={{\n                  ...floatingStyles,\n                  ...defaultStyle(150),\n                  ...transitionStyles[state],\n                }}\n                data-testid=\"time-picker\"\n                data-smwb-overlay-layer=\"\"\n                role=\"dialog\"\n                aria-modal=\"false\"\n                aria-label={clockAriaLabel}\n              >\n                <div className=\"smwb-date-picker__inner\">\n                  <TimePickerColumns\n                    value={viewValue}\n                    format={format}\n                    onChange={onTimeChange}\n                    onComplete={onComplete}\n                  />\n                </div>\n              </div>\n            </ClickAwayListener>\n          )}\n        </Transition>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default TimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","TimePicker","React","props","ref","valueProp","onChangeProp","placement","disabled","disableClock","clockAriaLabel","format","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidTimeDate","isOpen","setIsOpen","anchorRef","useRef","clockRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","clockForkRef","useSafeLayoutEffect","onToggle","useCallback","prevState","onClickAway","event","target","_a","_b","onTimeChange","next","onComplete","jsxs","Fragment","jsx","TimePickerInput","createPortal","Transition","state","ClickAwayListener","TimePickerColumns"],"mappings":"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"}
+{"version":3,"file":"timePicker.js","sources":["../../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface TimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string;\n  placement?: Placement;\n  disableClock?: boolean;\n  label?: string;\n  clockAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  clockIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n}\n\nexport const TimePicker = React.forwardRef(function TimePicker(props: TimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    placement = \"bottom-start\",\n    disabled,\n    disableClock,\n    clockAriaLabel = \"Choose time\",\n    format,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidTimeDate(value) ? value : new Date()));\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const clockRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const clockForkRef = useForkRef(clockRef, refs.setFloating);\n\n  // The clock is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing there, so the\n  // picker renders and hydrates on a server-rendered page.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (clockRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const onTimeChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onComplete = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <>\n      <TimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableClock={disableClock}\n        format={format}\n        {...rest}\n      />\n      {portalRoot\n        ? createPortal(\n            <Transition\n              nodeRef={clockRef}\n              in={isOpen && !disabled && !disableClock}\n              timeout={150}\n              mountOnEnter\n              unmountOnExit\n            >\n              {(state) => (\n                <ClickAwayListener onClickAway={onClickAway}>\n                  <div\n                    ref={clockForkRef}\n                    className=\"smwb-date-picker smwb-time-picker\"\n                    style={{\n                      ...floatingStyles,\n                      ...defaultStyle(150),\n                      ...transitionStyles[state],\n                    }}\n                    data-testid=\"time-picker\"\n                    data-smwb-overlay-layer=\"\"\n                    role=\"dialog\"\n                    aria-modal=\"false\"\n                    aria-label={clockAriaLabel}\n                  >\n                    <div className=\"smwb-date-picker__inner\">\n                      <TimePickerColumns\n                        value={viewValue}\n                        format={format}\n                        onChange={onTimeChange}\n                        onComplete={onComplete}\n                      />\n                    </div>\n                  </div>\n                </ClickAwayListener>\n              )}\n            </Transition>,\n            portalRoot\n          )\n        : null}\n    </>\n  );\n});\n\nexport default TimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","TimePicker","React","props","ref","valueProp","onChangeProp","placement","disabled","disableClock","clockAriaLabel","format","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidTimeDate","isOpen","setIsOpen","anchorRef","useRef","clockRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","clockForkRef","portalRoot","setPortalRoot","useSafeLayoutEffect","onToggle","useCallback","prevState","onClickAway","event","target","_a","_b","onTimeChange","next","onComplete","jsxs","Fragment","jsx","TimePickerInput","createPortal","Transition","state","ClickAwayListener","TimePickerColumns"],"mappings":"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"}

package/dist/headless/components/layout/sectionHeader/sectionHeader.js

@@ -0,0 +1,65 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import _, { useState as u } from "react";
+import w from "clsx";
+import { Icon as b } from "../../base/icon/icon.js";
+import { Tooltip as N } from "../../feedBack/tooltip/tooltip.js";
+function v({ text: a, label: n }) {
+  const [i, e] = u(!1);
+  return /* @__PURE__ */ s(
+    N,
+    {
+      className: "smwb-section-header__tooltip",
+      message: a,
+      trigger: "manual",
+      open: i,
+      placement: "top",
+      offset: { offsetY: 6 },
+      children: /* @__PURE__ */ s(
+        "span",
+        {
+          className: "smwb-section-header__help",
+          role: "img",
+          "aria-label": n != null ? n : a,
+          tabIndex: 0,
+          onPointerEnter: () => e(!0),
+          onPointerLeave: () => e(!1),
+          onFocus: () => e(!0),
+          onBlur: () => e(!1),
+          onKeyDown: (t) => {
+            t.key === "Escape" && e(!1);
+          },
+          children: /* @__PURE__ */ s(b, { name: "help", size: 16 })
+        }
+      )
+    }
+  );
+}
+const y = _.forwardRef(
+  function({ className: n, title: i, level: e = 2, count: t, help: r, helpLabel: m, titleId: d, subtitle: c, children: l, ...h }, f) {
+    const p = `h${e}`;
+    return /* @__PURE__ */ o(
+      "header",
+      {
+        "data-testid": "section-header",
+        ...h,
+        ref: f,
+        className: w("smwb-section-header", `smwb-section-header_level-${e}`, n),
+        children: [
+          /* @__PURE__ */ o("div", { className: "smwb-section-header__titles", children: [
+            /* @__PURE__ */ o("div", { className: "smwb-section-header__title-line", children: [
+              /* @__PURE__ */ s(p, { id: d, className: "smwb-section-header__title", children: i }),
+              t != null ? /* @__PURE__ */ s("span", { className: "smwb-section-header__count", children: t }) : null,
+              r ? /* @__PURE__ */ s(v, { text: r, label: m }) : null
+            ] }),
+            c ? /* @__PURE__ */ s("div", { className: "smwb-section-header__subtitle", children: c }) : null
+          ] }),
+          l ? /* @__PURE__ */ s("div", { className: "smwb-section-header__actions", children: l }) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  y as SectionHeader
+};
+//# sourceMappingURL=sectionHeader.js.map

package/dist/headless/components/layout/sectionHeader/sectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectionHeader.js","sources":["../../../../../src/components/layout/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { Tooltip } from \"../../feedBack/tooltip\";\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** The section's name. */\n  title: ReactNode;\n  /** Heading level of the title: 2 by default. */\n  level?: 2 | 3 | 4 | 5 | 6;\n  /** How many items the section holds, beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /**\n   * How to read the section, behind a \"?\" icon: shown on hover and on keyboard\n   * focus, and the icon's accessible name. Text only — the tooltip renders in\n   * the browser.\n   */\n  help?: string;\n  /** The \"?\" icon's accessible name, e.g. \"Explanation: …\"; the help text by default. */\n  helpLabel?: string;\n  /** Id of the heading, for anchors and aria-labelledby. */\n  titleId?: string;\n  /** A line under the title. */\n  subtitle?: ReactNode;\n}\n\n/** The \"?\" icon with its tooltip, open on hover and on keyboard focus. */\nfunction HelpHint({ text, label }: { text: string; label?: string }) {\n  const [open, setOpen] = useState(false);\n  return (\n    <Tooltip\n      className=\"smwb-section-header__tooltip\"\n      message={text}\n      trigger=\"manual\"\n      open={open}\n      placement=\"top\"\n      offset={{ offsetY: 6 }}\n    >\n      <span\n        className=\"smwb-section-header__help\"\n        role=\"img\"\n        aria-label={label ?? text}\n        tabIndex={0}\n        onPointerEnter={() => setOpen(true)}\n        onPointerLeave={() => setOpen(false)}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setOpen(false)}\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\") setOpen(false);\n        }}\n      >\n        <Icon name=\"help\" size={16} />\n      </span>\n    </Tooltip>\n  );\n}\n\n/**\n * A section's heading row: the title with a count and a help hint, a subtitle\n * under them, and the section's actions (the children) at the end. On a narrow\n * screen the actions wrap under the title.\n */\nexport const SectionHeader = React.forwardRef<HTMLElement, PropsWithChildren<SectionHeaderProps>>(\n  function SectionHeader(\n    { className, title, level = 2, count, help, helpLabel, titleId, subtitle, children, ...rest },\n    ref\n  ) {\n    const Heading = `h${level}` as \"h2\";\n    return (\n      <header\n        data-testid=\"section-header\"\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-section-header\", `smwb-section-header_level-${level}`, className)}\n      >\n        <div className=\"smwb-section-header__titles\">\n          <div className=\"smwb-section-header__title-line\">\n            <Heading id={titleId} className=\"smwb-section-header__title\">\n              {title}\n            </Heading>\n            {count !== undefined && count !== null ? <span className=\"smwb-section-header__count\">{count}</span> : null}\n            {help ? <HelpHint text={help} label={helpLabel} /> : null}\n          </div>\n          {subtitle ? <div className=\"smwb-section-header__subtitle\">{subtitle}</div> : null}\n        </div>\n        {children ? <div className=\"smwb-section-header__actions\">{children}</div> : null}\n      </header>\n    );\n  }\n);\n\nexport default SectionHeader;\n"],"names":["HelpHint","text","label","open","setOpen","useState","jsx","Tooltip","event","Icon","SectionHeader","React","className","title","level","count","help","helpLabel","titleId","subtitle","children","rest","ref","Heading","jsxs","cn"],"mappings":";;;;;AA4BA,SAASA,EAAS,EAAE,MAAAC,GAAM,OAAAC,KAA2C;AACnE,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AACtC,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAASN;AAAA,MACT,SAAQ;AAAA,MACR,MAAAE;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,EAAE,SAAS,EAAA;AAAA,MAEnB,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAYJ,KAAA,OAAAA,IAASD;AAAA,UACrB,UAAU;AAAA,UACV,gBAAgB,MAAMG,EAAQ,EAAI;AAAA,UAClC,gBAAgB,MAAMA,EAAQ,EAAK;AAAA,UACnC,SAAS,MAAMA,EAAQ,EAAI;AAAA,UAC3B,QAAQ,MAAMA,EAAQ,EAAK;AAAA,UAC3B,WAAW,CAACI,MAAU;AACpB,YAAIA,EAAM,QAAQ,YAAUJ,EAAQ,EAAK;AAAA,UAC3C;AAAA,UAEA,UAAA,gBAAAE,EAACG,GAAA,EAAK,MAAK,QAAO,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9B;AAAA,EAAA;AAGN;AAOO,MAAMC,IAAgBC,EAAM;AAAA,EACjC,SACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,IAAQ,GAAG,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GACvFC,GACA;AACA,UAAMC,IAAU,IAAIT,CAAK;AACzB,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACX,GAAGH;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWG,EAAG,uBAAuB,6BAA6BX,CAAK,IAAIF,CAAS;AAAA,QAEpF,UAAA;AAAA,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAA,gBAAAlB,EAACiB,GAAA,EAAQ,IAAIL,GAAS,WAAU,8BAC7B,UAAAL,GACH;AAAA,cACwBE,KAAU,yBAAQ,QAAA,EAAK,WAAU,8BAA8B,UAAAA,EAAA,CAAM,IAAU;AAAA,cACtGC,IAAO,gBAAAV,EAACN,GAAA,EAAS,MAAMgB,GAAM,OAAOC,GAAW,IAAK;AAAA,YAAA,GACvD;AAAA,YACCE,IAAW,gBAAAb,EAAC,OAAA,EAAI,WAAU,iCAAiC,aAAS,IAAS;AAAA,UAAA,GAChF;AAAA,UACCc,IAAW,gBAAAd,EAAC,OAAA,EAAI,WAAU,gCAAgC,UAAAc,GAAS,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnF;AACF;"}

package/dist/headless/components/navigation/stepper/stepper.js

@@ -1,60 +1,62 @@
-import { jsx as s, jsxs as o } from "react/jsx-runtime";
-import { forwardRef as N, Fragment as y } from "react";
-import _ from "clsx";
-import { Icon as z } from "../../base/icon/icon.js";
-const B = N(function({ className: b, steps: d, activeStep: i, orientation: l = "horizontal", alternativeLabel: w = !1, onStepClick: r, ...h }, u) {
-  return /* @__PURE__ */ s(
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as y, Fragment as z } from "react";
+import w from "clsx";
+import { Icon as D } from "../../base/icon/icon.js";
+const j = 12, T = y(function({ className: h, steps: p, activeStep: m, orientation: o = "horizontal", alternativeLabel: u = !1, onStepClick: r, ...v }, f) {
+  const l = o === "auto", n = /* @__PURE__ */ s(
     "div",
     {
-      ...h,
-      ref: u,
+      ...v,
+      ref: f,
       "data-testid": "stepper",
-      className: _(
+      "data-steps": l ? String(Math.min(p.length, j)) : void 0,
+      className: w(
         "smwb-stepper",
-        `smwb-stepper_${l}`,
-        { "smwb-stepper_alt-label": w && l === "horizontal" },
-        b
+        l ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${o}`,
+        { "smwb-stepper_alt-label": u && o !== "vertical" },
+        h
       ),
-      children: d.map((e, a) => {
-        var n;
-        const m = a < i, c = a === i, v = a === d.length - 1, t = !!r && !e.disabled, f = (p) => {
-          t && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), r == null || r(a));
+      children: p.map((e, a) => {
+        var b;
+        const c = a < m, _ = a === m, N = a === p.length - 1, t = !!r && !e.disabled, g = (i) => {
+          t && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), r == null || r(a));
         };
-        return /* @__PURE__ */ o(y, { children: [
-          /* @__PURE__ */ o(
+        return /* @__PURE__ */ d(z, { children: [
+          /* @__PURE__ */ d(
             "div",
             {
-              className: _("smwb-stepper__step", {
-                "smwb-stepper__step_active": c,
-                "smwb-stepper__step_completed": m,
+              className: w("smwb-stepper__step", {
+                "smwb-stepper__step_active": _,
+                "smwb-stepper__step_completed": c,
                 "smwb-stepper__step_error": e.error,
                 "smwb-stepper__step_disabled": e.disabled,
                 "smwb-stepper__step_clickable": t
               }),
-              "aria-current": c ? "step" : void 0,
+              "aria-current": _ ? "step" : void 0,
               "aria-disabled": e.disabled || void 0,
               role: t ? "button" : void 0,
               tabIndex: t ? 0 : void 0,
               onClick: t ? () => r == null ? void 0 : r(a) : void 0,
-              onKeyDown: t ? f : void 0,
+              onKeyDown: t ? g : void 0,
               children: [
-                /* @__PURE__ */ s("div", { className: "smwb-stepper__icon", "aria-hidden": "true", children: (n = e.icon) != null ? n : m ? /* @__PURE__ */ s(z, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
-                /* @__PURE__ */ o("div", { className: "smwb-stepper__text", children: [
+                /* @__PURE__ */ s("div", { className: "smwb-stepper__icon", "aria-hidden": "true", children: (b = e.icon) != null ? b : c ? /* @__PURE__ */ s(D, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
+                /* @__PURE__ */ d("div", { className: "smwb-stepper__text", children: [
                   /* @__PURE__ */ s("span", { className: "smwb-stepper__label", children: e.label }),
                   e.optional ? /* @__PURE__ */ s("span", { className: "smwb-stepper__optional", children: e.optional }) : null,
-                  e.description && l === "vertical" ? /* @__PURE__ */ s("span", { className: "smwb-stepper__description", children: e.description }) : null
+                  e.description ? /* @__PURE__ */ s("span", { className: "smwb-stepper__description", children: e.description }) : null
                 ] })
               ]
             }
           ),
-          v ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
+          N ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
         ] }, a);
       })
     }
   );
+  return l ? /* @__PURE__ */ s("div", { className: "smwb-stepper-auto", children: n }) : n;
 });
 export {
-  B as Stepper,
-  B as default
+  T as Stepper,
+  T as default
 };
 //# sourceMappingURL=stepper.js.map

package/dist/headless/components/navigation/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":["../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { forwardRef, Fragment, HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface StepItem {\n  label: ReactNode;\n  description?: ReactNode;\n  optional?: ReactNode;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: ReactNode;\n}\n\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n}\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  { className, steps, activeStep, orientation = \"horizontal\", alternativeLabel = false, onStepClick, ...props },\n  ref\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"stepper\"\n      className={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation === \"horizontal\" },\n        className\n      )}\n    >\n      {steps.map((step, index) => {\n        const completed = index < activeStep;\n        const active = index === activeStep;\n        const isLast = index === steps.length - 1;\n        const clickable = Boolean(onStepClick) && !step.disabled;\n\n        const onStepKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n          if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n            event.preventDefault();\n            onStepClick?.(index);\n          }\n        };\n\n        return (\n          <Fragment key={index}>\n            <div\n              className={cn(\"smwb-stepper__step\", {\n                \"smwb-stepper__step_active\": active,\n                \"smwb-stepper__step_completed\": completed,\n                \"smwb-stepper__step_error\": step.error,\n                \"smwb-stepper__step_disabled\": step.disabled,\n                \"smwb-stepper__step_clickable\": clickable,\n              })}\n              aria-current={active ? \"step\" : undefined}\n              aria-disabled={step.disabled || undefined}\n              role={clickable ? \"button\" : undefined}\n              tabIndex={clickable ? 0 : undefined}\n              onClick={clickable ? () => onStepClick?.(index) : undefined}\n              onKeyDown={clickable ? onStepKeyDown : undefined}\n            >\n              <div className=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                {step.icon ?? (completed ? <Icon name=\"check\" size={16} /> : <span>{index + 1}</span>)}\n              </div>\n              <div className=\"smwb-stepper__text\">\n                <span className=\"smwb-stepper__label\">{step.label}</span>\n                {step.optional ? <span className=\"smwb-stepper__optional\">{step.optional}</span> : null}\n                {step.description && orientation === \"vertical\" ? (\n                  <span className=\"smwb-stepper__description\">{step.description}</span>\n                ) : null}\n              </div>\n            </div>\n            {!isLast ? <div className=\"smwb-stepper__connector\" aria-hidden=\"true\" /> : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default Stepper;\n"],"names":["Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","props","ref","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;AA4BO,MAAMA,IAAUC,EAAyC,SAC9D,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,IAAc,cAAc,kBAAAC,IAAmB,IAAO,aAAAC,GAAa,GAAGC,EAAA,GACtGC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACA,gBAAgBN,CAAW;AAAA,QAC3B,EAAE,0BAA0BC,KAAoBD,MAAgB,aAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACS,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQT,GACpBW,IAASF,MAAUT,GACnBY,IAASH,MAAUV,EAAM,SAAS,GAClCc,IAAY,EAAQV,KAAgB,CAACK,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNZ,KAAA,QAAAA,EAAcM;AAAA,QAElB;AAEA,iCACGO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWV,EAAG,sBAAsB;AAAA,gBAClC,6BAA6BI;AAAA,gBAC7B,gCAAgCD;AAAA,gBAChC,4BAA4BF,EAAK;AAAA,gBACjC,+BAA+BA,EAAK;AAAA,gBACpC,gCAAgCK;AAAA,cAAA,CACjC;AAAA,cACD,gBAAcF,IAAS,SAAS;AAAA,cAChC,iBAAeH,EAAK,YAAY;AAAA,cAChC,MAAMK,IAAY,WAAW;AAAA,cAC7B,UAAUA,IAAY,IAAI;AAAA,cAC1B,SAASA,IAAY,MAAMV,KAAA,gBAAAA,EAAcM,KAAS;AAAA,cAClD,WAAWI,IAAYC,IAAgB;AAAA,cAEvC,UAAA;AAAA,gBAAA,gBAAAR,EAAC,SAAI,WAAU,sBAAqB,eAAY,QAC7C,WAAAY,IAAAV,EAAK,SAAL,OAAAU,IAAcR,IAAY,gBAAAJ,EAACa,KAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,sBAAM,QAAA,EAAM,UAAAV,IAAQ,GAAE,EAAA,CAChF;AAAA,gBACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,kBAAA,gBAAAX,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAE,EAAK,OAAM;AAAA,kBACjDA,EAAK,WAAW,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAE,EAAK,UAAS,IAAU;AAAA,kBAClFA,EAAK,eAAeP,MAAgB,aACnC,gBAAAK,EAAC,UAAK,WAAU,6BAA6B,UAAAE,EAAK,YAAA,CAAY,IAC5D;AAAA,gBAAA,EAAA,CACN;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GA3B/DG,CA4Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"stepper.js","sources":["../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { forwardRef, Fragment, HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface StepItem {\n  label: ReactNode;\n  /** Longer text under the label, in every orientation. */\n  description?: ReactNode;\n  optional?: ReactNode;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: ReactNode;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  { className, steps, activeStep, orientation = \"horizontal\", alternativeLabel = false, onStepClick, ...props },\n  ref\n) {\n  const auto = orientation === \"auto\";\n  const stepper = (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"stepper\"\n      data-steps={auto ? String(Math.min(steps.length, AUTO_MAX_STEPS)) : undefined}\n      className={cn(\n        \"smwb-stepper\",\n        auto ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation !== \"vertical\" },\n        className\n      )}\n    >\n      {steps.map((step, index) => {\n        const completed = index < activeStep;\n        const active = index === activeStep;\n        const isLast = index === steps.length - 1;\n        const clickable = Boolean(onStepClick) && !step.disabled;\n\n        const onStepKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n          if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n            event.preventDefault();\n            onStepClick?.(index);\n          }\n        };\n\n        return (\n          <Fragment key={index}>\n            <div\n              className={cn(\"smwb-stepper__step\", {\n                \"smwb-stepper__step_active\": active,\n                \"smwb-stepper__step_completed\": completed,\n                \"smwb-stepper__step_error\": step.error,\n                \"smwb-stepper__step_disabled\": step.disabled,\n                \"smwb-stepper__step_clickable\": clickable,\n              })}\n              aria-current={active ? \"step\" : undefined}\n              aria-disabled={step.disabled || undefined}\n              role={clickable ? \"button\" : undefined}\n              tabIndex={clickable ? 0 : undefined}\n              onClick={clickable ? () => onStepClick?.(index) : undefined}\n              onKeyDown={clickable ? onStepKeyDown : undefined}\n            >\n              <div className=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                {step.icon ?? (completed ? <Icon name=\"check\" size={16} /> : <span>{index + 1}</span>)}\n              </div>\n              <div className=\"smwb-stepper__text\">\n                <span className=\"smwb-stepper__label\">{step.label}</span>\n                {step.optional ? <span className=\"smwb-stepper__optional\">{step.optional}</span> : null}\n                {step.description ? <span className=\"smwb-stepper__description\">{step.description}</span> : null}\n              </div>\n            </div>\n            {!isLast ? <div className=\"smwb-stepper__connector\" aria-hidden=\"true\" /> : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return auto ? <div className=\"smwb-stepper-auto\">{stepper}</div> : stepper;\n});\n\nexport default Stepper;\n"],"names":["AUTO_MAX_STEPS","Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","props","ref","auto","stepper","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;AAsCA,MAAMA,IAAiB,IAEVC,IAAUC,EAAyC,SAC9D,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,IAAc,cAAc,kBAAAC,IAAmB,IAAO,aAAAC,GAAa,GAAGC,EAAA,GACtGC,GACA;AACA,QAAMC,IAAOL,MAAgB,QACvBM,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,cAAYC,IAAO,OAAO,KAAK,IAAIP,EAAM,QAAQJ,CAAc,CAAC,IAAI;AAAA,MACpE,WAAWc;AAAA,QACT;AAAA,QACAH,IAAO,8CAA8C,gBAAgBL,CAAW;AAAA,QAChF,EAAE,0BAA0BC,KAAoBD,MAAgB,WAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACW,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQX,GACpBa,IAASF,MAAUX,GACnBc,IAASH,MAAUZ,EAAM,SAAS,GAClCgB,IAAY,EAAQZ,KAAgB,CAACO,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNd,KAAA,QAAAA,EAAcQ;AAAA,QAElB;AAEA,iCACGO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWV,EAAG,sBAAsB;AAAA,gBAClC,6BAA6BI;AAAA,gBAC7B,gCAAgCD;AAAA,gBAChC,4BAA4BF,EAAK;AAAA,gBACjC,+BAA+BA,EAAK;AAAA,gBACpC,gCAAgCK;AAAA,cAAA,CACjC;AAAA,cACD,gBAAcF,IAAS,SAAS;AAAA,cAChC,iBAAeH,EAAK,YAAY;AAAA,cAChC,MAAMK,IAAY,WAAW;AAAA,cAC7B,UAAUA,IAAY,IAAI;AAAA,cAC1B,SAASA,IAAY,MAAMZ,KAAA,gBAAAA,EAAcQ,KAAS;AAAA,cAClD,WAAWI,IAAYC,IAAgB;AAAA,cAEvC,UAAA;AAAA,gBAAA,gBAAAR,EAAC,SAAI,WAAU,sBAAqB,eAAY,QAC7C,WAAAY,IAAAV,EAAK,SAAL,OAAAU,IAAcR,IAAY,gBAAAJ,EAACa,KAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,sBAAM,QAAA,EAAM,UAAAV,IAAQ,GAAE,EAAA,CAChF;AAAA,gBACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,kBAAA,gBAAAX,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAE,EAAK,OAAM;AAAA,kBACjDA,EAAK,WAAW,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAE,EAAK,UAAS,IAAU;AAAA,kBAClFA,EAAK,cAAc,gBAAAF,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAE,EAAK,aAAY,IAAU;AAAA,gBAAA,EAAA,CAC9F;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GAzB/DG,CA0Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAML,SAAOL,IAAO,gBAAAE,EAAC,OAAA,EAAI,WAAU,qBAAqB,aAAQ,IAASD;AACrE,CAAC;"}

package/dist/headless/components/navigation/tabs/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || undefined}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n      {...rest}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;AAcO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA,IACb,GAAGC;AAAA,EAAA,IACDX,GACEY,IAAYb,EAAM,OAAyB,IAAI,GAE/Cc,IAAc,CAACC,MAAmE;AACtF,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMT,KAAA,OAAAA,IAAQA,KAAO,UACrBU,IAAUC,EAAG,YAAYjB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAW;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,WAAWiB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MACA,MAAM;AAAA,MACN,iBAAeX;AAAA,MACf,iBAAeK,KAAY;AAAA,MAC3B,UAAUL,IAAW,IAAI;AAAA,MACzB,UAAUa,MAAQ,WAAWR,IAAW;AAAA,MACvC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKf,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAe,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAf,GAAK;AAAA,UAC/CH,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAlB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAkB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}
+{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || undefined}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n      {...rest}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;AAgBO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA,IACb,GAAGC;AAAA,EAAA,IACDX,GACEY,IAAYb,EAAM,OAAyB,IAAI,GAE/Cc,IAAc,CAACC,MAAmE;AACtF,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMT,KAAA,OAAAA,IAAQA,KAAO,UACrBU,IAAUC,EAAG,YAAYjB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAW;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,WAAWiB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MACA,MAAM;AAAA,MACN,iBAAeX;AAAA,MACf,iBAAeK,KAAY;AAAA,MAC3B,UAAUL,IAAW,IAAI;AAAA,MACzB,UAAUa,MAAQ,WAAWR,IAAW;AAAA,MACvC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKf,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAe,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAf,GAAK;AAAA,UAC/CH,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAlB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAkB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}