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

package/cjs/GlobalStyle.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const GlobalStyle_css = require("./GlobalStyle/GlobalStyle.css.cjs");
+exports.GlobalStyle = GlobalStyle_css;

package/cjs/Input/Input.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.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 Input = React__namespace.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "input" })
+);
+exports.Input = Input;

package/cjs/Input/Input.css.cjs

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

package/cjs/Input/Input.css.ts.vanilla.css

@@ -0,0 +1,21 @@
+.r95_taf7or0 {
+  outline: none;
+  border: none;
+  padding-top: var(--r95-space-3);
+  padding-right: var(--r95-space-3);
+  padding-bottom: var(--r95-space-5);
+  padding-left: var(--r95-space-3);
+  color: var(--r95-color-materialText);
+  background-color: var(--r95-color-inputBackground);
+  border-radius: 0;
+  border-top-width: var(--r95-space-1);
+  border-top-style: solid;
+  border-top-color: var(--r95-color-borderDark);
+  border-right-width: 0;
+  border-bottom-width: 0;
+  border-left-width: var(--r95-space-1);
+  border-left-style: solid;
+  border-left-color: var(--r95-color-borderDark);
+  box-shadow: var(--r95-shadow-input);
+  -webkit-appearance: none;
+}

package/cjs/List/List.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ListItem = require("./ListItem.cjs");
+const ListDivider = require("./ListDivider.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const React = require("react");
+const List_css = require("./List.css.cjs");
+const cn = require("classnames");
+const ListRenderer = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(List_css.list, rest.className), as: "ul" })
+);
+const List = Object.assign(ListRenderer, {
+  Item: ListItem.ListItem,
+  Divider: ListDivider.Divider
+});
+exports.List = List;

package/cjs/List/List.css.cjs

@@ -0,0 +1,9 @@
+require('./List.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                            */var divider = "r95_1lxkvz41";
+var list = "r95_1lxkvz42";
+var listItem = "r95_1lxkvz40";
+exports.divider = divider;
+exports.list = list;
+exports.listItem = listItem;

package/cjs/List/List.css.ts.vanilla.css

@@ -0,0 +1,66 @@
+.r95_1lxkvz40 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  margin: var(--r95-space-0);
+  padding-block: var(--r95-space-2);
+  padding-inline: var(--r95-space-6);
+  color: var(--r95-color-materialText);
+}
+.r95_1lxkvz40:hover {
+  background-color: var(--r95-color-headerBackground);
+  color: var(--r95-color-materialTextInvert);
+}
+.r95_1lxkvz40:not(:has(svg)) {
+  padding-inline-start: 26px;
+}
+.r95_1lxkvz40:has(ul):after {
+  content: '';
+  position: absolute;
+  width: var(--r95-space-5);
+  height: var(--r95-space-8);
+  right: var(--r95-space-8);
+  background-color: var(--r95-color-materialText);
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTS4wMDQgMTguMDA3bDMuMDE2LS4wMTMuMDEtMy4wMSAyLjE4Ni4wMXYtMi4wMjVsMi44MTYtLjAxLS4wMDktMi45NEgxMHYtMmMuMDEtLjAxLTEuOTktLjAzNi0yLS4wMjYuMDEtLjAxLjAzNS0zLjAxLjAyNi0zIC4wMS0uMDEtMi44NDUtLjAxMS0yLjg1NS0uMDAxdi0yTDMgMi45OWMuMDEtLjAxLjAzNS0zLjAxMS4wMjUtMy4wMDEuMDEtLjAxLTMuMDQuMDEzLTMuMDI1LjAyM2wuMDA0IDE3Ljk5NHoiIGZpbGwtb3BhY2l0eT0ibnVsbCIvPjwvc3ZnPg==');
+  mask-position: center center;
+  mask-size: var(--r95-space-5) var(--r95-space-8);
+  mask-repeat: no-repeat;
+}
+.r95_1lxkvz40:has(ul):hover:after {
+  background-color: var(--r95-color-materialTextInvert);
+}
+.r95_1lxkvz40 svg {
+  margin-right: var(--r95-space-10);
+  min-width: var(--r95-space-16);
+}
+.r95_1lxkvz40 ul {
+  display: none;
+  position: absolute;
+  top: calc(var(--r95-space-2) * -1);
+  left: 97%;
+  color: var(--r95-color-materialText);
+  z-index: var(--r95-zIndex-taskbar);
+}
+.r95_1lxkvz40:has(ul):hover > ul {
+  display: block;
+}
+.r95_1lxkvz41 {
+  height: var(--r95-space-1);
+  border-top-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderDark);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-style: solid;
+  border-bottom-color: var(--r95-color-borderLightest);
+  width: 98%;
+  margin-left: var(--r95-space-2);
+}
+.r95_1lxkvz42 {
+  background-color: var(--r95-color-material);
+  padding: var(--r95-space-2);
+  border: none;
+  margin: 0;
+  list-style: none;
+  box-shadow: var(--r95-shadow-out);
+}

