@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/dist/esm/core/headfoot/HeadFoot.js

@@ -1,61 +1,159 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
-import classes from './HeadFoot.module.css';
-import { jsx } from 'react/jsx-runtime';
+import { cn } from '@react-fabric/utilities';
+import { useState, useLayoutEffect, useEffect, Activity } from 'react';
+import { useGlobals } from '../../context/context.js';
+import { usePropToggle } from '../../hooks/usePropToggle.js';
+import { useResize } from '../../hooks/useResize.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["as", "children", "className", "bg", "color", "flex", "area", "dir", "align", "justify"];
+var _excluded = ["as", "id", "children", "className", "flex", "height", "maxHeight", "minHeight", "collapsed", "collapsable", "resizeable", "align", "justify", "hideCollapseHandle", "onCollapse", "onResize"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var HeadFoot = function HeadFoot(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ALIGN_MAP = {
+  start: "items-start",
+  end: "items-end",
+  center: "items-center",
+  stretch: "items-stretch"
+};
+var JUSTIFY_MAP = {
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center",
+  between: "justify-between"
+};
+function HeadFoot(_ref) {
   var E = _ref.as,
+    id = _ref.id,
     children = _ref.children,
     className = _ref.className,
-    bg = _ref.bg,
-    color = _ref.color,
     flex = _ref.flex,
-    area = _ref.area,
-    dir = _ref.dir,
+    ht = _ref.height,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? "50vh" : _ref$maxHeight,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? "10px" : _ref$minHeight,
+    _collapsed = _ref.collapsed,
+    collapsable = _ref.collapsable,
+    resizeable = _ref.resizeable,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? "center" : _ref$align,
     _ref$justify = _ref.justify,
     justify = _ref$justify === void 0 ? "start" : _ref$justify,
-    aria = _objectWithoutProperties(_ref, _excluded);
-  /** ***************** style map *******************/
-  var styles = useMemoDebugger(function () {
-    var s = {};
-    if (bg) {
-      s.backgroundColor = getColor(bg);
+    hideCollapseHandle = _ref.hideCollapseHandle,
+    onCollapse = _ref.onCollapse,
+    onResize = _ref.onResize,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useGlobals = useGlobals(),
+    registerArea = _useGlobals.registerArea,
+    unregisterArea = _useGlobals.unregisterArea;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var _usePropToggle = usePropToggle(_collapsed, onCollapse),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
+    collapsed = _usePropToggle2[0],
+    onToggle = _usePropToggle2[1];
+  var _useResize = useResize(function (_ref2) {
+      var y = _ref2.y;
+      setHeight(function () {
+        var h = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        return h + y;
+      });
+    }, {
+      isVertical: true,
+      isReverse: E === "footer",
+      onEnd: function onEnd() {
+        var _ref$current;
+        var height = (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.previousElementSibling) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetHeight;
+        setHeight(height);
+        onResize === null || onResize === void 0 || onResize(height !== null && height !== void 0 ? height : 0);
+      }
+    }),
+    ref = _useResize.ref,
+    isResizing = _useResize.isResizing,
+    onMouseDown = _useResize.onMouseDown;
+  useLayoutEffect(function () {
+    var _ref$current2;
+    var height = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2 = _ref$current2.previousElementSibling) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight;
+    if (resizeable && height > 0) {
+      var tmr = setTimeout(function () {
+        return setHeight(height);
+      }, 50);
+      return function () {
+        return clearTimeout(tmr);
+      };
     }
-    if (color) {
-      s.color = getColor(color);
+  }, [ref, resizeable]);
+  useEffect(function () {
+    if (id) {
+      registerArea(id, function (open) {
+        onToggle(open);
+      });
+      return function () {
+        return unregisterArea(id);
+      };
     }
-    return s;
-  }, [bg], "HeadFoot styles");
-  return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-    dir: dir,
-    className: classNames(classes.headfoot, className, bg && getBgClass(bg), color && getColorClass(color), area === "head" ? "area-head" : "area-foot", "leading-none", flex && "flex flex-nowrap gap-px", align && "items-".concat(align), justify && "justify-".concat(justify)),
-    style: styles
-  }, aria), {}, {
-    children: children
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [id]);
+  return /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({}, props), {}, {
+    "aria-roledescription": E === "header" ? "header-pane" : "footer-pane",
+    className: cn("fabric-headfoot relative flex z-1", E === "header" ? "area-header flex-col" : "area-footer flex-col-reverse"),
+    children: [/*#__PURE__*/jsxs(Activity, {
+      mode: collapsed ? "hidden" : "visible",
+      children: [/*#__PURE__*/jsx("div", {
+        className: cn(className, flex && "flex flex-nowrap", align && "".concat(ALIGN_MAP[align]), justify && "".concat(JUSTIFY_MAP[justify])),
+        style: {
+          height: height !== null && height !== void 0 ? height : ht,
+          minHeight: minHeight,
+          maxHeight: maxHeight
+        },
+        children: children
+      }), /*#__PURE__*/jsx("div", {
+        ref: ref,
+        role: "none",
+        "data-ref": "resize-handle",
+        onMouseDown: onMouseDown,
+        className: cn("relative", resizeable && "before:absolute before:block before:top-0 before:left-1/2 before:-translate-x-1/2 before:content-['⋯'] before:leading-0", "after:absolute after:transform-[width] after:border-solid after:border-t-2 after:w-0 after:m-auto after:inset-0 after:border-t-primary-500", resizeable && "hover:after:duration-500 hover:after:w-full", isResizing && "after:w-full", collapsed && "pointer-events-none", resizeable ? "h-1 cursor-row-resize bg-tint-50 border-y border-tint-300/50 -my-px" : "h-0 border-0 pointer-events-none")
+      })]
+    }), collapsable && !hideCollapseHandle && /*#__PURE__*/jsx("div", {
+      role: "none",
+      className: cn("absolute z-1 w-16 h-2 leading-0 mx-auto inset-x-0", "bg-dimmed text-dimmed outline outline-tint-200/50 text-center rounded-sm cursor-pointer pointer-events-auto", E === "header" ? "rounded-t-none -bottom-2" : "rounded-b-none -top-2", !collapsed && "opacity-70 hover:opacity-100"),
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick() {
+        return onToggle();
+      },
+      children: /*#__PURE__*/jsx("i", {
+        className: "-mt-1 inline-block " + (collapsed && E === "header" || !collapsed && E === "footer" ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-up]")
+      })
+    })]
   }));
-};
-var Header = function Header(props) {
+}
+
+/**
+ * Header component wrapping children in a header element. Delegates to HeadFoot with `as="header"`.
+ */
+function Header(props) {
   return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
     as: "header",
-    area: "head"
+    "data-ref": "header"
   }, props));
