@synnaxlabs/pluto 0.12.0

package/LICENSE

@@ -0,0 +1,4 @@
+Source code in this repository is licensed under the Business Source License 1.1 (BSL).
+A copy of the license can be found in the licenses/BSL.txt file. Source code in a given
+file is licensed under the BSL and the copyright belongs to Synnax Labs, Inc. unless
+otherwise noted at the beginning of the file.

package/README.md

@@ -0,0 +1,34 @@
+<p align="center">
+<a href="https://synnaxlabs.com/">
+        <img src="../x/media/static/logo/icon-white-on-black.png" width="20%"/>
+</a>
+</p>
+
+# Pluto
+
+The Synnax React component library.
+
+## Installation
+
+### NPM
+
+```bash
+npm install @synnaxlabs/pluto
+```
+
+### Yarn
+
+```bash
+yarn add @synnaxlabs/pluto
+```
+### PNPM
+
+```bash
+pnpm add @synnaxlabs/pluto
+```
+
+## Contributing
+
+Read both the [Synnax Contribution Guide](../docs/CONTRIBUTING.md) and the 
+[Pluto Contribution Guide](./CONTRIBUTING.md) to learn about the codebase and our 
+process for working with it.

package/dist/Center-ZAcURh-3.cjs

@@ -0,0 +1,148 @@
+"use strict";
+const jsxRuntime = require("./jsx-runtime-N1ikfypN.cjs");
+const React = require("react");
+const css = require("./css-V3VUT_Js.cjs");
+const CoreElement = ({ el, children, ...props }, ref) => React.createElement(el, { ...props, ref }, children);
+const Element = React.forwardRef(CoreElement);
+const Generic = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Element
+}, Symbol.toStringTag, { value: "Module" }));
+const ALIGNMENTS = ["start", "center", "end", "stretch"];
+const JUSTIFICATIONS = [
+  "start",
+  "center",
+  "end",
+  "spaceBetween",
+  "spaceAround",
+  "spaceEvenly"
+];
+const shouldReverse = (direction2, reverse) => reverse ?? (direction2 === "right" || direction2 === "bottom");
+const CoreSpace = ({
+  style,
+  align,
+  className,
+  grow,
+  shrink,
+  empty = false,
+  size = "medium",
+  justify = "start",
+  reverse,
+  direction: direction_ = "y",
+  wrap = false,
+  bordered = false,
+  rounded = false,
+  el = "div",
+  ...props
+}, ref) => {
+  const dir = css.direction$1.construct(direction_);
+  reverse = shouldReverse(direction_, reverse);
+  let gap;
+  if (empty)
+    [size, gap] = [0, 0];
+  else if (typeof size === "number")
+    gap = `${size}rem`;
+  style = {
+    gap,
+    flexDirection: flexDirection(dir, reverse),
+    justifyContent: justifications[justify],
+    alignItems: align,
+    flexWrap: wrap ? "wrap" : "nowrap",
+    ...style
+  };
+  if (grow != null)
+    style.flexGrow = Number(grow);
+  if (shrink != null)
+    style.flexShrink = Number(shrink);
+  return (
+    // @ts-expect-error
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      Element,
+      {
+        el,
+        ref,
+        className: css.CSS(
+          css.CSS.B("space"),
+          css.CSS.dir(dir),
+          css.CSS.bordered(bordered),
+          css.CSS.rounded(rounded),
+          typeof size === "string" && css.CSS.BM("space", size),
+          className
+        ),
+        style,
+        ...props
+      }
+    )
+  );
+};
+CoreSpace.displayName = "Space";
+const Space = React.forwardRef(CoreSpace);
+const flexDirection = (direction2, reverse) => {
+  const base = direction2 === "x" ? "row" : "column";
+  return reverse ? base + "-reverse" : base;
+};
+const justifications = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  spaceBetween: "space-between",
+  spaceAround: "space-around",
+  spaceEvenly: "space-evenly"
+};
+const CorePack = ({
+  className,
+  size = "medium",
+  reverse = false,
+  direction = "x",
+  bordered = true,
+  rounded = true,
+  shadow = false,
+  ...props
+}, ref) => (
+  // @ts-expect-error
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    Space,
+    {
+      ref,
+      direction,
+      reverse,
+      className: css.CSS(
+        css.CSS.B("pack"),
+        shadow && css.CSS.BM("pack", "shadow"),
+        css.CSS.dir(direction),
+        typeof size !== "number" && css.CSS.BM("pack", size),
+        reverse && css.CSS.BM("pack", "reverse"),
+        className
+      ),
+      bordered,
+      rounded,
+      ...props,
+      empty: true
+    }
+  )
+);
+const Pack = React.forwardRef(CorePack);
+const CoreCenter = ({ className, justify = "center", align = "center", ...props }, ref) => (
+  // @ts-expect-error
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    Space,
+    {
+      ref,
+      justify,
+      align,
+      className: css.CSS(css.CSS.BM("space", "centered"), className),
+      ...props
+    }
+  )
+);
+const Center = React.forwardRef(CoreCenter);
+exports.ALIGNMENTS = ALIGNMENTS;
+exports.Center = Center;
+exports.CoreCenter = CoreCenter;
+exports.Element = Element;
+exports.Generic = Generic;
+exports.JUSTIFICATIONS = JUSTIFICATIONS;
+exports.Pack = Pack;
+exports.Space = Space;
+exports.shouldReverse = shouldReverse;
+//# sourceMappingURL=Center-ZAcURh-3.cjs.map

