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

package/dist/esm/components/divider/Divider.js

@@ -1,10 +1,9 @@
 'use client';
 
-import classNames from 'classnames';
-import { useCallback } from 'react';
-import { getBorderClass, getBgClass, getColorClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@react-fabric/utilities';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 
 /*
  * React Fabric
@@ -29,37 +28,72 @@ import { jsx, jsxs } from 'react/jsx-runtime';
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var Divider = function Divider(_ref) {
-  var children = _ref.children,
+var Rule = function Rule(_ref) {
+  var flex = _ref.flex,
+    className = _ref.className,
     color = _ref.color,
     vertical = _ref.vertical,
-    fill = _ref.fill,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? "start" : _ref$align,
-    className = _ref.className;
-  var Rule = useCallback(function (_ref2) {
-    var flex = _ref2.flex,
-      className = _ref2.className;
-    return /*#__PURE__*/jsx("hr", {
-      style: {
-        flex: flex
-      },
-      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "mx-1" : "my-1", color && getBorderClass(color + "-200"))
-    });
-  }, [color, vertical]);
+    style = _ref.style;
+  return /*#__PURE__*/jsx("hr", {
+    style: {
+      flex: flex,
+      borderColor: getColor(color),
+      borderStyle: style
+    },
+    className: cn(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
+  });
+};
+
+/**
+ * A component that represents a visual divider between content.
+ * It can be used to separate sections of content, with optional text labels.
+ * It supports both horizontal and vertical orientations, customizable colors,
+ * styles, and alignment options.
+ *
+ * @example
+ * ```jsx
+ * <Divider color="primary" align="center" style="dashed">
+ *   Divider Text
+ * </Divider>
+ * // Renders a horizontal divider with primary color, centered text, and dashed style.
+ * ```
+ */
+function Divider(_ref2) {
+  var children = _ref2.children,
+    color = _ref2.color,
+    vertical = _ref2.vertical,
+    style = _ref2.style,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? "start" : _ref2$align,
+    className = _ref2.className,
+    classNames = _ref2.classNames;
   return children ? /*#__PURE__*/jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: cn("flex flex-nowrap items-center fabric-divider", vertical && "flex-col"),
     children: [/*#__PURE__*/jsx(Rule, {
+      className: cn(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      style: style,
+      color: color,
+      vertical: vertical,
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "mx-1" : "my-1", fill && getBgClass((color !== null && color !== void 0 ? color : "tint") + "-200"), !fill && getColorClass((color !== null && color !== void 0 ? color : "tint") + "-600"), "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: cn("px-2 whitespace-nowrap text-dimmed", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", classNames === null || classNames === void 0 ? void 0 : classNames.label, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      style: {
+        color: getColor(color)
+      },
       children: children
     }), /*#__PURE__*/jsx(Rule, {
+      className: cn(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      style: style,
+      color: color,
+      vertical: vertical,
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"
     })]
   }) : /*#__PURE__*/jsx(Rule, {
-    className: className
+    style: style,
+    color: color,
+    vertical: vertical,
+    className: cn(className, classNames === null || classNames === void 0 ? void 0 : classNames.root)
   });
-};
+}
 
 export { Divider };

package/dist/esm/components/dropdown/Dropdown.js

