@react95/core 8.0.0-alpha.0 → 8.0.0-alpha.10

package/cjs/Range/Range.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Frame = require("../Frame/Frame.cjs");
+const Range_css = require("./Range.css.cjs");
+const cn = require("classnames");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Range = React__namespace.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React__namespace.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      ref,
+      className: cn(Range_css.range, rest.className),
+      as: "input",
+      type: "range"
+    }
+  )
+);
+exports.Range = Range;

package/cjs/Range/Range.css.cjs

@@ -0,0 +1,5 @@
+require('./Range.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                             */var range = "r95_1i4w9z20";
+exports.range = range;

package/cjs/Range/Range.css.ts.vanilla.css

@@ -0,0 +1,84 @@
+.r95_1i4w9z20 {
+  appearance: none;
+  width: 100%;
+}
+.r95_1i4w9z20::hover,.r95_1i4w9z20::focus,.r95_1i4w9z20::active {
+  outline: none;
+}
+.r95_1i4w9z20::-webkit-slider-runnable-track {
+  width: 100%;
+  height: var(--r95-space-4);
+  background-color: var(--r95-color-borderDarkest);
+  cursor: pointer;
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLight);
+  border-right-width: var(--r95-space-2);
+  border-right-color: var(--r95-color-borderLightest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderLighter);
+  border-left-width: var(--r95-space-2);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: 0px 1px 0px 0px var(--r95-color-borderLightest);
+}
+.r95_1i4w9z20::-moz-range-track {
+  width: 100%;
+  height: var(--r95-space-4);
+  background-color: var(--r95-color-borderDarkest);
+  cursor: pointer;
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLight);
+  border-right-width: var(--r95-space-2);
+  border-right-color: var(--r95-color-borderLightest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderLighter);
+  border-left-width: var(--r95-space-2);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: 0px 1px 0px 0px var(--r95-color-borderLightest);
+}
+.r95_1i4w9z20::-webkit-slider-thumb {
+  width: var(--r95-space-12);
+  height: var(--r95-space-20);
+  background-color: var(--r95-color-material);
+  cursor: pointer;
+  margin-top: calc(var(--r95-space-8) * -1);
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLightest);
+  border-right-width: var(--r95-space-1);
+  border-right-color: var(--r95-color-borderDarkest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderDarkest);
+  border-left-width: var(--r95-space-1);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: inset 0px -1px 0px var(--r95-color-borderDark),
+  inset -1px 0px 0px var(--r95-color-borderDark),
+  inset 0px 1px 0px var(--r95-color-borderLighter),
+  inset 1px 0px 0px var(--r95-color-borderLighter);
+  appearance: none;
+}
+.r95_1i4w9z20::-moz-range-thumb {
+  width: var(--r95-space-12);
+  height: var(--r95-space-20);
+  background-color: var(--r95-color-material);
+  cursor: pointer;
+  margin-top: calc(var(--r95-space-8) * -1);
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLightest);
+  border-right-width: var(--r95-space-1);
+  border-right-color: var(--r95-color-borderDarkest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderDarkest);
+  border-left-width: var(--r95-space-1);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: inset 0px -1px 0px var(--r95-color-borderDark),
+  inset -1px 0px 0px var(--r95-color-borderDark),
+  inset 0px 1px 0px var(--r95-color-borderLighter),
+  inset 1px 0px 0px var(--r95-color-borderLighter);
+  appearance: none;
+}
+.r95_1i4w9z20:focus::-webkit-slider-runnable-track {
+  background-color: var(--r95-color-borderDarkest);
+}

package/cjs/Tabs/Tab.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Tabs_css = require("./Tabs.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Tab = React.forwardRef(
+  ({ activeTab, title, ...rest }, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      className: Tabs_css.tab({ active: activeTab === title }),
+      ref,
+      as: "li"
+    },
+    title
+  )
+);
+exports.Tab = Tab;

