@bolio-ui/core 2.0.0-alpha.2 → 3.0.0-alpha.1

package/esm/Themes/index.js

@@ -1,8 +1,8 @@
 'use client';
 import {
   Themes_default
-} from "../chunk-QUMM6MGX.js";
-import "../chunk-VCTKX4AS.js";
+} from "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
 export {
   Themes_default as default
 };

package/esm/Timeline/Timeline.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLOListElement>, keyof Props>;
+export type TimelineProps = Props & NativeAttrs;
+declare const Timeline: import("../use-scale/with-scale").ScaleComponent<HTMLOListElement, Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLOListElement>>;
+export default Timeline;

package/esm/Timeline/TimelineItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    title: React.ReactNode;
+    time?: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLLIElement>, keyof Props>;
+export type TimelineItemProps = Props & NativeAttrs;
+declare const TimelineItem: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;
+export default TimelineItem;

package/esm/Timeline/index.d.ts

@@ -0,0 +1,9 @@
+import Timeline from './Timeline';
+import TimelineItem from './TimelineItem';
+export type TimelineComponentType = typeof Timeline & {
+    Item: typeof TimelineItem;
+};
+export type { TimelineProps } from './Timeline';
+export type { TimelineItemProps } from './TimelineItem';
+declare const _default: TimelineComponentType;
+export default _default;

package/esm/Timeline/index.js

@@ -0,0 +1,14 @@
+'use client';
+import {
+  Timeline_default
+} from "../chunk-AHWF22ZQ.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Timeline_default as default
+};

package/esm/Toggle/Toggle.d.ts

@@ -17,6 +17,8 @@ interface Props {
     onChange?: (ev: ToggleEvent) => void;
     disabled?: boolean;
     type?: ToggleTypes;
+    icon?: React.ReactNode;
+    checkedIcon?: React.ReactNode;
     className?: string;
 }
 type NativeAttrs = Omit<React.LabelHTMLAttributes<AnyElement>, keyof Props>;

package/esm/Toggle/index.js

@@ -1,13 +1,13 @@
 'use client';
 import {
   Toggle_default
-} from "../chunk-YHEIC6EK.js";
-import "../chunk-S62PPQHN.js";
+} from "../chunk-T74YHCG6.js";
+import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
-import "../chunk-45MVPPJN.js";
-import "../chunk-TFZ2IGNH.js";
-import "../chunk-QUMM6MGX.js";
-import "../chunk-VCTKX4AS.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
 import "../chunk-5KUROAEP.js";
 export {
   Toggle_default as default

package/esm/Tooltip/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Tooltip_default
-} from "../chunk-CPIFYIT3.js";
+} from "../chunk-XF4TPE2W.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
 import "../chunk-LDTDMDE6.js";
@@ -10,12 +10,12 @@ import "../chunk-ZRORQ2WH.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-DGXZP4VJ.js";
 import "../chunk-3WPRUUZ6.js";
-import "../chunk-S62PPQHN.js";
+import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
-import "../chunk-45MVPPJN.js";
-import "../chunk-TFZ2IGNH.js";
-import "../chunk-QUMM6MGX.js";
-import "../chunk-VCTKX4AS.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
 import "../chunk-5KUROAEP.js";
 export {
   Tooltip_default as default

package/esm/Tree/Tree.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { TreeNodeData } from './TreeContext';
+export type { TreeNodeData } from './TreeContext';
+interface Props {
+    data: Array<TreeNodeData>;
+    value?: string | null;
+    initialValue?: string | null;
+    onChange?: (value: string, node: TreeNodeData) => void;
+    expanded?: Array<string>;
+    initialExpanded?: Array<string>;
+    onExpandedChange?: (expanded: Array<string>) => void;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLUListElement>, keyof Props | 'defaultValue'>;
+export type TreeProps = Props & NativeAttrs;
+declare const Tree: import("../use-scale/with-scale").ScaleComponent<HTMLUListElement, Props & NativeAttrs & React.RefAttributes<HTMLUListElement>>;
+export default Tree;

package/esm/Tree/TreeContext.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface TreeNodeData {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    children?: Array<TreeNodeData>;
+}
+export interface TreeConfig {
+    selected: string | null;
+    expanded: Array<string>;
+    tabbable: string | undefined;
+    activate: (node: TreeNodeData) => void;
+    register: (value: string, element: HTMLLIElement | null) => void;
+}
+export declare const TreeContext: React.Context<TreeConfig>;
+export declare const useTreeContext: () => TreeConfig;

package/esm/Tree/TreeNode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TreeNodeData } from './TreeContext';
+interface Props {
+    node: TreeNodeData;
+    level: number;
+}
+declare function TreeNode({ node, level }: Props): React.JSX.Element;
+export default TreeNode;

package/esm/Tree/index.d.ts

@@ -0,0 +1,3 @@
+import Tree from './Tree';
+export type { TreeProps, TreeNodeData } from './Tree';
+export default Tree;

package/esm/Tree/index.js

@@ -0,0 +1,14 @@
+'use client';
+import {
+  Tree_default
+} from "../chunk-K6UULETP.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Tree_default as default
+};

