@synnaxlabs/pluto 0.12.0

package/dist/Item-EDdYN2NK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item-EDdYN2NK.js","sources":["../src/menu/ContextMenu.tsx","../src/menu/Menu.tsx","../src/menu/Item.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type ReactElement,\n  type RefCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { box, unique, xy } from \"@synnaxlabs/x\";\n\nimport { CSS } from \"@/css\";\nimport { useClickOutside } from \"@/hooks\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nimport \"@/menu/ContextMenu.css\";\n\ninterface ContextMenuState {\n  visible: boolean;\n  keys: string[];\n  xy: xy.XY;\n}\n\n/** Supported event types for triggering a context menu. */\nexport type ContextMenuEvent = xy.Client & {\n  preventDefault: () => void;\n  stopPropagation: () => void;\n  target: Element;\n};\n\n/** Opens the context menu. See {@link Menu.useContextMenu} for more details. */\nexport type ContextMenuOpen = (\n  pos: xy.Crude | ContextMenuEvent,\n  keys?: string[],\n) => void;\n\n/** Return value for the {@Menu.useContextMenu} hook. */\nexport interface UseContextMenuReturn extends ContextMenuState {\n  visible: boolean;\n  close: () => void;\n  open: ContextMenuOpen;\n  ref: RefCallback<HTMLDivElement>;\n}\n\nconst INITIAL_STATE: ContextMenuState = {\n  visible: false,\n  keys: [],\n  xy: xy.ZERO,\n};\n\nexport const CONTEXT_SELECTED = CSS.BM(\"context\", \"selected\");\nexport const CONTEXT_TARGET = CSS.BE(\"context\", \"target\");\nconst CONTEXT_MENU_CONTAINER = CSS.BE(\"menu-context\", \"container\");\n\nconst findTarget = (target: HTMLElement): HTMLElement => {\n  let candidate = target;\n  while (candidate != null && !candidate.classList.contains(CONTEXT_TARGET)) {\n    if (candidate.classList.contains(CONTEXT_MENU_CONTAINER)) return target;\n    candidate = candidate.parentElement as HTMLElement;\n  }\n  return candidate;\n};\n\nconst findSelected = (target_: HTMLElement): HTMLElement[] => {\n  const target = findTarget(target_);\n  const selected = (target.parentElement?.querySelectorAll(`.${CONTEXT_SELECTED}`) ??\n    []) as HTMLElement[];\n  return [target, ...Array.from(selected)];\n};\n\n/**\n * Menu.useContextMenu extracts the logic for toggling a context menu, allowing\n * the caller to control the menu's visibility and position.\n *\n * @returns visible - Whether the menu is visible.\n * @returns close - A function to close the menu.\n * @returns open - A function to open the menu. The function accepts an XY coordinate and\n * an optional set of keys to set as the selected menu items. It's important to note\n * that these keys override the default behavior of the menu, which is explained in\n * the documentation for {@link Menu.ContextMenu}.\n */\nexport const useContextMenu = (): UseContextMenuReturn => {\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const [state, setMenuState] = useState<ContextMenuState>(INITIAL_STATE);\n\n  const handleOpen: ContextMenuOpen = (e, keys) => {\n    const p = xy.construct(e);\n    if (\"preventDefault\" in e) {\n      e.preventDefault();\n      // Prevent parent context menus from opening.\n      e.stopPropagation();\n      keys = keys ?? unique(findSelected(e.target as HTMLElement).map((el) => el.id));\n    } else keys = [];\n    setMenuState({ visible: true, keys, xy: p });\n  };\n\n  const refCallback = (el: HTMLDivElement): void => {\n    menuRef.current = el;\n    if (el == null) return;\n    setMenuState((prev) => {\n      if (prev.visible) {\n        const [repositioned, changed] = box.positionSoVisible(\n          el,\n          window.document.documentElement,\n        );\n        if (changed) return { ...prev, xy: box.topLeft(repositioned) };\n      }\n      return prev;\n    });\n  };\n\n  const hideMenu = (): void => setMenuState(INITIAL_STATE);\n\n  useClickOutside(menuRef, hideMenu);\n\n  return {\n    ...state,\n    close: hideMenu,\n    open: handleOpen,\n    ref: refCallback,\n  };\n};\n\nexport interface ContextMenuMenuProps {\n  keys: string[];\n}\n\nexport interface ContextMenuProps\n  extends UseContextMenuReturn,\n    ComponentPropsWithoutRef<\"div\"> {\n  menu?: RenderProp<ContextMenuMenuProps>;\n}\n\nconst ContextMenuCore = (\n  {\n    children,\n    menu,\n    visible,\n    open,\n    close,\n    xy,\n    keys,\n    className,\n    ...props\n  }: ContextMenuProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n  const menuC = visible ? menu?.({ keys }) : null;\n\n  return (\n    <div\n      className={CSS(CONTEXT_MENU_CONTAINER, className, CSS.inheritDims())}\n      onContextMenu={open}\n      {...props}\n    >\n      {children}\n      {menuC != null && (\n        <div\n          className={CSS(CSS.B(\"menu-context\"), CSS.bordered())}\n          ref={ref}\n          style={{ left: xy.x, top: xy.y }}\n          onClick={close}\n        >\n          {menuC}\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Menu.ContextMenu wraps a set of children with a context menu. When the user right\n * clicks within wrapped area, the provided menu will be shown. Menu.ContextMenu should\n * be used in conjunction with the Menu.useContextMenu hook.\n *\n * The rendered menu is provided with a set of keys that represent the HTML IDs of the\n * context target elements. The first target is evaluated by traversing the parents\n * of the element that was right clicked until an element with the class \"pluto-context-target\"\n * is found. If no such element is found, the right clicked element itself is used as\n * the target. Subsequent targets are found by querying all siblings of the first target\n * that have the \"pluto-context-selected\" class.\n *\n * @example <caption>Example DOM structure</caption>\n *   <div id=\"pluto-menu-context__container\">\n *    <div className=\"pluto-context-target\" id=\"1\">\n *      <span>\n *        <h2>I was right clicked!</h2>\n *      </span>\n *    </div>\n *    <div className=\"pluto-context-target pluto-context-selected\" id=\"2\">\n *    <div className=\"pluto-context-target\" id=\"3\">\n *   </div>\n *\n * In the above example, the keys provided to the menu would be [\"1\", \"2\"].\n *\n * The target resolution logic is ideal for both single and multi-select scenarios,\n * such as lists that have several selected rows that should be acted upon together.\n *\n * @param props - Props for the component. Expects all return values from the\n * useContextMenu hook. All non-hook and unlisted props will be spread to the\n * underlying div component acting as the root element.\n * @param props.menu - The menu to show when the user right clicks.\n */\nexport const ContextMenu = forwardRef(ContextMenuCore);\nContextMenu.displayName = \"ContextMenu\";\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  createContext,\n  type PropsWithChildren,\n  type ReactElement,\n  useContext,\n} from \"react\";\n\nimport { type Input } from \"@/input\";\nimport { type Text } from \"@/text\";\nimport { type ComponentSize } from \"@/util/component\";\n\ninterface MenuContextValue {\n  onClick: (key: string) => void;\n  selected: string;\n  level?: Text.Level;\n  iconSpacing?: ComponentSize;\n}\n\nexport const MenuContext = createContext<MenuContextValue>({\n  onClick: () => {},\n  selected: \"\",\n});\n\nexport interface MenuProps\n  extends Partial<Input.Control<string>>,\n    PropsWithChildren,\n    Pick<MenuContextValue, \"level\" | \"iconSpacing\"> {}\n\nexport const useMenuContext = (): MenuContextValue => useContext(MenuContext);\n\n/**\n * Menu is a modular component that allows you to create a menu with a list of items.\n * It satisfies the InputControl string interface, so it's selected value can be\n * controlled.\n *\n * @param props - Props for the component. All unlisted props will be spread to the\n * underlying Space component acting as the root element.\n * @param props.onChange - Callback executed when the selected item changes.\n * @param props.value - The selected item.\n */\nexport const Menu = ({\n  children,\n  onChange,\n  level,\n  iconSpacing,\n  value = \"\",\n}: MenuProps): ReactElement => {\n  const handleClick: MenuProps[\"onChange\"] = (key) => onChange?.(key);\n  return (\n    <MenuContext.Provider\n      value={{ onClick: handleClick, selected: value, level, iconSpacing }}\n    >\n      {children}\n    </MenuContext.Provider>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type FunctionComponent, type ReactElement } from \"react\";\n\nimport { Button } from \"@/button\";\nimport { CSS } from \"@/css\";\nimport { useMenuContext } from \"@/menu/Menu\";\n\nimport \"@/menu/Item.css\";\n\nconst menuItemFactory =\n  <E extends Pick<Button.ButtonProps, \"className\" | \"onClick\">>(\n    Base: FunctionComponent<E>,\n    defaultProps?: Partial<E>,\n  ): FunctionComponent<E & { itemKey: string }> =>\n  // eslint-disable-next-line react/display-name\n  (props): ReactElement => {\n    const { itemKey, className, onClick, size, ...rest } = {\n      ...defaultProps,\n      ...props,\n    };\n\n    const { onClick: ctxOnClick, selected, level, iconSpacing } = useMenuContext();\n\n    const handleClick: Button.ButtonProps[\"onClick\"] = (e) => {\n      ctxOnClick(itemKey);\n      onClick?.(e);\n    };\n    const _selected = selected === itemKey;\n    return (\n      // @ts-expect-error\n      <Base\n        level={level}\n        {...rest}\n        onClick={handleClick}\n        variant=\"text\"\n        className={CSS(CSS.B(\"menu-item\"), CSS.selected(_selected), className)}\n        size={size ?? iconSpacing}\n      />\n    );\n  };\n\nexport interface ItemProps extends Button.ButtonProps {\n  itemKey: string;\n}\nexport const CoreItem = menuItemFactory(Button.Button, { noWrap: true });\n\nexport interface ItemIconProps extends Button.IconProps {\n  itemKey: string;\n}\nconst ItemIcon = menuItemFactory(Button.Icon);\n\nconst ItemLink = menuItemFactory(Button.Link, { noWrap: true });\nexport interface MenuItemLinkProps extends Button.LinkProps {\n  itemKey: string;\n}\n\ntype CoreItemType = typeof CoreItem;\n\nexport interface ItemType extends CoreItemType {\n  Icon: typeof ItemIcon;\n  Link: typeof ItemLink;\n}\n\n/**\n * Menu.Item renders a menu item.\n *\n * @param props - Props for the component. Identical props to those of Use except\n * for the ones listed below.\n * @param props.itemKey - The key of the item. This is used to identify the item and\n * is passed to the onChange callback of the Menu.\n */\nexport const Item = CoreItem as ItemType;\nItem.Icon = ItemIcon;\nItem.Link = ItemLink;\n"],"names":["box","xy","jsxs","jsx","Button.Button","Button.Icon","Button.Link"],"mappings":"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"}

