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

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

"use client"

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

// src/center-content.ts
import { css as css2 } from "@xstyled/styled-components";
var centerContent = css2`
  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
import { css as css3, th as th2 } from "@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 css3`
    ${th2("defaultFields.default")};
    ${variant && th2(`defaultFields.variants.${variant}`)};
    width: 100%;
    transition: medium;
    appearance: none;
    ${size && th2(`defaultFields.sizes.${size}`)};

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

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

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

    &:hover {
      ${!variant && th2("defaultFields.hover.default")};
    }

    ${!variant && transparent && css3`
      border-color: transparent;
      background-color: transparent;

      &:hover {
        ${th2("defaultFields.hover.transparency")};
      }
    `}

    &::placeholder {
      ${th2("defaultFields.placeholder")};
    }

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

    &[disabled] {
      ${th2("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
import React, { useEffect, useState } from "react";
import { createGlobalStyle, css as css4 } from "@xstyled/styled-components";
var hideFocusRingsDataAttribute = "data-wui-hidefocusrings";
var HideFocusRingGlobalStyles = createGlobalStyle(
  () => css4`
    [${hideFocusRingsDataAttribute}] *:focus {
      outline: none;
    }
  `
);
var HideFocusRingsRoot = ({
  children,
  reactRootId
}) => {
  const [hideFocusRings, setHideFocusRings] = useState(false);
  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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HideFocusRingGlobalStyles, null), children);
};

// src/overflow-ellipsis.ts
import { css as css5 } from "@xstyled/styled-components";
var overflowEllipsis = css5`
  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
import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
import { createPortal } from "react-dom";
function useCreatePortal(disable = false) {
  const [mounted, setMounted] = useState2(false);
  useEffect2(() => {
    setMounted(true);
  }, []);
  return useMemo(() => {
    if (disable) {
      return (children) => children;
    }
    return mounted ? (children, container, key) => createPortal(children, container || document.body, key) : () => null;
  }, [disable, mounted]);
}

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

// src/use-isomorphic-layout-effect.ts
import { useEffect as useEffect3, useLayoutEffect } from "react";
var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect3 : useLayoutEffect;

// src/use-next-frame.ts
import { useEffect as useEffect4, useState as useState3 } from "react";
function useNextFrame(value) {
  const [delayedValue, setDelayedValue] = useState3(value);
  useEffect4(() => {
    const id = requestAnimationFrame(() => {
      setDelayedValue(value);
    });
    return () => cancelAnimationFrame(id);
  }, [value]);
  return delayedValue;
}

// src/use-viewport.ts
import { useState as useState4 } from "react";
function useViewportSize() {
  const [size, setSize] = useState4({ 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
import React2 from "react";
var wrapChildren = (children) => React2.Children.toArray(children).map(
  (child) => (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    /* @ts-ignore */
    ["number", "string"].includes(typeof child) ? /* @__PURE__ */ React2.createElement("span", { key: child }, child) : child
  )
);
export {
  FIELD_ICON_SIZE,
  HideFocusRingsRoot,
  cardStyles,
  centerContent,
  clamp,
  createEvent,
  defaultFieldStyles,
  formatBytes,
  getMax,
  hexToRGB,
  hexToRGBA,
  hideFocusRingsDataAttribute,
  overflowEllipsis,
  setRef,
  throttle,
  useCreatePortal,
  useForkRef,
  useIsomorphicLayoutEffect,
  useNextFrame,
  useViewportSize,
  validateFileSize,
  validateImage,
  validateMimeType,
  wrapChildren
};