@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/presentation/Tag.js

@@ -0,0 +1,20 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__ from "./Tag.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+const Tag = ({ children, id, color })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+        id: id,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].tag, {
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].blue]: "blue" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].green]: "green" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].grey]: "grey" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].maroon]: "maroon" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].orange]: "orange" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].purple]: "purple" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].red]: "red" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].teal]: "teal" === color,
+            [__WEBPACK_EXTERNAL_MODULE__Tag_module_js_615d680f__["default"].yellow]: "yellow" === color
+        }),
+        children: children
+    });
+const Tag_rslib_entry_ = Tag;
+export { Tag_rslib_entry_ as default };

package/dist/presentation/Tag.module.js

@@ -0,0 +1,14 @@
+import "./Tag_module.css";
+const Tag_module_rslib_entry_ = {
+    tag: "tag-PoWiAU",
+    blue: "blue-Q5gzQs",
+    green: "green-ghtuPZ",
+    grey: "grey-KtqgiE",
+    maroon: "maroon-sTPflh",
+    orange: "orange-UyzB74",
+    purple: "purple-tJJoGZ",
+    red: "red-cHhhpj",
+    teal: "teal-ZuyYmA",
+    yellow: "yellow-NwCKSj"
+};
+export { Tag_module_rslib_entry_ as default };

package/dist/presentation/TagSet.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+type Props = {
+    direction?: "row" | "column";
+    tags: Array<{
+        key: string;
+        value: ReactNode;
+    } | null>;
+};
+/**
+ * Displays a set of tags. If there are no tags with non-null values,
+ * nothing will be rendered.  If there's not enough space, the tags will wrap
+ * (using flexbox) or be truncated.
+ */
+declare const TagSet: ({ tags, direction }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default TagSet;

package/dist/presentation/TagSet.js

@@ -0,0 +1,18 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__ from "./TagSet.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const TagSet = ({ tags, direction = "row" })=>{
+    const nonNullTags = tags.filter((badge)=>null !== badge && void 0 !== badge.value && null !== badge.value);
+    return nonNullTags.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+            __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].container,
+            "row" === direction ? __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionRow : __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionColumn
+        ]),
+        children: nonNullTags.map(({ key, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+                children: value
+            }, key))
+    }) : null;
+};
+const TagSet_rslib_entry_ = TagSet;
+export { TagSet_rslib_entry_ as default };

package/dist/presentation/TagSet.module.js

@@ -0,0 +1,7 @@
+import "./TagSet_module.css";
+const TagSet_module_rslib_entry_ = {
+    container: "container-L0HAwG",
+    directionRow: "directionRow-gPULoA",
+    directionColumn: "directionColumn-YfoXcq"
+};
+export { TagSet_module_rslib_entry_ as default };

package/dist/presentation/TagSet_module.css

@@ -0,0 +1,15 @@
+.container-L0HAwG {
+  align-items: flex-start;
+  gap: var(--size-n3);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.directionRow-gPULoA {
+  flex-direction: row;
+}
+
+.directionColumn-YfoXcq {
+  flex-direction: column;
+}
+

package/dist/presentation/Tag_module.css

@@ -0,0 +1,53 @@
+.tag-PoWiAU {
+  border-radius: var(--size-n3);
+  font: var(--font-small);
+  padding: var(--size-n4) var(--size-n2);
+  text-wrap: noWrap;
+  display: inline-flex;
+}
+
+.blue-Q5gzQs {
+  background: var(--color-blue-t09);
+  color: var(--color-blue-s04);
+}
+
+.green-ghtuPZ {
+  background: var(--color-green-t09);
+  color: var(--color-green-s04);
+}
+
+.grey-KtqgiE {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-s04);
+}
+
+.maroon-sTPflh {
+  background: var(--color-maroon-t09);
+  color: var(--color-maroon-s04);
+}
+
+.orange-UyzB74 {
+  background: var(--color-orange-t09);
+  color: var(--color-orange-s04);
+}
+
+.purple-tJJoGZ {
+  background: var(--color-purple-t09);
+  color: var(--color-purple-s04);
+}
+
+.red-cHhhpj {
+  background: var(--color-red-t09);
+  color: var(--color-red-s04);
+}
+
+.teal-ZuyYmA {
+  background: var(--color-teal-t09);
+  color: var(--color-teal-s04);
+}
+
+.yellow-NwCKSj {
+  background: var(--color-yellow-t09);
+  color: var(--color-yellow-s04);
+}
+

package/dist/presentation/Timeline.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+type Props = {
+    items: Array<{
+        key: string;
+        icon: ReactNode;
+        value: ReactNode;
+    } | null>;
+};
+declare const TimelineItem: ({ items }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TimelineItem;

package/dist/presentation/Timeline.js

@@ -0,0 +1,24 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__Timeline_module_js_9dae15a4__ from "./Timeline.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
+const TimelineItem = ({ items })=>{
+    const nonNullItems = items.filter((item)=>null !== item).filter((item)=>void 0 !== item.value && null !== item.value);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__Timeline_module_js_9dae15a4__["default"].container,
+        children: nonNullItems.map((item)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Timeline_module_js_9dae15a4__["default"].item,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Timeline_module_js_9dae15a4__["default"].icon,
+                        children: item.icon
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
+                        spacing: "n3",
+                        children: item.value
+                    })
+                ]
+            }, item.key))
+    });
+};
+const Timeline_rslib_entry_ = TimelineItem;
+export { Timeline_rslib_entry_ as default };

package/dist/presentation/Timeline.module.js