-};
-var Footer = function Footer(props) {
+}
+
+/**
+ * Footer component wrapping children in a footer element. Delegates to HeadFoot with `as="footer"`.
+ */
+function Footer(props) {
   return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
     as: "footer",
-    area: "foot"
+    "data-ref": "footer"
   }, props));
-};
+}
 
 export { Footer, Header };

package/dist/esm/core/layout/Layout.js

@@ -0,0 +1,28 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { cn } from '@react-fabric/utilities';
+import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "className", "ref"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Layout(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("section", _objectSpread(_objectSpread({}, rest), {}, {
+    "data-ref": "layout",
+    ref: ref,
+    "aria-roledescription": "layout-panel",
+    className: cn("fabric-layout", className, "sectioned area-content overflow-hidden"),
+    children: /*#__PURE__*/jsx(ErrorBoundary, {
+      children: children
+    })
+  }));
+}
+
+export { Layout };

package/dist/esm/core/responsive/Responsive.js

@@ -2,34 +2,56 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import classes from './Responsive.module.css';
+import { cn } from '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "fullWidth", "className", "gutter"],
-  _excluded2 = ["children", "gutter", "noWrap", "orient", "align", "justify", "className"],
-  _excluded3 = ["children", "flex", "align", "className", "stretchContent"];
+var _excluded = ["children", "fullWidth", "className", "useContainer"],
+  _excluded2 = ["children", "noWrap", "orient", "align", "justify", "className"],
+  _excluded3 = ["children", "flex", "align", "truncate", "className", "stretchContent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ALIGN_MAP = {
+  start: "items-start",
+  end: "items-end",
+  center: "items-center",
+  stretch: "items-stretch"
+};
+var JUSTIFY_MAP = {
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center",
+  between: "justify-between"
+};
+var FLEX_MAP = {
+  span: "flex-span",
+  fill: "flex-1",
+  full: "flex-full",
+  initial: "flex-initial",
+  content: "flex-content"
+};
+
 /**
- * Responsive layout container
+ * Container that wraps children in a div with optional full-width and container-size queries.
  */
