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

package/esm/themes/water.css.ts.vanilla.css

@@ -0,0 +1,58 @@
+:root {
+  --r95-zIndex-modal: 2;
+  --r95-zIndex-tooltip: 3;
+  --r95-zIndex-taskbar: 3;
+  --r95-space-0: 0px;
+  --r95-space-1: 1px;
+  --r95-space-2: 2px;
+  --r95-space-3: 3px;
+  --r95-space-4: 4px;
+  --r95-space-5: 5px;
+  --r95-space-6: 6px;
+  --r95-space-7: 7px;
+  --r95-space-8: 8px;
+  --r95-space-9: 9px;
+  --r95-space-10: 10px;
+  --r95-space-11: 11px;
+  --r95-space-12: 12px;
+  --r95-space-13: 13px;
+  --r95-space-14: 14px;
+  --r95-space-15: 15px;
+  --r95-space-16: 16px;
+  --r95-space-17: 17px;
+  --r95-space-18: 18px;
+  --r95-space-19: 19px;
+  --r95-space-20: 20px;
+  --r95-color-anchor: #72b3b4;
+  --r95-color-anchorVisited: #440381;
+  --r95-color-borderDark: #888c8f;
+  --r95-color-borderDarkest: #050608;
+  --r95-color-borderLight: #dfe0e3;
+  --r95-color-borderLighter: #ededef;
+  --r95-color-borderLightest: #f5f5f6;
+  --r95-color-canvas: #050608;
+  --r95-color-canvasText: #ffffff;
+  --r95-color-headerBackground: #72b3b4;
+  --r95-color-headerNotActiveBackground: #9a9e9c;
+  --r95-color-headerNotActiveText: #ced0cf;
+  --r95-color-headerText: #ffffff;
+  --r95-color-material: #ced0cf;
+  --r95-color-materialText: #050608;
+  --r95-color-materialTextDisabled: #888c8f;
+  --r95-color-materialTextDisabledShadow: #ffffff;
+  --r95-color-materialTextInvert: #ffffff;
+  --r95-color-progress: #72b3b4;
+  --r95-color-inputBackground: #ffffff;
+  --r95-color-inputBackgroundDisabled: #dfe0e3;
+  --r95-shadow-out: inset 0.5px 0.5px 0px 0.5px #f5f5f6,
+          inset 0 0 0 1px #888c8f,
+          1px 0px 0 0px #050608,
+          0px 1px 0 0px #050608,
+          1px 1px 0 0px #050608;
+  --r95-shadow-in: inset 0px 0px 0px 0px,
+        inset 1px 1px 0px 0px #888c8f,
+        0.5px 0.5px 0px 0.5px #f5f5f6;
+  --r95-shadow-input: inset -1px -1px 0 0 #ced0cf,
+            inset 1px 1px 0 0 #050608,
+            0.5px 0.5px 0 0.5px #f5f5f6;
+}

package/esm/themes/win95.css.js

@@ -1,36 +1,2 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { createTheme } from '@vanilla-extract/css';
-import { theme, generateShadows } from './baseTheme.css';
-import { contract } from './contract.css';
-var colors = {
-  anchor: '#000e7a',
-  anchorVisited: '#440381',
-  borderDark: '#868a8e',
-  borderDarkest: '#000000',
-  borderLight: '#d2d2d2',
-  borderLighter: '#e6e6e6',
-  borderLightest: '#ffffff',
-  canvas: '#000000',
-  canvasText: '#ffffff',
-  headerBackground: '#000e7a',
-  headerNotActiveBackground: '#7f787f',
-  headerNotActiveText: '#c6c6c6',
-  headerText: '#fefefe',
-  material: '#c3c7cb',
-  materialText: '#000000',
-  materialTextDisabled: '#868a8e',
-  materialTextDisabledShadow: '#d2d2d2',
-  materialTextInvert: '#ffffff',
-  progress: '#000e7a',
-  inputBackground: '#ffffff',
-  inputBackgroundDisabled: '#d2d2d2'
-};
-export var win95 = createTheme(contract, _objectSpread(_objectSpread({}, theme), {}, {
-  colors: colors,
-  shadows: generateShadows(colors)
-}));
+import './win95.css.ts.vanilla.css';
+/* empty css                          */

package/esm/themes/win95.css.ts.vanilla.css

