30:T958,function Default() { const [state, setState] = React.useState({ cheese: true, bacon: false, broccoli: false }); const { cheese, bacon, broccoli } = state; const ingredientsArr = Object.values(state).map((val) => (val ? 1 : 0)); const possibleIngredients = Object.keys(state).length; const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0); const isIndeterminate = ![0, possibleIngredients].includes(chosenIngredients); const toggleAll = () => { console.log(ingredientsArr); if (isIndeterminate) { setState({ cheese: true, bacon: true, broccoli: true }); } else if (ingredientsArr[0] === 1) { setState({ cheese: false, bacon: false, broccoli: false }); } else { setState({ cheese: true, bacon: true, broccoli: true }); } }; const toggleIngredient = (e) => { const value = e.target.value; setState({ ...state, [value]: !state[value] }); }; return React.createElement( "div", { style: { maxWidth: "250px" } }, React.createElement(react95.Checkbox, { name: "allToppings", label: "All", value: "allToppings", indeterminate: isIndeterminate, checked: !isIndeterminate && chosenIngredients === possibleIngredients, onChange: toggleAll }), React.createElement( "div", { style: { paddingLeft: "1.5rem" } }, React.createElement(react95.Checkbox, { checked: !!cheese, onChange: toggleIngredient, value: "cheese", label: "🧀 Extra cheese", name: "ingredients" }), React.createElement("br", null), React.createElement(react95.Checkbox, { checked: !!bacon, onChange: toggleIngredient, value: "bacon", label: "🥓 Bacon", name: "ingredients" }), React.createElement("br", null), React.createElement(react95.Checkbox, { checked: !!broccoli, onChange: toggleIngredient, value: "broccoli", label: "🥦 Broccoli", name: "ingredients" }) ), React.createElement(react95.Checkbox, { name: "shipping", value: "shipping", label: "Free shipping", defaultChecked: true, disabled: true, style: { marginTop: "1rem" } }) ); }31:[] 2e:{"title":"Using React95","cells":[{"id":0,"value":"md`# Using React95\n\n- Program (full screen): https://observablehq.com/embed/@hastebrot/using-react95?cell=program\n- React95 (style guide): https://storybook.react95.io/?path=/story/tabs--default\n- Bitmap font by Lou Huang licensed under Creative Commons License ([CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)): https://github.com/arturbien/React95/tree/v3.1.0/src/assets/fonts/src/ms-sans-serif\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"program = React.render(htm`<${Program} />`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"Program = () => {\n const { List, ListItem, Divider } = react95;\n return htm`\n <${WinContainer}>\n <${List}>\n <${Default} />\n <${ListItem} size=\"sm\">View\n <${Divider} />\n <${ListItem} size=\"sm\">Paste\n <${ListItem} size=\"sm\">Paste Shortcut\n <${ListItem} size=\"sm\">Undo Copy\n <${Divider} />\n <${ListItem} size=\"sm\">Properties\n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"WinContainer = ({ children, theme = react95_theme, ...otherProps }) => {\n const { createGlobalStyle, ThemeProvider } = styled\n const { styleReset } = react95\n //const GlobalStyle = createGlobalStyle`\n // ${styleReset};\n //`\n return htm`\n <${WinStyleContainer} backgroundColor=${theme.backgroundColor} ...${otherProps}>\n <${ThemeProvider} theme=${theme}>\n ${children}\n \n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"WinStyleContainer = styled.div`\n ${winFontFaces};\n\n font-family: 'MS Sans Serif', sans-serif;\n background: ${props => props.backgroundColor} none repeat scroll 0% 0%;\n padding: 2rem;\n\n & {\n hr { padding: unset; }\n }\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"winFontFaces = styled.css`\n @font-face {\n font-family: 'MS Sans Serif';\n src: url('${react95_font_normal_url}') format('woff2');\n font-weight: normal; /* 400 */\n font-style: normal;\n }\n @font-face {\n font-family: 'MS Sans Serif';\n src: url('${react95_font_bold_url}') format('woff2');\n font-weight: bold; /* 700 */\n font-style: normal;\n }\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { React, ReactDOM, htm, styled } from \"@hastebrot/react@356\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"react95_version = \"3.3.0\" // https://github.com/arturbien/React95/releases","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"react95 = {\n const requires = require.alias({\n react95: `https://unpkg.com/react95@${react95_version}/dist/cjs/index.js`\n });\n const modules = {\n react: React,\n \"react-dom\": ReactDOM,\n \"styled-components\": { ...styled, default: styled }\n };\n const _exports = (window.exports = {});\n const _require = (window.require = (name) => modules[name]);\n return requires(\"react95\").catch(() => {\n delete window.exports;\n delete window.require;\n return _exports;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"react95_theme = ({\n name: 'original',\n backgroundColor: 'teal',\n anchor: '#1034a6',\n anchorVisited: '#440381',\n borderDark: '#848584',\n borderDarkest: '#0a0a0a',\n borderLight: '#dfdfdf',\n borderLightest: '#fefefe',\n canvas: '#ffffff',\n canvasText: '#0a0a0a',\n canvasTextDisabled: '#848584',\n canvasTextDisabledShadow: '#fefefe',\n canvasTextInvert: '#fefefe',\n checkmark: '#0a0a0a',\n checkmarkDisabled: '#848584',\n flatDark: '#9e9e9e',\n flatLight: '#d8d8d8',\n focusSecondary: '#fefe03',\n headerBackground: '#060084',\n headerNotActiveBackground: '#7f787f',\n headerNotActiveText: '#c6c6c6',\n headerText: '#fefefe',\n hoverBackground: '#060084',\n material: '#c6c6c6',\n materialDark: '#9a9e9c',\n materialText: '#0a0a0a',\n materialTextDisabled: '#848584',\n materialTextDisabledShadow: '#fefefe',\n materialTextInvert: '#fefefe',\n progress: '#060084',\n tooltip: '#fefbcc',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"react95_theme_2k = ({\n name: 'millenium',\n backgroundColor: '#3a6ea5',\n anchor: '#1034a6',\n anchorVisited: '#440381',\n borderDark: '#828282',\n borderDarkest: 'black',\n borderLight: '#e5e5e5',\n borderLightest: '#ffffff',\n canvas: '#ffffff',\n canvasText: 'black',\n canvasTextDisabled: '#828282',\n canvasTextDisabledShadow: '#ffffff',\n canvasTextInvert: '#ffffff',\n checkmark: 'black',\n checkmarkDisabled: '#828282',\n flatDark: '#9e9e9e',\n flatLight: '#d8d8d8',\n focusSecondary: '#fefe03',\n headerBackground: 'linear-gradient(to right, #012470, #a5c7e7)',\n headerNotActiveBackground: '#7f7f7f',\n headerNotActiveText: '#d6cfc7',\n headerText: '#ffffff',\n hoverBackground: '#00256e',\n material: '#d6cfc7',\n materialDark: '#9a9e9c',\n materialText: 'black',\n materialTextDisabled: '#828282',\n materialTextDisabledShadow: '#ffffff',\n materialTextInvert: '#ffffff',\n progress: '#00256e',\n tooltip: '#fefbcc',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"react95_theme_original_url = `https://unpkg.com/react95@${react95_version}/dist/themes/original.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"react95_font_normal_url = `https://unpkg.com/react95@${react95_version}/dist/fonts/ms_sans_serif.woff2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"react95_font_bold_url = `https://unpkg.com/react95@${react95_version}/dist/fonts/ms_sans_serif_bold.woff2`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}