@@ -2,17 +2,15 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { FloatingTree, useFloatingTree, useFloating, autoUpdate, shift, flip, offset, arrow, safePolygon, useDismiss, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingArrow, useHover, useClick } from '@floating-ui/react';
-import { mergeRefs } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useRef, useState, useMemo, Children, useCallback, useEffect, Fragment, cloneElement } from 'react';
-import classes from './Dropdown.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, autoUpdate, offset, shift, flip, arrow, safePolygon, useDismiss, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingArrow, useHover, useClick } from '@floating-ui/react';
+import { mergeRefs, cn } from '@react-fabric/utilities';
+import { useRef, useState, useMemo, Children, useEffect, cloneElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 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 DropdownElement = function DropdownElement(_ref) {
-  var _refs$domReference$cu, _refs$domReference$cu2;
+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 DropdownComponent(_ref) {
+  var _ref4, _refs$domReference$cu;
   var ref = _ref.ref,
     children = _ref.children,
     showArrow = _ref.showArrow,
@@ -23,23 +21,28 @@ var DropdownElement = function DropdownElement(_ref) {
     placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
     onClose = _ref.onClose,
     onOpen = _ref.onOpen,
+    root = _ref.root,
     disabled = _ref.disabled,
     plainDropdown = _ref.plainDropdown,
-    dropdownEvent = _ref.dropdownEvent,
-    dropdownClassName = _ref.dropdownClassName;
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "click" : _ref$trigger,
+    className = _ref.className;
   var arrowRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var tree = useFloatingTree();
+  var nodeId = useFloatingNodeId();
   var _useMemo = useMemo(function () {
+      // eslint-disable-next-line @eslint-react/no-children-to-array
       return Children.toArray(children);
     }, [children]),
     _useMemo2 = _slicedToArray(_useMemo, 2),
     anchor = _useMemo2[0],
     panel = _useMemo2[1];
   var _useFloating = useFloating({
+      nodeId: "dropdown-".concat(nodeId),
       open: isOpen,
       onOpenChange: function onOpenChange(open, _, reason) {
         var _ref2;
@@ -50,16 +53,16 @@ var DropdownElement = function DropdownElement(_ref) {
       strategy: "fixed",
       placement: placement,
       whileElementsMounted: autoUpdate,
-      middleware: [shift({
+      middleware: [offset(showArrow ? 9 : 4), shift({
         padding: 8
-      }), flip(), showArrow && offset(9), showArrow && arrow({
+      }), flip(), showArrow && arrow({
         element: arrowRef
       })]
     }),
     refs = _useFloating.refs,
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
-  var handler = dropdownEvent === "hover" ? useHover : useClick;
+  var handler = trigger === "hover" ? useHover : useClick;
   var click = handler(context, {
     enabled: !disabled,
     handleClose: safePolygon({
@@ -72,16 +75,20 @@ var DropdownElement = function DropdownElement(_ref) {
   var _useInteractions = useInteractions([dismiss, click]),
     getReferenceProps = _useInteractions.getReferenceProps,
     getFloatingProps = _useInteractions.getFloatingProps;
-  var minWidth = useMemo(function () {
-    if (fitToParent) {
-      var _refs$reference$curre, _refs$reference$curre2;
-      var el = // @ts-expect-error ignore
-      (_refs$reference$curre = (_refs$reference$curre2 = refs.reference.current) === null || _refs$reference$curre2 === void 0 ? void 0 : _refs$reference$curre2.closest('[data-ref="buttonGroup"]')) !== null && _refs$reference$curre !== void 0 ? _refs$reference$curre : refs.reference.current;
-      return el === null || el === void 0 ? void 0 : el.offsetWidth;
-    }
-    return undefined;
-  }, [refs, isOpen, fitToParent]);
-  var tryClosing = useCallback(function (e) {
+  var _useMemo3 = useMemo(function () {
+      if (fitToParent) {
+        var _ref3$closest;
+        var _ref3 = refs.reference.current;
+        var el = (_ref3$closest = _ref3 === null || _ref3 === void 0 ? void 0 : _ref3.closest('[data-ref="buttonGroup"]')) !== null && _ref3$closest !== void 0 ? _ref3$closest : refs.reference.current;
+        return [el === null || el === void 0 ? void 0 : el.offsetWidth, el === null || el === void 0 ? void 0 : el.offsetHeight];
+      }
+      return [undefined, undefined];
+      // eslint-disable-next-line @eslint-react/exhaustive-deps
+    }, [refs, isOpen, fitToParent]),
+    _useMemo4 = _slicedToArray(_useMemo3, 2),
+    minWidth = _useMemo4[0],
+    minHeight = _useMemo4[1];
+  var tryClosing = function tryClosing(e) {
     var _refs$floating$curren, _refs$floating$curren2;
     if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target.closest("[data-dropdown-dismiss='false']"))) && (!!closeOnClick || (_refs$floating$curren2 = refs.floating.current) !== null && _refs$floating$curren2 !== void 0 && _refs$floating$curren2.contains(e.target.closest("[data-dropdown-dismiss='true']")))) {
       setTimeout(function () {
@@ -89,12 +96,16 @@ var DropdownElement = function DropdownElement(_ref) {
         onClose === null || onClose === void 0 || onClose();
       }, 100);
     }
-  }, [closeOnClick, onClose]);
+  };
   var innerRef = useMemo(function () {
-    return mergeRefs(ref, anchor.props.ref, refs.setReference);
-  }, [ref, anchor.props.ref, refs.setReference]);
+    var _anchor$props;
+    return mergeRefs(ref, (_anchor$props = anchor.props) === null || _anchor$props === void 0 ? void 0 : _anchor$props.ref, function (el) {
+      return refs.setReference(el);
+    });
+  }, [ref, anchor.props.ref, refs]);
   useEffect(function () {
-    disabled && setIsOpen(false);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    if (disabled) setIsOpen(false);
   }, [disabled]);
   useEffect(function () {
     if (!tree) return;
@@ -110,29 +121,29 @@ var DropdownElement = function DropdownElement(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/cloneElement(anchor, _objectSpread(_objectSpread({}, getReferenceProps({
       onClick: function onClick(e) {
-        var _anchor$props$onClick, _anchor$props;
-        (_anchor$props$onClick = (_anchor$props = anchor.props).onClick) === null || _anchor$props$onClick === void 0 || _anchor$props$onClick.call(_anchor$props, e);
+        var _anchor$props$onClick, _anchor$props2;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        (_anchor$props$onClick = (_anchor$props2 = anchor.props).onClick) === null || _anchor$props$onClick === void 0 || _anchor$props$onClick.call(_anchor$props2, e);
         e.stopPropagation();
+        e.preventDefault();
       }
     })), {}, {
+      "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       ref: innerRef
     })), isOpen && /*#__PURE__*/jsxs(FloatingPortal, {
-      root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
+      root: (_ref4 = root !== null && root !== void 0 ? root : (_refs$domReference$cu = refs.domReference.current) === null || _refs$domReference$cu === void 0 ? void 0 : _refs$domReference$cu.closest(".theme-base")) !== null && _ref4 !== void 0 ? _ref4 : undefined,
       children: [/*#__PURE__*/jsx(FloatingOverlay, {}), /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
-        modal: true,
+        closeOnFocusOut: true,
         children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
           ref: function ref(el) {
-            var _el$querySelector;
-            refs.setFloating(el);
-            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
+            return refs.setFloating(el);
           },
           style: _objectSpread({
-            minWidth: minWidth,
             zIndex: "var(--z-popover)"
           }, floatingStyles),
-          "data-testid": "dropdown-body"
+          "data-ref": "dropdownBody"
         }, getFloatingProps({
           onClick: function onClick(e) {
             return e.stopPropagation();
@@ -140,29 +151,65 @@ var DropdownElement = function DropdownElement(_ref) {
         })), {}, {
           children: [/*#__PURE__*/jsx("div", {
             role: "none",
-            className: classNames(classes.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg shadow-base bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
+            className: cn("fabric-dropdownBody", className, !plainDropdown && "shadow-lg bg-default ring-1 ring-tint-200", "rounded-capped grid max-h-[60vh] scroll-thin"),
+            style: {
+              minWidth: minWidth,
+              minHeight: minHeight
+            },
             onMouseUpCapture: tryClosing,
             children: panel
           }), showArrow && /*#__PURE__*/jsx(FloatingArrow, {
             ref: arrowRef,
             context: context,
             strokeWidth: 0.5,
-            className: "fill-base stroke-muted"
+            className: "fill-default stroke-soft"
           })]
         }))
       })]
     })]
   });
-};
-var Dropdown = function Dropdown(props) {
+}
+
+/**
+ * A component that displays a dropdown menu with an anchor and a panel.
+ * It supports various features such as placement, arrow display, click handling,
+ * and event handling for opening and closing the dropdown.
+ *
+ * @example
+ * ```jsx
+ * <Dropdown
+ *   placement="bottom"
+ *   showArrow
+ *   closeOnClick
+ *   fitToParent
+ *   onOpen={() => console.log("Dropdown opened")}
+ *   onClose={() => console.log("Dropdown closed")}
+ * >
+ *   <button>Open Dropdown</button>
+ *   <div>
+ *     <DropdownDismiss>
+ *       <button>Dismiss</button>
+ *     </DropdownDismiss>
+ *     <p>Dropdown Content</p>
+ *   </div>
+ * </Dropdown>
+ * ```
+ */
+function Dropdown(props) {
   return /*#__PURE__*/jsx(FloatingTree, {
-    children: /*#__PURE__*/jsx(DropdownElement, _objectSpread({}, props))
+    children: /*#__PURE__*/jsx(DropdownComponent, _objectSpread({}, props))
   });
-};
-var DropdownDismiss = function DropdownDismiss(_ref3) {
-  var children = _ref3.children,
-    _ref3$dismiss = _ref3.dismiss,
-    dismiss = _ref3$dismiss === void 0 ? true : _ref3$dismiss;
+}
+
+/**
+ * A component that allows dismissing the dropdown when clicked.
+ * It can be used inside the dropdown panel to provide a dismiss area.
+ * It supports an optional `dismiss` prop to control whether the dropdown should be dismissed on click.
+ */
+function DropdownDismiss(_ref5) {
+  var children = _ref5.children,
+    _ref5$dismiss = _ref5.dismiss,
+    dismiss = _ref5$dismiss === void 0 ? true : _ref5$dismiss;
   var tree = useFloatingTree();
   return /*#__PURE__*/jsx("div", {
     role: "none",
@@ -175,6 +222,6 @@ var DropdownDismiss = function DropdownDismiss(_ref3) {
     },
     children: children
   });
-};
+}
 
 export { Dropdown, DropdownDismiss };

package/dist/esm/components/dropdown/DropdownTool.js

@@ -2,16 +2,15 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import { CoreIcons } from '../../types/icons.js';
+import { cn } from '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
 import { Dropdown } from './Dropdown.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "groupHover", "icon"];
 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 DropdownTool = function DropdownTool(_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; }
+function DropdownTool(_ref) {
   var children = _ref.children,
     className = _ref.className,
     groupHover = _ref.groupHover,
@@ -19,10 +18,10 @@ var DropdownTool = function DropdownTool(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
-      icon: icon !== null && icon !== void 0 ? icon : CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
+      icon: icon !== null && icon !== void 0 ? icon : "icon-[mdi--menu-down]",
+      className: cn(className, groupHover && "invisible group-hover/tool:visible data-dropdown-open:visible", "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer")
     }), children]
   }));
-};
+}
 
 export { DropdownTool };