package/dist/Center-ZAcURh-3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center-ZAcURh-3.cjs","sources":["../src/generic/Generic.tsx","../src/align/Space.tsx","../src/align/Pack.tsx","../src/align/Center.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 ComponentPropsWithRef,\n  createElement,\n  type ForwardedRef,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\n\nexport type JSXElementType = keyof JSX.IntrinsicElements;\n\nconst CoreElement = <E extends JSXElementType>(\n  { el, children, ...props }: ElementProps<E>,\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => createElement(el, { ...props, ref }, children);\n\nexport type ElementProps<E extends JSXElementType> = ComponentPropsWithRef<E> & {\n  el: E;\n};\n\n/**\n * Generic renders a component with the given element type .\n *\n * @param props - Props for the generic component. All props not defined below are passed to\n * the underlying element.\n * @param props.el - The element type to render.\n */\nexport const Element = forwardRef(CoreElement) as <E extends JSXElementType>(\n  props: ElementProps<E>,\n) => ReactElement;\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  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\n\nimport { direction } from \"@synnaxlabs/x\";\n\nimport { CSS } from \"@/css\";\nimport { Generic } from \"@/generic\";\nimport { type ComponentSize } from \"@/util/component\";\n\nimport \"@/align/Space.css\";\n\n/** All possible alignments for the cross axis of a space */\nexport const ALIGNMENTS = [\"start\", \"center\", \"end\", \"stretch\"] as const;\n\n/** The alignments for the cross axis of a space */\nexport type Alignment = (typeof ALIGNMENTS)[number];\n\n/** All possible justifications for the main axis of a space */\nexport const JUSTIFICATIONS = [\n  \"start\",\n  \"center\",\n  \"end\",\n  \"spaceBetween\",\n  \"spaceAround\",\n  \"spaceEvenly\",\n] as const;\n\n/** The justification for the main axis of a space */\nexport type Justification = (typeof JUSTIFICATIONS)[number];\n\nexport type SpaceElementType =\n  | \"div\"\n  | \"header\"\n  | \"nav\"\n  | \"section\"\n  | \"article\"\n  | \"aside\"\n  | \"footer\"\n  | \"button\"\n  | \"dialog\"\n  | \"a\";\n\nexport interface SpaceExtensionProps {\n  empty?: boolean;\n  size?: ComponentSize | number;\n  direction?: direction.Crude;\n  reverse?: boolean;\n  justify?: Justification;\n  align?: Alignment;\n  grow?: boolean | number;\n  shrink?: boolean | number;\n  wrap?: boolean;\n  el?: SpaceElementType;\n  bordered?: boolean;\n  rounded?: boolean;\n}\n\nexport type SpaceProps<E extends SpaceElementType = \"div\"> = Omit<\n  Generic.ElementProps<E>,\n  \"el\"\n> &\n  SpaceExtensionProps;\n\nexport const shouldReverse = (direction: direction.Crude, reverse?: boolean): boolean =>\n  reverse ?? (direction === \"right\" || direction === \"bottom\");\n\nconst CoreSpace = <E extends SpaceElementType>(\n  {\n    style,\n    align,\n    className,\n    grow,\n    shrink,\n    empty = false,\n    size = \"medium\",\n    justify = \"start\",\n    reverse,\n    direction: direction_ = \"y\",\n    wrap = false,\n    bordered = false,\n    rounded = false,\n    el = \"div\",\n    ...props\n  }: SpaceProps<E>,\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => {\n  const dir = direction.construct(direction_);\n  reverse = shouldReverse(direction_, reverse);\n\n  let gap: number | string | undefined;\n  if (empty) [size, gap] = [0, 0];\n  else if (typeof size === \"number\") gap = `${size}rem`;\n\n  style = {\n    gap,\n    flexDirection: flexDirection(dir, reverse),\n    justifyContent: justifications[justify],\n    alignItems: align,\n    flexWrap: wrap ? \"wrap\" : \"nowrap\",\n    ...style,\n  };\n\n  if (grow != null) style.flexGrow = Number(grow);\n  if (shrink != null) style.flexShrink = Number(shrink);\n\n  return (\n    // @ts-expect-error\n    <Generic.Element<E>\n      el={el}\n      ref={ref}\n      className={CSS(\n        CSS.B(\"space\"),\n        CSS.dir(dir),\n        CSS.bordered(bordered),\n        CSS.rounded(rounded),\n        typeof size === \"string\" && CSS.BM(\"space\", size),\n        className,\n      )}\n      style={style}\n      {...props}\n    />\n  );\n};\nCoreSpace.displayName = \"Space\";\n\n/**\n * A component that orients its children in a row or column and adds\n * space between them. This is essentially a thin wrapped around a\n * flex component that makes it more 'reacty' to use.\n *\n * @param props - The props for the component. All unlisted props will be passed\n * to the underlying root element.\n * @param props.align - The off axis alignment of the children. The 'off' axis is the\n * opposite direction of props.direction. For example, if direction is 'x', then the\n * off axis is 'y'. See the {@link Alignment} for available options.\n * @param props.justify - The main axis justification of the children. The 'main' axis\n * is the same direction as props.direction. For example, if direction is 'x', then the\n * main axis is 'x'. See the {@link Justification} for available options.\n * @param props.grow - A boolean or number value that determines if the space should\n * grow in the flex-box sense. A value of true will set css flex-grow to 1. A value of\n * false will leave the css flex-grow unset. A number value will set the css flex-grow\n * to that number.\n * @param props.size - A string or number value that determines the amount of spacing\n * between items. If set to \"small\", \"medium\", or \"large\", the spacing will be determined\n * by the theme. If set to a number, the spacing will be that number of rem.\n * @param props.wrap - A boolean value that determines if the space should wrap its\n * children.\n * @param props.el - The element type to render as. Defaults to 'div'.\n */\nexport const Space = forwardRef(CoreSpace) as <E extends SpaceElementType = \"div\">(\n  props: SpaceProps<E>,\n) => ReactElement;\n\ntype FlexDirection = CSSProperties[\"flexDirection\"];\n\nconst flexDirection = (\n  direction: direction.Direction,\n  reverse: boolean,\n): FlexDirection => {\n  const base = direction === \"x\" ? \"row\" : \"column\";\n  return reverse ? ((base + \"-reverse\") as FlexDirection) : base;\n};\n\nconst justifications: Record<Justification, CSSProperties[\"justifyContent\"]> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  spaceBetween: \"space-between\",\n  spaceAround: \"space-around\",\n  spaceEvenly: \"space-evenly\",\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 ForwardedRef, type ReactElement, forwardRef } from \"react\";\n\nimport { Space, type SpaceElementType, type SpaceProps } from \"@/align/Space\";\nimport { CSS } from \"@/css\";\n\nimport \"@/align/Pack.css\";\n\n/** Props for the {@link Pack} component. */\nexport type PackProps<E extends SpaceElementType = \"div\"> = Omit<\n  SpaceProps<E>,\n  \"empty\"\n> & {\n  shadow?: boolean;\n};\n\nconst CorePack = <E extends SpaceElementType = \"div\">(\n  {\n    className,\n    size = \"medium\",\n    reverse = false,\n    direction = \"x\",\n    bordered = true,\n    rounded = true,\n    shadow = false,\n    ...props\n  }: PackProps<E>,\n  // select the correct type for the ref\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => (\n  // @ts-expect-error\n  <Space<E>\n    ref={ref}\n    direction={direction}\n    reverse={reverse}\n    className={CSS(\n      CSS.B(\"pack\"),\n      shadow && CSS.BM(\"pack\", \"shadow\"),\n      CSS.dir(direction),\n      typeof size !== \"number\" && CSS.BM(\"pack\", size),\n      reverse && CSS.BM(\"pack\", \"reverse\"),\n      className,\n    )}\n    bordered={bordered}\n    rounded={rounded}\n    {...props}\n    empty\n  />\n);\n\n/**\n * Packs elements together, setting their size and styling the borders between them so\n * that they appear as a single element. This is useful for buttons that represent a\n * selection state, for example.\n *\n * @param props - The props for the pack. Any extra props will be passed to the\n * underlying Space component.\n * @param props.children - The children to pack together. These must satisfy the\n * {@link PackChildProps} interface.\n * @param props.direction - The direction to pack the children in. Defaults to\n * \"x\".\n * @param props.size - The size to set on the children. Any sizes already set on the\n * children will be overridden. Defaults to \"medium\".\n * @param props.el  - The element type to use as the root element for the Pack.\n * Defaults to \"div\".\n */\nexport const Pack = forwardRef(CorePack) as <E extends SpaceElementType = \"div\">(\n  props: PackProps<E>,\n) => ReactElement;\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 ForwardedRef, type ReactElement, forwardRef } from \"react\";\n\nimport { Space, type SpaceElementType, type SpaceProps } from \"@/align/Space\";\nimport { CSS } from \"@/css\";\n\nimport \"@/align/Center.css\";\n\nexport const CoreCenter = <E extends SpaceElementType = \"div\">(\n  { className, justify = \"center\", align = \"center\", ...props }: SpaceProps<E>,\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => (\n  // @ts-expect-error\n  <Space<E>\n    ref={ref}\n    justify={justify}\n    align={align}\n    className={CSS(CSS.BM(\"space\", \"centered\"), className)}\n    {...props}\n  />\n);\n\n/**\n * An element whose width and height is 100% and whose alignment and justification\n * is centered. Props are the same as {@link Space}.\n */\nexport const Center = forwardRef(CoreCenter) as <E extends SpaceElementType = \"div\">(\n  props: SpaceProps<E>,\n) => ReactElement;\n"],"names":["createElement","forwardRef","direction","jsx","Generic.Element","CSS"],"mappings":"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"}