package/dist/Item-HWzX7RK2.cjs

@@ -0,0 +1,170 @@
+"use strict";
+const jsxRuntime = require("./jsx-runtime-N1ikfypN.cjs");
+const React = require("react");
+const css = require("./css-V3VUT_Js.cjs");
+const Toggle = require("./Toggle-eOKYw1OT.cjs");
+const Link = require("./Link-xlTZan29.cjs");
+const INITIAL_STATE = {
+  visible: false,
+  keys: [],
+  xy: css.xy.ZERO
+};
+const CONTEXT_SELECTED = css.CSS.BM("context", "selected");
+const CONTEXT_TARGET = css.CSS.BE("context", "target");
+const CONTEXT_MENU_CONTAINER = css.CSS.BE("menu-context", "container");
+const findTarget = (target) => {
+  let candidate = target;
+  while (candidate != null && !candidate.classList.contains(CONTEXT_TARGET)) {
+    if (candidate.classList.contains(CONTEXT_MENU_CONTAINER))
+      return target;
+    candidate = candidate.parentElement;
+  }
+  return candidate;
+};
+const findSelected = (target_) => {
+  var _a;
+  const target = findTarget(target_);
+  const selected = ((_a = target.parentElement) == null ? void 0 : _a.querySelectorAll(`.${CONTEXT_SELECTED}`)) ?? [];
+  return [target, ...Array.from(selected)];
+};
+const useContextMenu = () => {
+  const menuRef = React.useRef(null);
+  const [state, setMenuState] = React.useState(INITIAL_STATE);
+  const handleOpen = (e, keys) => {
+    const p = css.xy.construct(e);
+    if ("preventDefault" in e) {
+      e.preventDefault();
+      e.stopPropagation();
+      keys = keys ?? css.unique(findSelected(e.target).map((el) => el.id));
+    } else
+      keys = [];
+    setMenuState({ visible: true, keys, xy: p });
+  };
+  const refCallback = (el) => {
+    menuRef.current = el;
+    if (el == null)
+      return;
+    setMenuState((prev) => {
+      if (prev.visible) {
+        const [repositioned, changed] = css.box$1.positionSoVisible(
+          el,
+          window.document.documentElement
+        );
+        if (changed)
+          return { ...prev, xy: css.box$1.topLeft(repositioned) };
+      }
+      return prev;
+    });
+  };
+  const hideMenu = () => setMenuState(INITIAL_STATE);
+  Toggle.useClickOutside(menuRef, hideMenu);
+  return {
+    ...state,
+    close: hideMenu,
+    open: handleOpen,
+    ref: refCallback
+  };
+};
+const ContextMenuCore = ({
+  children,
+  menu,
+  visible,
+  open,
+  close,
+  xy: xy2,
+  keys,
+  className,
+  ...props
+}, ref) => {
+  const menuC = visible ? menu == null ? void 0 : menu({ keys }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: css.CSS(CONTEXT_MENU_CONTAINER, className, css.CSS.inheritDims()),
+      onContextMenu: open,
+      ...props,
+      children: [
+        children,
+        menuC != null && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: css.CSS(css.CSS.B("menu-context"), css.CSS.bordered()),
+            ref,
+            style: { left: xy2.x, top: xy2.y },
+            onClick: close,
+            children: menuC
+          }
+        )
+      ]
+    }
+  );
+};
+const ContextMenu = React.forwardRef(ContextMenuCore);
+ContextMenu.displayName = "ContextMenu";
+const MenuContext = React.createContext({
+  onClick: () => {
+  },
+  selected: ""
+});
+const useMenuContext = () => React.useContext(MenuContext);
+const Menu = ({
+  children,
+  onChange,
+  level,
+  iconSpacing,
+  value = ""
+}) => {
+  const handleClick = (key) => onChange == null ? void 0 : onChange(key);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    MenuContext.Provider,
+    {
+      value: { onClick: handleClick, selected: value, level, iconSpacing },
+      children
+    }
+  );
+};
+const menuItemFactory = (Base, defaultProps) => (
+  // eslint-disable-next-line react/display-name
+  (props) => {
+    const { itemKey, className, onClick, size, ...rest } = {
+      ...defaultProps,
+      ...props
+    };
+    const { onClick: ctxOnClick, selected, level, iconSpacing } = useMenuContext();
+    const handleClick = (e) => {
+      ctxOnClick(itemKey);
+      onClick == null ? void 0 : onClick(e);
+    };
+    const _selected = selected === itemKey;
+    return (
+      // @ts-expect-error
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        Base,
+        {
+          level,
+          ...rest,
+          onClick: handleClick,
+          variant: "text",
+          className: css.CSS(css.CSS.B("menu-item"), css.CSS.selected(_selected), className),
+          size: size ?? iconSpacing
+        }
+      )
+    );
+  }
+);
+const CoreItem = menuItemFactory(Toggle.Button, { noWrap: true });
+const ItemIcon = menuItemFactory(Toggle.Icon);
+const ItemLink = menuItemFactory(Link.Link, { noWrap: true });
+const Item = CoreItem;
+Item.Icon = ItemIcon;
+Item.Link = ItemLink;
+exports.CONTEXT_SELECTED = CONTEXT_SELECTED;
+exports.CONTEXT_TARGET = CONTEXT_TARGET;
+exports.ContextMenu = ContextMenu;
+exports.CoreItem = CoreItem;
+exports.Item = Item;
+exports.Menu = Menu;
+exports.MenuContext = MenuContext;
+exports.useContextMenu = useContextMenu;
+exports.useMenuContext = useMenuContext;
+//# sourceMappingURL=Item-HWzX7RK2.cjs.map

