welcome-ui 0.0.0-dev.1738087585148

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/utils.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),m=require("./_commonjsHelpers-DvH0V_XJ.js");var y=function(){var e=document.getSelection();if(!e.rangeCount)return function(){};for(var t=document.activeElement,r=[],o=0;o<e.rangeCount;o++)r.push(e.getRangeAt(o));switch(t.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":t.blur();break;default:t=null;break}return e.removeAllRanges(),function(){e.type==="Caret"&&e.removeAllRanges(),e.rangeCount||r.forEach(function(s){e.addRange(s)}),t&&t.focus()}},g=y,f={"text/plain":"Text","text/html":"Url",default:"Text"},b="Copy to clipboard: #{key}, Enter";function v(e){var t=(/mac os x/i.test(navigator.userAgent)?"⌘":"Ctrl")+"+C";return e.replace(/#{\s*key\s*}/g,t)}function C(e,t){var r,o,s,n,l,a,i=!1;t||(t={}),r=t.debug||!1;try{s=g(),n=document.createRange(),l=document.getSelection(),a=document.createElement("span"),a.textContent=e,a.ariaHidden="true",a.style.all="unset",a.style.position="fixed",a.style.top=0,a.style.clip="rect(0, 0, 0, 0)",a.style.whiteSpace="pre",a.style.webkitUserSelect="text",a.style.MozUserSelect="text",a.style.msUserSelect="text",a.style.userSelect="text",a.addEventListener("copy",function(c){if(c.stopPropagation(),t.format)if(c.preventDefault(),typeof c.clipboardData>"u"){r&&console.warn("unable to use e.clipboardData"),r&&console.warn("trying IE specific stuff"),window.clipboardData.clearData();var u=f[t.format]||f.default;window.clipboardData.setData(u,e)}else c.clipboardData.clearData(),c.clipboardData.setData(t.format,e);t.onCopy&&(c.preventDefault(),t.onCopy(c.clipboardData))}),document.body.appendChild(a),n.selectNodeContents(a),l.addRange(n);var p=document.execCommand("copy");if(!p)throw new Error("copy command was unsuccessful");i=!0}catch(c){r&&console.error("unable to copy using execCommand: ",c),r&&console.warn("trying IE specific stuff");try{window.clipboardData.setData(t.format||"text",e),t.onCopy&&t.onCopy(window.clipboardData),i=!0}catch(u){r&&console.error("unable to copy using clipboardData: ",u),r&&console.error("falling back to prompt"),o=v("message"in t?t.message:b),window.prompt(o,e)}}finally{l&&(typeof l.removeRange=="function"?l.removeRange(n):l.removeAllRanges()),a&&document.body.removeChild(a),s()}return i}var w=C;const D=m.getDefaultExportFromCjs(w);function x(e,t){const[r,o]=d.useState();return[d.useCallback(()=>{let n;typeof e=="number"||typeof e=="string"?n=e.toString():e.current instanceof HTMLInputElement?n=e.current.value:e.current instanceof HTMLElement&&(n=e.current.textContent);const l=D(n);o(l),t&&setTimeout(o,t)},[e,t]),r]}exports.useCopyText=x;

package/dist/utils.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { useState as p, useCallback as m } from "react";
+import { g } from "./_commonjsHelpers-CXJ7dpIk.mjs";
+var y = function() {
+  var e = document.getSelection();
+  if (!e.rangeCount)
+    return function() {
+    };
+  for (var t = document.activeElement, r = [], o = 0; o < e.rangeCount; o++)
+    r.push(e.getRangeAt(o));
+  switch (t.tagName.toUpperCase()) {
+    case "INPUT":
+    case "TEXTAREA":
+      t.blur();
+      break;
+    default:
+      t = null;
+      break;
+  }
+  return e.removeAllRanges(), function() {
+    e.type === "Caret" && e.removeAllRanges(), e.rangeCount || r.forEach(function(s) {
+      e.addRange(s);
+    }), t && t.focus();
+  };
+}, b = y, f = {
+  "text/plain": "Text",
+  "text/html": "Url",
+  default: "Text"
+}, v = "Copy to clipboard: #{key}, Enter";
+function C(e) {
+  var t = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
+  return e.replace(/#{\s*key\s*}/g, t);
+}
+function w(e, t) {
+  var r, o, s, n, l, a, i = !1;
+  t || (t = {}), r = t.debug || !1;
+  try {
+    s = b(), n = document.createRange(), l = document.getSelection(), a = document.createElement("span"), a.textContent = e, a.ariaHidden = "true", a.style.all = "unset", a.style.position = "fixed", a.style.top = 0, a.style.clip = "rect(0, 0, 0, 0)", a.style.whiteSpace = "pre", a.style.webkitUserSelect = "text", a.style.MozUserSelect = "text", a.style.msUserSelect = "text", a.style.userSelect = "text", a.addEventListener("copy", function(c) {
+      if (c.stopPropagation(), t.format)
+        if (c.preventDefault(), typeof c.clipboardData > "u") {
+          r && console.warn("unable to use e.clipboardData"), r && console.warn("trying IE specific stuff"), window.clipboardData.clearData();
+          var u = f[t.format] || f.default;
+          window.clipboardData.setData(u, e);
+        } else
+          c.clipboardData.clearData(), c.clipboardData.setData(t.format, e);
+      t.onCopy && (c.preventDefault(), t.onCopy(c.clipboardData));
+    }), document.body.appendChild(a), n.selectNodeContents(a), l.addRange(n);
+    var d = document.execCommand("copy");
+    if (!d)
+      throw new Error("copy command was unsuccessful");
+    i = !0;
+  } catch (c) {
+    r && console.error("unable to copy using execCommand: ", c), r && console.warn("trying IE specific stuff");
+    try {
+      window.clipboardData.setData(t.format || "text", e), t.onCopy && t.onCopy(window.clipboardData), i = !0;
+    } catch (u) {
+      r && console.error("unable to copy using clipboardData: ", u), r && console.error("falling back to prompt"), o = C("message" in t ? t.message : v), window.prompt(o, e);
+    }
+  } finally {
+    l && (typeof l.removeRange == "function" ? l.removeRange(n) : l.removeAllRanges()), a && document.body.removeChild(a), s();
+  }
+  return i;
+}
+var D = w;
+const x = /* @__PURE__ */ g(D);
+function S(e, t) {
+  const [r, o] = p();
+  return [m(() => {
+    let n;
+    typeof e == "number" || typeof e == "string" ? n = e.toString() : e.current instanceof HTMLInputElement ? n = e.current.value : e.current instanceof HTMLElement && (n = e.current.textContent);
+    const l = x(n);
+    o(l), t && setTimeout(o, t);
+  }, [e, t]), r];
+}
+export {
+  S as useCopyText
+};

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
+};

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "welcome-ui",
+  "version": "0.0.0-dev.1738087585148",
+  "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./fonts/*": "./dist/fonts/*",
+    "./theme": {
+      "types": "./dist/types/theme/index.d.ts",
+      "import": "./dist/theme.mjs",
+      "require": "./dist/theme.js"
+    },
+    "./utils": {
+      "types": "./dist/types/utils/index.d.ts",
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.js"
+    },
+    "./*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
+  },
+  "scripts": {
+    "start": "vite build --watch",
+    "build": "vite build",
+    "test": "yarn jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WTTJ/welcome-ui.git"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "ariakit",
+    "styled-components",
+    "styled-system",
+    "ui-library",
+    "ui",
+    "ux",
+    "welcome",
+    "WTTJ"
+  ],
+  "author": "WTTJ <tech@wttj.co>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WTTJ/welcome-ui/issues"
+  },
+  "dependencies": {
+    "@ariakit/react": "0.4.15",
+    "@juggle/resize-observer": "^3.4.0",
+    "copy-to-clipboard": "^3.3.3",
+    "date-fns": "^4.1.0",
+    "downshift": "^7.4.1",
+    "lodash.capitalize": "^4.2.1",
+    "lodash.debounce": "^4.0.8",
+    "lodash.range": "^3.2.0",
+    "lottie-light-react": "^2.4.0",
+    "match-sorter": "^8.0.0",
+    "react-datepicker": "^4.16.0",
+    "react-dropzone": "^14.3.5",
+    "react-flatten-children": "^1.0.0",
+    "react-hot-toast": "^2.4.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.25.9",
+    "@babel/core": "7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@babel/plugin-transform-modules-commonjs": "7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.22.11",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.13",
+    "@types/lodash.capitalize": "^4.2.9",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.range": "^3.2.9",
+    "@types/node": "22.9.0",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.11",
+    "@types/react-datepicker": "^4.15.0",
+    "@xstyled/styled-components": "^3.7.3",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-annotate-pure-calls": "^0.4.0",
+    "babel-plugin-transform-async-to-promises": "^0.8.18",
+    "babel-preset-vite": "^1.1.3",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "7.2.0",
+    "react": "^18.0.0",
+    "release-it": "^18.1.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "styled-components": "^5.3.9",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-static-copy": "^2.2.0",
+    "wttj-config": "^3.0.1"
+  },
+  "peerDependencies": {
+    "@xstyled/styled-components": "^3.7.3",
+    "react": "^18.0.0",
+    "styled-components": "^5.3.9"
+  },
+  "resolutions": {
+    "@babel/traverse": ">=7.23.2"
+  },
+  "homepage": "https://welcome-ui.com"
+}