welcome-ui 0.32.2 → 1.0.0-beta.10

package/dist/types/theme/typography.d.ts

@@ -0,0 +1,133 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeProps, ThemeValues } from '.';
+export type ThemeFontSizes = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getFontSizes: (unit: string, theme: ThemeValues) => ThemeFontSizes;
+export type ThemeLineHeights = {
+    [key: number]: number | string;
+    h0: number | string;
+    h1: number | string;
+    h2: number | string;
+    h3: number | string;
+    h4: number | string;
+    h5: number | string;
+    h6: number | string;
+    html: number | string;
+    lg: number | string;
+    md: number | string;
+    sm: number | string;
+    'subtitle-md': number | string;
+    'subtitle-sm': number | string;
+    xs: number | string;
+};
+export declare const getLineHeights: ({ defaultLineHeight, toRem, }: {
+    defaultLineHeight: number;
+    toRem: (value: number) => string;
+}) => ThemeLineHeights;
+export type ThemeFontWeights = {
+    [key: string]: number;
+    bold: number;
+    medium: number;
+    regular: number;
+};
+export declare const fontWeights: ThemeFontWeights;
+export type ThemeLetterSpacings = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    html: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getLetterSpacings: ({ defaultLetterSpacing, toRem, }: {
+    defaultLetterSpacing: string;
+    toRem: (value: number) => string;
+}) => ThemeLetterSpacings;
+export type ThemeTextsFontWeights = {
+    [key: string]: number;
+    h0: number;
+    h1: number;
+    h2: number;
+    h3: number;
+    h4: number;
+    h5: number;
+    h6: number;
+    lg: number;
+    md: number;
+    sm: number;
+    'subtitle-md': number;
+    'subtitle-sm': number;
+    xs: number;
+};
+export declare const getTextsFontWeights: (theme: ThemeValues) => ThemeTextsFontWeights;
+export type ThemeTextsFontFamily = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsFontFamily: (theme: ThemeValues) => ThemeTextsFontFamily;
+export type ThemeTextsTextTransform = {
+    [key: string]: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsTextTransform: () => ThemeTextsTextTransform;
+export type ThemeTextsFontColors = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+export declare const getTextFontColors: (theme: ThemeValues) => ThemeTextsFontColors;
+export type ThemeTexts = {
+    [key: string]: Partial<{
+        color: CSSObject['color'];
+        fontFamily: CSSObject['fontFamily'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        letterSpacing: CSSObject['letterSpacing'];
+        lineHeight: CSSObject['lineHeight'];
+        textTransform: CSSObject['textTransform'];
+    }>;
+};
+export declare const getTexts: (theme: ThemeValues) => ThemeTexts;
+export type ThemeFonts = {
+    headings: string;
+    icons: string;
+    texts: string;
+};
+export declare const getFonts: (defaultFontFamily: ThemeProps["defaultFontFamily"], headingFontFamily: ThemeProps["headingFontFamily"], iconFontFamily: ThemeProps["iconFontFamily"]) => ThemeFonts;

package/dist/types/theme/underline.d.ts

@@ -0,0 +1,9 @@
+import { css } from '@xstyled/styled-components';
+import { ThemeColors } from './colors';
+export type ThemeUnderline = {
+    default: ReturnType<typeof css>;
+    hover: ReturnType<typeof css>;
+};
+export declare const getUnderline: ({ colors }: {
+    colors: ThemeColors;
+}) => ThemeUnderline;

package/dist/types/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/types/utils/create-event.d.ts

@@ -0,0 +1,8 @@
+export interface CreateEvent {
+    preventDefault: () => void;
+    target: Record<string, unknown>;
+}
+export declare const createEvent: (props: Record<string, unknown>) => {
+    preventDefault: CreateEvent["preventDefault"];
+    target: CreateEvent["target"];
+};

package/dist/types/utils/field-styles.d.ts

@@ -0,0 +1,21 @@
+import { css } from '@xstyled/styled-components';
+type FieldIconSizes = {
+    lg: 'sm';
+    md: 'sm';
+    sm: 'sm';
+    xs: 'xs';
+};
+export declare const FIELD_ICON_SIZE: FieldIconSizes;
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type FieldIconSize = 'xs' | 'sm';
+export type DefaultFieldStylesProps = Partial<{
+    hasIcon?: boolean;
+    iconPlacement?: 'right' | 'left' | 'both';
+    isClearable?: boolean;
+    size: Size;
+    transparent?: boolean;
+    variant: 'danger' | 'success' | 'warning';
+}>;
+type DefaultFieldStyles = (args: DefaultFieldStylesProps) => ReturnType<typeof css>;
+export declare const defaultFieldStyles: DefaultFieldStyles;
+export {};

package/dist/types/utils/format-bytes.d.ts

@@ -0,0 +1 @@
+export declare const formatBytes: (bytes: number, decimals?: number) => string;

package/dist/types/utils/get-max-width-height.d.ts

@@ -0,0 +1 @@
+export declare const getMax: (width: string, height?: string) => string;

package/dist/types/utils/hex-to-rgb.d.ts

@@ -0,0 +1 @@
+export declare const hexToRGB: (hex: string) => string;

package/dist/types/utils/hex-to-rgba.d.ts

@@ -0,0 +1 @@
+export declare const hexToRGBA: (hex: string, transparency?: number) => string;

package/dist/types/utils/hide-focus-rings-root.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const hideFocusRingsDataAttribute = "data-wui-hidefocusrings";
+interface HideFocusRingsRootProps {
+    children?: React.ReactNode;
+    reactRootId: string;
+}
+export declare const HideFocusRingsRoot: React.FC<HideFocusRingsRootProps>;
+export {};

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './use-copy-text';

package/dist/types/utils/overflow-ellipsis.d.ts

@@ -0,0 +1 @@
+export declare const overflowEllipsis: import('styled-components').FlattenSimpleInterpolation;

package/dist/types/utils/throttle.d.ts

@@ -0,0 +1,5 @@
+interface ThrottledFunc<T extends (...args: unknown[]) => unknown> {
+    (...args: Parameters<T>): void;
+}
+export declare const throttle: <T extends (...args: unknown[]) => unknown>(callback: T, wait?: number, leading?: boolean) => ThrottledFunc<T>;
+export {};

package/dist/types/utils/use-copy-text.d.ts

@@ -0,0 +1,5 @@
+type Content = React.RefObject<HTMLElement | HTMLInputElement> | number | string;
+type Timeout = number;
+type useCopyTextReturn = [() => void, boolean];
+export declare function useCopyText(content: Content, timeout: Timeout): useCopyTextReturn;
+export {};

package/dist/types/utils/use-create-portal.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hook that mimic the React createPortal function in order to make it SSR friendly
+ */
+export declare function useCreatePortal(disable?: boolean): ((children: React.ReactNode) => any) | ((children: React.ReactNode, container?: Element | DocumentFragment, key?: string | null) => import('react').ReactPortal);

package/dist/types/utils/use-fork-ref.d.ts

@@ -0,0 +1,3 @@
+import { ForwardedRef } from 'react';
+export declare function setRef(ref: ForwardedRef<unknown>, value: unknown): void;
+export declare function useForkRef(refA: ForwardedRef<unknown>, refB: ForwardedRef<unknown>): (instance: unknown) => void;

package/dist/types/utils/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/types/utils/use-viewport.d.ts

@@ -0,0 +1,6 @@
+type Size = {
+    height: number;
+    width: number;
+};
+export declare function useViewportSize(): Size;
+export {};

package/dist/types/utils/wrap-children.d.ts

@@ -0,0 +1 @@
+export declare const wrapChildren: (children?: string | JSX.Element) => unknown;

package/dist/use-isomorphic-layout-effect-C1_Gy5Nu.js

@@ -0,0 +1 @@
+"use client";"use strict";const e=require("react"),t=typeof window>"u"?e.useEffect:e.useLayoutEffect;exports.useIsomorphicLayoutEffect=t;

package/dist/use-isomorphic-layout-effect-Izr-e2pi.mjs

@@ -0,0 +1,6 @@
+"use client";
+import { useEffect as e, useLayoutEffect as o } from "react";
+const f = typeof window > "u" ? e : o;
+export {
+  f as u
+};

package/dist/use-viewport-BDDjd1nl.js

@@ -0,0 +1 @@
+"use client";"use strict";const n=require("react"),r=require("./use-isomorphic-layout-effect-C1_Gy5Nu.js");function o(){const[t,e]=n.useState({height:void 0,width:void 0});return r.useIsomorphicLayoutEffect(()=>{e({width:window.innerWidth,height:window.innerHeight});function i(){e({width:window.innerWidth,height:window.innerHeight})}return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),t}exports.useViewportSize=o;

package/dist/use-viewport-m3glsbna.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useState as t } from "react";
+import { u as r } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+function w() {
+  const [n, e] = t({ height: void 0, width: void 0 });
+  return r(() => {
+    e({ width: window.innerWidth, height: window.innerHeight });
+    function i() {
+      e({ width: window.innerWidth, height: window.innerHeight });
+    }
+    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, []), n;
+}
+export {
+  w as u
+};

package/dist/usePopover-AbS2gpZq.mjs

@@ -0,0 +1,144 @@
+"use client";
+import r from "react";
+import { forwardRef as l } from "./System.mjs";
+import s, { th as i, css as p, system as m } from "@xstyled/styled-components";
+import { P, a as v } from "./QYJ6MIDR-YegHsExc.mjs";
+import { P as h, H as $, a as C, u as w, b as E } from "./BYC7LY2E-BNqcw1O8.mjs";
+import "./Icon.mjs";
+import { C as H } from "./index-C7zM96J_.mjs";
+import { Box as B } from "./Box.mjs";
+import { Button as T } from "./Button.mjs";
+const b = s(P)`
+  color: ${i("popovers.default.backgroundColor")};
+`, x = s.svgBox(
+  ({ $transform: t }) => p`
+    transform: ${t};
+  `
+), d = s.div`
+  ${i("popovers.content")};
+`, u = s.h6`
+  margin: 0;
+  ${i("popovers.title")};
+`, f = s(h)(
+  ({ $withCloseButton: t }) => p`
+    ${i("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${m};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t && p`
+      ${u} {
+        padding-right: 50;
+      }
+    `}
+  `
+);
+s(v)`
+  ${m};
+`;
+const y = s($)`
+  ${m};
+`, Z = l(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(
+    v,
+    {
+      ref: n,
+      render: t ? (a) => /* @__PURE__ */ r.createElement(t, { ...a }) : void 0,
+      store: o,
+      ...e
+    }
+  )
+), A = l(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(y, { store: o, ...e, forwardedAs: t, ref: n })
+), L = {
+  top: "rotateZ(180deg)",
+  right: "rotateZ(-90deg)",
+  bottom: "rotateZ(360deg)",
+  left: "rotateZ(90deg)"
+}, R = ({ store: t }) => {
+  const o = t.useState("currentPlacement"), [e] = o.split("-"), n = L[e];
+  return /* @__PURE__ */ r.createElement(b, { store: t }, /* @__PURE__ */ r.createElement(x, { $transform: n, h: 30, w: 30, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ r.createElement("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }), /* @__PURE__ */ r.createElement("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })));
+}, g = ({ children: t, onClose: o, store: e }) => {
+  const n = () => {
+    o && o(), e == null || e.hide();
+  }, { withCloseButton: a } = e;
+  return /* @__PURE__ */ r.createElement(B, { position: "relative" }, /* @__PURE__ */ r.createElement(R, { store: e }), t, a && /* @__PURE__ */ r.createElement(
+    T,
+    {
+      flex: "0 0 auto",
+      ml: "md",
+      onClick: n,
+      position: "absolute",
+      right: 1,
+      shape: "square",
+      size: "xs",
+      top: 1,
+      variant: "secondary"
+    },
+    /* @__PURE__ */ r.createElement(H, null)
+  ));
+}, _ = l(
+  ({ children: t, onClose: o, store: e, ...n }, a) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(f, { $withCloseButton: c, ref: a, store: e, ...n }, /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t));
+  }
+), G = Object.assign(_, {
+  Content: d,
+  Title: u,
+  Trigger: Z
+}), k = l(
+  ({ children: t, onClose: o, store: e, ...n }, a) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(
+      f,
+      {
+        as: C,
+        store: e,
+        ...n,
+        $withCloseButton: c,
+        ref: a
+      },
+      /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t)
+    );
+  }
+), J = Object.assign(k, {
+  Content: d,
+  Title: u,
+  Trigger: A
+}), K = ({
+  animated: t = 150,
+  withCloseButton: o = !1,
+  ...e
+} = {}) => ({
+  ...w({
+    animated: t,
+    ...e
+  }),
+  withCloseButton: o
+}), N = ({
+  animated: t = 150,
+  hideTimeout: o = 300,
+  showTimeout: e = 500,
+  withCloseButton: n = !1,
+  ...a
+} = {}) => ({
+  ...E({
+    animated: t,
+    hideTimeout: o,
+    showTimeout: e,
+    ...a
+  }),
+  withCloseButton: n
+});
+export {
+  G as P,
+  J as a,
+  N as b,
+  K as u
+};