package/cjs/Tabs/Tabs.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const cn = require("classnames");
+const Tab = require("./Tab.cjs");
+const Tabs_css = require("./Tabs.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Tabs = React.forwardRef(
+  ({ children, defaultActiveTab, onChange, ...rest }, ref) => {
+    const [firstTab] = React.Children.toArray(children);
+    const [activeTab, setActiveTab] = React.useState(
+      defaultActiveTab || firstTab.props.title
+    );
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      Frame.Frame,
+      {
+        ...rest,
+        className: cn(Tabs_css.navbar, rest.className),
+        as: "ol",
+        ref
+      },
+      React.Children.map(
+        children,
+        (child) => {
+          const { title, disabled } = child.props;
+          return /* @__PURE__ */ React.createElement(
+            Tab.Tab,
+            {
+              key: title,
+              ...child.props,
+              activeTab,
+              onClick: (e) => {
+                if (!disabled) {
+                  if (onChange) {
+                    onChange(title, e);
+                  }
+                  setActiveTab(title);
+                }
+              }
+            }
+          );
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(Frame.Frame, { className: Tabs_css.navContainer, width: rest.width || rest.w }, React.Children.map(
+      children,
+      (child) => child.props.title === activeTab && child.props.children
+    )));
+  }
+);
+exports.Tabs = Tabs;

package/cjs/Tabs/Tabs.css.cjs

@@ -0,0 +1,10 @@
+require('./Tabs.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                            */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var navContainer = "r95_fyllcd1";
+var navbar = "r95_fyllcd0";
+var tab = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_fyllcd2", variantClassNames: { active: { true: "r95_fyllcd3" } }, defaultVariants: {}, compoundVariants: [] });
+exports.navContainer = navContainer;
+exports.navbar = navbar;
+exports.tab = tab;

package/cjs/Tabs/Tabs.css.ts.vanilla.css

@@ -0,0 +1,54 @@
+.r95_fyllcd0 {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: none;
+  z-index: 1;
+}
+.r95_fyllcd1 {
+  padding: var(--r95-space-12);
+  box-shadow: var(--r95-shadow-out);
+  background-color: var(--r95-color-material);
+}
+.r95_fyllcd2 {
+  list-style: none;
+  user-select: none;
+  padding-block: var(--r95-space-3);
+  padding-inline: var(--r95-space-6);
+  background-color: var(--r95-color-material);
+  margin-right: var(--r95-space-2);
+  margin-left: var(--r95-space-2);
+  box-shadow: inset 0 1px 0 0 var(--r95-color-borderLightest),
+      -2px 1px 0 -1px var(--r95-color-material),
+      -3px 1px 0 -1px var(--r95-color-borderLightest),
+      -2px 0 0 -1px var(--r95-color-borderLightest),
+      2px 1px 0 -1px var(--r95-color-borderDark),
+      2px 0 0 -1px var(--r95-color-borderDarkest),
+      3px 1px 0 -1px var(--r95-color-borderDarkest);
+}
+.r95_fyllcd2:first-child {
+  margin-left: var(--r95-space-4);
+}
+.r95_fyllcd3 {
+  margin-top: calc(var(--r95-space-2) * -1);
+  margin-left: calc(var(--r95-space-2) * -1);
+  margin-bottom: var(--r95-space-1);
+  &:first-child {
+    margin-left: var(--r95-space-2);
+  }
+  box-shadow: inset 0 1px 0 0 var(--r95-color-borderLightest),
+        -2px 1px 0 -1px var(--r95-color-material),
+        -0.5px 3px 0 0.5px var(--r95-color-material),
+        -2px 2px 0 0 var(--r95-color-borderLightest),
+        -2px 0 0 -1px var(--r95-color-borderLightest),
+        1px 2px 0 0 var(--r95-color-borderDark),
+        2px 0 0 -1px var(--r95-color-borderDarkest),
+        2px 2px 0 0 var(--r95-color-borderDarkest);
+}
+.r95_fyllcd3 + li {
+  margin-left: 0;
+  box-shadow: inset 0 1px 0 0 var(--r95-color-borderLightest),
+    2px 1px 0 -1px var(--r95-color-borderDark),
+    2px 0 0 -1px var(--r95-color-borderDarkest),
+    3px 1px 0 -1px var(--r95-color-borderDarkest);
+}

package/cjs/TaskBar/Clock.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Frame = require("../Frame/Frame.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const TaskBar_css = require("./TaskBar.css.cjs");
+const Clock = () => {
+  const [timer, setTimer] = React.useState("");
+  React.useEffect(() => {
+    function checkTime(i) {
+      return i < 10 ? `0${i}` : i;
+    }
+    const interval = setInterval(() => {
+      const today = /* @__PURE__ */ new Date();
+      const h = today.getHours();
+      const m = today.getMinutes();
+      setTimer(`${checkTime(h)}:${checkTime(m)}`);
+    });
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      boxShadow: "$in",
+      px: "$6",
+      py: "$2",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { className: TaskBar_css.tooltip }, timer)
+  );
+};
+exports.Clock = Clock;

package/cjs/TaskBar/TaskBar.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ModalContext = require("../Modal/ModalContext.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Clock = require("./Clock.cjs");
+const WindowButton = require("./WindowButton.cjs");
+const icons = require("@react95/icons");
+const TaskBar_css = require("./TaskBar.css.cjs");
+const TaskBar = React.forwardRef(
+  ({ list }, ref) => {
+    const [showList, toggleShowList] = React.useState(false);
+    const [activeStart, toggleActiveStart] = React.useState(false);
+    const { windows, activeWindow, setActiveWindow } = React.useContext(ModalContext.ModalContext);
+    return /* @__PURE__ */ React.createElement(
+      Frame.Frame,
+      {
+        position: "fixed",
+        bottom: "0px",
+        left: "0px",
+        right: "0px",
+        display: "flex",
+        justifyContent: "space-between",
+        h: "28px",
+        w: "100%",
+        padding: "$2",
+        zIndex: "$taskbar",
+        backgroundColor: "$material",
+        boxShadow: "$out",
+        ref
+      },
+      showList && /* @__PURE__ */ React.createElement(
+        Frame.Frame,
+        {
+          position: "absolute",
+          bottom: "28px",
+          onClick: () => {
+            toggleActiveStart(false);
+            toggleShowList(false);
+          }
+        },
+        list
+      ),
+      /* @__PURE__ */ React.createElement(
+        WindowButton.WindowButton,
+        {
+          small: true,
+          icon: /* @__PURE__ */ React.createElement(icons.Logo, { variant: "32x32_4" }),
+          active: activeStart,
+          onClick: () => {
+            toggleActiveStart(!activeStart);
+            toggleShowList(!showList);
+          }
+        },
+        "Start"
+      ),
+      /* @__PURE__ */ React.createElement(Frame.Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, Object.entries(windows).map(
+        ([windowId, { icon, title, hasButton }]) => hasButton && /* @__PURE__ */ React.createElement(
+          WindowButton.WindowButton,
+          {
+            key: windowId,
+            icon,
+            active: windowId === activeWindow,
+            onClick: () => setActiveWindow(windowId),
+            small: false
+          },
+          /* @__PURE__ */ React.createElement("div", { className: TaskBar_css.truncate }, title)
+        )
+      )),
+      /* @__PURE__ */ React.createElement(Clock.Clock, null)
+    );
+  }
+);
+exports.TaskBar = TaskBar;

package/cjs/TaskBar/TaskBar.css.cjs

@@ -0,0 +1,12 @@
+require('./TaskBar.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                               */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var icon = "r95_1ct83mo9";
+var tooltip = "r95_1ct83mo1";
+var truncate = "r95_1ct83mo0";
+var windowsButton = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1ct83mo2", variantClassNames: { small: { true: "r95_1ct83mo3", false: "r95_1ct83mo4" }, active: { true: "r95_1ct83mo5", false: "r95_1ct83mo6" } }, defaultVariants: {}, compoundVariants: [[{ active: true, small: true }, "r95_1ct83mo7"], [{ active: true, small: false }, "r95_1ct83mo8"]] });
+exports.icon = icon;
+exports.tooltip = tooltip;
+exports.truncate = truncate;
+exports.windowsButton = windowsButton;

package/cjs/TaskBar/TaskBar.css.ts.vanilla.css

@@ -0,0 +1,52 @@
+.r95_1ct83mo0 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-align: left;
+}
+.r95_1ct83mo1 div:first-child {
+  right: 0;
+}
+.r95_1ct83mo2 {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--r95-color-material);
+  padding-block: var(--r95-space-2);
+  padding-inline: var(--r95-space-3);
+  margin-right: var(--r95-space-2);
+  max-width: 150px;
+  border: none;
+  outline: none;
+  color: var(--r95-color-materialText);
+}
+.r95_1ct83mo3 {
+  padding-inline: var(--r95-space-5);
+}
+.r95_1ct83mo4 {
+  width: 100%;
+}
+.r95_1ct83mo5 {
+  box-shadow: var(--r95-shadow-in);
+}
+.r95_1ct83mo6 {
+  box-shadow: var(--r95-shadow-out);
+}
+.r95_1ct83mo7 {
+  padding-top: var(--r95-space-4);
+  padding-bottom: var(--r95-space-0);
+  outline: var(--r95-space-1) dotted var(--r95-color-borderDarkest);
+  outline-offset: calc(var(--r95-space-4) * -1);
+}
+.r95_1ct83mo8 {
+  background-color: var(--r95-color-borderLighter);
+}
+.r95_1ct83mo9 svg {
+  margin-top: var(--r95-space-4);
+  margin-right: var(--r95-space-4);
+  min-width: var(--r95-space-2);
+  width: var(--r95-space-20);
+  height: var(--r95-space-20);
+  shape-rendering: auto;
+}

package/cjs/TaskBar/WindowButton.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const TaskBar_css = require("./TaskBar.css.cjs");
+const WindowButton = React.forwardRef(
+  ({ children, small = false, icon, active = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: TaskBar_css.windowsButton({ active, small }),
+      ...props,
+      ref
+    },
+    /* @__PURE__ */ React.createElement("div", { className: TaskBar_css.icon }, icon),
+    children
+  )
+);
+exports.WindowButton = WindowButton;

package/cjs/TextArea/TextArea.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Frame = require("../Frame/Frame.cjs");
+const Input_css = require("../Input/Input.css.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TextArea = React__namespace.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "textarea" })
+);
+exports.TextArea = TextArea;

package/cjs/TitleBar/TitleBar.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Frame = require("../Frame/Frame.cjs");
+const TitleBar_css = require("./TitleBar.css.cjs");
+const Button_css = require("../Button/Button.css.cjs");
+const cn = require("classnames");
+const OptionsBox = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(
+  Frame.Frame,
+  {
+    ...rest,
+    ref,
+    className: cn(TitleBar_css.optionsBox, rest.className)
+  }
+));
+const Option = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      ref,
+      as: "button",
+      className: cn(Button_css.button, TitleBar_css.option, rest.className)
+    }
+  )
+);
+const TitleBarRenderer = ({ children, title = "UNKNOWN.EXE", icon, active = true, ...rest }, ref) => /* @__PURE__ */ React.createElement(
+  Frame.Frame,
+  {
+    ...rest,
+    className: cn(TitleBar_css.titleBarBackground({ active }), rest.className),
+    ref
+  },
+  icon && icon,
+  /* @__PURE__ */ React.createElement("div", { className: TitleBar_css.title }, title),
+  children
+);
+const TitleBar = Object.assign(
+  React.forwardRef(TitleBarRenderer),
+  {
+    Option,
+    OptionsBox
+  }
+);
+exports.TitleBar = TitleBar;