@@ -0,0 +1,58 @@
+:root {
+  --r95-zIndex-modal: 2;
+  --r95-zIndex-tooltip: 3;
+  --r95-zIndex-taskbar: 3;
+  --r95-space-0: 0px;
+  --r95-space-1: 1px;
+  --r95-space-2: 2px;
+  --r95-space-3: 3px;
+  --r95-space-4: 4px;
+  --r95-space-5: 5px;
+  --r95-space-6: 6px;
+  --r95-space-7: 7px;
+  --r95-space-8: 8px;
+  --r95-space-9: 9px;
+  --r95-space-10: 10px;
+  --r95-space-11: 11px;
+  --r95-space-12: 12px;
+  --r95-space-13: 13px;
+  --r95-space-14: 14px;
+  --r95-space-15: 15px;
+  --r95-space-16: 16px;
+  --r95-space-17: 17px;
+  --r95-space-18: 18px;
+  --r95-space-19: 19px;
+  --r95-space-20: 20px;
+  --r95-color-anchor: #000e7a;
+  --r95-color-anchorVisited: #440381;
+  --r95-color-borderDark: #868a8e;
+  --r95-color-borderDarkest: #000000;
+  --r95-color-borderLight: #d2d2d2;
+  --r95-color-borderLighter: #e6e6e6;
+  --r95-color-borderLightest: #ffffff;
+  --r95-color-canvas: #000000;
+  --r95-color-canvasText: #ffffff;
+  --r95-color-headerBackground: #000e7a;
+  --r95-color-headerNotActiveBackground: #7f787f;
+  --r95-color-headerNotActiveText: #c6c6c6;
+  --r95-color-headerText: #fefefe;
+  --r95-color-material: #c3c7cb;
+  --r95-color-materialText: #000000;
+  --r95-color-materialTextDisabled: #868a8e;
+  --r95-color-materialTextDisabledShadow: #d2d2d2;
+  --r95-color-materialTextInvert: #ffffff;
+  --r95-color-progress: #000e7a;
+  --r95-color-inputBackground: #ffffff;
+  --r95-color-inputBackgroundDisabled: #d2d2d2;
+  --r95-shadow-out: inset 0.5px 0.5px 0px 0.5px #ffffff,
+          inset 0 0 0 1px #868a8e,
+          1px 0px 0 0px #000000,
+          0px 1px 0 0px #000000,
+          1px 1px 0 0px #000000;
+  --r95-shadow-in: inset 0px 0px 0px 0px,
+        inset 1px 1px 0px 0px #868a8e,
+        0.5px 0.5px 0px 0.5px #ffffff;
+  --r95-shadow-input: inset -1px -1px 0 0 #c3c7cb,
+            inset 1px 1px 0 0 #000000,
+            0.5px 0.5px 0 0.5px #ffffff;
+}

package/esm/themes.js

@@ -0,0 +1,72 @@
+import * as azureOrange_css from "./themes/azureOrange.css.js";
+import * as bee_css from "./themes/bee.css.js";
+import * as blackAndWhite_css from "./themes/blackAndWhite.css.js";
+import * as brick_css from "./themes/brick.css.js";
+import * as candy_css from "./themes/candy.css.js";
+import * as coldGray_css from "./themes/coldGray.css.js";
+import * as counterStrike_css from "./themes/counterStrike.css.js";
+import * as eggplant_css from "./themes/eggplant.css.js";
+import * as highContrast_css from "./themes/highContrast.css.js";
+import * as lilac_css from "./themes/lilac.css.js";
+import * as lilacRoseDark_css from "./themes/lilacRoseDark.css.js";
+import * as maple_css from "./themes/maple.css.js";
+import * as marine_css from "./themes/marine.css.js";
+import * as matrix_css from "./themes/matrix.css.js";
+import * as millenium_css from "./themes/millenium.css.js";
+import * as modernDark_css from "./themes/modernDark.css.js";
+import * as molecule_css from "./themes/molecule.css.js";
+import * as ninjaTurtles_css from "./themes/ninjaTurtles.css.js";
+import * as olive_css from "./themes/olive.css.js";
+import * as pamelaAnderson_css from "./themes/pamelaAnderson.css.js";
+import * as plum_css from "./themes/plum.css.js";
+import * as rainyDay_css from "./themes/rainyDay.css.js";
+import * as rose_css from "./themes/rose.css.js";
+import * as slate_css from "./themes/slate.css.js";
+import * as spruce_css from "./themes/spruce.css.js";
+import * as storm_css from "./themes/storm.css.js";
+import * as theSixtiesUSA_css from "./themes/theSixtiesUSA.css.js";
+import * as tokyoDark_css from "./themes/tokyoDark.css.js";
+import * as tooSexy_css from "./themes/tooSexy.css.js";
+import * as travel_css from "./themes/travel.css.js";
+import * as vaporTeal_css from "./themes/vaporTeal.css.js";
+import * as vermillion_css from "./themes/vermillion.css.js";
+import * as violetDark_css from "./themes/violetDark.css.js";
+import * as water_css from "./themes/water.css.js";
+import * as win95_css from "./themes/win95.css.js";
+export {
+  azureOrange_css as azureOrange,
+  bee_css as bee,
+  blackAndWhite_css as blackAndWhite,
+  brick_css as brick,
+  candy_css as candy,
+  coldGray_css as coldGray,
+  counterStrike_css as counterStrike,
+  eggplant_css as eggplant,
+  highContrast_css as highContrast,
+  lilac_css as lilac,
+  lilacRoseDark_css as lilacRoseDark,
+  maple_css as maple,
+  marine_css as marine,
+  matrix_css as matrix,
+  millenium_css as millenium,
+  modernDark_css as modernDark,
+  molecule_css as molecule,
+  ninjaTurtles_css as ninjaTurtles,
+  olive_css as olive,
+  pamelaAnderson_css as pamelaAnderson,
+  plum_css as plum,
+  rainyDay_css as rainyDay,
+  rose_css as rose,
+  slate_css as slate,
+  spruce_css as spruce,
+  storm_css as storm,
+  theSixtiesUSA_css as theSixtiesUSA,
+  tokyoDark_css as tokyoDark,
+  tooSexy_css as tooSexy,
+  travel_css as travel,
+  vaporTeal_css as vaporTeal,
+  vermillion_css as vermillion,
+  violetDark_css as violetDark,
+  water_css as water,
+  win95_css as win95
+};