package/cjs/List/ListDivider.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Frame = require("../Frame/Frame.cjs");
+const List_css = require("./List.css.cjs");
+const cn = require("classnames");
+const Divider = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      ref,
+      className: cn(List_css.divider, rest.className),
+      as: "li"
+    }
+  )
+);
+Divider.displayName = "List.Divider";
+exports.Divider = Divider;

package/cjs/List/ListItem.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const cn = require("classnames");
+const Frame = require("../Frame/Frame.cjs");
+const List_css = require("./List.css.cjs");
+const Item = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(List_css.listItem, rest.className), as: "li" }));
+const ListItem = React.forwardRef(
+  ({ icon, children = [], ...rest }, ref) => /* @__PURE__ */ React.createElement(Item, { ...rest, ref }, icon, children)
+);
+ListItem.displayName = "List.Item";
+exports.ListItem = ListItem;

package/cjs/Modal/Modal.cjs

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Draggable = require("react-draggable");
+const Button = require("../Button/Button.cjs");
+const TitleBar = require("../TitleBar/TitleBar.cjs");
+const ModalContext = require("./ModalContext.cjs");
+const Modal_css = require("./Modal.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const close = require("./close.svg.cjs");
+const help = require("./help.svg.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 ModalRenderer = ({
+  hasWindowButton: hasButton = true,
+  buttons = [],
+  buttonsAlignment = "flex-end",
+  children,
+  onClose = () => {
+  },
+  onHelp,
+  defaultPosition = { x: 0, y: 0 },
+  positionOffset,
+  height,
+  icon,
+  menu = [],
+  title,
+  width,
+  ...rest
+}, ref) => {
+  const {
+    addWindows,
+    removeWindow,
+    updateWindow,
+    setActiveWindow,
+    activeWindow
+  } = React__namespace.useContext(ModalContext.ModalContext);
+  const [id, setId] = React__namespace.useState(null);
+  const [menuOpened, setMenuOpened] = React__namespace.useState("");
+  const [isActive, setIsActive] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    if (!id) {
+      const newId = addWindows({ icon, title, hasButton });
+      if (newId) {
+        setId(newId);
+        setActiveWindow(newId);
+      }
+    } else {
+      updateWindow(id, { icon, title, hasButton });
+    }
+  }, [id, icon, title, hasButton]);
+  React__namespace.useEffect(() => {
+    return () => {
+      if (id) {
+        removeWindow(id);
+      }
+    };
+  }, [id]);
+  React__namespace.useEffect(() => setIsActive(id === activeWindow), [id, activeWindow]);
+  return /* @__PURE__ */ React__namespace.createElement(
+    Draggable,
+    {
+      handle: ".draggable",
+      defaultPosition,
+      positionOffset,
+      onMouseDown: id ? () => setActiveWindow(id) : void 0
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      Frame.Frame,
+      {
+        ...rest,
+        width,
+        height,
+        className: Modal_css.modalWrapper({ active: isActive }),
+        ref
+      },
+      /* @__PURE__ */ React__namespace.createElement(
+        TitleBar.TitleBar,
+        {
+          active: isActive,
+          icon,
+          title,
+          className: "draggable"
+        },
+        /* @__PURE__ */ React__namespace.createElement(TitleBar.TitleBar.OptionsBox, null, onHelp && /* @__PURE__ */ React__namespace.createElement(TitleBar.TitleBar.Option, null, /* @__PURE__ */ React__namespace.createElement("img", { src: help, alt: "help", onClick: onHelp })), /* @__PURE__ */ React__namespace.createElement(TitleBar.TitleBar.Option, { onClick: onClose }, /* @__PURE__ */ React__namespace.createElement("img", { src: close, alt: "close" })))
+      ),
+      menu && menu.length > 0 && /* @__PURE__ */ React__namespace.createElement("ul", { className: Modal_css.menuWrapper }, menu.map(({ name, list }) => {
+        const active = menuOpened === name;
+        return /* @__PURE__ */ React__namespace.createElement(
+          "li",
+          {
+            key: name,
+            onMouseDown: () => setMenuOpened(name),
+            className: Modal_css.menuItem({ active })
+          },
+          name,
+          active && list
+        );
+      })),
+      /* @__PURE__ */ React__namespace.createElement("div", { className: Modal_css.content, onClick: () => setMenuOpened("") }, children),
+      buttons && buttons.length > 0 && /* @__PURE__ */ React__namespace.createElement(
+        Frame.Frame,
+        {
+          className: Modal_css.buttonWrapper,
+          justifyContent: buttonsAlignment
+        },
+        buttons.map((button) => /* @__PURE__ */ React__namespace.createElement(
+          Button.Button,
+          {
+            key: button.value,
+            onClick: button.onClick,
+            value: button.value
+          },
+          button.value
+        ))
+      )
+    )
+  );
+};
+const Modal = React__namespace.forwardRef(
+  ModalRenderer
+);
+Modal.displayName = "Modal";
+Modal.defaultProps = {
+  icon: void 0,
+  title: "Modal",
+  children: null,
+  defaultPosition: { x: 0, y: 0 },
+  buttons: [],
+  menu: [],
+  width: void 0,
+  height: void 0,
+  onClose: () => {
+  }
+};
+exports.Modal = Modal;

