boreal-ui 0.0.71 → 0.0.73

package/dist/next/ColorPicker-ByPKPsMz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-ByPKPsMz.cjs","sources":["../../src/components/ColorPicker/ColorPickerBase.tsx","../../src/components/ColorPicker/next/ColorPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { ColorPickerBaseProps } from \"./ColorPicker.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ColorPickerBase: React.FC<ColorPickerBaseProps> = ({\r\n  label = \"Choose a color\",\r\n  colors,\r\n  selected,\r\n  onChange,\r\n  name = \"color-picker\",\r\n  disabled = false,\r\n  size = getDefaultSize(),\r\n  shadow = getDefaultShadow(),\r\n  shape = \"round\",\r\n  allowCustom = false,\r\n  required = false,\r\n  invalid = false,\r\n  helperText,\r\n  errorText,\r\n  customInputAriaLabel = \"Custom color picker\",\r\n  hideLabel = false,\r\n  className = \"\",\r\n  classMap,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"color-picker\",\r\n}) => {\r\n  const legendId = `${testId}-legend`;\r\n  const helperTextId = helperText ? `${testId}-helper-text` : undefined;\r\n  const errorTextId = errorText ? `${testId}-error-text` : undefined;\r\n\r\n  const describedBy =\r\n    [ariaDescribedBy, helperTextId, invalid ? errorTextId : undefined]\r\n      .filter(Boolean)\r\n      .join(\" \") || undefined;\r\n\r\n  const computedAriaLabelledBy =\r\n    ariaLabelledBy ?? (!ariaLabel ? legendId : undefined);\r\n\r\n  const labelClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.swatch,\r\n        classMap[size],\r\n        classMap[shape],\r\n        disabled && classMap.disabled,\r\n      ),\r\n    [classMap, size, shape, disabled],\r\n  );\r\n\r\n  return (\r\n    <fieldset\r\n      className={combineClassNames(\r\n        classMap.color_picker,\r\n        invalid && classMap.invalid,\r\n        disabled && classMap.disabled,\r\n        className,\r\n      )}\r\n      disabled={disabled}\r\n      data-testid={testId}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={computedAriaLabelledBy}\r\n      aria-describedby={describedBy}\r\n      aria-invalid={invalid || undefined}\r\n    >\r\n      <legend\r\n        id={legendId}\r\n        className={combineClassNames(classMap.legend, hideLabel && \"sr_only\")}\r\n      >\r\n        {label}\r\n      </legend>\r\n\r\n      <div className={classMap.color_picker_grid} role=\"radiogroup\">\r\n        {colors.map((color, i) => {\r\n          const id = `${testId}-color-${i}`;\r\n          const optionLabelId = `${id}-label`;\r\n          const isSelected = selected === color.value;\r\n          const optionDisabled = disabled || color.disabled;\r\n\r\n          return (\r\n            <label\r\n              key={`${color.value}-${i}`}\r\n              className={combineClassNames(\r\n                labelClass,\r\n                optionDisabled && classMap.disabled,\r\n              )}\r\n              htmlFor={id}\r\n              title={color.label}\r\n              data-testid={`${testId}-option-${color.value}`}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name={name}\r\n                id={id}\r\n                value={color.value}\r\n                checked={isSelected}\r\n                onChange={() => onChange(color.value)}\r\n                className={classMap.radio_input}\r\n                disabled={optionDisabled}\r\n                aria-describedby={describedBy}\r\n                aria-invalid={invalid || undefined}\r\n                aria-required={required || undefined}\r\n                aria-labelledby={optionLabelId}\r\n              />\r\n\r\n              <span id={optionLabelId} className={\"sr_only\"}>\r\n                {color.label}\r\n              </span>\r\n\r\n              <span\r\n                className={combineClassNames(\r\n                  classMap.preview,\r\n                  classMap[shape],\r\n                  isSelected && classMap.selected,\r\n                  optionDisabled && classMap.disabled,\r\n                  shadow && classMap[`shadow${capitalize(shadow)}`],\r\n                )}\r\n                style={{ backgroundColor: color.value }}\r\n                aria-hidden=\"true\"\r\n              />\r\n            </label>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {helperText && (\r\n        <div\r\n          id={helperTextId}\r\n          className={classMap.helper_text}\r\n          data-testid={`${testId}-helper-text`}\r\n        >\r\n          {helperText}\r\n        </div>\r\n      )}\r\n\r\n      {invalid && errorText && (\r\n        <div\r\n          id={errorTextId}\r\n          className={classMap.error_text}\r\n          data-testid={`${testId}-error-text`}\r\n          aria-live=\"polite\"\r\n        >\r\n          {errorText}\r\n        </div>\r\n      )}\r\n\r\n      {allowCustom && (\r\n        <input\r\n          type=\"color\"\r\n          className={classMap.custom_input}\r\n          value={selected}\r\n          onChange={(e) => onChange(e.target.value)}\r\n          aria-label={customInputAriaLabel}\r\n          aria-describedby={describedBy}\r\n          aria-invalid={invalid || undefined}\r\n          data-testid={`${testId}-custom-input`}\r\n          disabled={disabled}\r\n        />\r\n      )}\r\n    </fieldset>\r\n  );\r\n};\r\n\r\nColorPickerBase.displayName = \"ColorPickerBase\";\r\nexport default ColorPickerBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ColorPickerBase from \"../ColorPickerBase\";\r\nimport styles from \"./ColorPicker.module.scss\";\r\nimport { ColorPickerProps } from \"../ColorPicker.types\";\r\n\r\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => (\r\n  <ColorPickerBase {...props} classMap={styles} />\r\n);\r\nColorPicker.displayName = \"ColorPicker\";\r\nexport default ColorPicker;\r\n"],"names":["selected","getDefaultSize","getDefaultShadow","useMemo","combineClassNames","jsxs","jsx","capitalize"],"mappings":"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"}