package/dist/Center-gEKkAkdh.js

@@ -0,0 +1,149 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-rX5tAIG2.js";
+import { forwardRef, createElement } from "react";
+import { d as direction$1, C as CSS } from "./css-NTD4Xm8x.js";
+const CoreElement = ({ el, children, ...props }, ref) => createElement(el, { ...props, ref }, children);
+const Element = forwardRef(CoreElement);
+const Generic = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Element
+}, Symbol.toStringTag, { value: "Module" }));
+const ALIGNMENTS = ["start", "center", "end", "stretch"];
+const JUSTIFICATIONS = [
+  "start",
+  "center",
+  "end",
+  "spaceBetween",
+  "spaceAround",
+  "spaceEvenly"
+];
+const shouldReverse = (direction2, reverse) => reverse ?? (direction2 === "right" || direction2 === "bottom");
+const CoreSpace = ({
+  style,
+  align,
+  className,
+  grow,
+  shrink,
+  empty = false,
+  size = "medium",
+  justify = "start",
+  reverse,
+  direction: direction_ = "y",
+  wrap = false,
+  bordered = false,
+  rounded = false,
+  el = "div",
+  ...props
+}, ref) => {
+  const dir = direction$1.construct(direction_);
+  reverse = shouldReverse(direction_, reverse);
+  let gap;
+  if (empty)
+    [size, gap] = [0, 0];
+  else if (typeof size === "number")
+    gap = `${size}rem`;
+  style = {
+    gap,
+    flexDirection: flexDirection(dir, reverse),
+    justifyContent: justifications[justify],
+    alignItems: align,
+    flexWrap: wrap ? "wrap" : "nowrap",
+    ...style
+  };
+  if (grow != null)
+    style.flexGrow = Number(grow);
+  if (shrink != null)
+    style.flexShrink = Number(shrink);
+  return (
+    // @ts-expect-error
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Element,
+      {
+        el,
+        ref,
+        className: CSS(
+          CSS.B("space"),
+          CSS.dir(dir),
+          CSS.bordered(bordered),
+          CSS.rounded(rounded),
+          typeof size === "string" && CSS.BM("space", size),
+          className
+        ),
+        style,
+        ...props
+      }
+    )
+  );
+};
+CoreSpace.displayName = "Space";
+const Space = forwardRef(CoreSpace);
+const flexDirection = (direction2, reverse) => {
+  const base = direction2 === "x" ? "row" : "column";
+  return reverse ? base + "-reverse" : base;
+};
+const justifications = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  spaceBetween: "space-between",
+  spaceAround: "space-around",
+  spaceEvenly: "space-evenly"
+};
+const CorePack = ({
+  className,
+  size = "medium",
+  reverse = false,
+  direction = "x",
+  bordered = true,
+  rounded = true,
+  shadow = false,
+  ...props
+}, ref) => (
+  // @ts-expect-error
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Space,
+    {
+      ref,
+      direction,
+      reverse,
+      className: CSS(
+        CSS.B("pack"),
+        shadow && CSS.BM("pack", "shadow"),
+        CSS.dir(direction),
+        typeof size !== "number" && CSS.BM("pack", size),
+        reverse && CSS.BM("pack", "reverse"),
+        className
+      ),
+      bordered,
+      rounded,
+      ...props,
+      empty: true
+    }
+  )
+);
+const Pack = forwardRef(CorePack);
+const CoreCenter = ({ className, justify = "center", align = "center", ...props }, ref) => (
+  // @ts-expect-error
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Space,
+    {
+      ref,
+      justify,
+      align,
+      className: CSS(CSS.BM("space", "centered"), className),
+      ...props
+    }
+  )
+);
+const Center = forwardRef(CoreCenter);
+export {
+  ALIGNMENTS as A,
+  Center as C,
+  Element as E,
+  Generic as G,
+  JUSTIFICATIONS as J,
+  Pack as P,
+  Space as S,
+  CoreCenter as a,
+  shouldReverse as s
+};
+//# sourceMappingURL=Center-gEKkAkdh.js.map