package/cjs/Modal/Modal.css.cjs

@@ -0,0 +1,14 @@
+require('./Modal.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                             */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var buttonWrapper = "r95_1txblt62";
+var content = "r95_1txblt63";
+var menuItem = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1txblt65", variantClassNames: { active: { true: "r95_1txblt66" } }, defaultVariants: {}, compoundVariants: [] });
+var menuWrapper = "r95_1txblt64";
+var modalWrapper = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1txblt60", variantClassNames: { active: { true: "r95_1txblt61" } }, defaultVariants: {}, compoundVariants: [] });
+exports.buttonWrapper = buttonWrapper;
+exports.content = content;
+exports.menuItem = menuItem;
+exports.menuWrapper = menuWrapper;
+exports.modalWrapper = modalWrapper;

package/cjs/Modal/Modal.css.ts.vanilla.css

@@ -0,0 +1,55 @@
+.r95_1txblt60 {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  padding: 2px 2px 8px;
+  top: 50px;
+  background-color: var(--r95-color-material);
+  box-shadow: var(--r95-shadow-out);
+}
+.r95_1txblt61 {
+  z-index: var(--r95-zIndex-modal);
+}
+.r95_1txblt62 {
+  display: flex;
+  gap: 6px;
+  flex-direction: row;
+  padding: 0 6px 6px 6px;
+}
+.r95_1txblt62 button {
+  min-width: 70px;
+}
+.r95_1txblt63 {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+}
+.r95_1txblt64 {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  border-bottom-style: solid;
+  border-width: 1px;
+  border-bottom-color: var(--r95-color-borderDark);
+  box-shadow: 0 1px 0 0 var(--r95-color-borderLighter);
+}
+.r95_1txblt65 {
+  position: relative;
+  padding-left: 6px;
+  padding-right: 6px;
+  user-select: none;
+}
+.r95_1txblt66 {
+  background-color: var(--r95-color-material);
+  color: var(--r95-color-materialTextInvert);
+}
+.r95_1txblt65 ul {
+  position: absolute;
+  left: 0;
+  color: var(--r95-color-materialText);
+}

package/cjs/Modal/ModalContext.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ModalContext = React.createContext({
+  windows: {},
+  addWindows: () => {
+  },
+  removeWindow: () => {
+  },
+  updateWindow: () => {
+  },
+  setActiveWindow: () => {
+  },
+  activeWindow: ""
+});
+exports.ModalContext = ModalContext;

package/cjs/Modal/ModalProvider.cjs

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const nanoid = require("nanoid");
+const React = require("react");
+const ModalContext = require("./ModalContext.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 windowStackReducer = (state, action) => {
+  const newWindows = { ...state };
+  switch (action.type) {
+    case "ADD_WINDOW": {
+      newWindows[action.id] = action.window;
+      return newWindows;
+    }
+    case "REMOVE_WINDOW": {
+      delete newWindows[action.id];
+      return newWindows;
+    }
+    case "UPDATE_WINDOW": {
+      newWindows[action.id] = action.window;
+      return newWindows;
+    }
+    default:
+      return state;
+  }
+};
+const ModalProvider = ({ children }) => {
+  const [windows, dispatch] = React__namespace.useReducer(windowStackReducer, {});
+  const [activeWindow, setActiveWindow] = React__namespace.useState();
+  const addWindows = (window) => {
+    const id = nanoid.nanoid();
+    dispatch({ type: "ADD_WINDOW", id, window });
+    return id;
+  };
+  const removeWindow = (id) => {
+    dispatch({ type: "REMOVE_WINDOW", id });
+  };
+  const updateWindow = (id, window) => {
+    dispatch({ type: "UPDATE_WINDOW", id, window });
+  };
+  return /* @__PURE__ */ React__namespace.createElement(
+    ModalContext.ModalContext.Provider,
+    {
+      value: {
+        windows,
+        addWindows,
+        removeWindow,
+        updateWindow,
+        setActiveWindow,
+        activeWindow
+      }
+    },
+    children
+  );
+};
+exports.ModalProvider = ModalProvider;

package/cjs/Modal/close.svg.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const close = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOCcgaGVpZ2h0PSc3JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00wIDBoMnYxaDF2MWgyVjFoMVYwaDJ2MUg3djFINnYxSDV2MWgxdjFoMXYxaDF2MUg2VjZINVY1SDN2MUgydjFIMFY2aDFWNWgxVjRoMVYzSDJWMkgxVjFIMFYweicgLz48L3N2Zz4=";
+module.exports = close;

package/cjs/Modal/help.svg.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const help = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNicgaGVpZ2h0PSc5JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTAgMWgydjJIMHpNMSAwaDR2MUgxek00IDFoMnYySDR6TTMgM2gydjFIM3pNMiA0aDJ2Mkgyek0yIDdoMnYySDJ6Jy8+PC9zdmc+";
+module.exports = help;

package/cjs/ProgressBar/ProgressBar.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const cn = require("classnames");
+const Frame = require("../Frame/Frame.cjs");
+const ProgressBar_css = require("./ProgressBar.css.cjs");
+const ProgressBar = React.forwardRef(
+  ({ width = "150px", percent = 0, ...rest }, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      width,
+      className: cn(ProgressBar_css.wrapper, rest.className),
+      ref
+    },
+    /* @__PURE__ */ React.createElement(Frame.Frame, { className: ProgressBar_css.whiteBar, width }, `${percent}%`),
+    /* @__PURE__ */ React.createElement(Frame.Frame, { className: ProgressBar_css.container, width: `${percent}%` }, /* @__PURE__ */ React.createElement(Frame.Frame, { className: ProgressBar_css.progress, width }, `${percent}%`))
+  )
+);
+exports.ProgressBar = ProgressBar;