package/dist/Item-HWzX7RK2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item-HWzX7RK2.cjs","sources":["../src/menu/ContextMenu.tsx","../src/menu/Menu.tsx","../src/menu/Item.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type ReactElement,\n  type RefCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { box, unique, xy } from \"@synnaxlabs/x\";\n\nimport { CSS } from \"@/css\";\nimport { useClickOutside } from \"@/hooks\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nimport \"@/menu/ContextMenu.css\";\n\ninterface ContextMenuState {\n  visible: boolean;\n  keys: string[];\n  xy: xy.XY;\n}\n\n/** Supported event types for triggering a context menu. */\nexport type ContextMenuEvent = xy.Client & {\n  preventDefault: () => void;\n  stopPropagation: () => void;\n  target: Element;\n};\n\n/** Opens the context menu. See {@link Menu.useContextMenu} for more details. */\nexport type ContextMenuOpen = (\n  pos: xy.Crude | ContextMenuEvent,\n  keys?: string[],\n) => void;\n\n/** Return value for the {@Menu.useContextMenu} hook. */\nexport interface UseContextMenuReturn extends ContextMenuState {\n  visible: boolean;\n  close: () => void;\n  open: ContextMenuOpen;\n  ref: RefCallback<HTMLDivElement>;\n}\n\nconst INITIAL_STATE: ContextMenuState = {\n  visible: false,\n  keys: [],\n  xy: xy.ZERO,\n};\n\nexport const CONTEXT_SELECTED = CSS.BM(\"context\", \"selected\");\nexport const CONTEXT_TARGET = CSS.BE(\"context\", \"target\");\nconst CONTEXT_MENU_CONTAINER = CSS.BE(\"menu-context\", \"container\");\n\nconst findTarget = (target: HTMLElement): HTMLElement => {\n  let candidate = target;\n  while (candidate != null && !candidate.classList.contains(CONTEXT_TARGET)) {\n    if (candidate.classList.contains(CONTEXT_MENU_CONTAINER)) return target;\n    candidate = candidate.parentElement as HTMLElement;\n  }\n  return candidate;\n};\n\nconst findSelected = (target_: HTMLElement): HTMLElement[] => {\n  const target = findTarget(target_);\n  const selected = (target.parentElement?.querySelectorAll(`.${CONTEXT_SELECTED}`) ??\n    []) as HTMLElement[];\n  return [target, ...Array.from(selected)];\n};\n\n/**\n * Menu.useContextMenu extracts the logic for toggling a context menu, allowing\n * the caller to control the menu's visibility and position.\n *\n * @returns visible - Whether the menu is visible.\n * @returns close - A function to close the menu.\n * @returns open - A function to open the menu. The function accepts an XY coordinate and\n * an optional set of keys to set as the selected menu items. It's important to note\n * that these keys override the default behavior of the menu, which is explained in\n * the documentation for {@link Menu.ContextMenu}.\n */\nexport const useContextMenu = (): UseContextMenuReturn => {\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const [state, setMenuState] = useState<ContextMenuState>(INITIAL_STATE);\n\n  const handleOpen: ContextMenuOpen = (e, keys) => {\n    const p = xy.construct(e);\n    if (\"preventDefault\" in e) {\n      e.preventDefault();\n      // Prevent parent context menus from opening.\n      e.stopPropagation();\n      keys = keys ?? unique(findSelected(e.target as HTMLElement).map((el) => el.id));\n    } else keys = [];\n    setMenuState({ visible: true, keys, xy: p });\n  };\n\n  const refCallback = (el: HTMLDivElement): void => {\n    menuRef.current = el;\n    if (el == null) return;\n    setMenuState((prev) => {\n      if (prev.visible) {\n        const [repositioned, changed] = box.positionSoVisible(\n          el,\n          window.document.documentElement,\n        );\n        if (changed) return { ...prev, xy: box.topLeft(repositioned) };\n      }\n      return prev;\n    });\n  };\n\n  const hideMenu = (): void => setMenuState(INITIAL_STATE);\n\n  useClickOutside(menuRef, hideMenu);\n\n  return {\n    ...state,\n    close: hideMenu,\n    open: handleOpen,\n    ref: refCallback,\n  };\n};\n\nexport interface ContextMenuMenuProps {\n  keys: string[];\n}\n\nexport interface ContextMenuProps\n  extends UseContextMenuReturn,\n    ComponentPropsWithoutRef<\"div\"> {\n  menu?: RenderProp<ContextMenuMenuProps>;\n}\n\nconst ContextMenuCore = (\n  {\n    children,\n    menu,\n    visible,\n    open,\n    close,\n    xy,\n    keys,\n    className,\n    ...props\n  }: ContextMenuProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n  const menuC = visible ? menu?.({ keys }) : null;\n\n  return (\n    <div\n      className={CSS(CONTEXT_MENU_CONTAINER, className, CSS.inheritDims())}\n      onContextMenu={open}\n      {...props}\n    >\n      {children}\n      {menuC != null && (\n        <div\n          className={CSS(CSS.B(\"menu-context\"), CSS.bordered())}\n          ref={ref}\n          style={{ left: xy.x, top: xy.y }}\n          onClick={close}\n        >\n          {menuC}\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Menu.ContextMenu wraps a set of children with a context menu. When the user right\n * clicks within wrapped area, the provided menu will be shown. Menu.ContextMenu should\n * be used in conjunction with the Menu.useContextMenu hook.\n *\n * The rendered menu is provided with a set of keys that represent the HTML IDs of the\n * context target elements. The first target is evaluated by traversing the parents\n * of the element that was right clicked until an element with the class \"pluto-context-target\"\n * is found. If no such element is found, the right clicked element itself is used as\n * the target. Subsequent targets are found by querying all siblings of the first target\n * that have the \"pluto-context-selected\" class.\n *\n * @example <caption>Example DOM structure</caption>\n *   <div id=\"pluto-menu-context__container\">\n *    <div className=\"pluto-context-target\" id=\"1\">\n *      <span>\n *        <h2>I was right clicked!</h2>\n *      </span>\n *    </div>\n *    <div className=\"pluto-context-target pluto-context-selected\" id=\"2\">\n *    <div className=\"pluto-context-target\" id=\"3\">\n *   </div>\n *\n * In the above example, the keys provided to the menu would be [\"1\", \"2\"].\n *\n * The target resolution logic is ideal for both single and multi-select scenarios,\n * such as lists that have several selected rows that should be acted upon together.\n *\n * @param props - Props for the component. Expects all return values from the\n * useContextMenu hook. All non-hook and unlisted props will be spread to the\n * underlying div component acting as the root element.\n * @param props.menu - The menu to show when the user right clicks.\n */\nexport const ContextMenu = forwardRef(ContextMenuCore);\nContextMenu.displayName = \"ContextMenu\";\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  createContext,\n  type PropsWithChildren,\n  type ReactElement,\n  useContext,\n} from \"react\";\n\nimport { type Input } from \"@/input\";\nimport { type Text } from \"@/text\";\nimport { type ComponentSize } from \"@/util/component\";\n\ninterface MenuContextValue {\n  onClick: (key: string) => void;\n  selected: string;\n  level?: Text.Level;\n  iconSpacing?: ComponentSize;\n}\n\nexport const MenuContext = createContext<MenuContextValue>({\n  onClick: () => {},\n  selected: \"\",\n});\n\nexport interface MenuProps\n  extends Partial<Input.Control<string>>,\n    PropsWithChildren,\n    Pick<MenuContextValue, \"level\" | \"iconSpacing\"> {}\n\nexport const useMenuContext = (): MenuContextValue => useContext(MenuContext);\n\n/**\n * Menu is a modular component that allows you to create a menu with a list of items.\n * It satisfies the InputControl string interface, so it's selected value can be\n * controlled.\n *\n * @param props - Props for the component. All unlisted props will be spread to the\n * underlying Space component acting as the root element.\n * @param props.onChange - Callback executed when the selected item changes.\n * @param props.value - The selected item.\n */\nexport const Menu = ({\n  children,\n  onChange,\n  level,\n  iconSpacing,\n  value = \"\",\n}: MenuProps): ReactElement => {\n  const handleClick: MenuProps[\"onChange\"] = (key) => onChange?.(key);\n  return (\n    <MenuContext.Provider\n      value={{ onClick: handleClick, selected: value, level, iconSpacing }}\n    >\n      {children}\n    </MenuContext.Provider>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type FunctionComponent, type ReactElement } from \"react\";\n\nimport { Button } from \"@/button\";\nimport { CSS } from \"@/css\";\nimport { useMenuContext } from \"@/menu/Menu\";\n\nimport \"@/menu/Item.css\";\n\nconst menuItemFactory =\n  <E extends Pick<Button.ButtonProps, \"className\" | \"onClick\">>(\n    Base: FunctionComponent<E>,\n    defaultProps?: Partial<E>,\n  ): FunctionComponent<E & { itemKey: string }> =>\n  // eslint-disable-next-line react/display-name\n  (props): ReactElement => {\n    const { itemKey, className, onClick, size, ...rest } = {\n      ...defaultProps,\n      ...props,\n    };\n\n    const { onClick: ctxOnClick, selected, level, iconSpacing } = useMenuContext();\n\n    const handleClick: Button.ButtonProps[\"onClick\"] = (e) => {\n      ctxOnClick(itemKey);\n      onClick?.(e);\n    };\n    const _selected = selected === itemKey;\n    return (\n      // @ts-expect-error\n      <Base\n        level={level}\n        {...rest}\n        onClick={handleClick}\n        variant=\"text\"\n        className={CSS(CSS.B(\"menu-item\"), CSS.selected(_selected), className)}\n        size={size ?? iconSpacing}\n      />\n    );\n  };\n\nexport interface ItemProps extends Button.ButtonProps {\n  itemKey: string;\n}\nexport const CoreItem = menuItemFactory(Button.Button, { noWrap: true });\n\nexport interface ItemIconProps extends Button.IconProps {\n  itemKey: string;\n}\nconst ItemIcon = menuItemFactory(Button.Icon);\n\nconst ItemLink = menuItemFactory(Button.Link, { noWrap: true });\nexport interface MenuItemLinkProps extends Button.LinkProps {\n  itemKey: string;\n}\n\ntype CoreItemType = typeof CoreItem;\n\nexport interface ItemType extends CoreItemType {\n  Icon: typeof ItemIcon;\n  Link: typeof ItemLink;\n}\n\n/**\n * Menu.Item renders a menu item.\n *\n * @param props - Props for the component. Identical props to those of Use except\n * for the ones listed below.\n * @param props.itemKey - The key of the item. This is used to identify the item and\n * is passed to the onChange callback of the Menu.\n */\nexport const Item = CoreItem as ItemType;\nItem.Icon = ItemIcon;\nItem.Link = ItemLink;\n"],"names":["xy","CSS","useRef","useState","unique","box","useClickOutside","jsxs","jsx","forwardRef","createContext","useContext","Button.Button","Button.Icon","Button.Link"],"mappings":"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"}

