@react95/core 9.6.0 → 9.6.2

package/cjs/TitleBar/TitleBar.cjs

@@ -57,7 +57,14 @@ const DefaultOption = Frame.fixedForwardRef(
   (props, ref) => {
     const { kind, ...rest } = props;
     const optionType = defaultOptions[kind] || defaultOptions.help;
-    return /* @__PURE__ */ React.createElement(Option, { ...rest, ref }, /* @__PURE__ */ React.createElement("img", { src: optionType.src, alt: optionType.alt }));
+    return /* @__PURE__ */ React.createElement(Option, { ...rest, ref }, /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: optionType.src,
+        alt: optionType.alt,
+        className: TitleBar_css.optionImage
+      }
+    ));
   }
 );
 const Help = Frame.fixedForwardRef(
@@ -85,7 +92,13 @@ const Restore = Frame.fixedForwardRef(
     return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "restore", ref });
   }
 );
-const TitleBarRenderer = ({ children, title = "UNKNOWN.EXE", icon, active = true, ...rest }, ref) => /* @__PURE__ */ React.createElement(
+const TitleBarRenderer = ({
+  children,
+  title = "UNKNOWN.EXE",
+  icon,
+  active = true,
+  ...rest
+}, ref) => /* @__PURE__ */ React.createElement(
   Frame.Frame,
   {
     ...rest,
@@ -96,16 +109,13 @@ const TitleBarRenderer = ({ children, title = "UNKNOWN.EXE", icon, active = true
   /* @__PURE__ */ React.createElement("div", { className: TitleBar_css.title }, title),
   children
 );
-const TitleBar = Object.assign(
-  Frame.fixedForwardRef(TitleBarRenderer),
-  {
-    Option,
-    OptionsBox,
-    Help,
-    Close,
-    Maximize,
-    Minimize,
-    Restore
-  }
-);
+const TitleBar = Object.assign(Frame.fixedForwardRef(TitleBarRenderer), {
+  Option,
+  OptionsBox,
+  Help,
+  Close,
+  Maximize,
+  Minimize,
+  Restore
+});
 exports.TitleBar = TitleBar;

package/cjs/TitleBar/TitleBar.css.cjs

@@ -6,7 +6,9 @@ var optionsBox = "r95_1kpzw680";
 var option = "r95_1kpzw681";
 var titleBarBackground = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1kpzw682", variantClassNames: { active: { true: "r95_1kpzw683", false: "r95_1kpzw684" } }, defaultVariants: {}, compoundVariants: [] });
 var title = "r95_1kpzw685";
+var optionImage = "r95_1kpzw686";
 exports.option = option;
+exports.optionImage = optionImage;
 exports.optionsBox = optionsBox;
 exports.title = title;
 exports.titleBarBackground = titleBarBackground;

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

@@ -65,4 +65,7 @@
   text-shadow: 0.5px 0px white, 1.5px 0px white;
   color: transparent;
   letter-spacing: 1px;
+}
+.r95_1kpzw686 {
+  max-width: none;
 }

package/cjs/themes/azureOrange.css.cjs

@@ -1,4 +1,3 @@
 require('./azureOrange.css.ts.vanilla.css');
 "use strict";
-require("./contract.css.ts.vanilla.css.cjs");
 /* empty css                                   */

package/cjs/themes/contract.css.cjs

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./contract.css.ts.vanilla.css.cjs");
 var contract = { space: { "0": "var(--r95-space-0)", "1": "var(--r95-space-1)", "2": "var(--r95-space-2)", "3": "var(--r95-space-3)", "4": "var(--r95-space-4)", "5": "var(--r95-space-5)", "6": "var(--r95-space-6)", "7": "var(--r95-space-7)", "8": "var(--r95-space-8)", "9": "var(--r95-space-9)", "10": "var(--r95-space-10)", "11": "var(--r95-space-11)", "12": "var(--r95-space-12)", "13": "var(--r95-space-13)", "14": "var(--r95-space-14)", "15": "var(--r95-space-15)", "16": "var(--r95-space-16)", "17": "var(--r95-space-17)", "18": "var(--r95-space-18)", "19": "var(--r95-space-19)", "20": "var(--r95-space-20)" }, colors: { anchor: "var(--r95-color-anchor)", anchorVisited: "var(--r95-color-anchorVisited)", borderDark: "var(--r95-color-borderDark)", borderDarkest: "var(--r95-color-borderDarkest)", borderLight: "var(--r95-color-borderLight)", borderLighter: "var(--r95-color-borderLighter)", borderLightest: "var(--r95-color-borderLightest)", canvas: "var(--r95-color-canvas)", canvasText: "var(--r95-color-canvasText)", headerBackground: "var(--r95-color-headerBackground)", headerNotActiveBackground: "var(--r95-color-headerNotActiveBackground)", headerNotActiveText: "var(--r95-color-headerNotActiveText)", headerText: "var(--r95-color-headerText)", material: "var(--r95-color-material)", materialText: "var(--r95-color-materialText)", materialTextDisabled: "var(--r95-color-materialTextDisabled)", materialTextDisabledShadow: "var(--r95-color-materialTextDisabledShadow)", materialTextInvert: "var(--r95-color-materialTextInvert)", progress: "var(--r95-color-progress)", inputBackground: "var(--r95-color-inputBackground)", inputBackgroundDisabled: "var(--r95-color-inputBackgroundDisabled)" }, zIndices: { modal: "var(--r95-zIndex-modal)", tooltip: "var(--r95-zIndex-tooltip)", taskbar: "var(--r95-zIndex-taskbar)" }, shadows: { out: "var(--r95-shadow-out)", "in": "var(--r95-shadow-in)", input: "var(--r95-shadow-input)" } };
 exports.contract = contract;

package/esm/TitleBar/TitleBar.css.mjs

@@ -4,8 +4,10 @@ var optionsBox = "r95_1kpzw680";
 var option = "r95_1kpzw681";
 var titleBarBackground = createRuntimeFn({ defaultClassName: "r95_1kpzw682", variantClassNames: { active: { true: "r95_1kpzw683", false: "r95_1kpzw684" } }, defaultVariants: {}, compoundVariants: [] });
 var title = "r95_1kpzw685";
+var optionImage = "r95_1kpzw686";
 export {
   option,
+  optionImage,
   optionsBox,
   title,
   titleBarBackground

package/esm/TitleBar/TitleBar.css.ts.vanilla.css

@@ -65,4 +65,7 @@
   text-shadow: 0.5px 0px white, 1.5px 0px white;
   color: transparent;
   letter-spacing: 1px;
+}
+.r95_1kpzw686 {
+  max-width: none;
 }

package/esm/TitleBar/TitleBar.mjs

@@ -7,7 +7,7 @@ import minimize from "./minimize.svg.mjs";
 import restore from "./restore.svg.mjs";
 import { fixedForwardRef, Frame } from "../Frame/Frame.mjs";
 import { button } from "../Button/Button.css.mjs";
-import { optionsBox, option, titleBarBackground, title } from "./TitleBar.css.mjs";
+import { optionsBox, option, optionImage, titleBarBackground, title } from "./TitleBar.css.mjs";
 const defaultOptions = {
   help: {
     alt: "help",
@@ -55,7 +55,14 @@ const DefaultOption = fixedForwardRef(
   (props, ref) => {
     const { kind, ...rest } = props;
     const optionType = defaultOptions[kind] || defaultOptions.help;
-    return /* @__PURE__ */ React.createElement(Option, { ...rest, ref }, /* @__PURE__ */ React.createElement("img", { src: optionType.src, alt: optionType.alt }));
+    return /* @__PURE__ */ React.createElement(Option, { ...rest, ref }, /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: optionType.src,
+        alt: optionType.alt,
+        className: optionImage
+      }
+    ));
   }
 );
 const Help = fixedForwardRef(
@@ -83,7 +90,13 @@ const Restore = fixedForwardRef(
     return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "restore", ref });
   }
 );
-const TitleBarRenderer = ({ children, title: title$1 = "UNKNOWN.EXE", icon, active = true, ...rest }, ref) => /* @__PURE__ */ React.createElement(
+const TitleBarRenderer = ({
+  children,
+  title: title$1 = "UNKNOWN.EXE",
+  icon,
+  active = true,
+  ...rest
+}, ref) => /* @__PURE__ */ React.createElement(
   Frame,
   {
     ...rest,
@@ -94,18 +107,15 @@ const TitleBarRenderer = ({ children, title: title$1 = "UNKNOWN.EXE", icon, acti
   /* @__PURE__ */ React.createElement("div", { className: title }, title$1),
   children
 );
-const TitleBar = Object.assign(
-  fixedForwardRef(TitleBarRenderer),
-  {
-    Option,
-    OptionsBox,
-    Help,
-    Close,
-    Maximize,
-    Minimize,
-    Restore
-  }
-);
+const TitleBar = Object.assign(fixedForwardRef(TitleBarRenderer), {
+  Option,
+  OptionsBox,
+  Help,
+  Close,
+  Maximize,
+  Minimize,
+  Restore
+});
 export {
   TitleBar
 };

package/esm/themes/azureOrange.css.mjs

@@ -1,3 +1,2 @@
 import './azureOrange.css.ts.vanilla.css';
-import "./contract.css.ts.vanilla.css.mjs";
 /* empty css                                 */

package/esm/themes/contract.css.mjs

@@ -1,3 +1,4 @@
+import "./contract.css.ts.vanilla.css.mjs";
 var contract = { space: { "0": "var(--r95-space-0)", "1": "var(--r95-space-1)", "2": "var(--r95-space-2)", "3": "var(--r95-space-3)", "4": "var(--r95-space-4)", "5": "var(--r95-space-5)", "6": "var(--r95-space-6)", "7": "var(--r95-space-7)", "8": "var(--r95-space-8)", "9": "var(--r95-space-9)", "10": "var(--r95-space-10)", "11": "var(--r95-space-11)", "12": "var(--r95-space-12)", "13": "var(--r95-space-13)", "14": "var(--r95-space-14)", "15": "var(--r95-space-15)", "16": "var(--r95-space-16)", "17": "var(--r95-space-17)", "18": "var(--r95-space-18)", "19": "var(--r95-space-19)", "20": "var(--r95-space-20)" }, colors: { anchor: "var(--r95-color-anchor)", anchorVisited: "var(--r95-color-anchorVisited)", borderDark: "var(--r95-color-borderDark)", borderDarkest: "var(--r95-color-borderDarkest)", borderLight: "var(--r95-color-borderLight)", borderLighter: "var(--r95-color-borderLighter)", borderLightest: "var(--r95-color-borderLightest)", canvas: "var(--r95-color-canvas)", canvasText: "var(--r95-color-canvasText)", headerBackground: "var(--r95-color-headerBackground)", headerNotActiveBackground: "var(--r95-color-headerNotActiveBackground)", headerNotActiveText: "var(--r95-color-headerNotActiveText)", headerText: "var(--r95-color-headerText)", material: "var(--r95-color-material)", materialText: "var(--r95-color-materialText)", materialTextDisabled: "var(--r95-color-materialTextDisabled)", materialTextDisabledShadow: "var(--r95-color-materialTextDisabledShadow)", materialTextInvert: "var(--r95-color-materialTextInvert)", progress: "var(--r95-color-progress)", inputBackground: "var(--r95-color-inputBackground)", inputBackgroundDisabled: "var(--r95-color-inputBackgroundDisabled)" }, zIndices: { modal: "var(--r95-zIndex-modal)", tooltip: "var(--r95-zIndex-tooltip)", taskbar: "var(--r95-zIndex-taskbar)" }, shadows: { out: "var(--r95-shadow-out)", "in": "var(--r95-shadow-in)", input: "var(--r95-shadow-input)" } };
 export {
   contract

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react95/core",
-  "version": "9.6.0",
+  "version": "9.6.2",
   "description": "Windows 95 styleguide",
   "main": "cjs/index.cjs",
   "type": "module",
@@ -195,7 +195,7 @@
     "url": "https://github.com/React95/React95/issues"
   },
   "homepage": "https://github.com/React95/React95#readme",
-  "gitHead": "6cc1349c2f972524a3741900c2d284633d4d9abe",
+  "gitHead": "fc7734d72c1b9c94e807ae71f154ae5d1ac2f054",
   "module": "esm/index.mjs",
   "private": false,
   "types": "types/index.d.ts"

package/types/Modal/Modal.d.ts

@@ -24,7 +24,7 @@ export type ModalProps = {
     hasWindowButton?: boolean;
     buttonsAlignment?: FrameProps<'div'>['justifyContent'];
     titleBarOptions?: ReactElement<TitleBarOptions> | ReactElement<TitleBarOptions>[];
-} & Omit<FrameProps<'div'>, 'as'> & HTMLAttributes<HTMLDivElement> & Pick<TitleBarBackgroundProps, 'title' | 'icon'>;
+} & Omit<FrameProps<'div'>, 'as'> & HTMLAttributes<HTMLDivElement> & Pick<TitleBarBackgroundProps<'div'>, 'title' | 'icon'>;
 declare const ModalContent: (props: {
     as?: "div" | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -2393,8 +2393,9 @@ declare const ModalContent: (props: {
 }> & React.RefAttributes<HTMLDivElement>) => React.ReactNode;
 declare const ModalMinimize: OptionReturnType;
 declare const ModalRenderer: ({ id: providedId, hasWindowButton: hasButton, buttons, buttonsAlignment, children, icon, menu, title, dragOptions, titleBarOptions, className, ...rest }: ModalProps, ref: Ref<HTMLDivElement | null>) => React.JSX.Element;
-export declare const Modal: ModalProps & typeof ModalRenderer & {
+type ModalComponent = typeof ModalRenderer & {
     Content: typeof ModalContent;
     Minimize: typeof ModalMinimize;
 };
+export declare const Modal: ModalComponent;
 export {};

package/types/TitleBar/TitleBar.css.d.ts

@@ -13,3 +13,4 @@ export declare const titleBarBackground: import("@vanilla-extract/recipes").Runt
     };
 }>;
 export declare const title: string;
+export declare const optionImage: string;

package/types/TitleBar/TitleBar.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ElementRef, ElementType, ForwardedRef, ForwardRefRenderFunction, HTMLAttributes, ReactElement } from 'react';
+import type { ButtonHTMLAttributes, ElementRef, ElementType, ForwardedRef, HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
 import { FrameProps } from '../Frame/Frame';
 declare const OptionsBox: (props: {
@@ -2379,11 +2379,12 @@ declare const Close: OptionReturnType;
 declare const Maximize: OptionReturnType;
 declare const Minimize: OptionReturnType;
 declare const Restore: OptionReturnType;
-export interface TitleBarBackgroundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, FrameProps<'div'> {
+export type TitleBarBackgroundProps<TAs extends ElementType> = Omit<HTMLAttributes<HTMLDivElement>, 'color'> & FrameProps<TAs> & {
     active?: boolean;
     icon?: ReactElement;
     title?: string;
-}
+};
+export type TitleBarProps<TAs extends ElementType = 'div'> = TitleBarBackgroundProps<TAs>;
 interface TitleBarOptions {
     Option: typeof Option;
     OptionsBox: typeof OptionsBox;
@@ -2393,8 +2394,9 @@ interface TitleBarOptions {
     Minimize: typeof Minimize;
     Restore: typeof Restore;
 }
-export interface TitleBarProps extends TitleBarBackgroundProps, TitleBarOptions, FrameProps<'div'> {
-}
-declare const TitleBarRenderer: ForwardRefRenderFunction<HTMLDivElement, TitleBarBackgroundProps>;
-export declare const TitleBar: TitleBarProps & typeof TitleBarRenderer;
+type TitleBarComponent = <TAs extends ElementType = 'div'>(props: TitleBarProps<TAs> & {
+    ref?: ForwardedRef<ElementRef<TAs>>;
+}) => ReactElement;
+type TitleBarWithStatics = TitleBarComponent & TitleBarOptions;
+export declare const TitleBar: TitleBarWithStatics;
 export {};