package/dist/esm/components/effect/GlassEffect.js

@@ -0,0 +1,259 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useId, useEffect } from 'react';
+import { useApplicationContext } from '../../context/context.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function GlassEffect(_ref) {
+  var _ref$showBorder = _ref.showBorder,
+    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder;
+  var _useApplicationContex = useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
+  var isDark = currentColorScheme === "dark";
+  var _useState = useState(function () {
+      return {
+        width: 1,
+        height: 1,
+        borderRadius: "0"
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var containerRef = useRef(null);
+  var id = useId();
+  var clipId = "".concat(id, "glassClip");
+  var borderGradId = "".concat(id, "glassBorder");
+  var strokeW = showBorder ? 1.5 : 0;
+
+  // Capture parent dimensions & border-radius
+  useEffect(function () {
+    var _containerRef$current;
+    var el = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement;
+    if (!el) return;
+    var observe = function observe() {
+      setDimensions({
+        width: Math.max(1, el.offsetWidth),
+        height: Math.max(1, el.offsetHeight),
+        borderRadius: "0"
+      });
+    };
+    var ro = new ResizeObserver(observe);
+    ro.observe(el);
+    return function () {
+      return ro.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/jsxs("svg", {
+    ref: containerRef,
+    className: "fabric-style-effect fabric-glassEffect overflow-hidden rounded-[inherit]",
+    style: {
+      position: "absolute",
+      inset: 0,
+      zIndex: 0,
+      pointerEvents: "none"
+    },
+    viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height),
+    preserveAspectRatio: "none",
+    children: [/*#__PURE__*/jsxs("defs", {
+      children: [/*#__PURE__*/jsx("linearGradient", {
+        id: "".concat(id, "glassBgBase"),
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "1",
+        children: isDark ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(180,220,255,0.03)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "50%",
+            stopColor: "rgba(140,200,240,0.02)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(120,180,230,0.025)"
+          })]
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(200,235,255,0.20)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "50%",
+            stopColor: "rgba(180,225,250,0.15)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(160,215,245,0.18)"
+          })]
+        })
+      }), /*#__PURE__*/jsx("radialGradient", {
+        id: "".concat(id, "glassSpot1"),
+        cx: "15%",
+        cy: "10%",
+        r: "55%",
+        children: isDark ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(255,255,255,0.04)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(255,255,255,0)"
+          })]
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(255,255,255,0.30)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(255,255,255,0)"
+          })]
+        })
+      }), /*#__PURE__*/jsx("radialGradient", {
+        id: "".concat(id, "glassSpot2"),
+        cx: "50%",
+        cy: "45%",
+        r: "50%",
+        children: isDark ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(180,240,255,0.06)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(180,240,255,0)"
+          })]
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(220,250,255,0.15)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(220,250,255,0)"
+          })]
+        })
+      }), /*#__PURE__*/jsx("radialGradient", {
+        id: "".concat(id, "glassSpot3"),
+        cx: "85%",
+        cy: "90%",
+        r: "50%",
+        children: isDark ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(160,220,255,0.05)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(160,220,255,0)"
+          })]
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(200,240,255,0.12)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(200,240,255,0)"
+          })]
+        })
+      }), /*#__PURE__*/jsx("linearGradient", {
+        id: borderGradId,
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "1",
+        children: isDark ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(255,255,255,0.25)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "15%",
+            stopColor: "rgba(255,255,255,0.15)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "35%",
+            stopColor: "rgba(139,226,249,0.18)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "50%",
+            stopColor: "rgba(139,226,249,0.15)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "65%",
+            stopColor: "rgba(139,226,249,0.18)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "85%",
+            stopColor: "rgba(255,255,255,0.15)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(255,255,255,0.25)"
+          })]
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: "rgba(255,255,255,0.95)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "15%",
+            stopColor: "rgba(255,255,255,0.75)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "35%",
+            stopColor: "rgba(139,226,249,0.65)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "50%",
+            stopColor: "rgba(139,226,249,0.50)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "65%",
+            stopColor: "rgba(139,226,249,0.65)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "85%",
+            stopColor: "rgba(255,255,255,0.75)"
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: "rgba(255,255,255,0.95)"
+          })]
+        })
+      })]
+    }), /*#__PURE__*/jsxs("g", {
+      clipPath: "url(#".concat(clipId, ")"),
+      children: [/*#__PURE__*/jsx("rect", {
+        x: "0",
+        y: "0",
+        width: dimensions.width,
+        height: dimensions.height,
+        rx: dimensions.borderRadius,
+        ry: dimensions.borderRadius,
+        fill: "url(#".concat(id, "glassBgBase)")
+      }), /*#__PURE__*/jsx("rect", {
+        x: "0",
+        y: "0",
+        width: dimensions.width,
+        height: dimensions.height,
+        rx: dimensions.borderRadius,
+        ry: dimensions.borderRadius,
+        fill: "url(#".concat(id, "glassSpot1)")
+      }), /*#__PURE__*/jsx("rect", {
+        x: "0",
+        y: "0",
+        width: dimensions.width,
+        height: dimensions.height,
+        rx: dimensions.borderRadius,
+        ry: dimensions.borderRadius,
+        fill: "url(#".concat(id, "glassSpot2)")
+      }), /*#__PURE__*/jsx("rect", {
+        x: "0",
+        y: "0",
+        width: dimensions.width,
+        height: dimensions.height,
+        rx: dimensions.borderRadius,
+        ry: dimensions.borderRadius,
+        fill: "url(#".concat(id, "glassSpot3)")
+      }), strokeW > 0 && /*#__PURE__*/jsx("rect", {
+        x: "0.5",
+        y: "0.5",
+        width: dimensions.width - 1,
+        height: dimensions.height - 1,
+        rx: dimensions.borderRadius,
+        ry: dimensions.borderRadius,
+        fill: "none",
+        stroke: "url(#".concat(borderGradId, ")"),
+        strokeWidth: strokeW,
+        vectorEffect: "non-scaling-stroke"
+      })]
+    })]
+  });
+}
+
+export { GlassEffect };