package/dist/Center-gEKkAkdh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center-gEKkAkdh.js","sources":["../src/generic/Generic.tsx","../src/align/Space.tsx","../src/align/Pack.tsx","../src/align/Center.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 ComponentPropsWithRef,\n  createElement,\n  type ForwardedRef,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\n\nexport type JSXElementType = keyof JSX.IntrinsicElements;\n\nconst CoreElement = <E extends JSXElementType>(\n  { el, children, ...props }: ElementProps<E>,\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => createElement(el, { ...props, ref }, children);\n\nexport type ElementProps<E extends JSXElementType> = ComponentPropsWithRef<E> & {\n  el: E;\n};\n\n/**\n * Generic renders a component with the given element type .\n *\n * @param props - Props for the generic component. All props not defined below are passed to\n * the underlying element.\n * @param props.el - The element type to render.\n */\nexport const Element = forwardRef(CoreElement) as <E extends JSXElementType>(\n  props: ElementProps<E>,\n) => ReactElement;\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  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\n\nimport { direction } from \"@synnaxlabs/x\";\n\nimport { CSS } from \"@/css\";\nimport { Generic } from \"@/generic\";\nimport { type ComponentSize } from \"@/util/component\";\n\nimport \"@/align/Space.css\";\n\n/** All possible alignments for the cross axis of a space */\nexport const ALIGNMENTS = [\"start\", \"center\", \"end\", \"stretch\"] as const;\n\n/** The alignments for the cross axis of a space */\nexport type Alignment = (typeof ALIGNMENTS)[number];\n\n/** All possible justifications for the main axis of a space */\nexport const JUSTIFICATIONS = [\n  \"start\",\n  \"center\",\n  \"end\",\n  \"spaceBetween\",\n  \"spaceAround\",\n  \"spaceEvenly\",\n] as const;\n\n/** The justification for the main axis of a space */\nexport type Justification = (typeof JUSTIFICATIONS)[number];\n\nexport type SpaceElementType =\n  | \"div\"\n  | \"header\"\n  | \"nav\"\n  | \"section\"\n  | \"article\"\n  | \"aside\"\n  | \"footer\"\n  | \"button\"\n  | \"dialog\"\n  | \"a\";\n\nexport interface SpaceExtensionProps {\n  empty?: boolean;\n  size?: ComponentSize | number;\n  direction?: direction.Crude;\n  reverse?: boolean;\n  justify?: Justification;\n  align?: Alignment;\n  grow?: boolean | number;\n  shrink?: boolean | number;\n  wrap?: boolean;\n  el?: SpaceElementType;\n  bordered?: boolean;\n  rounded?: boolean;\n}\n\nexport type SpaceProps<E extends SpaceElementType = \"div\"> = Omit<\n  Generic.ElementProps<E>,\n  \"el\"\n> &\n  SpaceExtensionProps;\n\nexport const shouldReverse = (direction: direction.Crude, reverse?: boolean): boolean =>\n  reverse ?? (direction === \"right\" || direction === \"bottom\");\n\nconst CoreSpace = <E extends SpaceElementType>(\n  {\n    style,\n    align,\n    className,\n    grow,\n    shrink,\n    empty = false,\n    size = \"medium\",\n    justify = \"start\",\n    reverse,\n    direction: direction_ = \"y\",\n    wrap = false,\n    bordered = false,\n    rounded = false,\n    el = \"div\",\n    ...props\n  }: SpaceProps<E>,\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => {\n  const dir = direction.construct(direction_);\n  reverse = shouldReverse(direction_, reverse);\n\n  let gap: number | string | undefined;\n  if (empty) [size, gap] = [0, 0];\n  else if (typeof size === \"number\") gap = `${size}rem`;\n\n  style = {\n    gap,\n    flexDirection: flexDirection(dir, reverse),\n    justifyContent: justifications[justify],\n    alignItems: align,\n    flexWrap: wrap ? \"wrap\" : \"nowrap\",\n    ...style,\n  };\n\n  if (grow != null) style.flexGrow = Number(grow);\n  if (shrink != null) style.flexShrink = Number(shrink);\n\n  return (\n    // @ts-expect-error\n    <Generic.Element<E>\n      el={el}\n      ref={ref}\n      className={CSS(\n        CSS.B(\"space\"),\n        CSS.dir(dir),\n        CSS.bordered(bordered),\n        CSS.rounded(rounded),\n        typeof size === \"string\" && CSS.BM(\"space\", size),\n        className,\n      )}\n      style={style}\n      {...props}\n    />\n  );\n};\nCoreSpace.displayName = \"Space\";\n\n/**\n * A component that orients its children in a row or column and adds\n * space between them. This is essentially a thin wrapped around a\n * flex component that makes it more 'reacty' to use.\n *\n * @param props - The props for the component. All unlisted props will be passed\n * to the underlying root element.\n * @param props.align - The off axis alignment of the children. The 'off' axis is the\n * opposite direction of props.direction. For example, if direction is 'x', then the\n * off axis is 'y'. See the {@link Alignment} for available options.\n * @param props.justify - The main axis justification of the children. The 'main' axis\n * is the same direction as props.direction. For example, if direction is 'x', then the\n * main axis is 'x'. See the {@link Justification} for available options.\n * @param props.grow - A boolean or number value that determines if the space should\n * grow in the flex-box sense. A value of true will set css flex-grow to 1. A value of\n * false will leave the css flex-grow unset. A number value will set the css flex-grow\n * to that number.\n * @param props.size - A string or number value that determines the amount of spacing\n * between items. If set to \"small\", \"medium\", or \"large\", the spacing will be determined\n * by the theme. If set to a number, the spacing will be that number of rem.\n * @param props.wrap - A boolean value that determines if the space should wrap its\n * children.\n * @param props.el - The element type to render as. Defaults to 'div'.\n */\nexport const Space = forwardRef(CoreSpace) as <E extends SpaceElementType = \"div\">(\n  props: SpaceProps<E>,\n) => ReactElement;\n\ntype FlexDirection = CSSProperties[\"flexDirection\"];\n\nconst flexDirection = (\n  direction: direction.Direction,\n  reverse: boolean,\n): FlexDirection => {\n  const base = direction === \"x\" ? \"row\" : \"column\";\n  return reverse ? ((base + \"-reverse\") as FlexDirection) : base;\n};\n\nconst justifications: Record<Justification, CSSProperties[\"justifyContent\"]> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  spaceBetween: \"space-between\",\n  spaceAround: \"space-around\",\n  spaceEvenly: \"space-evenly\",\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 ForwardedRef, type ReactElement, forwardRef } from \"react\";\n\nimport { Space, type SpaceElementType, type SpaceProps } from \"@/align/Space\";\nimport { CSS } from \"@/css\";\n\nimport \"@/align/Pack.css\";\n\n/** Props for the {@link Pack} component. */\nexport type PackProps<E extends SpaceElementType = \"div\"> = Omit<\n  SpaceProps<E>,\n  \"empty\"\n> & {\n  shadow?: boolean;\n};\n\nconst CorePack = <E extends SpaceElementType = \"div\">(\n  {\n    className,\n    size = \"medium\",\n    reverse = false,\n    direction = \"x\",\n    bordered = true,\n    rounded = true,\n    shadow = false,\n    ...props\n  }: PackProps<E>,\n  // select the correct type for the ref\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => (\n  // @ts-expect-error\n  <Space<E>\n    ref={ref}\n    direction={direction}\n    reverse={reverse}\n    className={CSS(\n      CSS.B(\"pack\"),\n      shadow && CSS.BM(\"pack\", \"shadow\"),\n      CSS.dir(direction),\n      typeof size !== \"number\" && CSS.BM(\"pack\", size),\n      reverse && CSS.BM(\"pack\", \"reverse\"),\n      className,\n    )}\n    bordered={bordered}\n    rounded={rounded}\n    {...props}\n    empty\n  />\n);\n\n/**\n * Packs elements together, setting their size and styling the borders between them so\n * that they appear as a single element. This is useful for buttons that represent a\n * selection state, for example.\n *\n * @param props - The props for the pack. Any extra props will be passed to the\n * underlying Space component.\n * @param props.children - The children to pack together. These must satisfy the\n * {@link PackChildProps} interface.\n * @param props.direction - The direction to pack the children in. Defaults to\n * \"x\".\n * @param props.size - The size to set on the children. Any sizes already set on the\n * children will be overridden. Defaults to \"medium\".\n * @param props.el  - The element type to use as the root element for the Pack.\n * Defaults to \"div\".\n */\nexport const Pack = forwardRef(CorePack) as <E extends SpaceElementType = \"div\">(\n  props: PackProps<E>,\n) => ReactElement;\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 ForwardedRef, type ReactElement, forwardRef } from \"react\";\n\nimport { Space, type SpaceElementType, type SpaceProps } from \"@/align/Space\";\nimport { CSS } from \"@/css\";\n\nimport \"@/align/Center.css\";\n\nexport const CoreCenter = <E extends SpaceElementType = \"div\">(\n  { className, justify = \"center\", align = \"center\", ...props }: SpaceProps<E>,\n  ref: ForwardedRef<JSX.IntrinsicElements[E]>,\n): ReactElement => (\n  // @ts-expect-error\n  <Space<E>\n    ref={ref}\n    justify={justify}\n    align={align}\n    className={CSS(CSS.BM(\"space\", \"centered\"), className)}\n    {...props}\n  />\n);\n\n/**\n * An element whose width and height is 100% and whose alignment and justification\n * is centered. Props are the same as {@link Space}.\n */\nexport const Center = forwardRef(CoreCenter) as <E extends SpaceElementType = \"div\">(\n  props: SpaceProps<E>,\n) => ReactElement;\n"],"names":["direction","jsx","Generic.Element"],"mappings":"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"}