package/dist/next/ColorPicker-CCzSZDjx.js

@@ -0,0 +1,233 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { c as getDefaultSize, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+const ColorPickerBase = ({
+  label = "Choose a color",
+  colors,
+  selected: selected2,
+  onChange,
+  name = "color-picker",
+  disabled = false,
+  size = getDefaultSize(),
+  shadow = getDefaultShadow(),
+  shape = "round",
+  allowCustom = false,
+  required = false,
+  invalid = false,
+  helperText,
+  errorText,
+  customInputAriaLabel = "Custom color picker",
+  hideLabel = false,
+  className = "",
+  classMap,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": testId = "color-picker"
+}) => {
+  const legendId = `${testId}-legend`;
+  const helperTextId = helperText ? `${testId}-helper-text` : void 0;
+  const errorTextId = errorText ? `${testId}-error-text` : void 0;
+  const describedBy = [ariaDescribedBy, helperTextId, invalid ? errorTextId : void 0].filter(Boolean).join(" ") || void 0;
+  const computedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? legendId : void 0);
+  const labelClass = useMemo(
+    () => combineClassNames(
+      classMap.swatch,
+      classMap[size],
+      classMap[shape],
+      disabled && classMap.disabled
+    ),
+    [classMap, size, shape, disabled]
+  );
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: combineClassNames(
+        classMap.color_picker,
+        invalid && classMap.invalid,
+        disabled && classMap.disabled,
+        className
+      ),
+      disabled,
+      "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": computedAriaLabelledBy,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid || void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "legend",
+          {
+            id: legendId,
+            className: combineClassNames(classMap.legend, hideLabel && "sr_only"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: classMap.color_picker_grid, role: "radiogroup", children: colors.map((color, i) => {
+          const id = `${testId}-color-${i}`;
+          const optionLabelId = `${id}-label`;
+          const isSelected = selected2 === color.value;
+          const optionDisabled = disabled || color.disabled;
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: combineClassNames(
+                labelClass,
+                optionDisabled && classMap.disabled
+              ),
+              htmlFor: id,
+              title: color.label,
+              "data-testid": `${testId}-option-${color.value}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name,
+                    id,
+                    value: color.value,
+                    checked: isSelected,
+                    onChange: () => onChange(color.value),
+                    className: classMap.radio_input,
+                    disabled: optionDisabled,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid || void 0,
+                    "aria-required": required || void 0,
+                    "aria-labelledby": optionLabelId
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { id: optionLabelId, className: "sr_only", children: color.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: combineClassNames(
+                      classMap.preview,
+                      classMap[shape],
+                      isSelected && classMap.selected,
+                      optionDisabled && classMap.disabled,
+                      shadow && classMap[`shadow${capitalize(shadow)}`]
+                    ),
+                    style: { backgroundColor: color.value },
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            },
+            `${color.value}-${i}`
+          );
+        }) }),
+        helperText && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: helperTextId,
+            className: classMap.helper_text,
+            "data-testid": `${testId}-helper-text`,
+            children: helperText
+          }
+        ),
+        invalid && errorText && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: errorTextId,
+            className: classMap.error_text,
+            "data-testid": `${testId}-error-text`,
+            "aria-live": "polite",
+            children: errorText
+          }
+        ),
+        allowCustom && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            className: classMap.custom_input,
+            value: selected2,
+            onChange: (e) => onChange(e.target.value),
+            "aria-label": customInputAriaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": invalid || void 0,
+            "data-testid": `${testId}-custom-input`,
+            disabled
+          }
+        )
+      ]
+    }
+  );
+};
+ColorPickerBase.displayName = "ColorPickerBase";
+const noScroll = "_noScroll_1bxnh_109";
+const errorMessage = "_errorMessage_1bxnh_110";
+const loadingContainer = "_loadingContainer_1bxnh_111";
+const hideScrollbar = "_hideScrollbar_1bxnh_103";
+const sr_only = "_sr_only_1bxnh_112";
+const color_picker = "_color_picker_1bxnh_637";
+const legend = "_legend_1bxnh_667";
+const grid = "_grid_1bxnh_686";
+const selected = "_selected_1bxnh_702";
+const swatch = "_swatch_1bxnh_708";
+const round = "_round_1bxnh_725";
+const square = "_square_1bxnh_728";
+const pill = "_pill_1bxnh_731";
+const xs = "_xs_1bxnh_735";
+const small = "_small_1bxnh_751";
+const medium = "_medium_1bxnh_767";
+const large = "_large_1bxnh_783";
+const xl = "_xl_1bxnh_799";
+const radio_input = "_radio_input_1bxnh_816";
+const preview = "_preview_1bxnh_820";
+const custom_input = "_custom_input_1bxnh_828";
+const circle = "_circle_1bxnh_843";
+const rounded = "_rounded_1bxnh_851";
+const shadowNone = "_shadowNone_1bxnh_855";
+const shadowLight = "_shadowLight_1bxnh_859";
+const shadowMedium = "_shadowMedium_1bxnh_863";
+const shadowStrong = "_shadowStrong_1bxnh_867";
+const shadowIntense = "_shadowIntense_1bxnh_871";
+const spin = "_spin_1bxnh_1";
+const pulse = "_pulse_1bxnh_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  color_picker,
+  legend,
+  grid,
+  selected,
+  swatch,
+  round,
+  square,
+  pill,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  radio_input,
+  preview,
+  custom_input,
+  circle,
+  rounded,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1bxnh_1",
+  "slide-up": "_slide-up_1bxnh_1",
+  "spin-3d": "_spin-3d_1bxnh_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1bxnh_1",
+  "progress-grow": "_progress-grow_1bxnh_1",
+  "indeterminate-move": "_indeterminate-move_1bxnh_1",
+  "skeleton-loading": "_skeleton-loading_1bxnh_1"
+};
+const ColorPicker = (props) => /* @__PURE__ */ jsx(ColorPickerBase, { ...props, classMap: styles });
+ColorPicker.displayName = "ColorPicker";
+export {
+  ColorPicker as C
+};
+//# sourceMappingURL=ColorPicker-CCzSZDjx.js.map

package/dist/next/ColorPicker-CCzSZDjx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-CCzSZDjx.js","sources":["../../src/components/ColorPicker/ColorPickerBase.tsx","../../src/components/ColorPicker/next/ColorPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { ColorPickerBaseProps } from \"./ColorPicker.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ColorPickerBase: React.FC<ColorPickerBaseProps> = ({\r\n  label = \"Choose a color\",\r\n  colors,\r\n  selected,\r\n  onChange,\r\n  name = \"color-picker\",\r\n  disabled = false,\r\n  size = getDefaultSize(),\r\n  shadow = getDefaultShadow(),\r\n  shape = \"round\",\r\n  allowCustom = false,\r\n  required = false,\r\n  invalid = false,\r\n  helperText,\r\n  errorText,\r\n  customInputAriaLabel = \"Custom color picker\",\r\n  hideLabel = false,\r\n  className = \"\",\r\n  classMap,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"color-picker\",\r\n}) => {\r\n  const legendId = `${testId}-legend`;\r\n  const helperTextId = helperText ? `${testId}-helper-text` : undefined;\r\n  const errorTextId = errorText ? `${testId}-error-text` : undefined;\r\n\r\n  const describedBy =\r\n    [ariaDescribedBy, helperTextId, invalid ? errorTextId : undefined]\r\n      .filter(Boolean)\r\n      .join(\" \") || undefined;\r\n\r\n  const computedAriaLabelledBy =\r\n    ariaLabelledBy ?? (!ariaLabel ? legendId : undefined);\r\n\r\n  const labelClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.swatch,\r\n        classMap[size],\r\n        classMap[shape],\r\n        disabled && classMap.disabled,\r\n      ),\r\n    [classMap, size, shape, disabled],\r\n  );\r\n\r\n  return (\r\n    <fieldset\r\n      className={combineClassNames(\r\n        classMap.color_picker,\r\n        invalid && classMap.invalid,\r\n        disabled && classMap.disabled,\r\n        className,\r\n      )}\r\n      disabled={disabled}\r\n      data-testid={testId}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={computedAriaLabelledBy}\r\n      aria-describedby={describedBy}\r\n      aria-invalid={invalid || undefined}\r\n    >\r\n      <legend\r\n        id={legendId}\r\n        className={combineClassNames(classMap.legend, hideLabel && \"sr_only\")}\r\n      >\r\n        {label}\r\n      </legend>\r\n\r\n      <div className={classMap.color_picker_grid} role=\"radiogroup\">\r\n        {colors.map((color, i) => {\r\n          const id = `${testId}-color-${i}`;\r\n          const optionLabelId = `${id}-label`;\r\n          const isSelected = selected === color.value;\r\n          const optionDisabled = disabled || color.disabled;\r\n\r\n          return (\r\n            <label\r\n              key={`${color.value}-${i}`}\r\n              className={combineClassNames(\r\n                labelClass,\r\n                optionDisabled && classMap.disabled,\r\n              )}\r\n              htmlFor={id}\r\n              title={color.label}\r\n              data-testid={`${testId}-option-${color.value}`}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name={name}\r\n                id={id}\r\n                value={color.value}\r\n                checked={isSelected}\r\n                onChange={() => onChange(color.value)}\r\n                className={classMap.radio_input}\r\n                disabled={optionDisabled}\r\n                aria-describedby={describedBy}\r\n                aria-invalid={invalid || undefined}\r\n                aria-required={required || undefined}\r\n                aria-labelledby={optionLabelId}\r\n              />\r\n\r\n              <span id={optionLabelId} className={\"sr_only\"}>\r\n                {color.label}\r\n              </span>\r\n\r\n              <span\r\n                className={combineClassNames(\r\n                  classMap.preview,\r\n                  classMap[shape],\r\n                  isSelected && classMap.selected,\r\n                  optionDisabled && classMap.disabled,\r\n                  shadow && classMap[`shadow${capitalize(shadow)}`],\r\n                )}\r\n                style={{ backgroundColor: color.value }}\r\n                aria-hidden=\"true\"\r\n              />\r\n            </label>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {helperText && (\r\n        <div\r\n          id={helperTextId}\r\n          className={classMap.helper_text}\r\n          data-testid={`${testId}-helper-text`}\r\n        >\r\n          {helperText}\r\n        </div>\r\n      )}\r\n\r\n      {invalid && errorText && (\r\n        <div\r\n          id={errorTextId}\r\n          className={classMap.error_text}\r\n          data-testid={`${testId}-error-text`}\r\n          aria-live=\"polite\"\r\n        >\r\n          {errorText}\r\n        </div>\r\n      )}\r\n\r\n      {allowCustom && (\r\n        <input\r\n          type=\"color\"\r\n          className={classMap.custom_input}\r\n          value={selected}\r\n          onChange={(e) => onChange(e.target.value)}\r\n          aria-label={customInputAriaLabel}\r\n          aria-describedby={describedBy}\r\n          aria-invalid={invalid || undefined}\r\n          data-testid={`${testId}-custom-input`}\r\n          disabled={disabled}\r\n        />\r\n      )}\r\n    </fieldset>\r\n  );\r\n};\r\n\r\nColorPickerBase.displayName = \"ColorPickerBase\";\r\nexport default ColorPickerBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ColorPickerBase from \"../ColorPickerBase\";\r\nimport styles from \"./ColorPicker.module.scss\";\r\nimport { ColorPickerProps } from \"../ColorPicker.types\";\r\n\r\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => (\r\n  <ColorPickerBase {...props} classMap={styles} />\r\n);\r\nColorPicker.displayName = \"ColorPicker\";\r\nexport default ColorPicker;\r\n"],"names":["selected"],"mappings":"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"}

package/dist/next/ColorPicker.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const ColorPicker = require("./ColorPicker-wDTOI4jh.cjs");
+const ColorPicker = require("./ColorPicker-ByPKPsMz.cjs");
 module.exports = ColorPicker.ColorPicker;
 //# sourceMappingURL=ColorPicker.cjs.js.map

package/dist/next/ColorPicker.js

@@ -1,4 +1,4 @@
-import { C } from "./ColorPicker-C4n_QzLE.js";
+import { C } from "./ColorPicker-CCzSZDjx.js";
 export {
   C as default
 };