package/esm/chunk-2A4BSQ66.js

@@ -0,0 +1,130 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/SegmentedControl/SegmentedControl.tsx
+import React2, { useId, useMemo, useState } from "react";
+
+// core/SegmentedControl/SegmentedControlContext.ts
+import React from "react";
+var SegmentedControlContext = React.createContext({ disabled: false });
+var useSegmentedControlContext = () => React.useContext(SegmentedControlContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/SegmentedControl/SegmentedControl.module.css.bolio-css-module-source
+var SegmentedControl_module_css_default = { "segmented": "SegmentedControl-module_segmented__DCgXM" };
+
+// core/SegmentedControl/SegmentedControl.tsx
+import { jsx } from "react/jsx-runtime";
+var SegmentedControlComponent = React2.forwardRef(
+  ({
+    value,
+    initialValue,
+    onChange,
+    disabled = false,
+    fullWidth = false,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const name = useId();
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const current = value !== void 0 ? value : selfValue;
+    const providerValue = useMemo(
+      () => ({
+        name,
+        value: current,
+        disabled,
+        select: (next) => {
+          setSelfValue(next);
+          if (onChange) onChange(next);
+        }
+      }),
+      [name, current, disabled, onChange]
+    );
+    const groupStyle = {
+      width: SCALES.width(1, fullWidth ? "100%" : "fit-content"),
+      height: SCALES.height(2.25),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--segmented-bg": theme.palette.accents_1,
+      "--segmented-border": theme.palette.border,
+      "--segmented-color": theme.palette.accents_5,
+      "--segmented-hover-color": theme.palette.foreground,
+      "--segmented-active-bg": theme.palette.background,
+      "--segmented-active-color": theme.palette.foreground,
+      "--segmented-shadow": theme.expressiveness.shadowSmall,
+      "--segmented-focus": theme.palette.primary,
+      "--segmented-radius": theme.layout.radius,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-disabled": disabled || void 0,
+        className: use_classes_default(SegmentedControl_module_css_default.segmented, className),
+        ...props,
+        style: groupStyle,
+        children
+      }
+    ) });
+  }
+);
+SegmentedControlComponent.displayName = "BolioUISegmentedControl";
+var SegmentedControl = with_scale_default(SegmentedControlComponent);
+var SegmentedControl_default = SegmentedControl;
+
+// core/SegmentedControl/SegmentedControlItem.tsx
+import React3 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/SegmentedControl/SegmentedControlItem.module.css.bolio-css-module-source
+var SegmentedControlItem_module_css_default = { "item": "SegmentedControlItem-module_item__R48V1", "input": "SegmentedControlItem-module_input__Q8UWL", "text": "SegmentedControlItem-module_text__7YVZC" };
+
+// core/SegmentedControl/SegmentedControlItem.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SegmentedControlItem = React3.forwardRef(
+  ({ value, disabled = false, className = "", children, style, ...props }, ref) => {
+    const group = useSegmentedControlContext();
+    return /* @__PURE__ */ jsxs("label", { className: use_classes_default(SegmentedControlItem_module_css_default.item, className), style, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref,
+          type: "radio",
+          className: SegmentedControlItem_module_css_default.input,
+          name: group.name,
+          value,
+          checked: group.value === value,
+          disabled: disabled || group.disabled,
+          onChange: () => {
+            var _a;
+            return (_a = group.select) == null ? void 0 : _a.call(group, value);
+          },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { className: SegmentedControlItem_module_css_default.text, children })
+    ] });
+  }
+);
+SegmentedControlItem.displayName = "BolioUISegmentedControlItem";
+var SegmentedControlItem_default = SegmentedControlItem;
+
+// core/SegmentedControl/index.ts
+SegmentedControl_default.Item = SegmentedControlItem_default;
+var SegmentedControl_default2 = SegmentedControl_default;
+
+export {
+  SegmentedControl_default2 as SegmentedControl_default
+};