package/dist/usePopover-CzPtX0h_.js

@@ -0,0 +1,31 @@
+"use client";"use strict";const n=require("react"),l=require("./System.js"),o=require("@xstyled/styled-components"),u=require("./QYJ6MIDR-T-fJ_t8N.js"),a=require("./BYC7LY2E-BE1a2svb.js");require("./Icon.js");const f=require("./index-C1FV1q-F.js"),g=require("./Box.js"),h=require("./Button.js"),P=o(u.PopoverArrow)`
+  color: ${o.th("popovers.default.backgroundColor")};
+`,w=o.svgBox(({$transform:t})=>o.css`
+    transform: ${t};
+  `),v=o.div`
+  ${o.th("popovers.content")};
+`,p=o.h6`
+  margin: 0;
+  ${o.th("popovers.title")};
+`,m=o(a.Popover)(({$withCloseButton:t})=>o.css`
+    ${o.th("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${o.system};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t&&o.css`
+      ${p} {
+        padding-right: 50;
+      }
+    `}
+  `);o(u.PopoverDisclosure)`
+  ${o.system};
+`;const C=o(a.HovercardAnchor)`
+  ${o.system};
+`,$=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(u.PopoverDisclosure,{ref:s,render:t?c=>n.createElement(t,{...c}):void 0,store:r,...e})),E=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(C,{store:r,...e,forwardedAs:t,ref:s})),H={top:"rotateZ(180deg)",right:"rotateZ(-90deg)",bottom:"rotateZ(360deg)",left:"rotateZ(90deg)"},B=({store:t})=>{const r=t.useState("currentPlacement"),[e]=r.split("-"),s=H[e];return n.createElement(P,{store:t},n.createElement(w,{$transform:s,h:30,w:30,xmlns:"http://www.w3.org/2000/svg"},n.createElement("path",{d:"M7 30L15 22L23 30H7Z",fill:"currentColor",fillRule:"nonzero",id:"stroke"}),n.createElement("path",{d:"M8 30L15 23L22 30H8Z",fill:"currentColor",fillRule:"nonzero"})))},d=({children:t,onClose:r,store:e})=>{const s=()=>{r&&r(),e==null||e.hide()},{withCloseButton:c}=e;return n.createElement(g.Box,{position:"relative"},n.createElement(B,{store:e}),t,c&&n.createElement(h.Button,{flex:"0 0 auto",ml:"md",onClick:s,position:"absolute",right:1,shape:"square",size:"xs",top:1,variant:"secondary"},n.createElement(f.CrossIcon,null)))},q=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{$withCloseButton:i,ref:c,store:e,...s},n.createElement(d,{onClose:r,store:e},t))}),y=Object.assign(q,{Content:v,Title:p,Trigger:$}),R=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{as:a.Hovercard,store:e,...s,$withCloseButton:i,ref:c},n.createElement(d,{onClose:r,store:e},t))}),T=Object.assign(R,{Content:v,Title:p,Trigger:E}),x=({animated:t=150,withCloseButton:r=!1,...e}={})=>({...a.usePopoverStore({animated:t,...e}),withCloseButton:r}),Z=({animated:t=150,hideTimeout:r=300,showTimeout:e=500,withCloseButton:s=!1,...c}={})=>({...a.useHovercardStore({animated:t,hideTimeout:r,showTimeout:e,...c}),withCloseButton:s});exports.Popover=y;exports.PopoverHover=T;exports.usePopover=x;exports.usePopoverHover=Z;

package/dist/wrap-children-BLDjJiiy.js

@@ -0,0 +1 @@
+"use client";"use strict";const r=require("react"),t=n=>r.Children.toArray(n).map(e=>["number","string"].includes(typeof e)?r.createElement("span",{key:e},e):e);exports.wrapChildren=t;

package/dist/wrap-children-aq69jtFP.mjs

@@ -0,0 +1,12 @@
+"use client";
+import r from "react";
+const a = (t) => r.Children.toArray(t).map(
+  (e) => (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    /* @ts-ignore */
+    ["number", "string"].includes(typeof e) ? /* @__PURE__ */ r.createElement("span", { key: e }, e) : e
+  )
+);
+export {
+  a as w
+};