package/cjs/TitleBar/TitleBar.css.cjs

@@ -0,0 +1,12 @@
+require('./TitleBar.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                                */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var option = "r95_1kpzw681";
+var optionsBox = "r95_1kpzw680";
+var title = "r95_1kpzw685";
+var titleBarBackground = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1kpzw682", variantClassNames: { active: { true: "r95_1kpzw683", false: "r95_1kpzw684" } }, defaultVariants: {}, compoundVariants: [] });
+exports.option = option;
+exports.optionsBox = optionsBox;
+exports.title = title;
+exports.titleBarBackground = titleBarBackground;

package/cjs/TitleBar/TitleBar.css.ts.vanilla.css

@@ -0,0 +1,62 @@
+.r95_1kpzw680 {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+.r95_1kpzw681 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--r95-space-2);
+  padding: var(--r95-space-0);
+  width: var(--r95-space-17);
+  height: var(--r95-space-14);
+  min-width: var(--r95-space-0);
+  font-weight: 600;
+  font-size: 10px;
+}
+.r95_1kpzw681:active {
+  padding-top: var(--r95-space-1);
+  padding-right: var(--r95-space-0);
+  padding-bottom: var(--r95-space-0);
+  padding-left: var(--r95-space-1);
+  outline: none;
+}
+.r95_1kpzw681:first-child {
+  margin-right: var(--r95-space-0);
+}
+.r95_1kpzw681:focus {
+  box-shadow: inset 1px 1px 0px 1px var(--r95-color-borderLightest),
+        inset -1px -1px 0px 1px var(--r95-color-borderDark);
+}
+.r95_1kpzw682 {
+  height: var(--r95-space-20);
+  margin-bottom: var(--r95-space-2);
+  padding: var(--r95-space-2);
+  display: flex;
+  box-shadow: none;
+  user-select: none;
+}
+.r95_1kpzw683 {
+  background: var(--r95-color-headerBackground);
+  color: var(--r95-color-headerText);
+}
+.r95_1kpzw684 {
+  background: var(--r95-color-headerNotActiveBackground);
+  color: var(--r95-color-headerNotActiveText);
+}
+.r95_1kpzw682 svg {
+  width: var(--r95-space-16);
+  height: var(--r95-space-16);
+  margin-right: var(--r95-space-4);
+}
+.r95_1kpzw685 {
+  flex-grow: 1;
+  line-height: 1.4em;
+  margin: 0;
+  font-size: 1em;
+  text-shadow: 0.5px 0px white, 1.5px 0px white;
+  color: transparent;
+  letter-spacing: 1px;
+}

