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

package/esm/Tree/Node.mjs

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { MediaCd, FileText, Bat, FileFont2, FilePen, FileSettings, FileTextSettings, BatExec, FolderOpen, Folder } from "@react95/icons";
+import { node, nodeContent, folderStatus, iconContainer, label, tree, nodeRoot } from "./Tree.css.mjs";
+import { Frame } from "../Frame/Frame.mjs";
+import cn from "classnames";
+const icons = {
+  FILE_MEDIA: MediaCd,
+  FILE_TEXT: FileText,
+  FILE_UNKNOWN: Bat,
+  FILE_FONT: FileFont2,
+  FILE_PEN: FilePen,
+  FILE_SETTINGS: FileSettings,
+  FILE_TEXT_SETTINGS: FileTextSettings,
+  FILE_EXECUTABLE: BatExec
+};
+const NodeIcon = ({
+  hasChildren,
+  isOpen
+}) => {
+  if (!hasChildren) {
+    return /* @__PURE__ */ React.createElement(Bat, { variant: "16x16_4", "data-testid": "react95-default-icon-bat" });
+  }
+  if (isOpen) {
+    return /* @__PURE__ */ React.createElement(
+      FolderOpen,
+      {
+        variant: "16x16_4",
+        "data-testid": "react95-default-icon-folder-open"
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(Folder, { variant: "16x16_4", "data-testid": "react95-default-icon-folder" });
+};
+const Node = ({
+  children = [],
+  id,
+  icon,
+  label: label$1,
+  onClick = () => {
+  },
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const hasChildren = children.length > 0;
+  const onClickHandler = (event) => {
+    onClick(event, {
+      id,
+      icon,
+      label: label$1,
+      children
+    });
+  };
+  const onKeyDownHandler = (event) => {
+    if (event.key === " ") {
+      setIsOpen(!isOpen);
+      onClickHandler(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Frame, { as: "li", ...rest, className: node }, /* @__PURE__ */ React.createElement("div", { className: nodeContent }, hasChildren && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: folderStatus,
+      onClick: () => setIsOpen(!isOpen)
+    },
+    isOpen ? "-" : "+"
+  ), /* @__PURE__ */ React.createElement("div", { className: iconContainer({ hasChildren }) }, icon || /* @__PURE__ */ React.createElement(NodeIcon, { hasChildren, isOpen })), /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      className: label,
+      tabIndex: 0,
+      onDoubleClick: () => setIsOpen(!isOpen),
+      onClick: onClickHandler,
+      onKeyDown: onKeyDownHandler
+    },
+    label$1
+  )), hasChildren && isOpen && /* @__PURE__ */ React.createElement("ul", { className: tree }, children == null ? void 0 : children.map((dataNode) => /* @__PURE__ */ React.createElement(Node, { key: dataNode.id, ...dataNode }))));
+};
+const NodeRoot = ({
+  id,
+  icon,
+  label: label$1,
+  onClick = () => {
+  },
+  ...rest
+}) => {
+  const onClickHandler = (event) => {
+    onClick(event, {
+      id,
+      icon,
+      label: label$1
+    });
+  };
+  const onKeyDownHandler = (event) => {
+    if (event.key === " ") {
+      onClickHandler(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Frame, { ...rest, className: cn(node, nodeRoot) }, /* @__PURE__ */ React.createElement("div", { className: nodeContent }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        iconContainer.classNames.base,
+        iconContainer.classNames.variants.hasChildren.true
+      )
+    },
+    icon || /* @__PURE__ */ React.createElement(NodeIcon, { hasChildren: false, isOpen: true })
+  ), /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      className: label,
+      tabIndex: 0,
+      onClick: onClickHandler,
+      onKeyDown: onKeyDownHandler
+    },
+    label$1
+  )));
+};
+export {
+  Node,
+  NodeRoot,
+  icons
+};

package/esm/Tree/Tree.css.mjs

@@ -0,0 +1,18 @@
+import './Tree.css.ts.vanilla.css';
+/* empty css                          */import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var folderStatus = "r95_z2881c5";
+var iconContainer = createRuntimeFn({ defaultClassName: "r95_z2881c6", variantClassNames: { hasChildren: { true: "r95_z2881c7", false: "r95_z2881c8" } }, defaultVariants: {}, compoundVariants: [] });
+var label = "r95_z2881c4";
+var node = "r95_z2881c1";
+var nodeContent = "r95_z2881c3";
+var nodeRoot = "r95_z2881c2";
+var tree = "r95_z2881c0";
+export {
+  folderStatus,
+  iconContainer,
+  label,
+  node,
+  nodeContent,
+  nodeRoot,
+  tree
+};

