@kanaries/graphic-walker 0.2.12 → 0.2.14

package/src/components/dataTable/index.tsx

@@ -0,0 +1,177 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+import { IMutField, IRow } from "../../interfaces";
+import { useTranslation } from "react-i18next";
+import Pagination from "./pagination";
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import DropdownContext from "../dropdownContext";
+
+interface DataTableProps {
+    size?: number;
+    metas: IMutField[];
+    data: IRow[];
+    onMetaChange: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
+}
+const Container = styled.div`
+    overflow-x: auto;
+    max-height: 660px;
+    overflow-y: auto;
+    table {
+        box-sizing: content-box;
+        border-collapse: collapse;
+        font-size: 12px;
+        tbody {
+            td {
+            }
+            td.number {
+                text-align: right;
+            }
+            td.text {
+                text-align: left;
+            }
+        }
+    }
+`;
+const ANALYTIC_TYPE_LIST = ["dimension", "measure"];
+const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
+// function getCellType(field: IMutField): 'number' | 'text' {
+//     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
+// }
+function getHeaderType(field: IMutField): "number" | "text" {
+    return field.analyticType === "dimension" ? "text" : "number";
+}
+
+function getHeaderClassNames(field: IMutField) {
+    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-purple-400";
+}
+
+function getSemanticColors(field: IMutField): string {
+    switch (field.semanticType) {
+        case "nominal":
+            return "bg-sky-100 text-sky-800";
+        case "ordinal":
+            return "bg-indigo-100 text-indigo-800";
+        case "quantitative":
+            return "bg-purple-100 text-purple-800";
+        case "temporal":
+            return "bg-yellow-100 text-yellow-800";
+        default:
+            return "bg-gray-400";
+    }
+}
+
+const DataTable: React.FC<DataTableProps> = (props) => {
+    const { size = 10, data, metas, onMetaChange } = props;
+    const [pageIndex, setPageIndex] = useState(0);
+    const { t } = useTranslation();
+
+    const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
+        return ANALYTIC_TYPE_LIST.map((at) => ({
+            value: at,
+            label: t(`constant.analytic_type.${at}`),
+        }));
+    }, []);
+
+    const semanticTypeList = useMemo<{ value: string; label: string }[]>(() => {
+        return SEMANTIC_TYPE_LIST.map((st) => ({
+            value: st,
+            label: t(`constant.semantic_type.${st}`),
+        }));
+    }, []);
+
+    const from = pageIndex * size;
+    const to = Math.min((pageIndex + 1) * size, data.length - 1);
+
+    return (
+        <Container className="rounded border-gray-200 dark:border-gray-700 border">
+            <Pagination
+                total={data.length}
+                from={from + 1}
+                to={to + 1}
+                onNext={() => {
+                    setPageIndex(Math.min(Math.ceil(data.length / size) - 1, pageIndex + 1));
+                }}
+                onPrev={() => {
+                    setPageIndex(Math.max(0, pageIndex - 1));
+                }}
+            />
+            <table className="min-w-full divide-y">
+                <thead className="bg-gray-50 dark:bg-gray-900">
+                    <tr className="divide-x divide-gray-200 dark:divide-gray-600">
+                        {metas.map((field, fIndex) => (
+                            <th key={field.fid} className={""}>
+                                <div
+                                    className={
+                                        getHeaderClassNames(field) +
+                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6"
+                                    }
+                                >
+                                    <b>{field.name || field.fid}</b>
+                                    <div>
+                                        <DropdownContext
+                                            options={analyticTypeList}
+                                            onSelect={(value) => {
+                                                onMetaChange(field.fid, fIndex, {
+                                                    analyticType: value as IMutField["analyticType"],
+                                                });
+                                            }}
+                                        >
+                                            <span
+                                                className={
+                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
+                                                    (field.analyticType === "dimension" ? "bg-blue-500" : "bg-purple-500")
+                                                }
+                                            >
+                                                {field.analyticType}
+                                                <ChevronUpDownIcon className="ml-2 w-3" />
+                                            </span>
+                                        </DropdownContext>
+                                    </div>
+                                    <div>
+                                        <DropdownContext
+                                            options={semanticTypeList}
+                                            onSelect={(value) => {
+                                                onMetaChange(field.fid, fIndex, {
+                                                    semanticType: value as IMutField["semanticType"],
+                                                });
+                                            }}
+                                        >
+                                            <span
+                                                className={
+                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs " +
+                                                    getSemanticColors(field)
+                                                }
+                                            >
+                                                {field.semanticType}
+                                                <ChevronUpDownIcon className="ml-2 w-3" />
+                                            </span>
+                                        </DropdownContext>
+                                    </div>
+                                </div>
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100 dark:divide-gray-600 bg-white dark:bg-zinc-900">
+                    {data.slice(from, to).map((row, index) => (
+                        <tr className={"divide-x divide-gray-200 dark:divide-gray-600 " + (index % 2 ? "bg-gray-50 dark:bg-gray-800" : "")} key={index}>
+                            {metas.map((field) => (
+                                <td
+                                    key={field.fid + index}
+                                    className={
+                                        getHeaderType(field) +
+                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
+                                    }
+                                >
+                                    {row[field.fid]}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </Container>
+    );
+};
+
+export default DataTable;

package/src/components/dataTable/pagination.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+interface PaginationProps {
+    from: number;
+    to: number;
+    total: number;
+    onPrev: () => void;
+    onNext: () => void;
+}
+export default function Pagination(props: PaginationProps) {
+    const { from , to, total, onNext, onPrev } = props;
+    const { t } = useTranslation();
+    return (
+        <nav
+            className="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
+            aria-label="Pagination"
+        >
+            <div className="hidden sm:block">
+                <p className="text-sm text-gray-800 dark:text-gray-100">
+                    Showing <span className="font-medium">{from}</span> to <span className="font-medium">{to}</span> of{" "}
+                    <span className="font-medium">{total}</span> results
+                </p>
+            </div>
+            <div className="flex flex-1 justify-between sm:justify-end">
+                <button
+                    onClick={() => {
+                        onPrev();
+                    }}
+                    className="relative inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
+                >
+                    {t('actions.prev')}
+                </button>
+                <button
+                    onClick={() => {
+                        onNext()
+                    }}
+                    className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900  px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
+                >
+                    {t('actions.next')}
+                </button>
+            </div>
+        </nav>
+    );
+}

package/src/components/dataTypeIcon.tsx

@@ -6,7 +6,7 @@ const DataTypeIcon: React.FC<{ dataType: IMutField["semanticType"]; analyticType
     props
 ) => {
     const { dataType, analyticType } = props;
-    const color = analyticType === "dimension" ? "text-blue-500" : "text-green-500";
+    const color = analyticType === "dimension" ? "text-blue-500" : "text-purple-500";
     const iconClassName = `w-3 inline-block mr-0.5 ${color}`;
     switch (dataType) {
         case "quantitative":

package/src/components/dropdownContext/index.tsx

@@ -0,0 +1,64 @@
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownContextOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownContextProps {
+    options?: IDropdownContextOption[];
+    disable?: boolean;
+    onSelect?: (value: string, index: number) => void;
+}
+const DropdownContext: React.FC<IDropdownContextProps> = (props) => {
+    const { options = [], disable } = props;
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+
+    return (
+        <Menu as="span" className="relative block text-left">
+            <Menu.Button className="block w-full text-left">{props.children}</Menu.Button>
+
+            <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+            >
+                <Menu.Items className="absolute left-0 z-50 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-zinc-900  shadow-lg border border-gray-50 dark:border-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="py-1">
+                        {options.map((option, index) => (
+                            <Menu.Item key={option.value}>
+                                {(p) => (
+                                    <span
+                                        className={classNames(
+                                            p.active ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50" : "text-gray-700 dark:text-gray-200",
+                                            "block px-4 py-2 text-sm"
+                                        )}
+                                        onClick={() => {
+                                            props.onSelect && !props.disable && props.onSelect(option.value, index);
+                                        }}
+                                    >
+                                    {option.label}
+                                    </span>
+                                )}
+                            </Menu.Item>
+                        ))}
+                    </div>
+                </Menu.Items>
+            </Transition>
+        </Menu>
+    );
+};
+
+export default DropdownContext;

package/src/components/dropdownSelect/index.tsx

@@ -0,0 +1,92 @@
+import React, { Fragment } from "react";
+import { Listbox, Menu, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownSelectProps {
+    options?: IDropdownSelectOption[];
+    disable?: boolean;
+    selectedKey: string;
+    onSelect?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    buttonClassName?: string;
+}
+const DropdownSelect: React.FC<IDropdownSelectProps> = (props) => {
+    const { options = [], disable, selectedKey, onSelect, placeholder = "Select an option", className, buttonClassName } = props;
+
+    const selectedItem = options.find((op) => op.value === selectedKey);
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+    let rootClassName = "relative";
+    let btnComputedClassName = "relative cursor-default text-xs rounded-lg bg-white dark:bg-zinc-900 px-2.5 py-1.5 pr-10 text-left border border-gray-200 dark:border-gray-700 focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 truncate"
+    if (buttonClassName) {
+        btnComputedClassName = btnComputedClassName + " " + buttonClassName;
+    }
+    if (className) {
+        rootClassName = rootClassName + " " + className;
+    }
+    return (
+        <Listbox
+            value={selectedKey}
+            onChange={(newKey) => {
+                onSelect && onSelect(newKey);
+            }}
+        >
+            <div className={rootClassName}>
+                <Listbox.Button className={btnComputedClassName}>
+                    <span className="block truncate dark:text-white">{selectedItem?.label || ""}</span>
+                    { selectedItem === undefined && <span className="block truncate text-gray-400">{placeholder}</span>}
+                    <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </span>
+                </Listbox.Button>
+                <Transition
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-900  py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {options.map((op, opIndex) => (
+                            <Listbox.Option
+                                key={op.value}
+                                className={({ active }) =>
+                                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                                        active ? "bg-amber-100 text-amber-900 dark:bg-amber-800 dark:text-amber-50" : "text-gray-900 dark:text-gray-50"
+                                    }`
+                                }
+                                value={op.value}
+                            >
+                                {({ selected }) => (
+                                    <>
+                                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
+                                            {op.label}
+                                        </span>
+                                        {selected && (
+                                            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600 dark:text-amber-400">
+                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                            </span>
+                                        )}
+                                    </>
+                                )}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </div>
+        </Listbox>
+    );
+};
+
+export default DropdownSelect;

package/src/components/modal.tsx

@@ -1,6 +1,9 @@
 import React, { useRef } from "react";
 import styled from "styled-components";
 import { XCircleIcon } from "@heroicons/react/24/outline";
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 const Background = styled.div({
     position: "fixed",
@@ -28,27 +31,33 @@ const Container = styled.div`
         padding: 12px;
         font-size: 14px;
         align-items: center;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+        }
     }
     > div.container {
-        padding: 1em;
+        padding: 0.5em 1em 1em 1em;
     }
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background-color: #fff;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+    }
     /* box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.19); */
     border-radius: 4px;
     z-index: 999;
 `;
 interface ModalProps {
     onClose?: () => void;
+    show?: boolean;
     title?: string;
 }
 const Modal: React.FC<ModalProps> = (props) => {
-    const { onClose, title } = props;
+    const { onClose, title, show } = props;
     const prevMouseDownTimeRef = useRef(0);
-
     return (
         <Background
             // This is a safer replacement of onClick handler.
@@ -56,7 +65,7 @@ const Modal: React.FC<ModalProps> = (props) => {
             // at a different element and then released when the mouse is moved on the target element.
             // This case is required to be prevented, especially disturbing when interacting
             // with a Slider component.
-            className="border border-gray-300"
+            className={"border border-gray-300 dark:border-gray-600 " + (show ? "block" : "hidden")}
             onMouseDown={() => (prevMouseDownTimeRef.current = Date.now())}
             onMouseOut={() => (prevMouseDownTimeRef.current = 0)}
             onMouseUp={() => {
@@ -65,17 +74,20 @@ const Modal: React.FC<ModalProps> = (props) => {
                 }
             }}
         >
-            <Container role="dialog" className="shadow-lg" onMouseDown={(e) => e.stopPropagation()}>
-                <div className="header relative h-9">
-                    <header className="font-bold">{title}</header>
-                    <XCircleIcon
-                        className="text-red-600 absolute right-2 w-6 cursor-pointer"
-                        role="button"
-                        tabIndex={0}
-                        aria-label="close dialog"
-                        onClick={onClose}
-                    />
+            <Container role="dialog" className="shadow-lg rounded-md border border-gray-100 dark:border-gray-800" onMouseDown={(e) => e.stopPropagation()}>
+            <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md bg-white dark:bg-zinc-900 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    onClick={() => {
+                        onClose?.();
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
                 </div>
+                <div className="px-6 pt-4 text-base font-semibold leading-6 text-gray-900 dark:text-gray-50">{title}</div>
                 <div className="container">{props.children}</div>
             </Container>
         </Background>

package/src/components/tabs/defaultTab.tsx

@@ -0,0 +1,43 @@
+import React, { ReactElement } from "react";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export interface ITabOption {
+    label: string | ReactElement;
+    key: string;
+}
+interface DefaultProps {
+    tabs: ITabOption[];
+    selectedKey: string;
+    onSelected: (selectedKey: string, index: number) => void;
+    allowEdit?: boolean;
+    onEditLabel?: (label: string, index: number) => void;
+}
+export default function Default(props: DefaultProps) {
+    const { tabs, selectedKey, onSelected } = props;
+
+    return (
+        <div className="border-b border-gray-200 dark:border-gray-700 mb-2" >
+            <nav className="-mb-px flex space-x-8" role="tablist" aria-label="Tabs">
+                {tabs.map((tab, tabIndex) => (
+                    <span
+                        role="tab"
+                        tabIndex={0}
+                        onClick={() => {
+                            onSelected(tab.key, tabIndex)
+                        }}
+                        key={tab.key}
+                        className={classNames(
+                            tab.key === selectedKey
+                            ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-300'
+                            : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:text-gray-400',
+                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm cursor-pointer'
+                        )}
+                    >{tab.label}</span>
+                ))}
+            </nav>
+        </div>
+    );
+}

package/src/components/tabs/{pureTab.tsx → editableTab.tsx}

@@ -11,14 +11,14 @@ export interface ITabOption {
     key: string;
     options?: Record<string, any>;
 }
-interface PureTabsProps {
+interface EditableTabsProps {
     tabs: ITabOption[];
     selectedKey: string;
     onSelected: (selectedKey: string, index: number) => void;
     allowEdit?: boolean;
     onEditLabel?: (label: string, index: number) => void;
 }
-export default function PureTabs(props: PureTabsProps) {
+export default function EditableTabs(props: EditableTabsProps) {
     const { tabs, selectedKey, onSelected, allowEdit, onEditLabel } = props;
     const [editList, setEditList] = useState<boolean[]>([]);
     const { t } = useTranslation();
@@ -32,8 +32,8 @@ export default function PureTabs(props: PureTabsProps) {
     }, [clearEditStatus]);
 
     return (
-        <div className="border-b border-gray-200 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
-            <nav className="-mb-px flex h-8 border-gray-200 border-l" role="tablist" aria-label="Tabs">
+        <div className="border-b border-gray-200 dark:border-gray-800 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
+            <nav className="-mb-px flex h-8 border-gray-200 dark:border-gray-800" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
                         role="tab"
@@ -64,9 +64,9 @@ export default function PureTabs(props: PureTabsProps) {
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
-                                ? "text-black bg-gray-100"
-                                : "text-gray-500 hover:text-gray-700",
-                            "whitespace-nowrap border-gray-200 py-1 px-2 border-t border-r border-b pr-6 text-sm cursor-pointer"
+                                ? "border rounded-t"
+                                : "text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:text-gray-200 dark:hover:bg-gray-800",
+                            "whitespace-nowrap border-gray-200 dark:border-gray-700 py-1 px-2 pr-6 text-sm cursor-pointer dark:text-white"
                         )}
                     />
                 ))}

package/src/components/toolbar/components.tsx

@@ -46,6 +46,14 @@ export const ToolbarContainer = styled.div`
     height: var(--height);
     background-color: var(--background-color);
     color: var(--color);
+    border: 1px solid;
+    border-color: #e5e7eb;
+    // dark mode
+    @media (prefers-color-scheme: dark) {
+        background-color: var(--background-color-dark);
+        color: var(--color-dark);
+        border-color: #4b5563;
+    }
     /* box-shadow: 0px 1px 3px 1px rgba(136, 136, 136, 0.1); */
     border-radius: 2px;
     overflow: hidden;
@@ -94,7 +102,6 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
     &[aria-disabled=false] {
         cursor: pointer;
         :hover, :focus, &.open {
-            background-image: linear-gradient(#FFFFFFCC, #FEFEFECC);
             --background-color: #FEFEFE;
             color: var(--color-hover);
             &.split * svg {
@@ -104,6 +111,16 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
             & svg {
                 text-shadow: 0 0 1.5px var(--shadow-color);
             }
+            background-color: var(--background-color);
+        }
+    }
+    @media (prefers-color-scheme: dark) {
+        color: var(--dark-mode-color);
+        &[aria-disabled=false] {
+            :hover, :focus, &.open {
+                --background-color: #202020;
+                color: var(--dark-mode-color-hover);
+            }
         }
     }
     transition: color 100ms, background-image 100ms;

package/src/components/toolbar/index.tsx

@@ -11,6 +11,11 @@ const Root = styled.div`
     --color-hover: #555;
     --blue: #282958;
     --blue-dark: #1d1e38;
+    --dark-mode-background-color: #1f1f1f;
+    --dark-mode-color: #aaa;
+    --dark-mode-color-hover: #ccc;
+    --dark-mode-blue: #282958;
+    --dark-mode-blue-dark: #1d1e38;
 `;
 
 export interface ToolbarProps {

package/src/components/toolbar/toolbar-button.tsx

@@ -12,13 +12,18 @@ const ToolbarButton = memo<IToolbarProps<ToolbarButtonItem>>(function ToolbarBut
     const { icon: Icon, label, disabled, onClick } = item;
     const handlers = useHandlers(() => onClick?.(), disabled ?? false);
 
+    const mergedIconStyles = {
+        ...styles?.icon,
+        ...item.styles?.icon,
+    };
+
     return (
         <>
             <ToolbarItemContainer
                 props={props}
                 handlers={onClick ? handlers : null}
             >
-                <Icon style={styles?.icon} />
+                <Icon style={mergedIconStyles} />
             </ToolbarItemContainer>
         </>
     );

package/src/components/toolbar/toolbar-item.tsx

@@ -35,6 +35,9 @@ const FormContainer = styled(ToolbarContainer)`
     width: max-content;
     height: max-content;
     background-color: #fff;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+    }
 `;
 
 export interface IToolbarItem {
@@ -48,6 +51,7 @@ export interface IToolbarItem {
     disabled?: boolean;
     menu?: ToolbarProps;
     form?: JSX.Element;
+    styles?: Partial<Pick<NonNullable<ToolbarProps['styles']>, 'item' | 'icon' | 'splitIcon'>>;
 }
 
 export const ToolbarItemSplitter = '-';