package/cjs/Tooltip/Tooltip.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Tooltip_css = require("./Tooltip.css.cjs");
+const cn = require("classnames");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function formatDate(date) {
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const day = date.getDate();
+  const monthIndex = date.getMonth();
+  const year = date.getFullYear();
+  return `${day.toString().padStart(2, "0")} ${monthNames[monthIndex]} ${year}`;
+}
+const TooltipRenderer = ({
+  children,
+  text = formatDate(/* @__PURE__ */ new Date()),
+  delay = 1e3,
+  ...rest
+}, ref) => {
+  const [show, setShow] = React__namespace.useState(false);
+  const [delayTimer, setDelayTimer] = React__namespace.useState(0);
+  const handleEnter = () => {
+    const timer = window.setTimeout(() => {
+      setShow(true);
+    }, delay);
+    setDelayTimer(timer);
+  };
+  const handleLeave = () => {
+    clearTimeout(delayTimer);
+    setShow(false);
+  };
+  return /* @__PURE__ */ React__namespace.createElement(
+    "div",
+    {
+      ...rest,
+      className: cn(Tooltip_css.wrapper, rest.className),
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      ref
+    },
+    show && /* @__PURE__ */ React__namespace.createElement("div", { className: Tooltip_css.tip }, text),
+    children
+  );
+};
+const Tooltip = React__namespace.forwardRef(
+  TooltipRenderer
+);
+exports.Tooltip = Tooltip;