package/esm/Tree/Tree.css.ts.vanilla.css

@@ -0,0 +1,90 @@
+.r95_z2881c0 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.r95_z2881c0 ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-left: var(--r95-space-6);
+}
+.r95_z2881c1 {
+  margin-left: var(--r95-space-13);
+  border-left-width: thin;
+  border-left-style: dotted;
+  border-left-color: var(--r95-color-borderDarkest);
+  position: relative;
+}
+.r95_z2881c1:last-child {
+  border-left-color: transparent;
+}
+.r95_z2881c1:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: var(--r95-space-16);
+  height: var(--r95-space-10);
+  vertical-align: top;
+  border-bottom-width: thin;
+  border-bottom-style: dotted;
+  border-bottom-color: var(--r95-color-borderDarkest);
+  display: inline-block;
+}
+.r95_z2881c1:last-child:before {
+  border-left-width: thin;
+  border-left-style: dotted;
+  border-left-color: var(--r95-color-borderDarkest);
+  left: calc(var(--r95-space-1) * -1);
+  width: var(--r95-space-15);
+}
+.r95_z2881c2 {
+  padding: 0;
+  margin: 0;
+  border-left: unset;
+}
+.r95_z2881c2:before {
+  content: unset;
+}
+.r95_z2881c3 {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.r95_z2881c4 {
+  outline: none;
+  padding: var(--r95-space-1);
+}
+.r95_z2881c4:focus {
+  border-width: var(--r95-space-1);
+  border-style: dotted;
+  padding: var(--r95-space-0);
+}
+.r95_z2881c5 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--r95-space-10);
+  height: var(--r95-space-10);
+  border-width: var(--r95-space-1);
+  border-style: solid;
+  border-color: var(--r95-color-borderDarkest);
+  background-color: var(--r95-color-inputBackground);
+  font-size: 11px;
+  margin-left: calc(var(--r95-space-5) * -1);
+  user-select: none;
+}
+.r95_z2881c6 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--r95-space-20);
+  min-height: var(--r95-space-20);
+  margin-right: var(--r95-space-2);
+}
+.r95_z2881c7 {
+  margin-left: var(--r95-space-2);
+}
+.r95_z2881c8 {
+  margin-left: var(--r95-space-6);
+}

package/esm/Tree/Tree.mjs

@@ -0,0 +1,16 @@
+import React__default, { forwardRef } from "react";
+import { NodeRoot, Node, icons } from "./Node.mjs";
+import { tree } from "./Tree.css.mjs";
+import { Frame } from "../Frame/Frame.mjs";
+const Tree = forwardRef(
+  ({ data, root, ...rest }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, root && /* @__PURE__ */ React__default.createElement(NodeRoot, { ...root }), /* @__PURE__ */ React__default.createElement(Frame, { ...rest, className: tree, as: "ul", ref }, data.map((dataNode) => /* @__PURE__ */ React__default.createElement(Node, { key: dataNode.id, ...dataNode }))));
+  }
+);
+Tree.defaultProps = {
+  data: []
+};
+Tree.icons = icons;
+export {
+  Tree
+};

package/esm/Video/Video.css.mjs