package/cjs/ProgressBar/ProgressBar.css.cjs

@@ -0,0 +1,11 @@
+require('./ProgressBar.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                                   */var container = "r95_1drc6y72";
+var progress = "r95_1drc6y73";
+var whiteBar = "r95_1drc6y71";
+var wrapper = "r95_1drc6y70";
+exports.container = container;
+exports.progress = progress;
+exports.whiteBar = whiteBar;
+exports.wrapper = wrapper;

package/cjs/ProgressBar/ProgressBar.css.ts.vanilla.css

@@ -0,0 +1,32 @@
+.r95_1drc6y70 {
+  height: var(--r95-space-20);
+  position: relative;
+  text-align: center;
+}
+.r95_1drc6y71 {
+  height: var(--r95-space-20);
+  line-height: var(--r95-space-20);
+  border-left: var(--r95-space-1);
+  border-left-style: solid;
+  border-left-color: var(--r95-color-borderDark);
+  border-top: var(--r95-space-1);
+  border-top-style: solid;
+  border-top-color: var(--r95-color-borderDark);
+  background-color: var(--r95-color-inputBackground);
+  color: var(--r95-color-materialText);
+  box-shadow: var(--r95-shadow-input);
+}
+.r95_1drc6y72 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.r95_1drc6y73 {
+  height: var(--r95-space-17);
+  line-height: var(--r95-space-18);
+  margin-left: var(--r95-space-2);
+  margin-top: var(--r95-space-2);
+  background-color: var(--r95-color-progress);
+  color: var(--r95-color-materialTextInvert);
+}

package/cjs/RadioButton/RadioButton.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const RadioButton_css = require("./RadioButton.css.cjs");
+const RadioButton = React.forwardRef(
+  ({ children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement("label", { className: RadioButton_css.label }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "radio",
+      disabled,
+      className: RadioButton_css.field,
+      ref,
+      ...props
+    }
+  ), /* @__PURE__ */ React.createElement("span", { className: RadioButton_css.icon }), /* @__PURE__ */ React.createElement("span", { className: RadioButton_css.text }, children))
+);
+exports.RadioButton = RadioButton;

package/cjs/RadioButton/RadioButton.css.cjs

@@ -0,0 +1,11 @@
+require('./RadioButton.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                                   */var field = "r95_1rnz0nz3";
+var icon = "r95_1rnz0nz0";
+var label = "r95_1rnz0nz2";
+var text = "r95_1rnz0nz1";
+exports.field = field;
+exports.icon = icon;
+exports.label = label;
+exports.text = text;

package/cjs/RadioButton/RadioButton.css.ts.vanilla.css

@@ -0,0 +1,44 @@
+.r95_1rnz0nz0 {
+  width: var(--r95-space-12);
+  height: var(--r95-space-12);
+  display: inline-block;
+  position: absolute;
+  left: var(--r95-space-0);
+  top: var(--r95-space-0);
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfgBAoFICGfiwGRAAAAVElEQVQY05WOwQ2AMAwDL4i9WK2jlcmOR5NWquCBP45sx0mQaCbH4CixVWCZTcTCmOEcOasRuWe3O7p68IH/xsuVruZGr09gTgGgS7iAiDTKJEWAB4ZgRt37Ih39AAAAAElFTkSuQmCC');
+  image-rendering: pixelated;
+}
+.r95_1rnz0nz1 {
+  padding: var(--r95-space-1);
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: var(--r95-space-18);
+}
+.r95_1rnz0nz2 {
+  position: relative;
+  margin-bottom: var(--r95-space-10);
+  display: block;
+}
+.r95_1rnz0nz2:has(:disabled) {
+  color: var(--r95-color-materialTextDisabled);
+  text-shadow: 0.5px 0.5px var(--r95-color-materialTextDisabledShadow);
+}
+.r95_1rnz0nz3 {
+  margin: 0;
+  opacity: 0;
+}
+.r95_1rnz0nz3:focus ~ .r95_1rnz0nz1, &:active + .r95_1rnz0nz1 {
+  border-width: var(--r95-space-1);
+  border-style: dotted;
+  padding: 0;
+}
+.r95_1rnz0nz3:checked + .r95_1rnz0nz0 {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQKBR8ecTMGkAAAAG5JREFUKM+FUNsRwDAIwlz3ymqOZiajP8mdIablSznAh0Hg7pTecm8qdHcNOI1TTABUZB4Anpw2OSg3xjh2vqYuRARJsmmimZX1wmH4Q6t2/rrpeke1/zYhIvZvTChnaTwrQe99PcA2gxrTpzbNC7UzjLtY6hmzAAAAAElFTkSuQmCC');
+}
+.r95_1rnz0nz3:disabled + .r95_1rnz0nz0 {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfgBAoFIxjro9paAAAAVklEQVQY05WOQRKAMAgDNx3/pU/jafVleGiw1hkP5hLIwoCwIu0argqjBgwFkQF0gwNIpG20Fc9KkfGISzuND/0H/qq/Lkht/WnZgEw472mQDAriEOACnWkWUice+m0AAAAASUVORK5CYII=');
+}
+.r95_1rnz0nz3:checked:disabled + .r95_1rnz0nz0 {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQKBSIvSgVOFAAAAI1JREFUKM+FkcEVxCAIRIeshdgJlEZp0IlWwl6WPCW+7D/pOAOoZGZYMbNY9yJC675Vo6puBVQ11mBLcxprRxEBAEREuDu1Mg4qVfv03kNVtwMzwxgDvfdbm3OCmfV6q3jq+Aj84xHIS9Z1QmZ2v9JphISZ4e50vc17gtLIzAEA7v6o/NNp++kUMlj15Aun6lMg0OwfdAAAAABJRU5ErkJggg==');
+}