@welcome-ui/utils/dist/index.js

Customizable design system with react • styled-components • styled-system and ariakit.

"use client"
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  FIELD_ICON_SIZE: () => FIELD_ICON_SIZE,
  HideFocusRingsRoot: () => HideFocusRingsRoot,
  cardStyles: () => cardStyles,
  centerContent: () => centerContent,
  clamp: () => clamp,
  createEvent: () => createEvent,
  defaultFieldStyles: () => defaultFieldStyles,
  formatBytes: () => formatBytes,
  getMax: () => getMax,
  hexToRGB: () => hexToRGB,
  hexToRGBA: () => hexToRGBA,
  hideFocusRingsDataAttribute: () => hideFocusRingsDataAttribute,
  overflowEllipsis: () => overflowEllipsis,
  setRef: () => setRef,
  throttle: () => throttle,
  useCreatePortal: () => useCreatePortal,
  useForkRef: () => useForkRef,
  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
  useNextFrame: () => useNextFrame,
  useViewportSize: () => useViewportSize,
  validateFileSize: () => validateFileSize,
  validateImage: () => validateImage,
  validateMimeType: () => validateMimeType,
  wrapChildren: () => wrapChildren
});
module.exports = __toCommonJS(src_exports);

// src/card-styles.ts
var import_styled_components = require("@xstyled/styled-components");
var cardStyles = () => import_styled_components.css`
  ${(0, import_styled_components.th)("defaultCards")};
`;

// src/center-content.ts
var import_styled_components2 = require("@xstyled/styled-components");
var centerContent = import_styled_components2.css`
  display: flex;
  align-items: center;
  justify-content: center;
`;

// src/clamp.ts
var clamp = (value, min, max) => Math.min(Math.max(value, min), max);

// src/create-event.ts
var createEvent = (props) => ({
  preventDefault: () => null,
  target: { ...props }
});

// src/field-styles.ts
var import_styled_components3 = require("@xstyled/styled-components");
var FIELD_ICON_SIZE = {
  xs: "xs",
  sm: "sm",
  md: "sm",
  lg: "sm"
};
var defaultFieldStyles = ({
  iconPlacement,
  isClearable,
  size,
  transparent,
  variant
}) => {
  const iconSize = FIELD_ICON_SIZE[size];
  return import_styled_components3.css`
    ${(0, import_styled_components3.th)("defaultFields.default")};
    ${variant && (0, import_styled_components3.th)(`defaultFields.variants.${variant}`)};
    width: 100%;
    transition: medium;
    appearance: none;
    ${size && (0, import_styled_components3.th)(`defaultFields.sizes.${size}`)};

    ${/* left icon or both */
  (iconPlacement === "left" || iconPlacement === "both") && import_styled_components3.css`
        padding-left: calc(
          ${(0, import_styled_components3.th)(`defaultFields.sizes.${size}.paddingLeft`)} + ${(0, import_styled_components3.th)(`icons.${iconSize}`)} +
            ${(0, import_styled_components3.th)("space.sm")}
        );
      `};

    ${/* is clearable or right icon */
  (isClearable || iconPlacement === "right" || iconPlacement === "both") && import_styled_components3.css`
        padding-right: calc(
          ${(0, import_styled_components3.th)(`defaultFields.sizes.${size}.paddingLeft`)} + ${(0, import_styled_components3.th)(`icons.${iconSize}`)} +
            ${(0, import_styled_components3.th)("space.sm")}
        );
      `};

    ${/* is clearable and got a right/both icon */
  isClearable && (iconPlacement === "right" || iconPlacement === "both") && import_styled_components3.css`
        padding-right: calc(
          ${(0, import_styled_components3.th)(`defaultFields.sizes.${size}.paddingLeft`)} + ${(0, import_styled_components3.th)(`icons.${iconSize}`)} +
            ${(0, import_styled_components3.th)(`icons.${iconSize}`)} + ${(0, import_styled_components3.th)("space.sm")} + ${(0, import_styled_components3.th)("space.sm")}
        );
      `};

    &:hover {
      ${!variant && (0, import_styled_components3.th)("defaultFields.hover.default")};
    }

    ${!variant && transparent && import_styled_components3.css`
      border-color: transparent;
      background-color: transparent;

      &:hover {
        ${(0, import_styled_components3.th)("defaultFields.hover.transparency")};
      }
    `}

    &::placeholder {
      ${(0, import_styled_components3.th)("defaultFields.placeholder")};
    }

    &:focus {
      ${!variant && (0, import_styled_components3.th)("defaultFields.focused.default")};
      ${variant === "danger" && (0, import_styled_components3.th)("defaultFields.focused.danger")};
      ${variant === "warning" && (0, import_styled_components3.th)("defaultFields.focused.warning")};
      ${variant === "success" && (0, import_styled_components3.th)("defaultFields.focused.success")};
    }

    &[disabled] {
      ${(0, import_styled_components3.th)("defaultFields.disabled")};
    }

    &:invalid,
    &:-moz-submit-invalid,
    &:-moz-ui-invalid {
      box-shadow: none;
    }
  `;
};

// src/format-bytes.ts
var formatBytes = (bytes, decimals = 2) => {
  if (bytes === 0) {
    return "0 Bytes";
  }
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
};

// src/get-max-width-height.ts
var getMax = (width, height = width) => {
  const widthValue = parseInt(width, 10);
  const heightValue = parseInt(height, 10);
  const diff = widthValue - heightValue;
  return diff >= 0 ? width : height;
};