-var Container = function Container(_ref) {
+function Container(_ref) {
   var children = _ref.children,
     fullWidth = _ref.fullWidth,
     className = _ref.className,
-    gutter = _ref.gutter,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    useContainer = _ref.useContainer,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.container, className, !fullWidth && "container mx-auto"),
-    "data-gutter": gutter
-  }, aria), {}, {
+    className: cn("fabric-container", className, !fullWidth && (useContainer ? "container-inner" : "container"), " mx-auto"),
+    "aria-roledescription": "flex-container"
+  }, props), {}, {
     children: children
   }));
-};
-var Row = function Row(_ref2) {
+}
+
+/**
+ * Row component with flex layout, supporting orientation, alignment, and wrapping.
+ */
+function Row(_ref2) {
   var children = _ref2.children,
-    gutter = _ref2.gutter,
     noWrap = _ref2.noWrap,
     orient = _ref2.orient,
     _ref2$align = _ref2.align,
@@ -37,26 +59,40 @@ var Row = function Row(_ref2) {
     _ref2$justify = _ref2.justify,
     justify = _ref2$justify === void 0 ? "start" : _ref2$justify,
     className = _ref2.className,
-    aria = _objectWithoutProperties(_ref2, _excluded2);
+    props = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.row, className, "flex", orient === "row" && "flex-row", orient === "col" && "flex-col", orient === "row-reverse" && "flex-row-reverse", orient === "col-reverse" && "flex-col-reverse", noWrap ? "flex-nowrap" : "flex-wrap", "justify-".concat(justify), "items-".concat(align)),
-    "data-gutter": gutter
-  }, aria), {}, {
+    className: cn("fabric-row", className, "flex", {
+      "flex-row": orient === "row",
+      "flex-col": orient === "col",
+      "flex-row-reverse": orient === "row-reverse",
+      "flex-col-reverse": orient === "col-reverse"
+    }, noWrap ? "flex-nowrap" : "flex-wrap", JUSTIFY_MAP[justify], ALIGN_MAP[align]),
+    "aria-roledescription": "flex-row"
+  }, props), {}, {
     children: children
   }));
-};
-var Col = function Col(_ref3) {
+}
+
+/**
+ * Column component within a Row, supporting flex sizing, alignment, and text truncation.
+ */
+function Col(_ref3) {
   var children = _ref3.children,
     flex = _ref3.flex,
     align = _ref3.align,
+    truncate = _ref3.truncate,
     className = _ref3.className,
     stretchContent = _ref3.stretchContent,
-    aria = _objectWithoutProperties(_ref3, _excluded3);
+    props = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.col, className, stretchContent && classes.stretchContent, flex === "auto" && "flex-content", flex === "fill" && "flex-1", flex === "full" && "flex-full", align && "self-".concat(align))
-  }, aria), {}, {
+    className: cn("fabric-col", className, {
+      "stretch-content": stretchContent,
+      truncate: truncate
+    }, FLEX_MAP[flex !== null && flex !== void 0 ? flex : "span"], align && ALIGN_MAP[align]),
+    "aria-roledescription": "flex-col"
+  }, props), {}, {
     children: children
   }));
-};
+}
 
 export { Col, Container, Row };

package/dist/esm/core/theme/ThemeProvider.js

@@ -1,74 +1,68 @@
 'use client';
 
-import { isColor } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { isString, isColor, cn } from '@react-fabric/utilities';
 import { useMemo } from 'react';