package/dist/Header-5YX6FUn6.cjs

@@ -0,0 +1,35 @@
+"use strict";
+const jsxRuntime = require("./jsx-runtime-N1ikfypN.cjs");
+const React = require("react");
+const Center = require("./Center-ZAcURh-3.cjs");
+const css = require("./css-V3VUT_Js.cjs");
+const Context = React.createContext({
+  divided: false,
+  level: "h1"
+});
+const useContext = () => React.useContext(Context);
+const Header = ({
+  children,
+  className,
+  level = "h1",
+  divided = false,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, { value: { level, divided }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  Center.Space,
+  {
+    el: "header",
+    direction: "x",
+    justify: "spaceBetween",
+    className: css.CSS(
+      css.CSS.B("header"),
+      css.CSS.bordered("bottom"),
+      divided && css.CSS.BM("header", "divided"),
+      className
+    ),
+    ...props,
+    children
+  }
+) });
+exports.Header = Header;
+exports.useContext = useContext;
+//# sourceMappingURL=Header-5YX6FUn6.cjs.map

package/dist/Header-5YX6FUn6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header-5YX6FUn6.cjs","sources":["../src/header/Header.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  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext as reactUseContext,\n} from \"react\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { type Text } from \"@/text\";\n\nimport \"@/header/Header.css\";\n\nexport interface HeaderProps extends Omit<Align.SpaceProps, \"children\" | \"el\"> {\n  level?: Text.Level;\n  divided?: boolean;\n  children: ReactNode | [ReactNode, ReactNode];\n}\n\nexport interface ContextValue {\n  divided: boolean;\n  level: Text.Level;\n}\n\nconst Context = createContext<ContextValue>({\n  divided: false,\n  level: \"h1\",\n});\n\nexport const useContext = (): ContextValue => reactUseContext(Context);\n\n/**\n * The container for a module header.\n *\n * @param props - The component props. All unused props will be passed down to the\n * {@link Space} containing the header.\n * @param props.level - The font level for the header. See the {@link Typography.Text}\n * component for all possible levels. Default is \"h1.\"\n * @param props.icon - An optional icon to add add before the start of the header text.\n * @param props.actions - A list of actions to be rendered on the right side ofthe header.\n * If the action is a JSX element, it will be rendered directly, and if its of type\n * ButtonIconProps, a ButtonIconOnly will be rendered using the given props.\n * @param props.divided - If true, creates a divider between the start icon, header text,\n * and each action. Default is false.\n */\nexport const Header = ({\n  children,\n  className,\n  level = \"h1\",\n  divided = false,\n  ...props\n}: HeaderProps): ReactElement => (\n  <Context.Provider value={{ level, divided }}>\n    <Align.Space\n      el=\"header\"\n      direction=\"x\"\n      justify=\"spaceBetween\"\n      className={CSS(\n        CSS.B(\"header\"),\n        CSS.bordered(\"bottom\"),\n        divided && CSS.BM(\"header\", \"divided\"),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Align.Space>\n  </Context.Provider>\n);\n"],"names":["createContext","reactUseContext","jsx","Align.Space","CSS"],"mappings":";;;;;AAiCA,MAAM,UAAUA,MAAAA,cAA4B;AAAA,EAC1C,SAAS;AAAA,EACT,OAAO;AACT,CAAC;AAEY,MAAA,aAAa,MAAoBC,MAAA,WAAgB,OAAO;AAgB9D,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,GAAG;AACL,MACEC,2BAAA,kBAAA,IAAC,QAAQ,UAAR,EAAiB,OAAO,EAAE,OAAO,WAChC,UAAAA,2BAAA,kBAAA;AAAA,EAACC,OAAM;AAAA,EAAN;AAAA,IACC,IAAG;AAAA,IACH,WAAU;AAAA,IACV,SAAQ;AAAA,IACR,WAAWC,IAAA;AAAA,MACTA,IAAA,IAAI,EAAE,QAAQ;AAAA,MACdA,IAAA,IAAI,SAAS,QAAQ;AAAA,MACrB,WAAWA,IAAA,IAAI,GAAG,UAAU,SAAS;AAAA,MACrC;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,EACF,CAAA;;;"}