// src/hex-to-rgb.ts
var getHexValueAtLocation = (value, start, count) => {
  return parseInt(value.substring(start, count), 16);
};
var isValidHex = (hex) => /(^[0-9a-fA-F]{6}$)|(^[0-9a-fA-F]{3}$)/.test(hex);
var hexToRGB = (hex) => {
  if (!hex) {
    return;
  }
  hex = hex.replace("#", "");
  if (!isValidHex(hex)) {
    return;
  }
  if (hex.length === 3) {
    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
  }
  const hexToR = (hex2) => getHexValueAtLocation(hex2, 0, 2);
  const hexToG = (hex2) => getHexValueAtLocation(hex2, 2, 4);
  const hexToB = (hex2) => getHexValueAtLocation(hex2, 4, 6);
  return `${hexToR(hex)}, ${hexToG(hex)}, ${hexToB(hex)}`;
};

// src/hex-to-rgba.ts
var hexToRGBA = (hex, transparency = 1) => {
  if (!hex)
    return;
  if (!hex.startsWith("#"))
    return hex;
  const toRgb = hexToRGB(hex);
  return `rgba(${toRgb}, ${transparency})`;
};

// src/hide-focus-rings-root.tsx
var import_react = __toESM(require("react"));
var import_styled_components4 = require("@xstyled/styled-components");
var hideFocusRingsDataAttribute = "data-wui-hidefocusrings";
var HideFocusRingGlobalStyles = (0, import_styled_components4.createGlobalStyle)(
  () => import_styled_components4.css`
    [
${hideFocusRingsDataAttribute}] *:focus {
      outline: none;
    }
  `
);
var HideFocusRingsRoot = ({
  children,
  reactRootId
}) => {
  const [hideFocusRings, setHideFocusRings] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => {
    const eventName = hideFocusRings ? "keydown" : "mousemove";
    const toggleFocusRings = () => setHideFocusRings((x) => !x);
    window.addEventListener(eventName, toggleFocusRings);
    const rootElement = document.getElementById(reactRootId);
    if (rootElement) {
      hideFocusRings ? rootElement.setAttribute(hideFocusRingsDataAttribute, "true") : rootElement.removeAttribute(hideFocusRingsDataAttribute);
    }
    return () => {
      window.removeEventListener(eventName, toggleFocusRings);
    };
  }, [hideFocusRings, reactRootId]);
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(HideFocusRingGlobalStyles, null), children);
};

// src/overflow-ellipsis.ts
var import_styled_components5 = require("@xstyled/styled-components");
var overflowEllipsis = import_styled_components5.css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

// src/throttle.ts
var throttle = (callback, wait, leading = true) => {
  let timeout = null;
  let lastArgs = null;
  return (...args) => {
    const next = () => {
      callback(...lastArgs);
      timeout = null;
    };
    lastArgs = args;
    if (!timeout) {
      if (leading) {
        next();
      }
      timeout = setTimeout(next, wait);
    }
  };
};

// src/use-create-portal.ts
var import_react2 = require("react");
var import_react_dom = require("react-dom");
function useCreatePortal(disable = false) {
  const [mounted, setMounted] = (0, import_react2.useState)(false);
  (0, import_react2.useEffect)(() => {
    setMounted(true);
  }, []);
  return (0, import_react2.useMemo)(() => {
    if (disable) {
      return (children) => children;
    }
    return mounted ? (children, container, key) => (0, import_react_dom.createPortal)(children, container || document.body, key) : () => null;
  }, [disable, mounted]);
}

// src/use-fork-ref.ts
var import_react3 = require("react");
function setRef(ref, value) {
  if (typeof ref === "function") {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}
function useForkRef(refA, refB) {
  return (0, import_react3.useMemo)(() => {
    if (refA == null && refB == null) {
      return null;
    }
    return (instance) => {
      setRef(refA, instance);
      setRef(refB, instance);
    };
  }, [refA, refB]);
}

// src/use-isomorphic-layout-effect.ts
var import_react4 = require("react");
var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react4.useEffect : import_react4.useLayoutEffect;

// src/use-next-frame.ts
var import_react5 = require("react");
function useNextFrame(value) {
  const [delayedValue, setDelayedValue] = (0, import_react5.useState)(value);
  (0, import_react5.useEffect)(() => {
    const id = requestAnimationFrame(() => {
      setDelayedValue(value);
    });
    return () => cancelAnimationFrame(id);
  }, [value]);
  return delayedValue;
}

// src/use-viewport.ts
var import_react6 = require("react");
function useViewportSize() {
  const [size, setSize] = (0, import_react6.useState)({ height: void 0, width: void 0 });
  useIsomorphicLayoutEffect(() => {
    setSize({ width: window.innerWidth, height: window.innerHeight });
    function handleResize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return size;
}

// src/validations.ts
var validateImage = (file) => {
  return validateMimeType(file, "image/*");
};
var validateMimeType = (file, mimeTypes) => {
  if (!file || !file.type) {
    return false;
  }
  const mimeTypeRegex = new RegExp(mimeTypes.replace("*", "[^\\/,]+"));
  return mimeTypeRegex.test(file.type);
};
var validateFileSize = (file, size) => {
  return file && file.size <= size;
};

// src/wrap-children.tsx
var import_react7 = __toESM(require("react"));
var wrapChildren = (children) => import_react7.default.Children.toArray(children).map(
  (child) => (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    /* @ts-ignore */
    ["number", "string"].includes(typeof child) ? /* @__PURE__ */ import_react7.default.createElement("span", { key: child }, child) : child
  )
);