-import classes from './Theme.module.css';
+import { useApplicationContext } from '../../context/context.js';
 import { jsx } from 'react/jsx-runtime';
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
 /**
- * Theme override
+ * Sets CSS custom properties for theme colors (primary, secondary, tint) and applies branding class.
  */
-var ThemeProvider = function ThemeProvider(_ref) {
+function ThemeProvider(_ref) {
   var children = _ref.children,
     branding = _ref.branding,
     primaryColor = _ref.primaryColor,
-    accentColor = _ref.accentColor,
+    secondaryColor = _ref.secondaryColor,
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
     rounding = _ref.rounding;
+  var _useApplicationContex = useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = useMemo(function () {
     var ret = {};
-    if (primaryColor && isColor(primaryColor)) {
-      ret["--primary"] = primaryColor;
-    }
-    if (primaryColor && !isColor(primaryColor)) {
-      ret["--primary"] = "var(--".concat(primaryColor, ")");
-    }
-    if (accentColor && isColor(accentColor)) {
-      ret["--accent"] = accentColor;
-    }
-    if (accentColor && !isColor(accentColor)) {
-      ret["--accent"] = "var(--".concat(accentColor, ")");
+    if (isString(primaryColor)) {
+      ret["--color-primary"] = isColor(primaryColor) ? primaryColor : "var(--color-".concat(primaryColor, ")");
     }
-    if (tintColor && isColor(tintColor)) {
-      ret["--tint"] = tintColor;
+    if (isString(secondaryColor)) {
+      ret["--color-secondary"] = isColor(secondaryColor) ? secondaryColor : "var(--color-".concat(secondaryColor, ")");
     }
-    if (tintColor && !isColor(tintColor)) {
-      ret["--tint"] = "var(--".concat(tintColor, ")");
+    if (isString(tintColor)) {
+      ret["--color-tint"] = isColor(tintColor) ? tintColor : "var(--color-".concat(tintColor, ")");
     }
     return ret;
-  }, [primaryColor, accentColor, tintColor]);
+  }, [primaryColor, secondaryColor, tintColor]);
   return /*#__PURE__*/jsx("div", {
     style: styles,
-    "data-color-scheme": colorScheme,
+    "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
-    className: classNames(classes.themeProvider, "contents theme-base", branding),
+    className: cn("fabric-themeProvider", "contents theme-base", branding),
     children: children
   });
-};
+}
 
 export { ThemeProvider };

package/dist/esm/core/viewport/Viewport.js

@@ -1,39 +1,43 @@
 'use client';
 
-import classNames from 'classnames';
-import classes from './Viewport.module.css';
 import { jsx } from 'react/jsx-runtime';
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-var Viewport = function Viewport(_ref) {
+/**
+ * Full-screen viewport container with grid layout and container queries.
+ */
+function Viewport(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx("div", {
     "data-ref": "viewport",
-    className: classNames(classes.viewport, "grid overflow-hidden absolute inset-0"),
+    "aria-roledescription": "viewport",
+    className: "fabric-viewport sectioned overflow-hidden absolute inset-0",
     children: children
   });
-};
+}
 
 export { Viewport };

package/dist/esm/hooks/useClientService.js

@@ -1,30 +1,51 @@
 'use client';
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Custom hook that returns a client-side API on the client and a server-side mock on the server.
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * Useful for isomorphic components that need different behavior during SSR vs. CSR,
+ * such as accessing browser APIs or window objects that are unavailable during server rendering.
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * @param {any} clientApi - The client-side API object to return when running in the browser.
+ * @param {any} serverMock - The mock API object to return when running on the server.
+ * @returns The client API on the client, the server mock on the server, or `undefined` if neither is provided.
+ *
+ * @example
+ * ```tsx
+ * const clipboard = useClientService(
+ *   { write: (text) => navigator.clipboard.writeText(text) },
+ *   { write: () => Promise.resolve() }
+ * );
+ * ```
  */
-
-var useClientService = function useClientService(clientApi, serverMock) {
+// eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
+function useClientService(clientApi, serverMock) {
   return typeof window === "undefined" ? serverMock : clientApi;
-};
+}
 
 export { useClientService };