react-science 0.22.2 → 0.23.0

package/lib/components/forms/Checkbox.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const RadixCheckbox = __importStar(require("@radix-ui/react-checkbox"));
+const index_1 = require("react-icons/rx/index");
+const enabledColor = '#1677ff';
+const disabledColor = '#b8b8b8';
+function Checkbox(props) {
+    const { checked = 'indeterminate', disabled = false, label, onChange, } = props;
+    return ((0, jsx_runtime_1.jsxs)("label", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: '1.125em',
+        }, children: [(0, jsx_runtime_1.jsx)(RadixCheckbox.Root, { checked: checked, onCheckedChange: onChange, disabled: disabled, css: (0, react_1.css)({
+                    width: '16px',
+                    height: '16px',
+                    backgroundColor: disabled
+                        ? 'rgba(0, 0, 0, 0.04)'
+                        : checked
+                            ? enabledColor
+                            : 'white',
+                    borderWidth: '1px',
+                    borderColor: checked && !disabled ? enabledColor : disabledColor,
+                    borderRadius: '4px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: disabled ? 'not-allowed' : 'pointer',
+                }), children: (0, jsx_runtime_1.jsx)(RadixCheckbox.Indicator, { css: (0, react_1.css)({
+                        color: disabled ? disabledColor : 'white',
+                    }), children: checked === true ? ((0, jsx_runtime_1.jsx)(index_1.RxCheck, {})) : checked === 'indeterminate' ? ((0, jsx_runtime_1.jsx)(index_1.RxMinus, {})) : null }) }), (0, jsx_runtime_1.jsx)("span", { style: {
+                    paddingInline: '8px',
+                    lineHeight: '16px',
+                }, children: label })] }));
+}
+exports.Checkbox = Checkbox;

package/lib/components/forms/Select.js

@@ -0,0 +1,114 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const styled_1 = __importDefault(require("@emotion/styled"));
+const RadixSelect = __importStar(require("@radix-ui/react-select"));
+const react_select_1 = require("@radix-ui/react-select");
+const react_1 = require("react");
+const fa_1 = require("react-icons/fa");
+const Portal_1 = require("../root-layout/Portal");
+const SelectRoot = styled_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #ffffff;
+  font-size: 1.125em;
+  width: 120px;
+`;
+const SelectTrigger = (0, styled_1.default)(RadixSelect.Trigger) `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 4px 11px;
+  user-select: none;
+  font-size: 1.125em;
+  line-height: 1.125em;
+
+  &[data-disabled] {
+    color: rgba(0, 0, 0, 0.5);
+    background-color: #f5f5f5;
+  }
+`;
+const SelectContent = (0, styled_1.default)(RadixSelect.Content) `
+  width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+`;
+const SelectViewport = (0, styled_1.default)(RadixSelect.Viewport) `
+  width: var(--radix-select-trigger-width);
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background-color: white;
+  padding: 5px;
+`;
+const SelectItem = (0, styled_1.default)(RadixSelect.Item) `
+  user-select: none;
+  font-size: 1.125em;
+  padding: 4px 11px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: #e6f4ff;
+  }
+  &[data-disabled] {
+    color: rgba(0, 0, 0, 0.5);
+  }
+`;
+const SelectLabel = (0, styled_1.default)(RadixSelect.Label) `
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 1em;
+  padding: 4px 11px;
+  margin-top: 8px;
+`;
+const SelectItemIndicator = (0, styled_1.default)(RadixSelect.ItemIndicator) `
+  right: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+const SelectSeparator = (0, styled_1.default)(RadixSelect.Separator) `
+  height: 1px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.15);
+  margin: 5px 0;
+`;
+function Select(props) {
+    const { placeholder, value, onSelect, options, disabled = false, style, } = props;
+    return ((0, jsx_runtime_1.jsx)(SelectRoot, { style: { ...style }, children: (0, jsx_runtime_1.jsxs)(RadixSelect.Root, { value: value, onValueChange: onSelect, disabled: disabled, children: [(0, jsx_runtime_1.jsxs)(SelectTrigger, { children: [(0, jsx_runtime_1.jsx)(RadixSelect.Value, { placeholder: placeholder }), (0, jsx_runtime_1.jsx)(RadixSelect.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(fa_1.FaChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsxs)(SelectContent, { position: "popper", children: [(0, jsx_runtime_1.jsx)(RadixSelect.ScrollUpButton, { children: (0, jsx_runtime_1.jsx)(fa_1.FaChevronUp, {}) }), (0, jsx_runtime_1.jsx)(SelectViewport, { children: options.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [group.map((optionOrCategory, optionOrCategoryIndex) => 'options' in optionOrCategory ? ((0, jsx_runtime_1.jsxs)(react_select_1.SelectGroup, { children: [(0, jsx_runtime_1.jsx)(SelectLabel, { children: optionOrCategory.label }), optionOrCategory.options.map((option) => ((0, jsx_runtime_1.jsxs)(SelectItem, { value: option.value, disabled: option.disabled, children: [(0, jsx_runtime_1.jsx)(RadixSelect.ItemText, { children: option.label }), (0, jsx_runtime_1.jsx)(SelectItemIndicator, { children: (0, jsx_runtime_1.jsx)(fa_1.FaCheck, {}) })] }, option.value)))] }, optionOrCategoryIndex)) : ((0, jsx_runtime_1.jsxs)(SelectItem, { value: optionOrCategory.value, disabled: optionOrCategory.disabled, children: [(0, jsx_runtime_1.jsx)(RadixSelect.ItemText, { children: optionOrCategory.label }), (0, jsx_runtime_1.jsx)(SelectItemIndicator, { children: (0, jsx_runtime_1.jsx)(fa_1.FaCheck, {}) })] }, optionOrCategory.value))), groupIndex < options.length - 1 && (0, jsx_runtime_1.jsx)(SelectSeparator, {})] }, groupIndex))) }), (0, jsx_runtime_1.jsx)(RadixSelect.ScrollDownButton, {}), (0, jsx_runtime_1.jsx)(RadixSelect.Arrow, {})] }) })] }) }));
+}
+exports.Select = Select;