package/dist/Item-owLU4Xop.js

@@ -0,0 +1,97 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-rX5tAIG2.js";
+import { C as CSS, d as direction$1 } from "./css-NTD4Xm8x.js";
+import { useController } from "react-hook-form";
+import { S as Space } from "./Center-gEKkAkdh.js";
+import { g as Text } from "./Toggle-kLunfJtR.js";
+import "./component-k78Jq9I7.js";
+import "react";
+const HelpText = ({
+  className,
+  variant = "error",
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Text,
+  {
+    className: CSS(
+      CSS.B("input-help-text"),
+      CSS.BM("input-help-text", variant),
+      className
+    ),
+    level: "small",
+    ...props
+  }
+);
+const Label = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: CSS(CSS.B("input-label"), className), ...props });
+};
+const camelToTitle = (str) => str.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase());
+const maybeDefaultAlignment = (align, dir = "x") => {
+  if (align != null)
+    return align;
+  return direction$1.construct(dir) === "y" ? "stretch" : "center";
+};
+const Item = ({
+  label,
+  showLabel = true,
+  helpText,
+  direction: direction2 = "y",
+  className,
+  children,
+  align,
+  size = "small",
+  ...props
+}) => {
+  let inputAndHelp;
+  if (direction2 === "x")
+    inputAndHelp = /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, { direction: "y", size: "small", children: [
+      children,
+      helpText != null && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpText, { children: helpText })
+    ] });
+  else
+    inputAndHelp = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      children,
+      helpText != null && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpText, { children: helpText })
+    ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Space,
+    {
+      className: CSS(CSS.B("input-item"), className),
+      direction: direction2,
+      size,
+      align: maybeDefaultAlignment(align, direction2),
+      ...props,
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { children: label }),
+        inputAndHelp
+      ]
+    }
+  );
+};
+const ItemControlled = ({
+  name,
+  rules,
+  control,
+  shouldUnregister,
+  defaultValue,
+  label,
+  children,
+  ...props
+}) => {
+  var _a;
+  const { field, fieldState } = useController({
+    control,
+    rules,
+    name,
+    shouldUnregister
+  });
+  if (label == null)
+    label = camelToTitle(name);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Item, { ref: field.ref, label, helpText: (_a = fieldState.error) == null ? void 0 : _a.message, ...props, children: children({ value: field.value, onChange: field.onChange }) });
+};
+export {
+  HelpText as H,
+  Item as I,
+  Label as L,
+  ItemControlled as a
+};
+//# sourceMappingURL=Item-owLU4Xop.js.map