package/package.json

@@ -1,8 +1,23 @@
 {
   "name": "@react95/core",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "Windows 95 styleguide",
   "main": "./cjs",
+  "exports": {
+    ".": {
+      "import": "./esm",
+      "require": "./cjs",
+      "types": "./@types/index.d.ts"
+    },
+    "./themes/*.css": {
+      "import": "./esm/themes/*.css.js",
+      "require": "./cjs/themes/*.css.js"
+    },
+    "./GlobalStyle": {
+      "import": "./esm/GlobalStyle.js",
+      "require": "./cjs/GlobalStyle.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/React95/React95.git",
@@ -12,8 +27,11 @@
   "license": "MIT",
   "dependencies": {
     "@react95/icons": "^2.1.1",
+    "@vanilla-extract/dynamic": "^2.1.0",
+    "@vanilla-extract/recipes": "^0.5.1",
     "classnames": "^2.5.1",
     "nanoid": "^3.3.1",
+    "rainbow-sprinkles": "^0.17.1",
     "react-draggable": "^4.4.4"
   },
   "peerDependencies": {
@@ -28,7 +46,7 @@
   "sideEffects": [
     "**/*.{woff2,woff,ttf,eot}"
   ],
-  "gitHead": "f6d40f0c6189989ffe7704c9cb625cffd981efd7",
+  "gitHead": "dee4b24057fcf48a6064fa9f1a8866f694ed22e3",
   "module": "./esm",
   "private": false,
   "types": "@types"

package/@types/Alert/index.d.ts

@@ -1,2 +0,0 @@
-import { Alert } from './Alert';
-export default Alert;

package/@types/Avatar/index.d.ts

@@ -1,2 +0,0 @@
-import { Avatar } from './Avatar';
-export default Avatar;

package/@types/Button/index.d.ts

@@ -1,2 +0,0 @@
-import { Button } from './Button';
-export default Button;

package/@types/Checkbox/index.d.ts

@@ -1,2 +0,0 @@
-import { Checkbox } from './Checkbox';
-export default Checkbox;

package/@types/Cursor/index.d.ts

@@ -1,2 +0,0 @@
-import { Cursor } from './Cursor.css';
-export default Cursor;

package/@types/Dropdown/index.d.ts

@@ -1,2 +0,0 @@
-import { Dropdown } from './Dropdown';
-export default Dropdown;

package/@types/Fieldset/index.d.ts

@@ -1,2 +0,0 @@
-import { Fieldset } from './Fieldset';
-export default Fieldset;

package/@types/Frame/index.d.ts

@@ -1,2 +0,0 @@
-import { Frame } from './Frame';
-export default Frame;

package/@types/GlobalStyle/utils.d.ts

@@ -1,15 +0,0 @@
-interface IBorderStyle {
-    direction?: 'extrude' | 'intrude';
-}
-interface IBorder extends IBorderStyle {
-    outerTopLeft: string;
-    innerTopLeft: string;
-    outerBottomRight: string;
-    innerBottomRight: string;
-}
-export declare const createBorder: ({ direction, outerTopLeft, innerTopLeft, outerBottomRight, innerBottomRight, }: IBorder) => {
-    border: number;
-    boxShadow: string;
-};
-export declare const createTriangleSVG: (color: string, angle?: number) => string;
-export {};

package/@types/Input/index.d.ts

@@ -1,2 +0,0 @@
-import { Input } from './Input';
-export default Input;

package/@types/List/index.d.ts

@@ -1,2 +0,0 @@
-import { List } from './List';
-export default List;

package/@types/Modal/index.d.ts

@@ -1,4 +0,0 @@
-import { Modal } from './Modal';
-import ModalContext from './ModalContext';
-import ModalProvider from './ModalProvider';
-export { Modal, ModalContext, ModalProvider };

package/@types/ProgressBar/index.d.ts

@@ -1,2 +0,0 @@
-import { ProgressBar } from './ProgressBar';
-export default ProgressBar;

package/@types/RadioButton/index.d.ts

@@ -1,2 +0,0 @@
-import { RadioButton } from './RadioButton';
-export default RadioButton;

package/@types/Range/index.d.ts

@@ -1,2 +0,0 @@
-import { Range } from './Range';
-export default Range;

package/@types/Tabs/index.d.ts

@@ -1,3 +0,0 @@
-import { Tab } from './Tab';
-import { Tabs } from './Tabs';
-export { Tab, Tabs };

package/@types/TaskBar/index.d.ts

@@ -1,2 +0,0 @@
-import { TaskBar } from './TaskBar';
-export default TaskBar;

package/@types/TextArea/index.d.ts

@@ -1,2 +0,0 @@
-import { TextArea } from './TextArea';
-export default TextArea;

package/@types/TitleBar/index.d.ts

@@ -1,2 +0,0 @@
-import { TitleBar } from './TitleBar';
-export default TitleBar;

package/@types/Tooltip/index.d.ts

@@ -1,2 +0,0 @@
-import { Tooltip } from './Tooltip';
-export default Tooltip;

package/@types/Tree/index.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from './Tree';
-export default Tree;

package/@types/Video/index.d.ts

@@ -1,2 +0,0 @@
-import { Video } from './Video';
-export default Video;

package/@types/shared/test/utils.d.ts

@@ -1,4 +0,0 @@
-import { RenderOptions, RenderResult, render } from '@testing-library/react';
-declare const waitRender: (ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>) => Promise<RenderResult>;
-export * from '@testing-library/react';
-export { render, waitRender };

package/cjs/Alert/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Alert = require("./Alert");
-var _default = exports["default"] = _Alert.Alert;

package/cjs/Avatar/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Avatar = require("./Avatar");
-var _default = exports["default"] = _Avatar.Avatar;

package/cjs/Button/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Button = require("./Button");
-var _default = exports["default"] = _Button.Button;

package/cjs/Checkbox/imgs/check-disabled.svg

@@ -1 +0,0 @@
-<svg width="7" height="8" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M-1-1h9V9h-9z"/><g><path fill="gray" d="M.014 1.897L0 5.905h.998l.015 1.084h.998v1.013h.984v-.999l.999.015.014-.885h.984V5.006h.999V3.994h.998L7.003 0l-.998.014v.999L5.006.998V2.14l-.998.015v.856l-.998.014v.984H1.997l-.014-.97-.985-.014L.984 1.91l-.97-.014z"/></g></svg>

package/cjs/Checkbox/imgs/check.svg

@@ -1 +0,0 @@
-<svg width="7" height="8" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M-1-1h2.165v2.189H-1z"/><g><path d="M.014 1.897L0 5.905h.998l.015 1.084h.998v1.013h.984v-.999l.999.015.014-.885h.984V5.006h.999V3.994h.998L7.003 0l-.998.014v.999L5.006.998V2.14l-.998.015v.856l-.998.014v.984H1.997l-.014-.97-.985-.014L.984 1.91l-.97-.014z" fill-opacity="null"/></g></svg>

package/cjs/Checkbox/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Checkbox = require("./Checkbox");
-var _default = exports["default"] = _Checkbox.Checkbox;

package/cjs/Cursor/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Cursor = require("./Cursor.css");
-var _default = exports["default"] = _Cursor.Cursor;

package/cjs/Dropdown/imgs/downcaret.svg

@@ -1 +0,0 @@
-<svg width="18" height="10" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M-1-1h20v12H-1z"/><g><path d="M-.014-.015L0 3.001l3.01.01L3 5.195h2.026l.01 2.815 2.941-.01v1.977h2c.011.01.035-1.991.025-2 .01.009 3.011.033 3 .024.011.01.011-2.845 0-2.855h2.001v-2.17c.01.009 3.011.033 3.001.024.01.01-.014-3.04-.024-3.025l-17.994.01z" fill-opacity="null"/></g></svg>

package/cjs/Dropdown/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Dropdown = require("./Dropdown");
-var _default = exports["default"] = _Dropdown.Dropdown;

package/cjs/Fieldset/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Fieldset = require("./Fieldset");
-var _default = exports["default"] = _Fieldset.Fieldset;

package/cjs/Frame/index.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Frame = require("./Frame");
-var _default = exports["default"] = _Frame.Frame;