@cfx-dev/ui-components 1.0.0 → 2.0.0

package/dist/style-guide/Colours/LightThemeSwatches.js

@@ -1,105 +0,0 @@
-import { jsxs as l, Fragment as a, jsx as e } from "react/jsx-runtime";
-const r = [
-  {
-    name: "$bg",
-    colorValue: "#ffffff"
-  },
-  {
-    name: "$fg",
-    colorValue: "#161923"
-  },
-  {
-    name: ".color-1",
-    colorValue: "#b71c1c"
-  },
-  // darken(#F44336, 30%)
-  {
-    name: ".color-2",
-    colorValue: "#2e7d32"
-  },
-  // darken(#4CAF50, 30%)
-  {
-    name: ".color-3",
-    colorValue: "#c6ff00"
-  },
-  // darken(#FFEB3B, 30%)
-  {
-    name: ".color-4",
-    colorValue: "#2962ff"
-  },
-  // darken(#42A5F5, 30%)
-  {
-    name: ".color-5",
-    colorValue: "#0277bd"
-  },
-  // darken(#03A9F4, 30%)
-  {
-    name: ".color-6",
-    colorValue: "#6a1b9a"
-  },
-  // darken(#9C27B0, 30%)
-  {
-    name: ".color-8",
-    colorValue: "#d84315"
-  },
-  // darken(#FF5722, 30%)
-  {
-    name: ".color-9",
-    colorValue: "#6d6d6d"
-  }
-  // darken(#9E9E9E, 30%)
-], i = function() {
-  return /* @__PURE__ */ l(a, { children: [
-    /* @__PURE__ */ e("h1", { children: " Light Theme " }),
-    /* @__PURE__ */ e(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
-          gap: "20px",
-          padding: "20px"
-        },
-        children: r.map((o) => /* @__PURE__ */ e(
-          "div",
-          {
-            style: {
-              backgroundColor: o.colorValue,
-              color: "#FFF",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100px",
-              borderRadius: "8px",
-              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-              padding: "10px",
-              position: "relative"
-            },
-            children: /* @__PURE__ */ l(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  bottom: "-50px",
-                  textAlign: "center",
-                  padding: "5px 10px",
-                  color: "#FFF"
-                },
-                children: [
-                  /* @__PURE__ */ e("span", { children: o.name }),
-                  /* @__PURE__ */ e("br", {}),
-                  /* @__PURE__ */ e("span", { children: o.colorValue })
-                ]
-              }
-            )
-          },
-          o.name
-        ))
-      }
-    )
-  ] });
-};
-export {
-  i as default
-};

package/dist/style-guide/Colours/Swatches.d.ts

@@ -1,6 +0,0 @@
-interface SwatchProps {
-    name: string;
-    colorValue: string;
-}
-declare function Swatches({ name, colorValue, }: SwatchProps): import("react/jsx-runtime").JSX.Element;
-export default Swatches;

package/dist/style-guide/Colours/Swatches.js

@@ -1,48 +0,0 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-function n({
-  name: t,
-  colorValue: i
-}) {
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      style: {
-        display: "inline-block",
-        margin: "10px",
-        padding: "10px",
-        border: "1px solid #ccc"
-      },
-      children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            style: {
-              width: "100px",
-              height: "100px",
-              backgroundColor: i,
-              border: "1px solid #000",
-              marginBottom: "5px"
-            }
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            style: {
-              textAlign: "center",
-              fontFamily: "Arial, sans-serif"
-            },
-            children: [
-              t,
-              ": ",
-              i
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  n as default
-};

package/dist/style-guide/Icons/IconDisplayGrid.js

@@ -1,42 +0,0 @@
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { I as s } from "../../Icons-BlBKvJD8.js";
-function a() {
-  const i = Object.entries(s).map(([e, t]) => ({
-    name: e,
-    component: t
-  }));
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-        gap: "30px",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: i.map(({
-        name: e,
-        component: t
-      }) => /* @__PURE__ */ r(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: [
-            t,
-            /* @__PURE__ */ n("span", { style: { marginTop: "10px" }, children: e })
-          ]
-        },
-        e
-      ))
-    }
-  );
-}
-export {
-  a as default
-};

package/dist/style-guide/Icons/Icons.d.ts