package/dist/Item-owLU4Xop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item-owLU4Xop.js","sources":["../src/input/HelpText.tsx","../src/input/Label.tsx","../src/util/case.ts","../src/input/Item.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { CSS } from \"@/css\";\nimport { type Status } from \"@/status\";\nimport { Text } from \"@/text\";\n\nimport \"@/input/HelpText.css\";\n\n/** Props for the {@link HelpText} component. */\nexport interface HelpTextProps extends Omit<Text.TextProps<\"small\">, \"level\" | \"ref\"> {\n  variant?: Status.Variant;\n}\n\n/**\n * Help text for an input component. We generally recommend using Input.Item with a\n * 'helpText' prop instead of this component. This component is useful for low-level\n * control over the help text element.\n *\n * @param props - Props for the help text component. Unlisted props are passed to the\n * underlying text element.\n * @param props.variant - The variant of the help text.\n * \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\" | \"disabled\n * @default \"info\"\n */\nexport const HelpText = ({\n  className,\n  variant = \"error\",\n  ...props\n}: HelpTextProps): ReactElement => (\n  <Text.Text<\"small\">\n    className={CSS(\n      CSS.B(\"input-help-text\"),\n      CSS.BM(\"input-help-text\", variant),\n      className,\n    )}\n    level=\"small\"\n    {...props}\n  />\n);\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type DetailedHTMLProps, type HTMLAttributes, type ReactElement } from \"react\";\n\nimport { CSS } from \"@/css\";\n\nimport \"@/input/Label.css\";\n\n/** Props for the {@link Label} component. */\nexport interface LabelProps\n  extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {}\n\n/**\n * A thin, styled wrapper for an input label. We generally recommend using Input.Item\n * with a 'label' prop instead of this component. This component is useful for\n * low-level control over the label element.\n *\n * @param props - Props for the label component. Unlisted props are passed to the\n * underlying label element.\n */\nexport const Label = ({ className, ...props }: LabelProps): ReactElement => {\n  return <label className={CSS(CSS.B(\"input-label\"), className)} {...props} />;\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nexport const camelToTitle = (str: string): string =>\n  str.replace(/([A-Z])/g, \" $1\").replace(/^./, (str) => str.toUpperCase());\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { direction } from \"@synnaxlabs/x\";\nimport {\n  type UseControllerProps,\n  useController,\n  type FieldValues,\n  type FieldPath,\n} from \"react-hook-form\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { HelpText } from \"@/input/HelpText\";\nimport { Label } from \"@/input/Label\";\nimport { type Control, type Value } from \"@/input/types\";\nimport { camelToTitle } from \"@/util/case\";\n\nimport { type RenderProp } from \"..\";\n\nimport \"@/input/Item.css\";\n\ninterface ItemExtensionProps extends Align.SpaceExtensionProps {\n  label?: string;\n  showLabel?: boolean;\n  helpText?: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface ItemProps extends Align.SpaceProps {\n  label?: string;\n  showLabel?: boolean;\n  helpText?: string;\n}\n\nconst maybeDefaultAlignment = (\n  align?: Align.Alignment,\n  dir: direction.Crude = \"x\",\n): Align.Alignment => {\n  if (align != null) return align;\n  return direction.construct(dir) === \"y\" ? \"stretch\" : \"center\";\n};\n\nexport const Item = ({\n  label,\n  showLabel = true,\n  helpText,\n  direction = \"y\",\n  className,\n  children,\n  align,\n  size = \"small\",\n  ...props\n}: ItemProps): ReactElement => {\n  let inputAndHelp: ReactElement;\n  if (direction === \"x\")\n    inputAndHelp = (\n      <Align.Space direction=\"y\" size=\"small\">\n        {children}\n        {helpText != null && <HelpText>{helpText}</HelpText>}\n      </Align.Space>\n    );\n  else\n    inputAndHelp = (\n      <>\n        {children}\n        {helpText != null && <HelpText>{helpText}</HelpText>}\n      </>\n    );\n\n  return (\n    <Align.Space\n      className={CSS(CSS.B(\"input-item\"), className)}\n      direction={direction}\n      size={size}\n      align={maybeDefaultAlignment(align, direction)}\n      {...props}\n    >\n      {showLabel && <Label>{label}</Label>}\n      {inputAndHelp}\n    </Align.Space>\n  );\n};\n\nexport type ItemControlledProps<\n  I extends Value = string | number,\n  O extends Value = I,\n  F extends FieldValues = FieldValues,\n  TName extends FieldPath<F> = FieldPath<F>,\n> = ItemExtensionProps &\n  UseControllerProps<F, TName> & {\n    children: RenderProp<Control<I, O>>;\n  };\n\nexport const ItemControlled = <\n  I extends Value = string | number,\n  O extends Value = I,\n  F extends FieldValues = FieldValues,\n  TName extends FieldPath<F> = FieldPath<F>,\n>({\n  name,\n  rules,\n  control,\n  shouldUnregister,\n  defaultValue,\n  label,\n  children,\n  ...props\n}: ItemControlledProps<I, O, F, TName>): ReactElement => {\n  const { field, fieldState } = useController<F, TName>({\n    control,\n    rules,\n    name,\n    shouldUnregister,\n  });\n  if (label == null) label = camelToTitle(name);\n  return (\n    <Item ref={field.ref} label={label} helpText={fieldState.error?.message} {...props}>\n      {children({ value: field.value, onChange: field.onChange })}\n    </Item>\n  );\n};\n"],"names":["jsx","Text.Text","str","direction","Align.Space","jsxs","Fragment"],"mappings":";;;;;;;AAiCO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MACEA,kCAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,IAAI,EAAE,iBAAiB;AAAA,MACvB,IAAI,GAAG,mBAAmB,OAAO;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAM;AAAA,IACL,GAAG;AAAA,EAAA;AACN;ACnBK,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAsC;AACnE,SAAAD,kCAAA,IAAC,SAAM,EAAA,WAAW,IAAI,IAAI,EAAE,aAAa,GAAG,SAAS,GAAI,GAAG,MAAO,CAAA;AAC5E;ACpBO,MAAM,eAAe,CAAC,QAC3B,IAAI,QAAQ,YAAY,KAAK,EAAE,QAAQ,MAAM,CAACE,SAAQA,KAAI,aAAa;ACkCzE,MAAM,wBAAwB,CAC5B,OACA,MAAuB,QACH;AACpB,MAAI,SAAS;AAAa,WAAA;AAC1B,SAAOC,YAAU,UAAU,GAAG,MAAM,MAAM,YAAY;AACxD;AAEO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,WAAAA,aAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAA+B;AACzB,MAAA;AACJ,MAAIA,eAAc;AAChB,0DACGC,OAAA,EAAY,WAAU,KAAI,MAAK,SAC7B,UAAA;AAAA,MAAA;AAAA,MACA,YAAY,QAASJ,kCAAA,IAAA,UAAA,EAAU,UAAS,UAAA;AAAA,IAC3C,EAAA,CAAA;AAAA;AAGF,mBAEKK,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY,QAASN,kCAAA,IAAA,UAAA,EAAU,UAAS,UAAA;AAAA,IAC3C,EAAA,CAAA;AAIF,SAAAK,kCAAA;AAAA,IAACD;AAAAA,IAAA;AAAA,MACC,WAAW,IAAI,IAAI,EAAE,YAAY,GAAG,SAAS;AAAA,MAC7C,WAAWD;AAAAA,MACX;AAAA,MACA,OAAO,sBAAsB,OAAOA,UAAS;AAAA,MAC5C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAa,aAAAH,kCAAAA,IAAC,SAAO,UAAM,MAAA,CAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAYO,MAAM,iBAAiB,CAK5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyD;;AACvD,QAAM,EAAE,OAAO,WAAW,IAAI,cAAwB;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,MAAI,SAAS;AAAM,YAAQ,aAAa,IAAI;AAE1C,SAAAA,sCAAC,QAAK,KAAK,MAAM,KAAK,OAAc,WAAU,gBAAW,UAAX,mBAAkB,SAAU,GAAG,OAC1E,UAAA,SAAS,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,SAAU,CAAA,EAC5D,CAAA;AAEJ;"}

