@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/ColorPicker/Picker/Picker.styles.js

@@ -0,0 +1,63 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const name = "HvColorPicker-Picker";
+const { staticClasses, useClasses } = createClasses(name, {
+  pickers: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  saturation: {
+    width: "232px",
+    height: "140px",
+    marginRight: "0px",
+    position: "relative",
+    overflow: "visible",
+    "& > div": {
+      borderRadius: theme.radii.base,
+      "& .saturation-white": {
+        borderRadius: theme.radii.base,
+        "& .saturation-black": {
+          borderRadius: theme.radii.base
+        }
+      }
+    }
+  },
+  saturationPointer: {
+    width: "8px",
+    height: "8px",
+    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4)`,
+    borderRadius: "50%",
+    transform: "translate(-3px, -3px)"
+  },
+  hue: {
+    height: "8px",
+    width: "232px",
+    position: "relative",
+    overflow: "visible",
+    marginTop: "18px",
+    "& .hue-horizontal": {
+      borderRadius: `calc(2*${theme.radii.base})`
+    }
+  },
+  hueSlider: {
+    width: "12px",
+    height: "12px",
+    background: "transparent",
+    boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
+    marginLeft: "0px",
+    border: "2px solid #fff",
+    borderRadius: theme.radii.circle,
+    transform: "translate(0, -2px)"
+  },
+  title: {
+    fontWeight: theme.fontWeights.semibold,
+    marginBottom: 8
+  },
+  fields: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Picker.styles.js.map

package/dist/esm/ColorPicker/Picker/Picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.styles.js","sources":["../../../../src/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  pickers: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  saturation: {\n    width: \"232px\",\n    height: \"140px\",\n    marginRight: \"0px\",\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.radii.base,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.radii.base,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.radii.base,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: \"8px\",\n    height: \"8px\",\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: \"50%\",\n    transform: \"translate(-3px, -3px)\",\n  },\n  hue: {\n    height: \"8px\",\n    width: \"232px\",\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: \"18px\",\n\n    \"& .hue-horizontal\": {\n      borderRadius: `calc(2*${theme.radii.base})`,\n    },\n  },\n  hueSlider: {\n    width: \"12px\",\n    height: \"12px\",\n    background: \"transparent\",\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: \"0px\",\n    border: \"2px solid #fff\",\n    borderRadius: theme.radii.circle,\n    transform: \"translate(0, -2px)\",\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  fields: {},\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAE1B,uBAAuB;AAAA,QACrB,cAAc,MAAM,MAAM;AAAA,QAE1B,uBAAuB;AAAA,UACrB,cAAc,MAAM,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,cAAc,UAAU,MAAM,MAAM,IAAI;AAAA,IAC1C;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ,CAAC;AACX,CAAC;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Swatch } from "react-color/lib/components/common";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./PresetColors.styles.js";
+import { staticClasses } from "./PresetColors.styles.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const PresetColors = (props) => {
+  const {
+    onClick,
+    colors,
+    title,
+    className,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerPresetColors", props);
+  const { classes, cx } = useClasses(classesProp);
+  const handleClick = (hex) => {
+    onClick({
+      hex,
+      source: "hex"
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), children: [
+    title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
+    /* @__PURE__ */ jsx("div", { className: classes.colors, children: colors.map((color, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes.swatchWrap,
+        children: /* @__PURE__ */ jsx(
+          Swatch,
+          {
+            color,
+            onClick: handleClick,
+            focusStyle: {
+              boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
+            }
+          }
+        )
+      },
+      `recommended-color-${color}-${index}`
+    )) })
+  ] });
+};
+export {
+  PresetColors,
+  staticClasses as colorPickerPresetColorsClasses
+};
+//# sourceMappingURL=PresetColors.js.map

package/dist/esm/ColorPicker/PresetColors/PresetColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = (props: PresetColorsProps) => {\n  const {\n    onClick,\n    colors,\n    title,\n    className,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\n          >\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,6BAA6B,KAAK;AACtD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,cAAc,CAAC,QAAgB;AAC3B,YAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAW,QAAQ,QACrB,UAAO,OAAA,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,cACV,WAAW,4CAA4C,KAAK;AAAA,YAC9D;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MATK,qBAAqB,KAAK,IAAI,KAAK;AAAA,IAW3C,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js

@@ -0,0 +1,31 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const name = "HvColorPicker-PresetColors";
+const { staticClasses, useClasses } = createClasses(name, {
+  root: { width: "232px" },
+  colors: {
+    display: "flex",
+    flexWrap: "wrap",
+    position: "relative",
+    width: "calc(100% + 8px)",
+    margin: "-4px -4px",
+    padding: 0
+  },
+  title: {
+    fontWeight: theme.fontWeights.semibold,
+    marginBottom: 8
+  },
+  swatchWrap: {
+    width: "32px",
+    height: "32px",
+    margin: "4px",
+    "& > span > div": {
+      borderRadius: theme.radii.base
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=PresetColors.styles.js.map

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.styles.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: { width: \"232px\" },\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: \"calc(100% + 8px)\",\n    margin: \"-4px -4px\",\n    padding: 0,\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  swatchWrap: {\n    width: \"32px\",\n    height: \"32px\",\n    margin: \"4px\",\n\n    \"& > span > div\": {\n      borderRadius: theme.radii.base,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
+import { Swatch } from "react-color/lib/components/common";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./SavedColors.styles.js";
+import { staticClasses } from "./SavedColors.styles.js";
+import { HvButton } from "../../Button/Button.js";
+const SavedColors = (props) => {
+  const {
+    colors,
+    onClickColor,
+    onAddColor,
+    onRemoveColor,
+    deleteButtonAriaLabel,
+    addButtonAriaLabel,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerSavedColors", props);
+  const { classes } = useClasses(classesProp);
+  const handleClick = (hex) => {
+    onClickColor({
+      hex,
+      source: "hex"
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        className: classes.addButton,
+        variant: "secondarySubtle",
+        icon: true,
+        onClick: onAddColor,
+        "aria-label": addButtonAriaLabel,
+        children: /* @__PURE__ */ jsx(Add, { "aria-hidden": true })
+      }
+    ),
+    colors.map((color, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classes.swatchRoot,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classes.swatchWrap, children: /* @__PURE__ */ jsx(
+            Swatch,
+            {
+              color,
+              onClick: handleClick,
+              focusStyle: {
+                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: classes.removeButtonRoot, children: /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              className: classes.removeButton,
+              variant: "secondarySubtle",
+              onClick: () => onRemoveColor(color, index),
+              tabIndex: 0,
+              "aria-label": deleteButtonAriaLabel,
+              children: /* @__PURE__ */ jsx(CloseXS, { "aria-hidden": true, iconSize: "XS" })
+            }
+          ) })
+        ]
+      },
+      `saved-color-${color}-${index}`
+    ))
+  ] });
+};
+export {
+  SavedColors,
+  staticClasses as colorPickerSavedColorsClasses
+};
+//# sourceMappingURL=SavedColors.js.map

package/dist/esm/ColorPicker/SavedColors/SavedColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SavedColors.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"../../Button\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n  const {\n    colors,\n    onClickColor,\n    onAddColor,\n    onRemoveColor,\n    deleteButtonAriaLabel,\n    addButtonAriaLabel,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA2Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAY;AAAA,QAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,UAAU;AAAA,cACV,cAAY;AAAA,cAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,MAAK;AAAA,YAAA;AAAA,UAAA,GAEvC;AAAA,QAAA;AAAA,MAAA;AAAA,MAtBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAAA,CAwBrC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js

@@ -0,0 +1,58 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const name = "HvColorPicker-SavedColors";
+const { staticClasses, useClasses } = createClasses(name, {
+  addButton: {
+    margin: "4px",
+    width: "32px",
+    height: "32px"
+  },
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    position: "relative",
+    alignItems: "center",
+    padding: 0,
+    width: "calc(100% + 8px)",
+    margin: "-4px -4px"
+  },
+  swatchRoot: { position: "relative" },
+  swatchWrap: {
+    width: "32px",
+    height: "32px",
+    margin: "4px",
+    "& > span > div": {
+      borderRadius: theme.radii.base
+    }
+  },
+  removeButtonRoot: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 16,
+    width: 16,
+    background: theme.colors.atmo1,
+    borderRadius: theme.radii.base
+  },
+  removeButton: {
+    height: 16,
+    width: 16,
+    minWidth: 16,
+    minHeight: 16,
+    padding: 0,
+    margin: 0,
+    "& div > span": {
+      height: 16,
+      width: 16,
+      "& > div": { height: 16, width: 16 }
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=SavedColors.styles.js.map

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  addButton: {\n    margin: \"4px\",\n    width: \"32px\",\n    height: \"32px\",\n  },\n  root: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    alignItems: \"center\",\n    padding: 0,\n    width: \"calc(100% + 8px)\",\n    margin: \"-4px -4px\",\n  },\n  swatchRoot: { position: \"relative\" },\n  swatchWrap: {\n    width: \"32px\",\n    height: \"32px\",\n    margin: \"4px\",\n\n    \"& > span > div\": {\n      borderRadius: theme.radii.base,\n    },\n  },\n  removeButtonRoot: {\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 16,\n    width: 16,\n    background: theme.colors.atmo1,\n    borderRadius: theme.radii.base,\n  },\n  removeButton: {\n    height: 16,\n    width: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n\n    \"& div > span\": {\n      height: 16,\n      width: 16,\n\n      \"& > div\": { height: 16, width: 16 },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IACrC;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Container/Container.js

@@ -0,0 +1,62 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { theme } from "@hitachivantara/uikit-styles";
+import { useTheme } from "@mui/material/styles";
+import MuiContainer from "@mui/material/Container";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses, staticClasses } from "./Container.styles.js";
+const HvContainer = forwardRef(
+  (props, ref) => {
+    const {
+      maxWidth = false,
+      classes: classesProp,
+      className,
+      fixed,
+      disableGutters,
+      ...others
+    } = useDefaultProps("HvContainer", props);
+    const { classes, cx, css } = useClasses(classesProp);
+    const muiTheme = useTheme();
+    const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
+    const gutters = upMd ? {
+      // Increases specificity
+      [`&.${staticClasses.root}`]: {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      }
+    } : {
+      // Increases specificity
+      [`&.${staticClasses.root}`]: {
+        paddingLeft: theme.space.sm,
+        paddingRight: theme.space.sm
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      MuiContainer,
+      {
+        className: cx({ [css(gutters)]: !disableGutters }, className),
+        classes: {
+          root: classes.root,
+          disableGutters: classes.disableGutters,
+          fixed: classes.fixed,
+          maxWidthXs: classes.maxWidthXs,
+          maxWidthSm: classes.maxWidthSm,
+          maxWidthMd: classes.maxWidthMd,
+          maxWidthLg: classes.maxWidthLg,
+          maxWidthXl: classes.maxWidthXl
+        },
+        ref,
+        maxWidth,
+        fixed,
+        disableGutters,
+        ...others
+      }
+    );
+  }
+);
+export {
+  HvContainer,
+  staticClasses as containerClasses
+};
+//# sourceMappingURL=Container.js.map

package/dist/esm/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../src/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n  ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps extends Omit<MuiContainerProps, \"classes\"> {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes: classesProp,\n      className,\n      fixed,\n      disableGutters,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const muiTheme = useTheme();\n\n    const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n    const gutters = upMd\n      ? {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n          },\n        }\n      : {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.space.sm,\n            paddingRight: theme.space.sm,\n          },\n        };\n\n    return (\n      <MuiContainer\n        className={cx({ [css(gutters)]: !disableGutters }, className)}\n        classes={{\n          root: classes.root,\n          disableGutters: classes.disableGutters,\n          fixed: classes.fixed,\n          maxWidthXs: classes.maxWidthXs,\n          maxWidthSm: classes.maxWidthSm,\n          maxWidthMd: classes.maxWidthMd,\n          maxWidthLg: classes.maxWidthLg,\n          maxWidthXl: classes.maxWidthXl,\n        }}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        disableGutters={disableGutters}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AA6CO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,UAAM,WAAW;AAEjB,UAAM,OAAO,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAExD,UAAM,UAAU,OACZ;AAAA;AAAA,MAEE,CAAC,KAAK,cAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,QAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC/B;AAAA,IAAA,IAEF;AAAA;AAAA,MAEE,CAAC,KAAK,cAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAa,MAAM,MAAM;AAAA,QACzB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA,IAAA;AAIJ,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,GAAG,SAAS;AAAA,QAC5D,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,gBAAgB,QAAQ;AAAA,UACxB,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/Container/Container.styles.js

@@ -0,0 +1,16 @@
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvContainer", {
+  root: {},
+  disableGutters: {},
+  fixed: {},
+  maxWidthXs: {},
+  maxWidthSm: {},
+  maxWidthMd: {},
+  maxWidthLg: {},
+  maxWidthXl: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Container.styles.js.map

package/dist/esm/Container/Container.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.styles.js","sources":["../../../src/Container/Container.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvContainer\", {\n  root: {},\n  disableGutters: {},\n  fixed: {},\n  maxWidthXs: {},\n  maxWidthSm: {},\n  maxWidthMd: {},\n  maxWidthLg: {},\n  maxWidthXl: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AACf,CAAC;"}

package/dist/esm/Controls/Controls.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Children } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { setId } from "../utils/setId.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { HvControlsContextProvider } from "./context/ControlsContext.js";
+import { useClasses } from "./Controls.styles.js";
+import { staticClasses } from "./Controls.styles.js";
+import { HvMultiButton } from "../MultiButton/MultiButton.js";
+import { HvButton } from "../Button/Button.js";
+const HvControls = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    views,
+    callbacks,
+    selectedView,
+    defaultView,
+    children,
+    hideViewSwitcher = false,
+    onViewChange
+  } = useDefaultProps("HvControls", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [currentView, setCurrentView] = useControlled(
+    selectedView,
+    defaultView
+  );
+  const onViewChangeHandler = (evt, btnId) => {
+    setCurrentView(btnId);
+    onViewChange?.(evt, btnId);
+  };
+  const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);
+  const onSortHandler = (value) => callbacks?.setSortBy?.([
+    {
+      id: value?.accessor,
+      desc: value?.desc
+    }
+  ]);
+  const childrenCount = Children.count(children);
+  const childrenArray = Children.toArray(children);
+  const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;
+  const leftChildren = childrenArray.slice(0, childrenIndexCut);
+  const rightChildren = childrenArray.slice(
+    childrenIndexCut,
+    childrenCount || 0
+  );
+  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), children: /* @__PURE__ */ jsxs(
+    HvControlsContextProvider,
+    {
+      value: {
+        onSearch: onSearchHandler,
+        onSort: onSortHandler
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
+        /* @__PURE__ */ jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
+          rightChildren,
+          views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { id: setId(id, "view-multi-button"), children: views.map(({ id: btnId, icon, ...others }) => /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              id: btnId,
+              icon: true,
+              selected: currentView === btnId,
+              onClick: (evt) => onViewChangeHandler(evt, btnId),
+              ...others,
+              children: icon
+            },
+            btnId
+          )) })
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  HvControls,
+  staticClasses as controlsClasses
+};
+//# sourceMappingURL=Controls.js.map

package/dist/esm/Controls/Controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.js","sources":["../../../src/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { HvMultiButton } from \"../MultiButton\";\nimport { setId } from \"../utils/setId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTableInstance } from \"../Table/hooks/useTable\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA2Da,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,sBAAsB,CAC1B,KACA,UACG;AACH,mBAAe,KAAK;AACpB,mBAAe,KAAK,KAAK;AAAA,EAAA;AAG3B,QAAM,kBAAkB,CAAC,UAAe,WAAW,kBAAkB,KAAK;AAC1E,QAAM,gBAAgB,CAAC,UACrB,WAAW,YAAY;AAAA,IACrB;AAAA,MACE,IAAI,OAAO;AAAA,MACX,MAAM,OAAO;AAAA,IACf;AAAA,EAAA,CACD;AAEG,QAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,mBACJ,gBAAgB,IAAI,KAAK,MAAM,gBAAgB,GAAG,IAAI;AACxD,QAAM,eAAe,cAAc,MAAM,GAAG,gBAAgB;AAC5D,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAIjB,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAChD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,WAAW,GACpD,UACH,aAAA,CAAA;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,YAAY,GACrD,UAAA;AAAA,UAAA;AAAA,UACA,SAAS,CAAC,oBAAoB,OAAO,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAI,MAAM,IAAI,mBAAmB,GAC7C,UAAA,MAAM,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,GAAG,OAAA,MAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cAEJ,MAAI;AAAA,cACJ,UAAU,gBAAgB;AAAA,cAC1B,SAAS,CAAC,QAAQ,oBAAoB,KAAK,KAAK;AAAA,cAC/C,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,YANI;AAAA,UAQR,CAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Controls/Controls.styles.js

@@ -0,0 +1,16 @@
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvControls", {
+  root: {
+    display: "inline-flex",
+    width: "100%",
+    justifyContent: "space-between"
+  },
+  section: { display: "inline-flex", alignItems: "flex-end", gap: 10 },
+  rightSection: {},
+  leftSection: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Controls.styles.js.map

package/dist/esm/Controls/Controls.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.styles.js","sources":["../../../src/Controls/Controls.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvControls\", {\n  root: {\n    display: \"inline-flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  section: { display: \"inline-flex\", alignItems: \"flex-end\", gap: 10 },\n  rightSection: {},\n  leftSection: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS,EAAE,SAAS,eAAe,YAAY,YAAY,KAAK,GAAG;AAAA,EACnE,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAChB,CAAC;"}

package/dist/esm/Controls/LeftControl/LeftControl.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { setId } from "../../utils/setId.js";
+import { useClasses } from "./LeftControl.styles.js";
+import { staticClasses } from "./LeftControl.styles.js";
+import { HvControlsContext } from "../context/ControlsContext.js";
+import { HvInput } from "../../Input/Input.js";
+const HvLeftControl = ({
+  id,
+  classes: classesProp,
+  className,
+  children,
+  placeholder = "Search",
+  onSearch,
+  hideSearch = false,
+  searchProps,
+  ...others
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  const { onSearch: onSearchHandler } = useContext(HvControlsContext);
+  const onChangeFilter = (e, value) => {
+    onSearch?.(e, value);
+    onSearchHandler?.(value);
+  };
+  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+    !hideSearch && /* @__PURE__ */ jsx(
+      HvInput,
+      {
+        id: setId(id, "search-input"),
+        type: "search",
+        placeholder,
+        onChange: onChangeFilter,
+        ...searchProps
+      }
+    ),
+    children
+  ] });
+};
+export {
+  HvLeftControl,
+  staticClasses as leftControlClasses
+};
+//# sourceMappingURL=LeftControl.js.map

package/dist/esm/Controls/LeftControl/LeftControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftControl.js","sources":["../../../../src/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./LeftControl.styles\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport { staticClasses as leftControlClasses };\n\nexport type HvLeftControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLeftControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSearch?: boolean;\n  /** placeholder of the input */\n  placeholder?: string;\n  /** Callback called when a search action occurs */\n  onSearch?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** Extra props passed to input */\n  searchProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLeftControlClasses;\n}\n\nexport const HvLeftControl = ({\n  id,\n  classes: classesProp,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter: HvInputProps[\"onChange\"] = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChangeFilter}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAU,gBAAgB,IAAI,WAAW,iBAAiB;AAE5D,QAAA,iBAA2C,CAAC,GAAG,UAAU;AAC7D,eAAW,GAAG,KAAK;AACnB,sBAAkB,KAAK;AAAA,EAAA;AAIvB,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,cAAc;AAAA,QAC5B,MAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/Controls/LeftControl/LeftControl.styles.js

@@ -0,0 +1,9 @@
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvLeftControl", {
+  root: { display: "inline-flex", gap: 10 }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=LeftControl.styles.js.map

package/dist/esm/Controls/LeftControl/LeftControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftControl.styles.js","sources":["../../../../src/Controls/LeftControl/LeftControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLeftControl\", {\n  root: { display: \"inline-flex\", gap: 10 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAC1C,CAAC;"}

package/dist/esm/Controls/RightControl/RightControl.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useState, useContext } from "react";
+import { setId } from "../../utils/setId.js";
+import { useClasses } from "./RightControl.styles.js";
+import { staticClasses } from "./RightControl.styles.js";
+import { HvControlsContext } from "../context/ControlsContext.js";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
+const HvRightControl = ({
+  id,
+  classes: classesProp,
+  className,
+  children,
+  values,
+  onSort,
+  hideSortBy = false,
+  sortProps,
+  ...others
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  const [dropDownValues, setDropdownValues] = useState(values);
+  const { onSort: onSortHandler } = useContext(HvControlsContext);
+  const handleChangeSort = (value) => {
+    onSort?.(value);
+    onSortHandler?.(value);
+    setDropdownValues(
+      (prevValues) => prevValues?.map((prevValue) => ({
+        ...prevValue,
+        selected: prevValue.id === value.id
+      }))
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+    !hideSortBy && /* @__PURE__ */ jsx(
+      HvDropdown,
+      {
+        id: setId(id, "sort-by-dropdown"),
+        values: dropDownValues,
+        className: classes.sortDropdown,
+        onChange: handleChangeSort,
+        singleSelectionToggle: false,
+        ...sortProps
+      }
+    ),
+    children
+  ] });
+};
+export {
+  HvRightControl,
+  staticClasses as rightControlClasses
+};
+//# sourceMappingURL=RightControl.js.map