@@ -1,38 +0,0 @@
-export declare namespace Icons {
-    const exit: import("react/jsx-runtime").JSX.Element;
-    const settings: import("react/jsx-runtime").JSX.Element;
-    const changelog: import("react/jsx-runtime").JSX.Element;
-    const storymode: import("react/jsx-runtime").JSX.Element;
-    const replayEditor: import("react/jsx-runtime").JSX.Element;
-    const tipInfo: import("react/jsx-runtime").JSX.Element;
-    const remove: import("react/jsx-runtime").JSX.Element;
-    const externalLink: import("react/jsx-runtime").JSX.Element;
-    const tags: import("react/jsx-runtime").JSX.Element;
-    const checkmark: import("react/jsx-runtime").JSX.Element;
-    const playersCount: import("react/jsx-runtime").JSX.Element;
-    const last24h: import("react/jsx-runtime").JSX.Element;
-    const statusLevelAllGood: import("react/jsx-runtime").JSX.Element;
-    const statusLevelMinor: import("react/jsx-runtime").JSX.Element;
-    const statusLevelMajor: import("react/jsx-runtime").JSX.Element;
-    const favoriteInactive: import("react/jsx-runtime").JSX.Element;
-    const favoriteActive: import("react/jsx-runtime").JSX.Element;
-    const account: import("react/jsx-runtime").JSX.Element;
-    const accountLoaded: import("react/jsx-runtime").JSX.Element;
-    const serversListAll: import("react/jsx-runtime").JSX.Element;
-    const serversListSupporters: import("react/jsx-runtime").JSX.Element;
-    const serversListHistory: import("react/jsx-runtime").JSX.Element;
-    const serversListFavorites: import("react/jsx-runtime").JSX.Element;
-    const serverLastConnected: import("react/jsx-runtime").JSX.Element;
-    const serversFeatured: import("react/jsx-runtime").JSX.Element;
-    const serversFeaturedUnstyled: import("react/jsx-runtime").JSX.Element;
-    const serverBoost: import("react/jsx-runtime").JSX.Element;
-    const serverBoostUnstyled: import("react/jsx-runtime").JSX.Element;
-    const serverBurst: import("react/jsx-runtime").JSX.Element;
-}
-export declare const BrandIcon: {
-    gta5: import("react/jsx-runtime").JSX.Element;
-    rdr3: import("react/jsx-runtime").JSX.Element;
-    ny: import("react/jsx-runtime").JSX.Element;
-    cfxre: import("react/jsx-runtime").JSX.Element;
-    ROS: import("react/jsx-runtime").JSX.Element;
-};

package/dist/style-guide/Icons/Icons.js

@@ -1,7 +0,0 @@
-import "react/jsx-runtime";
-import { B as n, I as p } from "../../Icons-BlBKvJD8.js";
-import "../../index.esm-BkynlSN6.js";
-export {
-  n as BrandIcon,
-  p as Icons
-};

package/dist/styles-scss/assets/images/checkered_dark.svg

@@ -1,7 +0,0 @@
-<svg width="2" height="2" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0" y="1" width="1" height="1" style="fill: #161923" />
-  <rect x="1" y="0" width="1" height="1" style="fill: #161923" />
-  <rect x="0" y="0" width="1" height="1" style="fill: #161923" />
-
-  <rect x="1" y="1" width="1" height="1" style="fill: rgba(22, 25, 35, .05)" />
-</svg>

package/dist/styles-scss/assets/images/checkered_light.svg

@@ -1,7 +0,0 @@
-<svg width="2" height="2" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0" y="1" width="1" height="1" style="fill: #ffffff" />
-  <rect x="1" y="0" width="1" height="1" style="fill: #ffffff" />
-  <rect x="0" y="0" width="1" height="1" style="fill: #ffffff" />
-
-  <rect x="1" y="1" width="1" height="1" style="fill: rgba(255, 255, 255, .05)" />
-</svg>

package/dist/styles-scss/theme_dark.scss

