@hyphen/hyphen-components 7.3.3 → 7.3.4

package/dist/hyphen-components.cjs.development.js

@@ -288,6 +288,15 @@ var src_exports = {};
 __export(src_exports, {
   Alert: () => Alert,
   AspectRatio: () => AspectRatio,
+  BACKGROUND_COLOR_OPTIONS: () => BACKGROUND_COLOR_OPTIONS,
+  BASE_COLOR_NAMES: () => BASE_COLOR_NAMES,
+  BASE_COLOR_OPTIONS: () => BASE_COLOR_OPTIONS,
+  BORDER_COLOR_OPTIONS: () => BORDER_COLOR_OPTIONS,
+  BORDER_RADIUS_OPTIONS: () => BORDER_RADIUS_OPTIONS,
+  BORDER_SIZE_OPTIONS: () => BORDER_SIZE_OPTIONS,
+  BOX_SHADOW_OPTIONS: () => BOX_SHADOW_OPTIONS,
+  BREAKPOINTS: () => BREAKPOINTS,
+  BREAKPOINT_OPTIONS: () => BREAKPOINT_OPTIONS,
   Badge: () => Badge,
   Box: () => Box,
   Button: () => Button,
@@ -322,6 +331,10 @@ __export(src_exports, {
   DropdownMenuSubContent: () => DropdownMenuSubContent,
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  FONT_COLOR_OPTIONS: () => FONT_COLOR_OPTIONS,
+  FONT_FAMILY_OPTIONS: () => FONT_FAMILY_OPTIONS,
+  FONT_SIZE_OPTIONS: () => FONT_SIZE_OPTIONS,
+  FONT_WEIGHT_OPTIONS: () => FONT_WEIGHT_OPTIONS,
   FormControl: () => FormControl,
   FormLabel: () => FormLabel,
   FormikCheckboxInput: () => FormikCheckboxInput,
@@ -338,8 +351,12 @@ __export(src_exports, {
   FormikTimePickerNative: () => FormikTimePickerNative,
   FormikToggleGroup: () => FormikToggleGroup,
   FormikToggleGroupMulti: () => FormikToggleGroupMulti,
+  HEADING_SIZE_OPTIONS: () => HEADING_SIZE_OPTIONS,
+  HEIGHT_OPTIONS: () => HEIGHT_OPTIONS,
   Heading: () => Heading,
+  ICON_NAMES: () => ICON_NAMES,
   Icon: () => Icon,
+  LINE_HEIGHT_OPTIONS: () => LINE_HEIGHT_OPTIONS,
   Modal: () => Modal,
   ModalBaseComponent: () => ModalBaseComponent,
   Pagination: () => Pagination,
@@ -352,6 +369,7 @@ __export(src_exports, {
   RangeInput: () => RangeInput,
   ResponsiveContext: () => ResponsiveContext,
   ResponsiveProvider: () => ResponsiveProvider,
+  SPACING_OPTIONS: () => SPACING_OPTIONS,
   SelectInput: () => SelectInput,
   SelectInputInset: () => SelectInputInset,
   SelectInputNative: () => SelectInputNative,
@@ -393,8 +411,33 @@ __export(src_exports, {
   TooltipPortal: () => TooltipPortal,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  WIDTH_OPTIONS: () => WIDTH_OPTIONS,
+  Z_INDEX_OPTIONS: () => Z_INDEX_OPTIONS,
+  Z_INDEX_VALUES: () => Z_INDEX_VALUES,
   boxPropsKeys: () => boxPropsKeys,
   createRectRef: () => createRectRef,
+  cssShorthandToClasses: () => cssShorthandToClasses,
+  doesStringIncludeCssUnit: () => doesStringIncludeCssUnit,
+  filter: () => filter,
+  generateBaseClasses: () => generateBaseClasses,
+  generateResponsiveClasses: () => generateResponsiveClasses,
+  getAutoCompleteValue: () => getAutoCompleteValue,
+  getColumnKeys: () => getColumnKeys,
+  getDimensionClasses: () => getDimensionClasses,
+  getDimensionCss: () => getDimensionCss,
+  getDimensionStyles: () => getDimensionStyles,
+  getElementType: () => getElementType,
+  getFlexClasses: () => getFlexClasses,
+  getFlexCss: () => getFlexCss,
+  getFlexStyles: () => getFlexStyles,
+  handleReactRouterClick: () => handleReactRouterClick,
+  isFunction: () => isFunction,
+  isModifiedEvent: () => isModifiedEvent,
+  isValidSpacingValue: () => isValidSpacingValue,
+  mergeRefs: () => mergeRefs,
+  parsePropertyValue: () => parsePropertyValue,
+  prefersReducedMotion: () => prefersReducedMotion,
+  resolveValue: () => resolveValue,
   toast: () => toast,
   useBreakpoint: () => useBreakpoint,
   useDrawer: () => useDrawer,
@@ -2642,9 +2685,65 @@ var getColumnKeys = (columns) => {
   return columnKeys;
 };
 
+// src/lib/getFlexCss.ts
+var flexValues = ["initial", "auto", "unset", "none", "inherit"];
+function parsePropertyValue(value) {
+  return Number.isNaN(Number(value)) ? value : Number(value);
+}
+function getFlexStyles(value) {
+  if (value === void 0) return value;
+  const styles37 = {};
+  if (!value.includes(" ") && !flexValues.includes(value)) {
+    styles37.flex = value;
+    return styles37;
+  }
+  if (value.includes(" ")) {
+    const flexProps = value.split(" ");
+    styles37.flexGrow = parsePropertyValue(flexProps[0]);
+    if (flexProps.length === 2) {
+      if (doesStringIncludeCssUnit(flexProps[1])) {
+        styles37.flexBasis = parsePropertyValue(flexProps[1]);
+      } else {
+        styles37.flexShrink = parsePropertyValue(flexProps[1]);
+      }
+    } else if (flexProps.length === 3) {
+      styles37.flexShrink = parsePropertyValue(flexProps[1]);
+      styles37.flexBasis = parsePropertyValue(flexProps[2]);
+    }
+  }
+  return styles37;
+}
+function getFlexClasses(value) {
+  if (value === void 0 || value.split(" ").length > 1) return [];
+  const classes = [];
+  if (typeof value === "string" && !doesStringIncludeCssUnit(value) && Number.isNaN(Number(value))) {
+    classes.push(`flex-${value}`);
+  }
+  return classes;
+}
+function getFlexCss(value) {
+  return {
+    styles: getFlexStyles(value),
+    classes: getFlexClasses(value)
+  };
+}
+
 // src/lib/isFunction.ts
 var isFunction = (valOrFunction) => typeof valOrFunction === "function";
 
+// src/lib/mergeRefs.ts
+function mergeRefs(refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 // src/lib/prefersReducedMotion.ts
 var prefersReducedMotion = /* @__PURE__ */ (() => {
   let shouldReduceMotion;
@@ -2657,15 +2756,31 @@ var prefersReducedMotion = /* @__PURE__ */ (() => {
   };
 })();
 
+// src/lib/reactRouterClickHandler.ts
+var isModifiedEvent = (e) => !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+var handleReactRouterClick = (event, onClick, target, navigate) => {
+  if (onClick) onClick(event);
+  if (!event.defaultPrevented && // onClick prevented default
+  event.button === 0 && // ignore everything but left clicks
+  (!target || target === "_self") && // let browser handle "target=_blank" etc.
+  !isModifiedEvent(event) && // ignore clicks with modifier keys
+  navigate) {
+    event.preventDefault();
+    navigate();
+  }
+};
+
 // src/lib/resolveValue.ts
 var resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction;
 
 // src/lib/react-children-utilities/filter.ts
 var import_react30 = require("react");
+var filter = (children, filterFn) => import_react30.Children.toArray(children).filter(filterFn);
 
 // src/lib/tokens.ts
 var import_variables = __toESM(require("@hyphen/hyphen-design-tokens/build/json/variables"));
 var import_icons = require("@hyphen/hyphen-design-tokens/build/assets/icons");
+var ICON_NAMES = import_icons.ICON_NAMES;
 var BORDER_RADIUS_OPTIONS = Object.keys(
   import_variables.default.size["border-radius"]
 );
@@ -6230,6 +6345,15 @@ var useTheme = () => {
 0 && (module.exports = {
   Alert,
   AspectRatio,
+  BACKGROUND_COLOR_OPTIONS,
+  BASE_COLOR_NAMES,
+  BASE_COLOR_OPTIONS,
+  BORDER_COLOR_OPTIONS,
+  BORDER_RADIUS_OPTIONS,
+  BORDER_SIZE_OPTIONS,
+  BOX_SHADOW_OPTIONS,
+  BREAKPOINTS,
+  BREAKPOINT_OPTIONS,
   Badge,
   Box,
   Button,
@@ -6264,6 +6388,10 @@ var useTheme = () => {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  FONT_COLOR_OPTIONS,
+  FONT_FAMILY_OPTIONS,
+  FONT_SIZE_OPTIONS,
+  FONT_WEIGHT_OPTIONS,
   FormControl,
   FormLabel,
   FormikCheckboxInput,
@@ -6280,8 +6408,12 @@ var useTheme = () => {
   FormikTimePickerNative,
   FormikToggleGroup,
   FormikToggleGroupMulti,
+  HEADING_SIZE_OPTIONS,
+  HEIGHT_OPTIONS,
   Heading,
+  ICON_NAMES,
   Icon,
+  LINE_HEIGHT_OPTIONS,
   Modal,
   ModalBaseComponent,
   Pagination,
@@ -6294,6 +6426,7 @@ var useTheme = () => {
   RangeInput,
   ResponsiveContext,
   ResponsiveProvider,
+  SPACING_OPTIONS,
   SelectInput,
   SelectInputInset,
   SelectInputNative,
@@ -6335,8 +6468,33 @@ var useTheme = () => {
   TooltipPortal,
   TooltipProvider,
   TooltipTrigger,
+  WIDTH_OPTIONS,
+  Z_INDEX_OPTIONS,
+  Z_INDEX_VALUES,
   boxPropsKeys,
   createRectRef,
+  cssShorthandToClasses,
+  doesStringIncludeCssUnit,
+  filter,
+  generateBaseClasses,
+  generateResponsiveClasses,
+  getAutoCompleteValue,
+  getColumnKeys,
+  getDimensionClasses,
+  getDimensionCss,
+  getDimensionStyles,
+  getElementType,
+  getFlexClasses,
+  getFlexCss,
+  getFlexStyles,
+  handleReactRouterClick,
+  isFunction,
+  isModifiedEvent,
+  isValidSpacingValue,
+  mergeRefs,
+  parsePropertyValue,
+  prefersReducedMotion,
+  resolveValue,
   toast,
   useBreakpoint,
   useDrawer,