package/esm/chunk-2EYJZXS4.js

@@ -0,0 +1,225 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  Calendar_default,
+  fromISO,
+  startOfDay,
+  toISO
+} from "./chunk-P245HSVB.js";
+import {
+  use_click_away_default
+} from "./chunk-DGXZP4VJ.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/DatePicker/DatePicker.tsx
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/DatePicker/DatePicker.module.css.bolio-css-module-source
+var DatePicker_module_css_default = { "datepicker": "DatePicker-module_datepicker__QDqg5", "input": "DatePicker-module_input__e7dhN", "toggle": "DatePicker-module_toggle__I8ARg", "popup": "DatePicker-module_popup__rGvVR" };
+
+// core/DatePicker/DatePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DatePickerComponent = React.forwardRef(
+  ({
+    value: customValue,
+    initialValue = null,
+    onChange,
+    min,
+    max,
+    locale,
+    weekStartsOn,
+    placeholder = "YYYY-MM-DD",
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    calendarLabel = "Choose date",
+    className = "",
+    onBlur,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const colors = getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const selected = isControlled ? customValue : selfValue;
+    const selectedText = selected ? toISO(selected) : "";
+    const [text, setText] = useState(selectedText);
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+      setText(selectedText);
+    }, [selectedText]);
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    use_click_away_default(rootRef, () => setOpen(false));
+    const isInRange = (date) => !(min && date < startOfDay(min) || max && date > startOfDay(max));
+    const commit = (date) => {
+      if (!isControlled) setSelfValue(date);
+      if (onChange) onChange(date);
+    };
+    const inputHandler = (event) => {
+      const next = event.target.value;
+      setText(next);
+      if (next === "") return commit(null);
+      const date = fromISO(next);
+      if (date && isInRange(date)) commit(date);
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      setText(selectedText);
+    };
+    const pick = (date) => {
+      var _a;
+      commit(date);
+      setText(toISO(date));
+      setOpen(false);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const keyDownHandler = (event) => {
+      var _a;
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      setOpen(false);
+      (_a = buttonRef.current) == null ? void 0 : _a.focus();
+    };
+    const datepickerStyle = {
+      "--datepicker-font-size": SCALES.font(0.875),
+      "--datepicker-input-height": SCALES.height(2.25),
+      "--datepicker-width": SCALES.width(1, "initial"),
+      "--datepicker-height": SCALES.height(1, "auto"),
+      "--datepicker-padding-top": SCALES.pt(0),
+      "--datepicker-padding-right": SCALES.pr(0),
+      "--datepicker-padding-bottom": SCALES.pb(0),
+      "--datepicker-padding-left": SCALES.pl(0),
+      "--datepicker-margin-top": SCALES.mt(0),
+      "--datepicker-margin-right": SCALES.mr(0),
+      "--datepicker-margin-bottom": SCALES.mb(0),
+      "--datepicker-margin-left": SCALES.ml(0),
+      "--datepicker-text-color": theme.palette.foreground,
+      "--datepicker-bg": theme.palette.background,
+      "--datepicker-border-color": theme.palette.border,
+      "--datepicker-radius": rounded ? "25px" : theme.layout.radius,
+      "--datepicker-popup-radius": theme.layout.radius,
+      "--datepicker-field-color": colors.color,
+      "--datepicker-field-bg": colors.bgColor,
+      "--datepicker-field-border": colors.borderColor,
+      "--datepicker-field-hover-bg": colors.hoverBgColor,
+      "--datepicker-field-hover-border": colors.hoverBorder,
+      "--datepicker-focus-border-color": colors.focusBorder,
+      "--datepicker-placeholder-color": colors.placeholderColor,
+      "--datepicker-toggle-color": colors.iconColor,
+      "--datepicker-toggle-hover-color": colors.color,
+      "--datepicker-toggle-disabled-color": colors.iconColor,
+      "--datepicker-shadow": theme.expressiveness.shadowMedium
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: use_classes_default(DatePicker_module_css_default.datepicker, className),
+        style: datepickerStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              autoComplete: "off",
+              inputMode: "numeric",
+              value: text,
+              placeholder,
+              disabled,
+              onChange: inputHandler,
+              onBlur: blurHandler,
+              className: DatePicker_module_css_default.input,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              className: DatePicker_module_css_default.toggle,
+              "aria-label": calendarLabel,
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              disabled,
+              onClick: () => setOpen((last) => !last),
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "1.25em",
+                  height: "1.25em",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                    /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+                  ]
+                }
+              )
+            }
+          ),
+          open && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "dialog",
+              "aria-label": calendarLabel,
+              className: DatePicker_module_css_default.popup,
+              onKeyDown: keyDownHandler,
+              children: /* @__PURE__ */ jsx(
+                Calendar_default,
+                {
+                  autoFocus: true,
+                  value: selected,
+                  min,
+                  max,
+                  locale,
+                  weekStartsOn,
+                  onChange: pick
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DatePickerComponent.displayName = "BolioUIDatePicker";
+var DatePicker = with_scale_default(DatePickerComponent);
+var DatePicker_default = DatePicker;
+
+// core/DatePicker/index.ts
+var DatePicker_default2 = DatePicker_default;
+
+export {
+  DatePicker_default2 as DatePicker_default
+};

package/esm/chunk-4QA7Z7VP.js

@@ -0,0 +1,132 @@
+import {
+  Modal_default
+} from "./chunk-6ZBFUZSL.js";
+import {
+  Input_default
+} from "./chunk-NEG5UNM6.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Command/Command.tsx
+import { useEffect, useMemo, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Command/Command.module.css.bolio-css-module-source
+var Command_module_css_default = { "command": "Command-module_command__Gmila", "list": "Command-module_list__6p8VU", "item": "Command-module_item__bARSH", "icon": "Command-module_icon__D2tGK", "label": "Command-module_label__tKuEy", "hint": "Command-module_hint__DZc8-", "empty": "Command-module_empty__UDNuo" };
+
+// core/Command/Command.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Command = ({
+  visible,
+  onClose,
+  items,
+  placeholder = "Type a command or search",
+  emptyText = "No results. Try another word.",
+  className = ""
+}) => {
+  const theme = use_theme_default();
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const filtered = useMemo(() => {
+    const term = query.trim().toLowerCase();
+    return term ? items.filter((item) => item.label.toLowerCase().includes(term)) : items;
+  }, [items, query]);
+  useEffect(() => {
+    if (!visible) return;
+    setQuery("");
+    setActive(0);
+  }, [visible]);
+  const select = (item) => {
+    var _a;
+    if (!item) return;
+    (_a = item.onSelect) == null ? void 0 : _a.call(item);
+    onClose == null ? void 0 : onClose();
+  };
+  const keyDownHandler = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      const count = filtered.length;
+      if (count) setActive((last) => (last + step + count) % count);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      select(filtered[active]);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Modal_default,
+    {
+      visible,
+      onClose,
+      "aria-label": "Command",
+      wrapClassName: use_classes_default(Command_module_css_default.command, className),
+      children: /* @__PURE__ */ jsxs("div", { onKeyDown: keyDownHandler, children: [
+        /* @__PURE__ */ jsx(
+          Input_default,
+          {
+            autoFocus: true,
+            width: "100%",
+            placeholder,
+            value: query,
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setActive(0);
+            },
+            role: "combobox",
+            "aria-expanded": true,
+            "aria-controls": "bolioui-command-list",
+            "aria-label": placeholder
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { id: "bolioui-command-list", role: "listbox", className: Command_module_css_default.list, children: [
+          filtered.length === 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: Command_module_css_default.empty,
+              style: { color: theme.palette.accents_5 },
+              children: emptyText
+            }
+          ),
+          filtered.map((item, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "option",
+              "aria-selected": index === active,
+              className: Command_module_css_default.item,
+              style: {
+                backgroundColor: index === active ? theme.palette.accents_2 : void 0
+              },
+              onMouseEnter: () => setActive(index),
+              onClick: () => select(item),
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: Command_module_css_default.icon, children: item.icon }),
+                /* @__PURE__ */ jsx("span", { className: Command_module_css_default.label, children: item.label }),
+                item.hint && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: Command_module_css_default.hint,
+                    style: { color: theme.palette.accents_5 },
+                    children: item.hint
+                  }
+                )
+              ]
+            },
+            item.value
+          ))
+        ] })
+      ] })
+    }
+  );
+};
+Command.displayName = "BolioUICommand";
+var Command_default = Command;
+
+// core/Command/index.ts
+var Command_default2 = Command_default;
+
+export {
+  Command_default2 as Command_default
+};