@@ -0,0 +1,22 @@
+import './Video.css.ts.vanilla.css';
+/* empty css                           */import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var controlBtn = "r95_13gnpv09";
+var controls = "r95_13gnpv03";
+var countDownContainer = "r95_13gnpv04";
+var currentTime = "r95_13gnpv06";
+var divider = "r95_13gnpv08";
+var elapsedTime = "r95_13gnpv07";
+var range = "r95_13gnpv0a";
+var videoFont = "r95_13gnpv05";
+var videoTag = createRuntimeFn({ defaultClassName: "r95_13gnpv00", variantClassNames: { visible: { true: "r95_13gnpv01", false: "r95_13gnpv02" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  controlBtn,
+  controls,
+  countDownContainer,
+  currentTime,
+  divider,
+  elapsedTime,
+  range,
+  videoFont,
+  videoTag
+};

package/esm/Video/Video.css.ts.vanilla.css

@@ -0,0 +1,83 @@
+.r95_13gnpv00 {
+  width: 100%;
+  padding: var(--r95-space-2);
+}
+.r95_13gnpv01 {
+  display: block;
+}
+.r95_13gnpv02 {
+  display: none;
+}
+.r95_13gnpv03 {
+  display: flex;
+  align-items: center;
+  padding-top: var(--r95-space-2);
+  padding-bottom: var(--r95-space-2);
+}
+.r95_13gnpv04 {
+  display: flex;
+  padding: var(--r95-space-6);
+  margin-bottom: var(--r95-space-4);
+  box-shadow: var(--r95-shadow-in);
+  background-color: var(--r95-color-canvas);
+  height: 50px;
+  color: var(--r95-color-canvasText);
+}
+.r95_13gnpv05 {
+  font-family: React95Video-Numbers;
+  text-transform: uppercase;
+}
+.r95_13gnpv06 {
+  margin-top: auto;
+  font-size: 22px;
+}
+.r95_13gnpv07 {
+  height: var(--r95-space-12);
+}
+.r95_13gnpv08 {
+  display: block;
+  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);
+  margin-bottom: var(--r95-space-2);
+}
+.r95_13gnpv09 {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--r95-space-20);
+  height: var(--r95-space-20);
+  padding: var(--r95-space-7);
+}
+.r95_13gnpv09:active, .r95_13gnpv09:focus {
+  width: var(--r95-space-20);
+  height: var(--r95-space-20);
+  padding: var(--r95-space-7);
+}
+.r95_13gnpv09:disabled {
+  padding: var(--r95-space-4);
+}
+.r95_13gnpv09 svg {
+  fill: var(--r95-color-materialText);
+}
+.r95_13gnpv09:disabled svg {
+  fill: var(--r95-color-borderDark);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-style: solid;
+  border-bottom-color: var(--r95-color-borderLightest);
+  border-right-width: var(--r95-space-1);
+  border-right-style: solid;
+  border-right-color: var(--r95-color-borderLightest);
+}
+.r95_13gnpv0a::-webkit-slider-thumb {
+  height: var(--r95-space-18);
+  margin-top: calc(var(--r95-space-7) * -1);
+  width: var(--r95-space-10);
+}
+.r95_13gnpv0a[value='0']::-webkit-slider-thumb {
+  margin-left: calc(var(--r95-space-2) * -1);
+}

package/esm/Video/Video.mjs

@@ -0,0 +1,206 @@
+import * as React from "react";
+import { Mplayer113, User4 } from "@react95/icons";
+import { videoTag, divider, countDownContainer, videoFont, currentTime, elapsedTime, controls, controlBtn, range } from "./Video.css.mjs";
+import { Frame } from "../Frame/Frame.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Range } from "../Range/Range.mjs";
+import { TitleBar } from "../TitleBar/TitleBar.mjs";
+import Play from "./buttons/Play.mjs";
+import Pause from "./buttons/Pause.mjs";
+import Stop from "./buttons/Stop.mjs";
+import Fullscreen from "./buttons/Fullscreen.mjs";
+import cn from "classnames";
+const Source = ({ src }) => /* @__PURE__ */ React.createElement("source", { src, type: `video/${src.substring(src.length - 3)}` });
+const PlayOrPause = ({ playing }) => playing ? /* @__PURE__ */ React.createElement(Pause, null) : /* @__PURE__ */ React.createElement(Play, null);
+const arrayFy = (str) => [].concat(str);
+function updateProgressBar(player, updateProgress) {
+  const percentage = Math.floor(100 / player.duration * player.currentTime);
+  updateProgress(percentage);
+}
+function parseCurrentTime(secs) {
+  if (!secs) {
+    return "00:00";
+  }
+  const sec = parseInt(secs.toString(), 10);
+  const hours = Math.floor(sec / 3600);
+  const minutes = Math.floor(sec / 60) % 60;
+  const seconds = sec % 60;
+  return [hours, minutes, seconds].map((v) => v < 10 ? `0${v}` : v).filter((v, i) => v !== "00" || i > 0).join(":");
+}
+const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
+  const [playing, setPlaying] = React.useState(false);
+  const [loadeddata, setLoadeddata] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  const player = React.useRef(null);
+  const progressRef = React.useRef(null);
+  const wrapperRef = React.useRef(null);
+  const playPauseRef = React.useRef(null);
+  const stopRef = React.useRef(null);
+  const fullScreenRef = React.useRef(null);
+  const paths = arrayFy(src);
+  const [pathname] = paths;
+  const normalizedName = name || pathname.replace(/^.*[\\/]/, "");
+  const title = `${normalizedName}${!loadeddata ? " (Opening)" : ""}`;
+  React.useImperativeHandle(ref, () => ({
+    get video() {
+      return player;
+    },
+    get progress() {
+      return progressRef;
+    },
+    get wrapper() {
+      return wrapperRef;
+    },
+    get playpause() {
+      return playPauseRef;
+    },
+    get stop() {
+      return stopRef;
+    },
+    get fullScreen() {
+      return fullScreenRef;
+    }
+  }));
+  React.useEffect(() => {
+    var _a, _b, _c, _d;
+    (_a = player.current) == null ? void 0 : _a.addEventListener(
+      "ended",
+      () => {
+        setPlaying(false);
+        setProgress(0);
+      },
+      false
+    );
+    (_b = player.current) == null ? void 0 : _b.addEventListener(
+      "timeupdate",
+      () => {
+        if (player.current) {
+          updateProgressBar(player.current, setProgress);
+        }
+      },
+      false
+    );
+    (_c = player.current) == null ? void 0 : _c.addEventListener(
+      "loadeddata",
+      () => {
+        setLoadeddata(true);
+      },
+      false
+    );
+    (_d = player.current) == null ? void 0 : _d.addEventListener(
+      "playing",
+      () => {
+        setPlaying(true);
+      },
+      false
+    );
+  }, [player.current]);
+  return /* @__PURE__ */ React.createElement(
+    Frame,
+    {
+      ...props,
+      padding: "$2",
+      boxShadow: "$out",
+      backgroundColor: "$material",
+      ref: wrapperRef
+    },
+    /* @__PURE__ */ React.createElement(TitleBar, { icon: /* @__PURE__ */ React.createElement(Mplayer113, { variant: "16x16_4" }), title }),
+    /* @__PURE__ */ React.createElement(
+      "video",
+      {
+        className: videoTag({ visible: loadeddata }),
+        ...videoProps,
+        ref: player
+      },
+      paths.map((s) => /* @__PURE__ */ React.createElement(Source, { key: s, src: s }))
+    ),
+    loadeddata && /* @__PURE__ */ React.createElement("span", { className: divider }),
+    /* @__PURE__ */ React.createElement(Frame, { maxWidth: "250px", mx: "auto", mb: "$4" }, /* @__PURE__ */ React.createElement("div", { className: countDownContainer }, /* @__PURE__ */ React.createElement(Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: videoFont,
+        style: {
+          marginTop: "auto"
+        }
+      },
+      player.current && parseCurrentTime(player.current.duration)
+    ), /* @__PURE__ */ React.createElement("div", { className: videoFont, style: { height: 12 } }, !loadeddata && "Openning")), /* @__PURE__ */ React.createElement(Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React.createElement("div", { className: cn(videoFont, currentTime) }, player.current && parseCurrentTime(player.current.currentTime)), /* @__PURE__ */ React.createElement("div", { className: cn(videoFont, elapsedTime) }, "time"))), /* @__PURE__ */ React.createElement("div", { className: controls }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        className: controlBtn,
+        disabled: !loadeddata,
+        onClick: () => {
+          var _a, _b;
+          if (!playing) {
+            (_a = player.current) == null ? void 0 : _a.play();
+          } else {
+            (_b = player.current) == null ? void 0 : _b.pause();
+          }
+          setPlaying(!playing);
+        },
+        ref: playPauseRef
+      },
+      loadeddata ? /* @__PURE__ */ React.createElement(PlayOrPause, { playing }) : /* @__PURE__ */ React.createElement(
+        User4,
+        {
+          style: { borderRight: "none", borderBottom: "none" },
+          variant: "32x32_4"
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        className: controlBtn,
+        disabled: !loadeddata,
+        onClick: () => {
+          if (player.current) {
+            player.current.pause();
+            player.current.currentTime = 0;
+          }
+          setPlaying(false);
+        },
+        ref: stopRef
+      },
+      /* @__PURE__ */ React.createElement(Stop, null)
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        className: controlBtn,
+        disabled: !loadeddata,
+        onClick: () => {
+          var _a;
+          (_a = player == null ? void 0 : player.current) == null ? void 0 : _a.requestFullscreen();
+        },
+        ref: fullScreenRef
+      },
+      /* @__PURE__ */ React.createElement(Fullscreen, null)
+    ), /* @__PURE__ */ React.createElement(
+      Range,
+      {
+        className: range,
+        ref: progressRef,
+        min: "0",
+        max: "100",
+        step: "1",
+        value: progress,
+        style: {
+          width: "70%",
+          marginLeft: 20
+        },
+        onChange: ({ target }) => {
+          const { current: video } = player;
+          if (video) {
+            const value = parseInt(target.value);
+            const percent = value / 100;
+            video.currentTime = percent * video.duration;
+            setProgress(value);
+          }
+        }
+      }
+    )))
+  );
+};
+const Video = React.forwardRef(VideoRenderer);
+export {
+  Video
+};