package/lib/components/forms/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Input"), exports);
+__exportStar(require("./Checkbox"), exports);
 __exportStar(require("./context"), exports);

package/lib/components/table/Table.js

@@ -44,10 +44,10 @@ function splitChildren(children) {
     return { Rows, Header };
 }
 function Table(props) {
-    const { border = true, children } = props;
+    const { border = true, style = {}, children } = props;
     const { Header, Rows } = splitChildren(children);
     const tableContextValue = (0, react_2.useMemo)(() => ({ border }), [border]);
-    return ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: tableContextValue, children: (0, jsx_runtime_1.jsxs)("table", { children: [Header, (0, jsx_runtime_1.jsx)("tbody", { children: Rows })] }) }));
+    return ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: tableContextValue, children: (0, jsx_runtime_1.jsxs)("table", { style: style, children: [Header, (0, jsx_runtime_1.jsx)("tbody", { children: Rows })] }) }));
 }
 exports.Table = Table;
 function useRowChildren(children) {
@@ -79,11 +79,11 @@ function useRowChildren(children) {
     }
     return { cells };
 }
-function Row({ children, border = false }) {
+function Row({ children, style = {}, border = false }) {
     const { cells } = useRowChildren(children);
-    return (0, jsx_runtime_1.jsx)("tr", { style: { border: border ? '1px solid black' : '' }, children: cells });
+    return ((0, jsx_runtime_1.jsx)("tr", { style: { border: border ? '1px solid black' : '', ...style }, children: cells }));
 }
 Table.Row = Row;
-Table.Header = ({ children, border = false }) => {
-    return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)(Table.Row, { border: border, children: children }) }));
+Table.Header = ({ children, style, border = false }) => {
+    return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)(Table.Row, { border: border, style: style, children: children }) }));
 };