@@ -1,24 +0,0 @@
-@use "ui";
-
-$fg: #fffff0;
-$bg: #161923;
-
-.cfxui-theme-dark {
-  @include ui.define-main-colors($bg, $fg, (
-    'primary': darken(#f50551, 10%)
-  ));
-
-  .color-1 { color: lighten(#F44336, 30%);	}
-	.color-2 { color: lighten(#4CAF50, 30%);	}
-	.color-3 { color: lighten(#FFEB3B, 30%);	}
-	.color-4 { color: lighten(#42A5F5, 30%);	}
-	.color-5 { color: lighten(#03A9F4, 30%);	}
-	.color-6 { color: lighten(#9C27B0, 30%);	}
-	.color-8 { color: lighten(#FF5722, 30%);	}
-	.color-9 { color: lighten(#9E9E9E, 30%);	}
-
-  // Invert black indicators for date/time inputs
-  ::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-  }
-}

package/dist/styles-scss/theme_light.scss

@@ -1,54 +0,0 @@
-@use "ui";
-
-$fg: #161923;
-$bg: #ffffff;
-
-.cfxui-theme-light {
-  @include ui.define-main-colors($bg, $fg);
-
-  // Asset overrides
-  @include ui.def('checkered-pattern', url(assets/images/checkered_light.svg));
-
-  // Color overrides
-  @include ui.def               ('text-opacity-10',                .20);
-  @include ui.define-color-token('text-a10', ui.color('main', 950, .20));
-  @include ui.def               ('text-opacity-25',                .35);
-  @include ui.define-color-token('text-a25', ui.color('main', 950, .35));
-  @include ui.def               ('text-opacity-50',                .60);
-  @include ui.define-color-token('text-a50', ui.color('main', 950, .60));
-  @include ui.def               ('text-opacity-75',                .85);
-  @include ui.define-color-token('text-a75', ui.color('main', 950, .85));
-
-  @include ui.define-color-token('text-warning', ui.color('warning', 700));
-
-  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .3));
-  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .3));
-
-  @include ui.define-color-token('backdrop', ui.color('main', 50, .75));
-  @include ui.define-color-token('backdrop-shader', ui.color('main', 100, .75));
-
-  @include ui.define-color-token('button-primary-text', ui.color('main'));
-  @include ui.define-color-token('button-primary-hover-text', ui.color('main'));
-  @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
-
-  @include ui.define-color-token('premium-badge-text', ui.color('main'));
-  @include ui.define-color-token('premium-badge-background', ui.color('main', 950));
-
-  @include ui.define-color-token('loaf-text', ui.color('main', 950, .75));
-  @include ui.define-color-token('loaf-background', ui.color('main', 950, .075));
-
-
-  .color-1 { color: darken(#F44336, 30%);	}
-	.color-2 { color: darken(#4CAF50, 30%);	}
-	.color-3 { color: darken(#FFEB3B, 30%);	}
-	.color-4 { color: darken(#42A5F5, 30%);	}
-	.color-5 { color: darken(#03A9F4, 30%);	}
-	.color-6 { color: darken(#9C27B0, 30%);	}
-	.color-8 { color: darken(#FF5722, 30%);	}
-	.color-9 { color: darken(#9E9E9E, 30%);	}
-
-  // Too thin otherwise
-  --font-weight-normal: 400;
-  --font-weight-bold: 500;
-  --font-weight-bolder: 600;
-}

package/dist/utils/hooks.d.ts

@@ -1,15 +0,0 @@
-import { default as React } from 'react';
-
-export declare function useInstance<T, Args extends any[]>(init: (...args: Args) => T, ...args: Args): T;
-export declare function useDynamicRef<T>(value: T): React.MutableRefObject<T>;
-export declare function useGlobalKeyboardEvent<T extends (event: KeyboardEvent) => void>(callbackRef: React.MutableRefObject<T>, eventName?: 'keydown' | 'keyup' | 'keypress', capturing?: boolean): void;
-export declare namespace useGlobalKeyboardEvent {
-    var shouldProcessEvent: (event: KeyboardEvent) => boolean;
-}
-export declare function useKeyboardClose<T extends () => void>(callback: T): void;
-export declare namespace useKeyboardClose {
-    var isCloseEvent: (event: KeyboardEvent) => boolean;
-}
-export declare function useWindowResize<T extends () => void>(callback: T): void;
-export type OutletPosition = 'original' | 'before' | 'after';
-export declare function useOutlet(id: string, position?: OutletPosition): React.FC<React.PropsWithChildren>;

package/dist/utils/hooks.js

@@ -1,79 +0,0 @@
-import { jsx as E } from "react/jsx-runtime";
-import o from "react";
-import { $ as m } from "../index-C1KmDBa6.js";
-const l = Symbol("Uninitialized");
-function v(e, ...t) {
-  const r = o.useRef(l);
-  return r.current === l && (r.current = e(...t)), r.current;
-}
-function a(e) {
-  const t = o.useRef(e);
-  return t.current = e, t;
-}
-function i(e, t = "keydown", r) {
-  o.useEffect(() => {
-    const s = (n) => {
-      i.shouldProcessEvent(n) && e.current(n);
-    };
-    return window.addEventListener(t, s, r), () => {
-      window.removeEventListener(t, s, r);
-    };
-  }, [t, r]);
-}
-i.shouldProcessEvent = (e) => {
-  if (e.target instanceof Element) {
-    if (e.target.hasAttribute("contenteditable"))
-      return !1;
-    switch (e.target.tagName) {
-      case "INPUT":
-      case "SELECT":
-      case "TEXTAREA":
-        return !1;
-      default:
-        return !0;
-    }
-  }
-  return !0;
-};
-function d(e) {
-  const t = a((r) => {
-    d.isCloseEvent(r) && e();
-  });
-  i(t);
-}
-d.isCloseEvent = (e) => e.key === "Escape";
-function R(e) {
-  const t = a(e);
-  o.useEffect(() => {
-    const r = () => t.current();
-    return window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
-  }, []);
-}
-function b(e) {
-  const {
-    children: t
-  } = e;
-  return /* @__PURE__ */ E("div", { style: { display: "none" }, children: t });
-}
-function g(e, t = "original") {
-  const [r, s] = o.useState(() => b);
-  return o.useEffect(() => {
-    let n = document.getElementById(e);
-    if (n || (n = document.createElement("div"), n.id = e, document.body.appendChild(n)), t !== "original") {
-      const c = n, u = `${e}_${t}`;
-      n = document.getElementById(u), n || (n = document.createElement("div"), n.id = u, t === "before" ? document.body.insertBefore(n, c) : c.after(n));
-    }
-    const f = ({
-      children: c
-    }) => m.createPortal(c, n);
-    s(() => f);
-  }, [e, t]), r;
-}
-export {
-  a as useDynamicRef,
-  i as useGlobalKeyboardEvent,
-  v as useInstance,
-  d as useKeyboardClose,
-  g as useOutlet,
-  R as useWindowResize
-};