@worknice/whiteboard 0.16.21 → 0.18.0

package/dist/inputs/{ColorPickerInput_module.css → PaletteColorInput_module.css}

@@ -1,9 +1,9 @@
-.colorPickerContainer-vtcSYx {
+.colorPickerContainer-g6Cs9a {
   gap: var(--size-n2);
   display: flex;
 }
 
-.colorSwatch-wpMMGe {
+.colorSwatch-WJkEcP {
   width: var(--size-p3);
   height: var(--size-p3);
   border-radius: var(--size-n3);
@@ -12,88 +12,88 @@
   display: flex;
 }
 
-.colorSwatch-wpMMGe:focus-visible {
+.colorSwatch-WJkEcP:focus-visible {
   box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
 }
 
-.blue-v9K5JJ {
+.blue-GJ2QPx {
   background-color: var(--color-blue-t09);
   color: var(--color-blue-000);
 }
 
-.blue-v9K5JJ:hover {
+.blue-GJ2QPx:hover {
   background-color: var(--color-blue-t08);
 }
 
-.green-veeZjl {
+.green-JyIkWl {
   background-color: var(--color-green-t09);
   color: var(--color-green-000);
 }
 
-.green-veeZjl:hover {
+.green-JyIkWl:hover {
   background-color: var(--color-green-t08);
 }
 
-.grey-mX5qFz {
+.grey-l8WLgd {
   background-color: var(--color-grey-t09);
   color: var(--color-grey-000);
 }
 
-.grey-mX5qFz:hover {
+.grey-l8WLgd:hover {
   background-color: var(--color-grey-t08);
 }
 
-.maroon-eUNVgs {
+.maroon-Cbm1Gm {
   background-color: var(--color-maroon-t09);
   color: var(--color-maroon-000);
 }
 
-.maroon-eUNVgs:hover {
+.maroon-Cbm1Gm:hover {
   background-color: var(--color-maroon-t08);
 }
 
-.orange-xgdRV3 {
+.orange-wz4FeR {
   background-color: var(--color-orange-t09);
   color: var(--color-orange-000);
 }
 
-.orange-xgdRV3:hover {
+.orange-wz4FeR:hover {
   background-color: var(--color-orange-t08);
 }
 
-.purple-HWsWJl {
+.purple-LAPCC_ {
   background-color: var(--color-purple-t09);
   color: var(--color-purple-000);
 }
 
-.purple-HWsWJl:hover {
+.purple-LAPCC_:hover {
   background-color: var(--color-purple-t08);
 }
 
-.red-JL2bM_ {
+.red-gWlrJE {
   background-color: var(--color-red-t09);
   color: var(--color-red-000);
 }
 
-.red-JL2bM_:hover {
+.red-gWlrJE:hover {
   background-color: var(--color-red-t08);
 }
 
-.teal-wgRaV3 {
+.teal-yVPOzf {
   background-color: var(--color-teal-t09);
   color: var(--color-teal-000);
 }
 
-.teal-wgRaV3:hover {
+.teal-yVPOzf:hover {
   background-color: var(--color-teal-t08);
 }
 
-.yellow-Acf9kq {
+.yellow-Gz37K8 {
   background-color: var(--color-yellow-t09);
   color: var(--color-yellow-000);
 }
 
-.yellow-Acf9kq:hover {
+.yellow-Gz37K8:hover {
   background-color: var(--color-yellow-t08);
 }
 

package/dist/inputs/SelectInput.js

@@ -43,11 +43,15 @@ const SelectInput = ({ autoFocus = false, disabled = false, id, onChange, option
         activeIndex,
         onMatch: setActiveIndex
     });
+    const role = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useRole)(context, {
+        role: "select"
+    });
     const { getReferenceProps, getFloatingProps, getItemProps } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useInteractions)([
         click,
         dismiss,
         listNav,
-        typeahead
+        typeahead,
+        role
     ]);
     const hasOptions = options.length > 0;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
@@ -90,6 +94,7 @@ const SelectInput = ({ autoFocus = false, disabled = false, id, onChange, option
                                 children: options.map((option, index)=>{
                                     const optionId = optionToId(option);
                                     const optionLabel = optionToLabel(option);
+                                    const isSelected = optionToId(value) === optionId;
                                     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
                                         tabIndex: index === activeIndex ? 0 : -1,
                                         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__["default"].listItem, {
@@ -99,6 +104,8 @@ const SelectInput = ({ autoFocus = false, disabled = false, id, onChange, option
                                             optionsRef.current[index] = node;
                                         },
                                         ...getItemProps({
+                                            active: activeIndex === index,
+                                            selected: isSelected,
                                             onClick: ()=>{
                                                 setIsOpen(false);
                                                 onChange(option);
@@ -113,7 +120,7 @@ const SelectInput = ({ autoFocus = false, disabled = false, id, onChange, option
                                         }),
                                         children: [
                                             optionLabel,
-                                            optionToId(value) === optionToId(option) ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                                            isSelected ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
                                                 symbol: "CheckMark"
                                             }) : null
                                         ]

package/dist/presentation/Tag.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
-export type Color = "blue" | "green" | "grey" | "orange" | "purple" | "red" | "teal" | "yellow" | "maroon";
+import type { PaletteColor } from "../utils/paletteColor";
 type Props = {
     children: ReactNode;
     id: string;
-    color: Color;
+    color: PaletteColor;
 };
 declare const Tag: ({ children, id, color }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tag;

package/dist/utils/field.d.ts

@@ -0,0 +1,2 @@
+export declare const LABEL_FONT_OPTIONS: readonly ["heading", "subheading", "label", "regular-bold", "regular", "small"];
+export type LabelFontOption = (typeof LABEL_FONT_OPTIONS)[number];

package/dist/utils/field.js

@@ -0,0 +1,9 @@
+const LABEL_FONT_OPTIONS = [
+    "heading",
+    "subheading",
+    "label",
+    "regular-bold",
+    "regular",
+    "small"
+];
+export { LABEL_FONT_OPTIONS };

package/dist/utils/paletteColor.d.ts

@@ -0,0 +1,3 @@
+export declare const PALETTE_COLORS: readonly ["blue", "green", "grey", "orange", "purple", "red", "teal", "yellow", "maroon"];
+export type PaletteColor = (typeof PALETTE_COLORS)[number];
+export declare const PALETTE_COLOR_LABELS: Record<PaletteColor, string>;

package/dist/utils/paletteColor.js

@@ -0,0 +1,23 @@
+const PALETTE_COLORS = [
+    "blue",
+    "green",
+    "grey",
+    "orange",
+    "purple",
+    "red",
+    "teal",
+    "yellow",
+    "maroon"
+];
+const PALETTE_COLOR_LABELS = {
+    blue: "Blue",
+    green: "Green",
+    grey: "Grey",
+    maroon: "Maroon",
+    orange: "Orange",
+    purple: "Purple",
+    red: "Red",
+    teal: "Teal",
+    yellow: "Yellow"
+};
+export { PALETTE_COLORS, PALETTE_COLOR_LABELS };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.16.21",
+  "version": "0.18.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -38,7 +38,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^3.22.3",
-    "@worknice/utils": "^0.6.64"
+    "@worknice/utils": "^0.6.66"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^1.1.10",

package/dist/inputs/ColorPickerInput.d.ts

@@ -1,8 +0,0 @@
-import type { Color } from "../presentation/Tag";
-type Props = {
-    id: string;
-    value: Color;
-    onChange: (value: Color) => void;
-};
-declare const ColorPickerInput: ({ id, value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
-export default ColorPickerInput;

package/dist/inputs/ColorPickerInput.js

@@ -1,36 +0,0 @@
-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__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__ from "./ColorPickerInput.module.js";
-const LABELS = {
-    purple: "Purple",
-    blue: "Blue",
-    teal: "Teal",
-    green: "Green",
-    yellow: "Yellow",
-    orange: "Orange",
-    red: "Red",
-    maroon: "Maroon",
-    grey: "Grey"
-};
-const ColorPickerInput = ({ id, value, onChange })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        id: id,
-        className: __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__["default"].colorPickerContainer,
-        children: Object.entries(LABELS).map(([color, label])=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
-                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-                    __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__["default"][color],
-                    __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__["default"].colorSwatch
-                ]),
-                onClick: ()=>{
-                    onChange(color);
-                },
-                "aria-label": label,
-                title: label,
-                type: "button",
-                children: color === value ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
-                    symbol: "CheckMark"
-                }) : null
-            }, color))
-    });
-const ColorPickerInput_rslib_entry_ = ColorPickerInput;
-export { ColorPickerInput_rslib_entry_ as default };

package/dist/inputs/ColorPickerInput.module.js

@@ -1,15 +0,0 @@
-import "./ColorPickerInput_module.css";
-const ColorPickerInput_module_rslib_entry_ = {
-    colorPickerContainer: "colorPickerContainer-vtcSYx",
-    colorSwatch: "colorSwatch-wpMMGe",
-    blue: "blue-v9K5JJ",
-    green: "green-veeZjl",
-    grey: "grey-mX5qFz",
-    maroon: "maroon-eUNVgs",
-    orange: "orange-xgdRV3",
-    purple: "purple-HWsWJl",
-    red: "red-JL2bM_",
-    teal: "teal-wgRaV3",
-    yellow: "yellow-Acf9kq"
-};
-export { ColorPickerInput_module_rslib_entry_ as default };