package/lib-esm/components/forms/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type CheckedState = boolean | 'indeterminate';
+interface CheckboxProps {
+    checked?: CheckedState;
+    disabled?: boolean;
+    label?: ReactNode;
+    onChange?: (checked: CheckedState) => void;
+}
+export declare function Checkbox(props: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib-esm/components/forms/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAErD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C;AAKD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,oDA2D5C"}

package/lib-esm/components/forms/Checkbox.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { RxCheck, RxMinus } from 'react-icons/rx/index';
+const enabledColor = '#1677ff';
+const disabledColor = '#b8b8b8';
+export function Checkbox(props) {
+    const { checked = 'indeterminate', disabled = false, label, onChange, } = props;
+    return (_jsxs("label", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: '1.125em',
+        }, children: [_jsx(RadixCheckbox.Root, { checked: checked, onCheckedChange: onChange, disabled: disabled, css: css({
+                    width: '16px',
+                    height: '16px',
+                    backgroundColor: disabled
+                        ? 'rgba(0, 0, 0, 0.04)'
+                        : checked
+                            ? enabledColor
+                            : 'white',
+                    borderWidth: '1px',
+                    borderColor: checked && !disabled ? enabledColor : disabledColor,
+                    borderRadius: '4px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: disabled ? 'not-allowed' : 'pointer',
+                }), children: _jsx(RadixCheckbox.Indicator, { css: css({
+                        color: disabled ? disabledColor : 'white',
+                    }), children: checked === true ? (_jsx(RxCheck, {})) : checked === 'indeterminate' ? (_jsx(RxMinus, {})) : null }) }), _jsx("span", { style: {
+                    paddingInline: '8px',
+                    lineHeight: '16px',
+                }, children: label })] }));
+}
+//# sourceMappingURL=Checkbox.js.map

package/lib-esm/components/forms/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAWxD,MAAM,YAAY,GAAG,SAAS,CAAC;AAC/B,MAAM,aAAa,GAAG,SAAS,CAAC;AAEhC,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,OAAO,GAAG,eAAe,EACzB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,iBACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,SAAS;SACpB,aAED,KAAC,aAAa,CAAC,IAAI,IACjB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,QAAQ,EACzB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,CAAC;oBACP,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,eAAe,EAAE,QAAQ;wBACvB,CAAC,CAAC,qBAAqB;wBACvB,CAAC,CAAC,OAAO;4BACT,CAAC,CAAC,YAAY;4BACd,CAAC,CAAC,OAAO;oBACX,WAAW,EAAE,KAAK;oBAClB,WAAW,EAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;oBAChE,YAAY,EAAE,KAAK;oBACnB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;iBAC7C,CAAC,YAEF,KAAC,aAAa,CAAC,SAAS,IACtB,GAAG,EAAE,GAAG,CAAC;wBACP,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;qBAC1C,CAAC,YAED,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CAClB,KAAC,OAAO,KAAG,CACZ,CAAC,CAAC,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,CAChC,KAAC,OAAO,KAAG,CACZ,CAAC,CAAC,CAAC,IAAI,GACgB,GACP,EACrB,eACE,KAAK,EAAE;oBACL,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,MAAM;iBACnB,YAEA,KAAK,GACD,IACD,CACT,CAAC;AACJ,CAAC"}