package/esm/Video/buttons/Fullscreen.mjs

@@ -0,0 +1,23 @@
+import * as React from "react";
+const Fullscreen = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "6",
+    viewBox: "0 0 24 24",
+    height: "6",
+    "aria-label": "fullscreen",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M24 9h-2v-5h-7v-2h9v7zm-9 13v-2h7v-5h2v7h-9zm-15-7h2v5h7v2h-9v-7zm9-13v2h-7v5h-2v-7h9zm11 4h-16v12h16v-12z",
+      style: { width: 1e3 }
+    }
+  )
+);
+const Fullscreen$1 = Fullscreen;
+export {
+  Fullscreen$1 as default
+};

package/esm/Video/buttons/Pause.mjs

@@ -0,0 +1,17 @@
+import * as React from "react";
+const Pause = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    height: "6",
+    viewBox: "0 0 424.236 424.236",
+    width: "6",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": "pause",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M256.471 2h176.765v424.236H256.471zM2 2h176.765v424.236H2z" })
+);
+const Pause$1 = Pause;
+export {
+  Pause$1 as default
+};

package/esm/Video/buttons/Play.mjs

@@ -0,0 +1,17 @@
+import * as React from "react";
+const Play = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    height: "6",
+    viewBox: "0 0 494.942 494.942",
+    width: "6",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": "play",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M35.353 0l424.236 247.471L35.353 494.942z" })
+);
+const Play$1 = Play;
+export {
+  Play$1 as default
+};