package/dist/Item-rkSKzZoh.cjs

@@ -0,0 +1,96 @@
+"use strict";
+const jsxRuntime = require("./jsx-runtime-N1ikfypN.cjs");
+const css = require("./css-V3VUT_Js.cjs");
+const reactHookForm = require("react-hook-form");
+const Center = require("./Center-ZAcURh-3.cjs");
+const Toggle = require("./Toggle-eOKYw1OT.cjs");
+require("./component-joFaJiQW.cjs");
+require("react");
+const HelpText = ({
+  className,
+  variant = "error",
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  Toggle.Text,
+  {
+    className: css.CSS(
+      css.CSS.B("input-help-text"),
+      css.CSS.BM("input-help-text", variant),
+      className
+    ),
+    level: "small",
+    ...props
+  }
+);
+const Label = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("label", { className: css.CSS(css.CSS.B("input-label"), className), ...props });
+};
+const camelToTitle = (str) => str.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase());
+const maybeDefaultAlignment = (align, dir = "x") => {
+  if (align != null)
+    return align;
+  return css.direction$1.construct(dir) === "y" ? "stretch" : "center";
+};
+const Item = ({
+  label,
+  showLabel = true,
+  helpText,
+  direction: direction2 = "y",
+  className,
+  children,
+  align,
+  size = "small",
+  ...props
+}) => {
+  let inputAndHelp;
+  if (direction2 === "x")
+    inputAndHelp = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Center.Space, { direction: "y", size: "small", children: [
+      children,
+      helpText != null && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HelpText, { children: helpText })
+    ] });
+  else
+    inputAndHelp = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+      children,
+      helpText != null && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HelpText, { children: helpText })
+    ] });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    Center.Space,
+    {
+      className: css.CSS(css.CSS.B("input-item"), className),
+      direction: direction2,
+      size,
+      align: maybeDefaultAlignment(align, direction2),
+      ...props,
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Label, { children: label }),
+        inputAndHelp
+      ]
+    }
+  );
+};
+const ItemControlled = ({
+  name,
+  rules,
+  control,
+  shouldUnregister,
+  defaultValue,
+  label,
+  children,
+  ...props
+}) => {
+  var _a;
+  const { field, fieldState } = reactHookForm.useController({
+    control,
+    rules,
+    name,
+    shouldUnregister
+  });
+  if (label == null)
+    label = camelToTitle(name);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Item, { ref: field.ref, label, helpText: (_a = fieldState.error) == null ? void 0 : _a.message, ...props, children: children({ value: field.value, onChange: field.onChange }) });
+};
+exports.HelpText = HelpText;
+exports.Item = Item;
+exports.ItemControlled = ItemControlled;
+exports.Label = Label;
+//# sourceMappingURL=Item-rkSKzZoh.cjs.map