package/lib-esm/components/forms/Select.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, CSSProperties } from 'react';
+interface Category {
+    label: ReactNode;
+    options: Option[];
+}
+interface Option {
+    label: ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    placeholder?: string;
+    value?: string;
+    onSelect?: (value: string) => void;
+    options: (Option[] | Category[])[];
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+export declare function Select(props: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/lib-esm/components/forms/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3D,UAAU,QAAQ;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AACD,UAAU,MAAM;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAkFD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,oDA4ExC"}

package/lib-esm/components/forms/Select.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from '@emotion/styled';
+import * as RadixSelect from '@radix-ui/react-select';
+import { SelectGroup } from '@radix-ui/react-select';
+import { Fragment } from 'react';
+import { FaCheck, FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { Portal } from '../root-layout/Portal';
+const SelectRoot = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #ffffff;
+  font-size: 1.125em;
+  width: 120px;
+`;
+const SelectTrigger = styled(RadixSelect.Trigger) `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 4px 11px;
+  user-select: none;
+  font-size: 1.125em;
+  line-height: 1.125em;
+
+  &[data-disabled] {
+    color: rgba(0, 0, 0, 0.5);
+    background-color: #f5f5f5;
+  }
+`;
+const SelectContent = styled(RadixSelect.Content) `
+  width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+`;
+const SelectViewport = styled(RadixSelect.Viewport) `
+  width: var(--radix-select-trigger-width);
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background-color: white;
+  padding: 5px;
+`;
+const SelectItem = styled(RadixSelect.Item) `
+  user-select: none;
+  font-size: 1.125em;
+  padding: 4px 11px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: #e6f4ff;
+  }
+  &[data-disabled] {
+    color: rgba(0, 0, 0, 0.5);
+  }
+`;
+const SelectLabel = styled(RadixSelect.Label) `
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 1em;
+  padding: 4px 11px;
+  margin-top: 8px;
+`;
+const SelectItemIndicator = styled(RadixSelect.ItemIndicator) `
+  right: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+const SelectSeparator = styled(RadixSelect.Separator) `
+  height: 1px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.15);
+  margin: 5px 0;
+`;
+export function Select(props) {
+    const { placeholder, value, onSelect, options, disabled = false, style, } = props;
+    return (_jsx(SelectRoot, { style: { ...style }, children: _jsxs(RadixSelect.Root, { value: value, onValueChange: onSelect, disabled: disabled, children: [_jsxs(SelectTrigger, { children: [_jsx(RadixSelect.Value, { placeholder: placeholder }), _jsx(RadixSelect.Icon, { asChild: true, children: _jsx(FaChevronDown, {}) })] }), _jsx(Portal, { children: _jsxs(SelectContent, { position: "popper", children: [_jsx(RadixSelect.ScrollUpButton, { children: _jsx(FaChevronUp, {}) }), _jsx(SelectViewport, { children: options.map((group, groupIndex) => (_jsxs(Fragment, { children: [group.map((optionOrCategory, optionOrCategoryIndex) => 'options' in optionOrCategory ? (_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: optionOrCategory.label }), optionOrCategory.options.map((option) => (_jsxs(SelectItem, { value: option.value, disabled: option.disabled, children: [_jsx(RadixSelect.ItemText, { children: option.label }), _jsx(SelectItemIndicator, { children: _jsx(FaCheck, {}) })] }, option.value)))] }, optionOrCategoryIndex)) : (_jsxs(SelectItem, { value: optionOrCategory.value, disabled: optionOrCategory.disabled, children: [_jsx(RadixSelect.ItemText, { children: optionOrCategory.label }), _jsx(SelectItemIndicator, { children: _jsx(FaCheck, {}) })] }, optionOrCategory.value))), groupIndex < options.length - 1 && _jsx(SelectSeparator, {})] }, groupIndex))) }), _jsx(RadixSelect.ScrollDownButton, {}), _jsx(RadixSelect.Arrow, {})] }) })] }) }));
+}
+//# sourceMappingURL=Select.js.map

package/lib-esm/components/forms/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/forms/Select.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,WAAW,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAA4B,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAqB/C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;;;;;;;;;;;;;;;;CAgBhD,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;;;;;;;CAOlD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;CAe1C,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;;;;;CAK5C,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAA;;;;;;CAM5D,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;;;;;CAKpD,CAAC;AAEF,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,GACN,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,UAAU,IAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,YAC7B,MAAC,WAAW,CAAC,IAAI,IACf,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,QAAQ,EAAE,QAAQ,aAElB,MAAC,aAAa,eACZ,KAAC,WAAW,CAAC,KAAK,IAAC,WAAW,EAAE,WAAW,GAAI,EAC/C,KAAC,WAAW,CAAC,IAAI,IAAC,OAAO,kBACvB,KAAC,aAAa,KAAG,GACA,IACL,EAChB,KAAC,MAAM,cACL,MAAC,aAAa,IAAC,QAAQ,EAAC,QAAQ,aAC9B,KAAC,WAAW,CAAC,cAAc,cACzB,KAAC,WAAW,KAAG,GACY,EAC7B,KAAC,cAAc,cACZ,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,CAClC,MAAC,QAAQ,eACN,KAAK,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,qBAAqB,EAAE,EAAE,CACrD,SAAS,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAC9B,MAAC,WAAW,eACV,KAAC,WAAW,cAAE,gBAAgB,CAAC,KAAK,GAAe,EAClD,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACxC,MAAC,UAAU,IAET,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,aAEzB,KAAC,WAAW,CAAC,QAAQ,cAClB,MAAM,CAAC,KAAK,GACQ,EACvB,KAAC,mBAAmB,cAClB,KAAC,OAAO,KAAG,GACS,KATjB,MAAM,CAAC,KAAK,CAUN,CACd,CAAC,KAfc,qBAAqB,CAgBzB,CACf,CAAC,CAAC,CAAC,CACF,MAAC,UAAU,IAET,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAC7B,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,aAEnC,KAAC,WAAW,CAAC,QAAQ,cAClB,gBAAgB,CAAC,KAAK,GACF,EACvB,KAAC,mBAAmB,cAClB,KAAC,OAAO,KAAG,GACS,KATjB,gBAAgB,CAAC,KAAK,CAUhB,CACd,CACF,EACA,UAAU,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,eAAe,KAAG,KAnC1C,UAAU,CAoCd,CACZ,CAAC,GACa,EACjB,KAAC,WAAW,CAAC,gBAAgB,KAAG,EAChC,KAAC,WAAW,CAAC,KAAK,KAAG,IACP,GACT,IACQ,GACR,CACd,CAAC;AACJ,CAAC"}