package/esm/Video/buttons/Stop.mjs

@@ -0,0 +1,16 @@
+import * as React from "react";
+const Stop = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "6",
+    height: "6",
+    "aria-label": "stop",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M0 0h306v306H0z" })
+);
+const Stop$1 = Stop;
+export {
+  Stop$1 as default
+};

package/esm/index.mjs

@@ -0,0 +1,50 @@
+import { Modal } from "./Modal/Modal.mjs";
+import { ModalContext } from "./Modal/ModalContext.mjs";
+import { ModalProvider } from "./Modal/ModalProvider.mjs";
+import { Tabs } from "./Tabs/Tabs.mjs";
+import { Tab } from "./Tabs/Tab.mjs";
+import { Alert } from "./Alert/Alert.mjs";
+import { Avatar } from "./Avatar/Avatar.mjs";
+import { Button } from "./Button/Button.mjs";
+import { Checkbox } from "./Checkbox/Checkbox.mjs";
+import { Cursor } from "./Cursor/Cursor.css.mjs";
+import { Dropdown } from "./Dropdown/Dropdown.mjs";
+import { Fieldset } from "./Fieldset/Fieldset.mjs";
+import { Frame } from "./Frame/Frame.mjs";
+import { Input } from "./Input/Input.mjs";
+import { List } from "./List/List.mjs";
+import { ProgressBar } from "./ProgressBar/ProgressBar.mjs";
+import { RadioButton } from "./RadioButton/RadioButton.mjs";
+import { Range } from "./Range/Range.mjs";
+import { TaskBar } from "./TaskBar/TaskBar.mjs";
+import { TextArea } from "./TextArea/TextArea.mjs";
+import { Tree } from "./Tree/Tree.mjs";
+import { Tooltip } from "./Tooltip/Tooltip.mjs";
+import { TitleBar } from "./TitleBar/TitleBar.mjs";
+import { Video } from "./Video/Video.mjs";
+export {
+  Alert,
+  Avatar,
+  Button,
+  Checkbox,
+  Cursor,
+  Dropdown,
+  Fieldset,
+  Frame,
+  Input,
+  List,
+  Modal,
+  ModalContext,
+  ModalProvider,
+  ProgressBar,
+  RadioButton,
+  Range,
+  Tab,
+  Tabs,
+  TaskBar,
+  TextArea,
+  TitleBar,
+  Tooltip,
+  Tree,
+  Video
+};

package/esm/themes/azureOrange.css.mjs

@@ -0,0 +1,2 @@
+import './azureOrange.css.ts.vanilla.css';
+/* empty css                                 */