package/dist/Item-rkSKzZoh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item-rkSKzZoh.cjs","sources":["../src/input/HelpText.tsx","../src/input/Label.tsx","../src/util/case.ts","../src/input/Item.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { CSS } from \"@/css\";\nimport { type Status } from \"@/status\";\nimport { Text } from \"@/text\";\n\nimport \"@/input/HelpText.css\";\n\n/** Props for the {@link HelpText} component. */\nexport interface HelpTextProps extends Omit<Text.TextProps<\"small\">, \"level\" | \"ref\"> {\n  variant?: Status.Variant;\n}\n\n/**\n * Help text for an input component. We generally recommend using Input.Item with a\n * 'helpText' prop instead of this component. This component is useful for low-level\n * control over the help text element.\n *\n * @param props - Props for the help text component. Unlisted props are passed to the\n * underlying text element.\n * @param props.variant - The variant of the help text.\n * \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\" | \"disabled\n * @default \"info\"\n */\nexport const HelpText = ({\n  className,\n  variant = \"error\",\n  ...props\n}: HelpTextProps): ReactElement => (\n  <Text.Text<\"small\">\n    className={CSS(\n      CSS.B(\"input-help-text\"),\n      CSS.BM(\"input-help-text\", variant),\n      className,\n    )}\n    level=\"small\"\n    {...props}\n  />\n);\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type DetailedHTMLProps, type HTMLAttributes, type ReactElement } from \"react\";\n\nimport { CSS } from \"@/css\";\n\nimport \"@/input/Label.css\";\n\n/** Props for the {@link Label} component. */\nexport interface LabelProps\n  extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {}\n\n/**\n * A thin, styled wrapper for an input label. We generally recommend using Input.Item\n * with a 'label' prop instead of this component. This component is useful for\n * low-level control over the label element.\n *\n * @param props - Props for the label component. Unlisted props are passed to the\n * underlying label element.\n */\nexport const Label = ({ className, ...props }: LabelProps): ReactElement => {\n  return <label className={CSS(CSS.B(\"input-label\"), className)} {...props} />;\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nexport const camelToTitle = (str: string): string =>\n  str.replace(/([A-Z])/g, \" $1\").replace(/^./, (str) => str.toUpperCase());\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { direction } from \"@synnaxlabs/x\";\nimport {\n  type UseControllerProps,\n  useController,\n  type FieldValues,\n  type FieldPath,\n} from \"react-hook-form\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { HelpText } from \"@/input/HelpText\";\nimport { Label } from \"@/input/Label\";\nimport { type Control, type Value } from \"@/input/types\";\nimport { camelToTitle } from \"@/util/case\";\n\nimport { type RenderProp } from \"..\";\n\nimport \"@/input/Item.css\";\n\ninterface ItemExtensionProps extends Align.SpaceExtensionProps {\n  label?: string;\n  showLabel?: boolean;\n  helpText?: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface ItemProps extends Align.SpaceProps {\n  label?: string;\n  showLabel?: boolean;\n  helpText?: string;\n}\n\nconst maybeDefaultAlignment = (\n  align?: Align.Alignment,\n  dir: direction.Crude = \"x\",\n): Align.Alignment => {\n  if (align != null) return align;\n  return direction.construct(dir) === \"y\" ? \"stretch\" : \"center\";\n};\n\nexport const Item = ({\n  label,\n  showLabel = true,\n  helpText,\n  direction = \"y\",\n  className,\n  children,\n  align,\n  size = \"small\",\n  ...props\n}: ItemProps): ReactElement => {\n  let inputAndHelp: ReactElement;\n  if (direction === \"x\")\n    inputAndHelp = (\n      <Align.Space direction=\"y\" size=\"small\">\n        {children}\n        {helpText != null && <HelpText>{helpText}</HelpText>}\n      </Align.Space>\n    );\n  else\n    inputAndHelp = (\n      <>\n        {children}\n        {helpText != null && <HelpText>{helpText}</HelpText>}\n      </>\n    );\n\n  return (\n    <Align.Space\n      className={CSS(CSS.B(\"input-item\"), className)}\n      direction={direction}\n      size={size}\n      align={maybeDefaultAlignment(align, direction)}\n      {...props}\n    >\n      {showLabel && <Label>{label}</Label>}\n      {inputAndHelp}\n    </Align.Space>\n  );\n};\n\nexport type ItemControlledProps<\n  I extends Value = string | number,\n  O extends Value = I,\n  F extends FieldValues = FieldValues,\n  TName extends FieldPath<F> = FieldPath<F>,\n> = ItemExtensionProps &\n  UseControllerProps<F, TName> & {\n    children: RenderProp<Control<I, O>>;\n  };\n\nexport const ItemControlled = <\n  I extends Value = string | number,\n  O extends Value = I,\n  F extends FieldValues = FieldValues,\n  TName extends FieldPath<F> = FieldPath<F>,\n>({\n  name,\n  rules,\n  control,\n  shouldUnregister,\n  defaultValue,\n  label,\n  children,\n  ...props\n}: ItemControlledProps<I, O, F, TName>): ReactElement => {\n  const { field, fieldState } = useController<F, TName>({\n    control,\n    rules,\n    name,\n    shouldUnregister,\n  });\n  if (label == null) label = camelToTitle(name);\n  return (\n    <Item ref={field.ref} label={label} helpText={fieldState.error?.message} {...props}>\n      {children({ value: field.value, onChange: field.onChange })}\n    </Item>\n  );\n};\n"],"names":["jsx","Text.Text","CSS","str","direction","Align.Space","jsxs","Fragment","useController"],"mappings":";;;;;;;;AAiCO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAACC,OAAK;AAAA,EAAL;AAAA,IACC,WAAWC,IAAA;AAAA,MACTA,IAAA,IAAI,EAAE,iBAAiB;AAAA,MACvBA,QAAI,GAAG,mBAAmB,OAAO;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAM;AAAA,IACL,GAAG;AAAA,EAAA;AACN;ACnBK,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAsC;AACnE,SAAAF,2BAAA,kBAAA,IAAC,SAAM,EAAA,WAAWE,IAAI,IAAAA,IAAA,IAAI,EAAE,aAAa,GAAG,SAAS,GAAI,GAAG,MAAO,CAAA;AAC5E;ACpBO,MAAM,eAAe,CAAC,QAC3B,IAAI,QAAQ,YAAY,KAAK,EAAE,QAAQ,MAAM,CAACC,SAAQA,KAAI,aAAa;ACkCzE,MAAM,wBAAwB,CAC5B,OACA,MAAuB,QACH;AACpB,MAAI,SAAS;AAAa,WAAA;AAC1B,SAAOC,IAAAA,YAAU,UAAU,GAAG,MAAM,MAAM,YAAY;AACxD;AAEO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,WAAAA,aAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAA+B;AACzB,MAAA;AACJ,MAAIA,eAAc;AAChB,qEACGC,OAAAA,OAAA,EAAY,WAAU,KAAI,MAAK,SAC7B,UAAA;AAAA,MAAA;AAAA,MACA,YAAY,QAASL,2BAAA,kBAAA,IAAA,UAAA,EAAU,UAAS,UAAA;AAAA,IAC3C,EAAA,CAAA;AAAA;AAGF,mBAEKM,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY,QAASP,2BAAA,kBAAA,IAAA,UAAA,EAAU,UAAS,UAAA;AAAA,IAC3C,EAAA,CAAA;AAIF,SAAAM,2BAAA,kBAAA;AAAA,IAACD,OAAM;AAAA,IAAN;AAAA,MACC,WAAWH,IAAI,IAAAA,IAAA,IAAI,EAAE,YAAY,GAAG,SAAS;AAAA,MAC7C,WAAWE;AAAAA,MACX;AAAA,MACA,OAAO,sBAAsB,OAAOA,UAAS;AAAA,MAC5C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAa,aAAAJ,2BAAAA,kBAAAA,IAAC,SAAO,UAAM,MAAA,CAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAYO,MAAM,iBAAiB,CAK5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyD;;AACvD,QAAM,EAAE,OAAO,WAAW,IAAIQ,4BAAwB;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,MAAI,SAAS;AAAM,YAAQ,aAAa,IAAI;AAE1C,SAAAR,iDAAC,QAAK,KAAK,MAAM,KAAK,OAAc,WAAU,gBAAW,UAAX,mBAAkB,SAAU,GAAG,OAC1E,UAAA,SAAS,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,SAAU,CAAA,EAC5D,CAAA;AAEJ;;;;;"}