package/lib-esm/components/forms/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Input';
+export * from './Checkbox';
 export * from './context';
 //# sourceMappingURL=index.d.ts.map

package/lib-esm/components/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/lib-esm/components/forms/index.js

@@ -1,3 +1,4 @@
 export * from './Input';
+export * from './Checkbox';
 export * from './context';
 //# sourceMappingURL=index.js.map

package/lib-esm/components/forms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/lib-esm/components/table/Table.d.ts

@@ -1,11 +1,12 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export interface TableProps {
     children?: ReactNode;
     border?: boolean;
+    style?: CSSProperties;
 }
 export declare function Table(props: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Table {
-    var Row: ({ children, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-    var Header: ({ children, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    var Row: ({ children, style, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    var Header: ({ children, style, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 }
 //# sourceMappingURL=Table.d.ts.map

package/lib-esm/components/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,SAAS,EAGV,MAAM,OAAO,CAAC;AAiDf,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,oDAYtC;yBAZe,KAAK"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,aAAa,EAGb,SAAS,EAGV,MAAM,OAAO,CAAC;AAiDf,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,oDAYtC;yBAZe,KAAK"}

package/lib-esm/components/table/Table.js

@@ -41,10 +41,10 @@ function splitChildren(children) {
     return { Rows, Header };
 }
 export function Table(props) {
-    const { border = true, children } = props;
+    const { border = true, style = {}, children } = props;
     const { Header, Rows } = splitChildren(children);
     const tableContextValue = useMemo(() => ({ border }), [border]);
-    return (_jsx(TableContext.Provider, { value: tableContextValue, children: _jsxs("table", { children: [Header, _jsx("tbody", { children: Rows })] }) }));
+    return (_jsx(TableContext.Provider, { value: tableContextValue, children: _jsxs("table", { style: style, children: [Header, _jsx("tbody", { children: Rows })] }) }));
 }
 function useRowChildren(children) {
     const cells = [];
@@ -75,12 +75,12 @@ function useRowChildren(children) {
     }
     return { cells };
 }
-function Row({ children, border = false }) {
+function Row({ children, style = {}, border = false }) {
     const { cells } = useRowChildren(children);
-    return _jsx("tr", { style: { border: border ? '1px solid black' : '' }, children: cells });
+    return (_jsx("tr", { style: { border: border ? '1px solid black' : '', ...style }, children: cells }));
 }
 Table.Row = Row;
-Table.Header = ({ children, border = false }) => {
-    return (_jsx("thead", { children: _jsx(Table.Row, { border: border, children: children }) }));
+Table.Header = ({ children, style, border = false }) => {
+    return (_jsx("thead", { children: _jsx(Table.Row, { border: border, style: style, children: children }) }));
 };
 //# sourceMappingURL=Table.js.map

package/lib-esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "description": "React components to build analysis UI",
   "exports": {
     "./app": {
@@ -66,6 +66,8 @@
     "@headlessui/react": "^1.7.14",
     "@lukeed/uuid": "^2.0.1",
     "@popperjs/core": "^2.11.7",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-select": "^1.2.2",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-table": "^8.8.5",
     "biologic-converter": "^0.6.0",

package/src/components/forms/Checkbox.tsx

@@ -0,0 +1,78 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { ReactNode } from 'react';
+import { RxCheck, RxMinus } from 'react-icons/rx/index';
+
+export type CheckedState = boolean | 'indeterminate';
+
+interface CheckboxProps {
+  checked?: CheckedState;
+  disabled?: boolean;
+  label?: ReactNode;
+  onChange?: (checked: CheckedState) => void;
+}
+
+const enabledColor = '#1677ff';
+const disabledColor = '#b8b8b8';
+
+export function Checkbox(props: CheckboxProps) {
+  const {
+    checked = 'indeterminate',
+    disabled = false,
+    label,
+    onChange,
+  } = props;
+
+  return (
+    <label
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: '1.125em',
+      }}
+    >
+      <RadixCheckbox.Root
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+        css={css({
+          width: '16px',
+          height: '16px',
+          backgroundColor: disabled
+            ? 'rgba(0, 0, 0, 0.04)'
+            : checked
+            ? enabledColor
+            : 'white',
+          borderWidth: '1px',
+          borderColor: checked && !disabled ? enabledColor : disabledColor,
+          borderRadius: '4px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        })}
+      >
+        <RadixCheckbox.Indicator
+          css={css({
+            color: disabled ? disabledColor : 'white',
+          })}
+        >
+          {checked === true ? (
+            <RxCheck />
+          ) : checked === 'indeterminate' ? (
+            <RxMinus />
+          ) : null}
+        </RadixCheckbox.Indicator>
+      </RadixCheckbox.Root>
+      <span
+        style={{
+          paddingInline: '8px',
+          lineHeight: '16px',
+        }}
+      >
+        {label}
+      </span>
+    </label>
+  );
+}

package/src/components/forms/Select.tsx

@@ -0,0 +1,185 @@
+/** @jsxImportSource @emotion/react */
+import styled from '@emotion/styled';
+import * as RadixSelect from '@radix-ui/react-select';
+import { SelectGroup } from '@radix-ui/react-select';
+import { Fragment, ReactNode, CSSProperties } from 'react';
+import { FaCheck, FaChevronDown, FaChevronUp } from 'react-icons/fa';
+
+import { Portal } from '../root-layout/Portal';
+
+interface Category {
+  label: ReactNode;
+  options: Option[];
+}
+interface Option {
+  label: ReactNode;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  placeholder?: string;
+  value?: string;
+  onSelect?: (value: string) => void;
+  options: (Option[] | Category[])[];
+  disabled?: boolean;
+  style?: CSSProperties;
+}
+
+const SelectRoot = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #ffffff;
+  font-size: 1.125em;
+  width: 120px;
+`;
+
+const SelectTrigger = styled(RadixSelect.Trigger)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 4px 11px;
+  user-select: none;
+  font-size: 1.125em;
+  line-height: 1.125em;
+
+  &[data-disabled] {
+    color: rgba(0, 0, 0, 0.5);
+    background-color: #f5f5f5;
+  }
+`;
+
+const SelectContent = styled(RadixSelect.Content)`
+  width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+`;
+
+const SelectViewport = styled(RadixSelect.Viewport)`
+  width: var(--radix-select-trigger-width);
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background-color: white;
+  padding: 5px;
+`;
+
+const SelectItem = styled(RadixSelect.Item)`
+  user-select: none;
+  font-size: 1.125em;
+  padding: 4px 11px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: #e6f4ff;
+  }
+  &[data-disabled] {
+    color: rgba(0, 0, 0, 0.5);
+  }
+`;
+
+const SelectLabel = styled(RadixSelect.Label)`
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 1em;
+  padding: 4px 11px;
+  margin-top: 8px;
+`;
+
+const SelectItemIndicator = styled(RadixSelect.ItemIndicator)`
+  right: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const SelectSeparator = styled(RadixSelect.Separator)`
+  height: 1px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.15);
+  margin: 5px 0;
+`;
+
+export function Select(props: SelectProps) {
+  const {
+    placeholder,
+    value,
+    onSelect,
+    options,
+    disabled = false,
+    style,
+  } = props;
+
+  return (
+    <SelectRoot style={{ ...style }}>
+      <RadixSelect.Root
+        value={value}
+        onValueChange={onSelect}
+        disabled={disabled}
+      >
+        <SelectTrigger>
+          <RadixSelect.Value placeholder={placeholder} />
+          <RadixSelect.Icon asChild>
+            <FaChevronDown />
+          </RadixSelect.Icon>
+        </SelectTrigger>
+        <Portal>
+          <SelectContent position="popper">
+            <RadixSelect.ScrollUpButton>
+              <FaChevronUp />
+            </RadixSelect.ScrollUpButton>
+            <SelectViewport>
+              {options.map((group, groupIndex) => (
+                <Fragment key={groupIndex}>
+                  {group.map((optionOrCategory, optionOrCategoryIndex) =>
+                    'options' in optionOrCategory ? (
+                      <SelectGroup key={optionOrCategoryIndex}>
+                        <SelectLabel>{optionOrCategory.label}</SelectLabel>
+                        {optionOrCategory.options.map((option) => (
+                          <SelectItem
+                            key={option.value}
+                            value={option.value}
+                            disabled={option.disabled}
+                          >
+                            <RadixSelect.ItemText>
+                              {option.label}
+                            </RadixSelect.ItemText>
+                            <SelectItemIndicator>
+                              <FaCheck />
+                            </SelectItemIndicator>
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    ) : (
+                      <SelectItem
+                        key={optionOrCategory.value}
+                        value={optionOrCategory.value}
+                        disabled={optionOrCategory.disabled}
+                      >
+                        <RadixSelect.ItemText>
+                          {optionOrCategory.label}
+                        </RadixSelect.ItemText>
+                        <SelectItemIndicator>
+                          <FaCheck />
+                        </SelectItemIndicator>
+                      </SelectItem>
+                    ),
+                  )}
+                  {groupIndex < options.length - 1 && <SelectSeparator />}
+                </Fragment>
+              ))}
+            </SelectViewport>
+            <RadixSelect.ScrollDownButton />
+            <RadixSelect.Arrow />
+          </SelectContent>
+        </Portal>
+      </RadixSelect.Root>
+    </SelectRoot>
+  );
+}

package/src/components/forms/index.ts

@@ -1,2 +1,3 @@
 export * from './Input';
+export * from './Checkbox';
 export * from './context';

package/src/components/table/Table.tsx

@@ -3,6 +3,7 @@ import { css } from '@emotion/react';
 import {
   Children,
   createContext,
+  CSSProperties,
   isValidElement,
   ReactElement,
   ReactNode,
@@ -60,15 +61,16 @@ function splitChildren(children: ReactNode) {
 export interface TableProps {
   children?: ReactNode;
   border?: boolean;
+  style?: CSSProperties;
 }
 
 export function Table(props: TableProps) {
-  const { border = true, children } = props;
+  const { border = true, style = {}, children } = props;
   const { Header, Rows } = splitChildren(children);
   const tableContextValue = useMemo(() => ({ border }), [border]);
   return (
     <TableContext.Provider value={tableContextValue}>
-      <table>
+      <table style={style}>
         {Header}
         <tbody>{Rows}</tbody>
       </table>
@@ -114,15 +116,21 @@ function useRowChildren(children: ReactNode) {
   return { cells };
 }
 
-function Row({ children, border = false }: TableProps) {
+function Row({ children, style = {}, border = false }: TableProps) {
   const { cells } = useRowChildren(children);
-  return <tr style={{ border: border ? '1px solid black' : '' }}>{cells}</tr>;
+  return (
+    <tr style={{ border: border ? '1px solid black' : '', ...style }}>
+      {cells}
+    </tr>
+  );
 }
 Table.Row = Row;
-Table.Header = ({ children, border = false }: TableProps) => {
+Table.Header = ({ children, style, border = false }: TableProps) => {
   return (
     <thead>
-      <Table.Row border={border}>{children}</Table.Row>
+      <Table.Row border={border} style={style}>
+        {children}
+      </Table.Row>
     </thead>
   );
 };