package/dist/Header-7x6367IV.js

@@ -0,0 +1,36 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-rX5tAIG2.js";
+import { createContext, useContext as useContext$1 } from "react";
+import { S as Space } from "./Center-gEKkAkdh.js";
+import { C as CSS } from "./css-NTD4Xm8x.js";
+const Context = createContext({
+  divided: false,
+  level: "h1"
+});
+const useContext = () => useContext$1(Context);
+const Header = ({
+  children,
+  className,
+  level = "h1",
+  divided = false,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(Context.Provider, { value: { level, divided }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Space,
+  {
+    el: "header",
+    direction: "x",
+    justify: "spaceBetween",
+    className: CSS(
+      CSS.B("header"),
+      CSS.bordered("bottom"),
+      divided && CSS.BM("header", "divided"),
+      className
+    ),
+    ...props,
+    children
+  }
+) });
+export {
+  Header as H,
+  useContext as u
+};
+//# sourceMappingURL=Header-7x6367IV.js.map

package/dist/Header-7x6367IV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header-7x6367IV.js","sources":["../src/header/Header.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  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext as reactUseContext,\n} from \"react\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { type Text } from \"@/text\";\n\nimport \"@/header/Header.css\";\n\nexport interface HeaderProps extends Omit<Align.SpaceProps, \"children\" | \"el\"> {\n  level?: Text.Level;\n  divided?: boolean;\n  children: ReactNode | [ReactNode, ReactNode];\n}\n\nexport interface ContextValue {\n  divided: boolean;\n  level: Text.Level;\n}\n\nconst Context = createContext<ContextValue>({\n  divided: false,\n  level: \"h1\",\n});\n\nexport const useContext = (): ContextValue => reactUseContext(Context);\n\n/**\n * The container for a module header.\n *\n * @param props - The component props. All unused props will be passed down to the\n * {@link Space} containing the header.\n * @param props.level - The font level for the header. See the {@link Typography.Text}\n * component for all possible levels. Default is \"h1.\"\n * @param props.icon - An optional icon to add add before the start of the header text.\n * @param props.actions - A list of actions to be rendered on the right side ofthe header.\n * If the action is a JSX element, it will be rendered directly, and if its of type\n * ButtonIconProps, a ButtonIconOnly will be rendered using the given props.\n * @param props.divided - If true, creates a divider between the start icon, header text,\n * and each action. Default is false.\n */\nexport const Header = ({\n  children,\n  className,\n  level = \"h1\",\n  divided = false,\n  ...props\n}: HeaderProps): ReactElement => (\n  <Context.Provider value={{ level, divided }}>\n    <Align.Space\n      el=\"header\"\n      direction=\"x\"\n      justify=\"spaceBetween\"\n      className={CSS(\n        CSS.B(\"header\"),\n        CSS.bordered(\"bottom\"),\n        divided && CSS.BM(\"header\", \"divided\"),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Align.Space>\n  </Context.Provider>\n);\n"],"names":["reactUseContext","jsx","Align.Space"],"mappings":";;;;AAiCA,MAAM,UAAU,cAA4B;AAAA,EAC1C,SAAS;AAAA,EACT,OAAO;AACT,CAAC;AAEY,MAAA,aAAa,MAAoBA,aAAgB,OAAO;AAgB9D,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,GAAG;AACL,MACEC,kCAAA,IAAC,QAAQ,UAAR,EAAiB,OAAO,EAAE,OAAO,WAChC,UAAAA,kCAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,WAAU;AAAA,IACV,SAAQ;AAAA,IACR,WAAW;AAAA,MACT,IAAI,EAAE,QAAQ;AAAA,MACd,IAAI,SAAS,QAAQ;AAAA,MACrB,WAAW,IAAI,GAAG,UAAU,SAAS;AAAA,MACrC;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,EACF,CAAA;"}