@@ -0,0 +1,7 @@
+import "./Timeline_module.css";
+const Timeline_module_rslib_entry_ = {
+    container: "container-Ems421",
+    item: "item-hd61Ph",
+    icon: "icon-JS3U2I"
+};
+export { Timeline_module_rslib_entry_ as default };

package/dist/presentation/Timeline_module.css

@@ -0,0 +1,32 @@
+.container-Ems421 {
+  gap: var(--size-00);
+  display: grid;
+}
+
+.item-hd61Ph {
+  padding-left: calc(20px + var(--size-00));
+  position: relative;
+}
+
+.icon-JS3U2I {
+  width: 20px;
+  height: 100%;
+  position: absolute;
+  left: 0;
+}
+
+.icon-JS3U2I:after {
+  content: "";
+  background-color: var(--color-grey-t08);
+  width: 1px;
+  display: block;
+  position: absolute;
+  top: 24px;
+  bottom: -12px;
+  left: 9px;
+}
+
+.item-hd61Ph:last-child .icon-JS3U2I:after {
+  display: none;
+}
+

package/dist/presentation/Title.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    id?: string;
+};
+/**
+ * @deprecated Use `PlainText` instead.
+ */
+declare const Title: ({ children, id }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Title;

package/dist/presentation/Title.js

@@ -0,0 +1,10 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
+const Title = ({ children, id })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+        font: "h1",
+        id: id,
+        tagName: "h1",
+        children: children
+    });
+const Title_rslib_entry_ = Title;
+export { Title_rslib_entry_ as default };

package/dist/presentation/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    content: ReactNode;
+};
+declare const Tooltip: ({ children, content }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/dist/presentation/Tooltip.js

@@ -0,0 +1,62 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__ from "@floating-ui/react";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__Tooltip_module_js_46f8876b__ from "./Tooltip.module.js";
+const Tooltip = ({ children, content })=>{
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const arrowRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const { refs, floatingStyles, context } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom",
+        middleware: [
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.offset)(8),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.flip)(),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.shift)(),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.arrow)({
+                element: arrowRef
+            })
+        ],
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate
+    });
+    const hover = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useHover)(context, {
+        move: false,
+        restMs: 25,
+        delay: {
+            open: 200,
+            close: 0
+        }
+    });
+    const focus = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFocus)(context);
+    const dismiss = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useDismiss)(context);
+    const role = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useRole)(context, {
+        role: "label"
+    });
+    const { getReferenceProps, getFloatingProps } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useInteractions)([
+        hover,
+        focus,
+        dismiss,
+        role
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__Tooltip_module_js_46f8876b__["default"].container,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                ref: refs.setReference,
+                ...getReferenceProps(),
+                children: children
+            }),
+            isOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingPortal, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    ref: refs.setFloating,
+                    ...getFloatingProps(),
+                    style: floatingStyles,
+                    className: __WEBPACK_EXTERNAL_MODULE__Tooltip_module_js_46f8876b__["default"].tooltip,
+                    children: content
+                })
+            }) : null
+        ]
+    });
+};
+const Tooltip_rslib_entry_ = Tooltip;
+export { Tooltip_rslib_entry_ as default };

package/dist/presentation/Tooltip.module.js

@@ -0,0 +1,6 @@
+import "./Tooltip_module.css";
+const Tooltip_module_rslib_entry_ = {
+    container: "container-o4I5qS",
+    tooltip: "tooltip-yj2lO4"
+};
+export { Tooltip_module_rslib_entry_ as default };

package/dist/presentation/Tooltip_module.css

@@ -0,0 +1,12 @@
+.container-o4I5qS {
+  position: relative;
+}
+
+.tooltip-yj2lO4 {
+  padding: var(--size-n3) var(--size-n2);
+  border-radius: var(--size-n3);
+  background-color: var(--color-grey-s02);
+  color: var(--color-white);
+  font: var(--font-small);
+}
+

package/dist/presentation/VStack.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    spacing?: "n5" | "n4" | "n3" | "n2" | "n1" | "00" | "p1" | "p2" | "p3" | "p4" | "p5";
+    tagName?: keyof JSX.IntrinsicElements;
+    justifyItems?: "start" | "end" | "center" | "stretch";
+};
+/**
+ * @deprecated Use CSS ("display: grid; row-gap: var(--size-00);") instead. That
+ * will allow for media query customisation.
+ */
+declare const VStack: ({ children, spacing, tagName: Tag, justifyItems, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default VStack;

package/dist/presentation/VStack.js

@@ -0,0 +1,15 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__VStack_module_js_2a50d6e0__ from "./VStack.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__ from "../utils/customProperties.js";
+const VStack = ({ children, spacing = "00", tagName: Tag = "div", justifyItems = "stretch" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Tag, {
+        className: __WEBPACK_EXTERNAL_MODULE__VStack_module_js_2a50d6e0__["default"].stack,
+        style: {
+            ...(0, __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__["default"])({
+                "--spacing": `var(--size-${spacing})`
+            }),
+            justifyItems: justifyItems
+        },
+        children: children
+    });
+const VStack_rslib_entry_ = VStack;
+export { VStack_rslib_entry_ as default };

package/dist/presentation/VStack.module.js

@@ -0,0 +1,5 @@
+import "./VStack_module.css";
+const VStack_module_rslib_entry_ = {
+    stack: "stack-mRyNB3"
+};
+export { VStack_module_rslib_entry_ as default };

package/dist/presentation/VStack_module.css

@@ -0,0 +1,8 @@
+.stack-mRyNB3 {
+  gap: var(--spacing);
+  grid-auto-columns: minmax(0, auto);
+  grid-auto-flow: row;
+  width: 100%;
+  display: grid;
+}
+