package/dist/Keyboard-mE03PKwA.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-rX5tAIG2.js";
+import { C as CSS } from "./css-NTD4Xm8x.js";
+import { g as Text } from "./Toggle-kLunfJtR.js";
+const Keyboard = ({
+  className,
+  ...props
+}) => (
+  // @ts-expect-error
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: CSS(className, CSS.BM("text", "keyboard")), ...props })
+);
+export {
+  Keyboard as K
+};
+//# sourceMappingURL=Keyboard-mE03PKwA.js.map

package/dist/Keyboard-mE03PKwA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard-mE03PKwA.js","sources":["../src/text/Keyboard.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { CSS } from \"@/css\";\nimport { type TextProps, Text } from \"@/text/Text\";\nimport { type Level } from \"@/text/types\";\n\nimport \"@/text/Keyboard.css\";\n\nexport type KeyboardProps<L extends Level = \"h1\"> = TextProps<L>;\n\nexport const Keyboard = <L extends Level = \"p\">({\n  className,\n  ...props\n}: KeyboardProps<L>): ReactElement => (\n  // @ts-expect-error\n  <Text<L> className={CSS(className, CSS.BM(\"text\", \"keyboard\"))} {...props} />\n);\n"],"names":["jsx"],"mappings":";;;AAmBO,MAAM,WAAW,CAAwB;AAAA,EAC9C;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEGA,kCAAAA,IAAA,MAAA,EAAQ,WAAW,IAAI,WAAW,IAAI,GAAG,QAAQ,UAAU,CAAC,GAAI,GAAG,MAAO,CAAA;AAAA;"}

package/dist/Keyboard-w372197S.cjs

@@ -0,0 +1,13 @@
+"use strict";
+const jsxRuntime = require("./jsx-runtime-N1ikfypN.cjs");
+const css = require("./css-V3VUT_Js.cjs");
+const Toggle = require("./Toggle-eOKYw1OT.cjs");
+const Keyboard = ({
+  className,
+  ...props
+}) => (
+  // @ts-expect-error
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Text, { className: css.CSS(className, css.CSS.BM("text", "keyboard")), ...props })
+);
+exports.Keyboard = Keyboard;
+//# sourceMappingURL=Keyboard-w372197S.cjs.map

package/dist/Keyboard-w372197S.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard-w372197S.cjs","sources":["../src/text/Keyboard.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { CSS } from \"@/css\";\nimport { type TextProps, Text } from \"@/text/Text\";\nimport { type Level } from \"@/text/types\";\n\nimport \"@/text/Keyboard.css\";\n\nexport type KeyboardProps<L extends Level = \"h1\"> = TextProps<L>;\n\nexport const Keyboard = <L extends Level = \"p\">({\n  className,\n  ...props\n}: KeyboardProps<L>): ReactElement => (\n  // @ts-expect-error\n  <Text<L> className={CSS(className, CSS.BM(\"text\", \"keyboard\"))} {...props} />\n);\n"],"names":["jsx","Text","CSS"],"mappings":";;;;AAmBO,MAAM,WAAW,CAAwB;AAAA,EAC9C;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEGA,2BAAAA,kBAAAA,IAAAC,OAAAA,MAAA,EAAQ,WAAWC,IAAAA,IAAI,WAAWA,IAAAA,IAAI,GAAG,QAAQ,UAAU,CAAC,GAAI,GAAG,MAAO,CAAA;AAAA;;"}

package/dist/Link-laNlv47N.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-rX5tAIG2.js";
+import { B as Button } from "./Toggle-kLunfJtR.js";
+const Link = ({
+  href,
+  target,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { el: "a", href, ...props });
+};
+export {
+  Link as L
+};
+//# sourceMappingURL=Link-laNlv47N.js.map

package/dist/Link-laNlv47N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link-laNlv47N.js","sources":["../src/button/Link.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { Button, type ButtonProps } from \"@/button/Button\";\nimport { type Text } from \"@/text\";\n\n/** Props for the {@link Link} component. */\nexport interface LinkProps<L extends Text.Level = \"h1\">\n  extends ButtonProps,\n    Pick<Text.LinkProps<L>, \"href\" | \"target\"> {}\n/**\n * Use.Link renders a button that looks like a link and redirects to the given href\n * when clicked.\n *\n * @param props - Props for the component. Identical to the props for the Use component,\n * excluding 'variant', and  adding the following:\n * @param props.href - The URL to redirect to when the button is clicked.\n * @param props.target - The target of the link. Defaults to \"_self\".\n */\n\nexport const Link = <L extends Text.Level = \"h1\">({\n  href,\n  target,\n  ...props\n}: LinkProps<L>): ReactElement => {\n  // @ts-expect-error\n  return <Button<\"a\"> el=\"a\" href={href} {...props} />;\n};\n"],"names":[],"mappings":";;AA4BO,MAAM,OAAO,CAA8B;AAAA,EAChD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkC;AAEhC,+CAAQ,QAAY,EAAA,IAAG,KAAI,MAAa,GAAG,MAAO,CAAA;AACpD;"}

package/dist/Link-xlTZan29.cjs

@@ -0,0 +1,12 @@
+"use strict";
+const jsxRuntime = require("./jsx-runtime-N1ikfypN.cjs");
+const Toggle = require("./Toggle-eOKYw1OT.cjs");
+const Link = ({
+  href,
+  target,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Button, { el: "a", href, ...props });
+};
+exports.Link = Link;
+//# sourceMappingURL=Link-xlTZan29.cjs.map

package/dist/Link-xlTZan29.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link-xlTZan29.cjs","sources":["../src/button/Link.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { Button, type ButtonProps } from \"@/button/Button\";\nimport { type Text } from \"@/text\";\n\n/** Props for the {@link Link} component. */\nexport interface LinkProps<L extends Text.Level = \"h1\">\n  extends ButtonProps,\n    Pick<Text.LinkProps<L>, \"href\" | \"target\"> {}\n/**\n * Use.Link renders a button that looks like a link and redirects to the given href\n * when clicked.\n *\n * @param props - Props for the component. Identical to the props for the Use component,\n * excluding 'variant', and  adding the following:\n * @param props.href - The URL to redirect to when the button is clicked.\n * @param props.target - The target of the link. Defaults to \"_self\".\n */\n\nexport const Link = <L extends Text.Level = \"h1\">({\n  href,\n  target,\n  ...props\n}: LinkProps<L>): ReactElement => {\n  // @ts-expect-error\n  return <Button<\"a\"> el=\"a\" href={href} {...props} />;\n};\n"],"names":["Button"],"mappings":";;;AA4BO,MAAM,OAAO,CAA8B;AAAA,EAChD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkC;AAEhC,0DAAQA,OAAY,QAAA,EAAA,IAAG,KAAI,MAAa,GAAG,MAAO,CAAA;AACpD;;"}