package/dist/Item-EDdYN2NK.js

@@ -0,0 +1,171 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-rX5tAIG2.js";
+import { forwardRef, useRef, useState, createContext, useContext } from "react";
+import { x as xy, C as CSS, u as unique, b as box$1 } from "./css-NTD4Xm8x.js";
+import { a2 as useClickOutside, B as Button, I as Icon } from "./Toggle-kLunfJtR.js";
+import { L as Link } from "./Link-laNlv47N.js";
+const INITIAL_STATE = {
+  visible: false,
+  keys: [],
+  xy: xy.ZERO
+};
+const CONTEXT_SELECTED = CSS.BM("context", "selected");
+const CONTEXT_TARGET = CSS.BE("context", "target");
+const CONTEXT_MENU_CONTAINER = 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 = useRef(null);
+  const [state, setMenuState] = useState(INITIAL_STATE);
+  const handleOpen = (e, keys) => {
+    const p = xy.construct(e);
+    if ("preventDefault" in e) {
+      e.preventDefault();
+      e.stopPropagation();
+      keys = keys ?? 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] = box$1.positionSoVisible(
+          el,
+          window.document.documentElement
+        );
+        if (changed)
+          return { ...prev, xy: box$1.topLeft(repositioned) };
+      }
+      return prev;
+    });
+  };
+  const hideMenu = () => setMenuState(INITIAL_STATE);
+  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__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: CSS(CONTEXT_MENU_CONTAINER, className, CSS.inheritDims()),
+      onContextMenu: open,
+      ...props,
+      children: [
+        children,
+        menuC != null && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: CSS(CSS.B("menu-context"), CSS.bordered()),
+            ref,
+            style: { left: xy2.x, top: xy2.y },
+            onClick: close,
+            children: menuC
+          }
+        )
+      ]
+    }
+  );
+};
+const ContextMenu = forwardRef(ContextMenuCore);
+ContextMenu.displayName = "ContextMenu";
+const MenuContext = createContext({
+  onClick: () => {
+  },
+  selected: ""
+});
+const useMenuContext = () => useContext(MenuContext);
+const Menu = ({
+  children,
+  onChange,
+  level,
+  iconSpacing,
+  value = ""
+}) => {
+  const handleClick = (key) => onChange == null ? void 0 : onChange(key);
+  return /* @__PURE__ */ 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__ */ jsxRuntimeExports.jsx(
+        Base,
+        {
+          level,
+          ...rest,
+          onClick: handleClick,
+          variant: "text",
+          className: CSS(CSS.B("menu-item"), CSS.selected(_selected), className),
+          size: size ?? iconSpacing
+        }
+      )
+    );
+  }
+);
+const CoreItem = menuItemFactory(Button, { noWrap: true });
+const ItemIcon = menuItemFactory(Icon);
+const ItemLink = menuItemFactory(Link, { noWrap: true });
+const Item = CoreItem;
+Item.Icon = ItemIcon;
+Item.Link = ItemLink;
+export {
+  CONTEXT_SELECTED as C,
+  Item as I,
+  Menu as M,
+  CONTEXT_TARGET as a,
+  ContextMenu as b,
+  CoreItem as c,
+  MenuContext as d,
+  useMenuContext as e,
+  useContextMenu as u
+};
+//# sourceMappingURL=Item-EDdYN2NK.js.map