@cfx-dev/ui-components 0.0.5

package/dist/components/Flyout/Flyout.js

@@ -0,0 +1,60 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import m from "react";
+import { F as k } from "../../Combination-AG9vHdSx.js";
+import { Button as p } from "../Button/Button.js";
+import { I as h } from "../../Icons-B26SczGZ.js";
+import { Interactive as f } from "../Interactive/Interactive.js";
+import { clsx as l } from "../../utils/clsx.js";
+import { n as u } from "../../functional-C0pE183N.js";
+import { b as v } from "../../hooks-Bv1kQUpO.js";
+import { a as b } from "../../outlet-C4wpavcH.js";
+import '../../assets/Flyout.css';const z = "_root_11ks7_1", N = "_holder_11ks7_6", C = "_active_11ks7_15", y = "_backdrop_11ks7_15", x = "_mask_11ks7_28", F = "_content_11ks7_90", I = "_header_11ks7_95", L = "_title_11ks7_101", e = {
+  root: z,
+  "size-normal": "_size-normal_11ks7_6",
+  holder: N,
+  "size-small": "_size-small_11ks7_9",
+  "size-xsmall": "_size-xsmall_11ks7_12",
+  active: C,
+  backdrop: y,
+  "backdrop-appearance": "_backdrop-appearance_11ks7_1",
+  mask: x,
+  "holder-appearance": "_holder-appearance_11ks7_1",
+  content: F,
+  header: I,
+  title: L
+}, g = b("overlay-outlet");
+function j(c) {
+  const {
+    disabled: o = !1,
+    size: r = "normal",
+    onClose: t = u,
+    children: n,
+    holderClassName: d
+  } = c;
+  m.useEffect(() => {
+    if (o)
+      return;
+    const a = document.getElementById("cfxui-root");
+    return a == null || a.classList.add("shrink"), () => a == null ? void 0 : a.classList.remove("shrink");
+  }, [o]), v(t);
+  const _ = l(e.root, e[`size-${r}`], {
+    [e.active]: !o
+  });
+  return /* @__PURE__ */ s(g, { children: /* @__PURE__ */ i("div", { className: _, children: [
+    /* @__PURE__ */ s(f, { showPointer: !1, className: e.backdrop, onClick: t }),
+    /* @__PURE__ */ s("div", { className: e.mask, children: /* @__PURE__ */ s("div", { className: l(e.holder, d), children: /* @__PURE__ */ s(k, { disabled: !!o, className: e.content, children: n }) }) })
+  ] }) });
+}
+j.Header = m.forwardRef(function(o, r) {
+  const {
+    onClose: t,
+    children: n
+  } = o;
+  return /* @__PURE__ */ i("div", { ref: r, className: e.header, children: [
+    /* @__PURE__ */ s("div", { className: e.title, children: n }),
+    !!t && /* @__PURE__ */ s(p, { size: "large", icon: h.exit, onClick: t })
+  ] });
+});
+export {
+  j as Flyout
+};

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TextColor, TextOpacity, TextSize } from '../Text/Text.types';
+
+export interface IconProps {
+    color?: TextColor;
+    size?: TextSize;
+    opacity?: TextOpacity;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,24 @@
+import { jsx as f } from "react/jsx-runtime";
+import l from "react";
+import { TEXT_OPACITY_MAP as p } from "../Text/Text.js";
+import { ui as o } from "../ui.js";
+import { clsx as _ } from "../../utils/clsx.js";
+import '../../assets/Icon.css';const d = "_root_sqbzn_1", u = {
+  root: d
+}, h = l.forwardRef(function(t, r) {
+  const {
+    color: c = "inherit",
+    size: s = "normal",
+    opacity: n = "100",
+    className: i,
+    children: e
+  } = t, m = _(u.root, i), a = {
+    color: o.color(c),
+    fontSize: o.fontSize(s),
+    opacity: p[n]
+  };
+  return /* @__PURE__ */ f("div", { ref: r, style: a, className: m, children: e });
+});
+export {
+  h as Icon
+};

package/dist/components/Icons.d.ts

@@ -0,0 +1,38 @@
+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/components/Icons.js

@@ -0,0 +1,6 @@
+import "react/jsx-runtime";
+import { B as n, I as s } from "../Icons-B26SczGZ.js";
+export {
+  n as BrandIcon,
+  s as Icons
+};

package/dist/components/Indicator/Indicator.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+
+export interface IndicatorProps {
+    className?: string;
+}
+export declare const Indicator: React.NamedExoticComponent<IndicatorProps>;

package/dist/components/Indicator/Indicator.js

@@ -0,0 +1,19 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import i from "react";
+import { clsx as a } from "../../utils/clsx.js";
+import '../../assets/Indicator.css';const s = "_root_2gp9n_1", e = "_indicator_2gp9n_1", r = {
+  root: s,
+  indicator: e
+}, c = { animationDelay: "0ms" }, m = { animationDelay: "50ms" }, d = { animationDelay: "100ms" }, l = { animationDelay: "150ms" }, v = i.memo(function({
+  className: t
+}) {
+  return /* @__PURE__ */ n("div", { className: a(r.root, t), children: [
+    /* @__PURE__ */ o("div", { style: c }),
+    /* @__PURE__ */ o("div", { style: m }),
+    /* @__PURE__ */ o("div", { style: d }),
+    /* @__PURE__ */ o("div", { style: l })
+  ] });
+});
+export {
+  v as Indicator
+};

package/dist/components/InfoPanel/InfoPanel.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export type InfoPanelType = 'default' | 'error' | 'success' | 'warning';
+export type InfoPanelSize = 'auto' | 'small' | 'normal' | 'large';
+export interface InfoPanelProps {
+    type?: InfoPanelType;
+    size?: InfoPanelSize;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    inline?: boolean;
+}
+export declare function InfoPanel(props: InfoPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/InfoPanel/InfoPanel.js

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { clsx as m } from "../../utils/clsx.js";
+import '../../assets/InfoPanel.css';const p = "_root_43rns_1", y = "_inline_43rns_37", d = "_icon_43rns_58", f = "_content_43rns_61", n = {
+  root: p,
+  "type-default": "_type-default_43rns_11",
+  "type-error": "_type-error_43rns_15",
+  "type-success": "_type-success_43rns_19",
+  "type-warning": "_type-warning_43rns_23",
+  "size-small": "_size-small_43rns_27",
+  "size-normal": "_size-normal_43rns_30",
+  "size-large": "_size-large_43rns_33",
+  inline: y,
+  icon: d,
+  content: f
+};
+function N(o) {
+  const {
+    type: t = "default",
+    size: r = "auto",
+    icon: s,
+    children: i,
+    className: _,
+    inline: c = !1
+  } = o, l = m(n.root, _, n[`type-${t}`], n[`size-${r}`], {
+    [n.inline]: c
+  });
+  return /* @__PURE__ */ a("div", { className: l, children: [
+    !!s && /* @__PURE__ */ e("div", { className: n.icon, children: s }),
+    /* @__PURE__ */ e("div", { className: n.content, children: i })
+  ] });
+}
+export {
+  N as InfoPanel
+};

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+
+export type InputSize = 'small' | 'normal' | 'large';
+type TypeSpecific = {
+    type?: 'text' | 'password' | 'search';
+    value: string;
+    onChange(value: string): void;
+} | {
+    type: 'number';
+    min?: number | string;
+    max?: number | string;
+    value: number | string;
+    onChange(value: string): void;
+};
+export type InputProps = TypeSpecific & {
+    fullWidth?: boolean;
+    size?: InputSize;
+    tabIndex?: number;
+    disabled?: boolean;
+    autofocus?: boolean;
+    pattern?: RegExp;
+    className?: string;
+    backdropBlur?: boolean;
+    inputClassName?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    label?: React.ReactNode;
+    placeholder?: string;
+    description?: React.ReactNode;
+    error?: boolean;
+    decorator?: React.ReactNode | (() => React.ReactNode);
+    onSubmit?: () => void;
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void | boolean;
+    showLoader?: boolean;
+    noSpellCheck?: boolean;
+};
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Input/Input.js

@@ -0,0 +1,96 @@
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import n from "react";
+import { Indicator as q } from "../Indicator/Indicator.js";
+import { clsx as H } from "../../utils/clsx.js";
+import { getValue as J } from "../../utils/getValue.js";
+import { u as i } from "../../hooks-Bv1kQUpO.js";
+import '../../assets/Input.css';const O = "_root_gmtev_1", P = "_input_gmtev_1", Q = "_small_gmtev_8", U = "_large_gmtev_12", Y = "_decorator_gmtev_60", Z = "_error_gmtev_68", $ = "_disabled_gmtev_72", ee = "_description_gmtev_106", e = {
+  root: O,
+  input: P,
+  small: Q,
+  large: U,
+  "full-width": "_full-width_gmtev_57",
+  decorator: Y,
+  error: Z,
+  disabled: $,
+  description: ee,
+  "backdrop-blur": "_backdrop-blur_gmtev_111"
+}, ce = n.forwardRef(function(t, g) {
+  const {
+    label: d,
+    value: v,
+    onChange: N,
+    onSubmit: C,
+    onKeyDown: k = () => !1,
+    pattern: a,
+    tabIndex: w,
+    error: y = !1,
+    fullWidth: I = !1,
+    showLoader: u = !1,
+    noSpellCheck: R = !1,
+    autofocus: x = !1,
+    disabled: m = !1,
+    className: E = "",
+    placeholder: D = "",
+    inputClassName: S = "",
+    inputRef: F,
+    description: _ = "",
+    type: K = "text",
+    size: A = "normal",
+    decorator: l,
+    backdropBlur: j = !1
+  } = t, G = t.type === "number" && (t.min ?? Number.MIN_SAFE_INTEGER) || void 0, M = t.type === "number" && (t.max ?? Number.MAX_SAFE_INTEGER) || void 0, f = n.useId(), p = i(N), T = i(k), b = i(C), V = n.useCallback(
+    (o) => {
+      const {
+        value: s
+      } = o.target;
+      if (a) {
+        a.test(s) && p.current(s);
+        return;
+      }
+      return p.current(s);
+    },
+    [a]
+  ), z = n.useCallback((o) => {
+    T.current(o) || b.current && o.key === "Enter" && b.current();
+  }, []), B = u || l ? /* @__PURE__ */ r("div", { className: e.decorator, children: [
+    !!u && /* @__PURE__ */ c(q, {}),
+    !!l && J(l)
+  ] }) : null, h = /* @__PURE__ */ r("div", { className: e.input, children: [
+    /* @__PURE__ */ c(
+      "input",
+      {
+        id: f,
+        ref: F,
+        type: K,
+        tabIndex: w,
+        autoFocus: x,
+        className: S,
+        value: v,
+        placeholder: D,
+        disabled: m,
+        onChange: V,
+        onKeyDown: z,
+        spellCheck: !R,
+        min: G,
+        max: M
+      }
+    ),
+    B
+  ] }), L = _ ? /* @__PURE__ */ c("div", { className: e.description, children: _ }) : null, W = d ? /* @__PURE__ */ r("label", { htmlFor: f, children: [
+    d,
+    h
+  ] }) : h, X = H(e.root, e[A], E, {
+    [e["full-width"]]: I,
+    [e.error]: y,
+    [e.disabled]: m,
+    [e["backdrop-blur"]]: j
+  });
+  return /* @__PURE__ */ r("div", { ref: g, className: X, children: [
+    W,
+    L
+  ] });
+});
+export {
+  ce as Input
+};

package/dist/components/Input/RichInput.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { InputSize } from './Input';
+
+export interface RichInputProps {
+    size?: InputSize;
+    value: string;
+    onChange(value: string): void;
+    onFocus?(): void;
+    onBlur?(): void;
+    onSelect?(start: number | null, end: number | null, direction: HTMLInputElement['selectionDirection']): void;
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    rendered: React.ReactNode;
+    className?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    withClearButton?: boolean;
+}
+export declare const RichInput: React.ForwardRefExoticComponent<RichInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Input/RichInput.js

@@ -0,0 +1,63 @@
+import { jsxs as B, jsx as o } from "react/jsx-runtime";
+import r from "react";
+import { Button as D } from "../Button/Button.js";
+import { I as F } from "../../Icons-B26SczGZ.js";
+import { clsx as L } from "../../utils/clsx.js";
+import { u as i } from "../../hooks-Bv1kQUpO.js";
+import '../../assets/RichInput.css';const T = "_root_16on4_1", j = "_renderer_16on4_1", z = "_small_16on4_8", E = "_large_16on4_13", H = "_clear_16on4_95", t = {
+  root: T,
+  renderer: j,
+  small: z,
+  large: E,
+  clear: H
+}, O = r.forwardRef(function(f, m) {
+  const {
+    size: d = "normal",
+    value: c,
+    onChange: p,
+    onFocus: _,
+    onBlur: h,
+    onSelect: g,
+    onKeyDown: C,
+    className: R,
+    rendered: S,
+    placeholder: x,
+    autoFocus: k,
+    withClearButton: I = !1
+  } = f, s = r.useRef(null), n = r.useRef(null), a = i(p), u = i(g), N = r.useCallback((e) => {
+    a.current(e.target.value);
+  }, []), b = r.useCallback(() => {
+    var e;
+    a.current(""), (e = s.current) == null || e.focus();
+  }, []), v = r.useCallback((e) => {
+    if (!u.current || !(e.target instanceof HTMLInputElement))
+      return;
+    const l = e.target;
+    u.current(l.selectionStart, l.selectionEnd, l.selectionDirection);
+  }, []), w = r.useCallback((e) => {
+    n.current && (n.current.scrollTop = e.target.scrollTop, n.current.scrollLeft = e.target.scrollLeft);
+  }, []), y = L(t.root, R, t[d]);
+  return /* @__PURE__ */ B("div", { ref: m, className: y, children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: s,
+        autoFocus: k,
+        type: "text",
+        value: c,
+        onChange: N,
+        placeholder: x,
+        onBlur: h,
+        onFocus: _,
+        onScroll: w,
+        onSelect: v,
+        onKeyDown: C
+      }
+    ),
+    /* @__PURE__ */ o("div", { ref: n, className: t.renderer, children: S }),
+    I && c && /* @__PURE__ */ o("div", { className: t.clear, children: /* @__PURE__ */ o(D, { size: "small", icon: F.exit, onClick: b }) })
+  ] });
+});
+export {
+  O as RichInput
+};

package/dist/components/Interactive/Interactive.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+
+export interface InteractiveProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    showPointer?: boolean;
+}
+export declare const Interactive: React.ForwardRefExoticComponent<Omit<InteractiveProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Interactive/Interactive.js

@@ -0,0 +1,18 @@
+import { jsx as n } from "react/jsx-runtime";
+import a from "react";
+import { clsx as i } from "../../utils/clsx.js";
+import '../../assets/Interactive.css';const f = "_root_1o2df_1", m = {
+  root: f
+}, h = a.forwardRef(function(o, t) {
+  const {
+    showPointer: r = !0,
+    className: e,
+    ...s
+  } = o, c = i(e, {
+    [m.root]: r
+  });
+  return /* @__PURE__ */ n("div", { ref: t, className: c, ...s, children: o.children });
+});
+export {
+  h as Interactive
+};

package/dist/components/Island/Island.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+
+export declare enum IslandCorner {
+    TopLeft = 1,
+    TopRight = 2,
+    BottomLeft = 4,
+    BottomRight = 8,
+    Top = 3,
+    Left = 5,
+    Right = 10,
+    Bottom = 12,
+    All = 15
+}
+export interface IslandProps {
+    grow?: boolean;
+    widthQ?: number;
+    /**
+     * Use IslandCorner enum to compose corner bits
+     *
+     * For example: two top corners would be `IslandCorner.TopLeft | IslandCorner.TopRight` or just `IslandCorner.Top`
+     */
+    straightCorner?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Island: React.ForwardRefExoticComponent<IslandProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Island/Island.js

@@ -0,0 +1,34 @@
+import { jsx as u } from "react/jsx-runtime";
+import h from "react";
+import { ui as d } from "../ui.js";
+import { clsx as c } from "../../utils/clsx.js";
+import '../../assets/Island.css';const a = "_root_aa951_1", w = "_grow_aa951_15", t = {
+  root: a,
+  grow: w,
+  "no-round-border-top-left": "_no-round-border-top-left_aa951_19",
+  "no-round-border-top-right": "_no-round-border-top-right_aa951_22",
+  "no-round-border-bottom-left": "_no-round-border-bottom-left_aa951_25",
+  "no-round-border-bottom-right": "_no-round-border-bottom-right_aa951_28"
+};
+var R = /* @__PURE__ */ ((o) => (o[o.TopLeft = 1] = "TopLeft", o[o.TopRight = 2] = "TopRight", o[o.BottomLeft = 4] = "BottomLeft", o[o.BottomRight = 8] = "BottomRight", o[o.Top = 3] = "Top", o[o.Left = 5] = "Left", o[o.Right = 10] = "Right", o[o.Bottom = 12] = "Bottom", o[o.All = 15] = "All", o))(R || {});
+const s = h.forwardRef(function(f, e) {
+  const {
+    grow: _ = !1,
+    widthQ: i = 0,
+    straightCorner: r = 0,
+    children: b,
+    className: g
+  } = f, p = c(t.root, g, {
+    [t.grow]: _,
+    [t["no-round-border-top-left"]]: r & 1,
+    [t["no-round-border-top-right"]]: r & 2,
+    [t["no-round-border-bottom-left"]]: r & 4,
+    [t["no-round-border-bottom-right"]]: r & 8
+    /* BottomRight */
+  }), m = {};
+  return i > 0 && (m.width = d.q(i)), /* @__PURE__ */ u("div", { className: p, style: m, ref: e, children: b });
+});
+export {
+  s as Island,
+  R as IslandCorner
+};

package/dist/components/Layout/Box/Box.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+
+export interface BoxProps {
+    noOverflow?: boolean;
+    noShrink?: boolean;
+    grow?: boolean;
+    /**
+     * Number values is treated like quant multiplier
+     * String value used as is
+     */
+    width?: number | string;
+    /**
+     * Number values is treated like quant multiplier
+     * String value used as is
+     */
+    height?: number | string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Layout/Box/Box.js

@@ -0,0 +1,38 @@
+import { jsx as m } from "react/jsx-runtime";
+import g from "react";
+import { useContextualStyle as u } from "../../Style/Style.js";
+import { ui as d } from "../../ui.js";
+import { clsx as x } from "../../../utils/clsx.js";
+import '../../../assets/Box.css';const p = "_root_1e1ao_1", k = "_grow_1e1ao_7", r = {
+  root: p,
+  "no-overflow": "_no-overflow_1e1ao_1",
+  "no-shrink": "_no-shrink_1e1ao_4",
+  grow: k,
+  "no-grow": "_no-grow_1e1ao_10"
+};
+function f(t) {
+  return typeof t == "string" ? t : d.q(t);
+}
+const B = g.forwardRef(function(s, a) {
+  const {
+    noOverflow: w = !1,
+    noShrink: _ = !1,
+    grow: n = void 0,
+    width: e,
+    height: i,
+    children: l,
+    className: c
+  } = s, h = x(r.root, c, {
+    [r["no-overflow"]]: w,
+    [r["no-shrink"]]: _,
+    [r["no-grow"]]: n === !1,
+    [r.grow]: n === !0
+  }), o = {
+    ...u(),
+    ...s.style || {}
+  };
+  return (e || i) && (e && (o.width = f(e)), i && (o.height = f(i))), !o.width && n === !0 && (o.width = "1px"), /* @__PURE__ */ m("div", { ref: a, className: h, style: o, children: l });
+});
+export {
+  B as Box
+};

package/dist/components/Layout/Center/Center.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface CenterProps {
+    vertical?: boolean;
+    horizontal?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Center: React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Layout/Center/Center.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import i from "react";
+import { clsx as _ } from "../../../utils/clsx.js";
+import '../../../assets/Center.css';const f = "_root_gr1d9_1", m = "_vertical_gr1d9_4", d = "_horizontal_gr1d9_8", o = {
+  root: f,
+  vertical: m,
+  horizontal: d
+}, g = i.forwardRef(function(r, t) {
+  const {
+    vertical: a = !1,
+    horizontal: e = !1,
+    className: c,
+    children: l
+  } = r, n = _(o.root, c, {
+    [o.vertical]: a,
+    [o.horizontal]: e
+  });
+  return /* @__PURE__ */ s("div", { ref: t, className: n, children: l });
+});
+export {
+  g as Center
+};

package/dist/components/Layout/Flex/Flex.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+
+export interface FlexProps {
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    centered?: boolean | 'axis' | 'cross-axis' | 'baseline-axis' | 'baseline-cross-axis';
+    vertical?: boolean;
+    reverseOrder?: boolean;
+    repell?: boolean;
+    stretch?: boolean;
+    wrap?: boolean;
+    spaceBetween?: boolean;
+    alignToEnd?: boolean;
+    alignToEndAxis?: boolean;
+    gap?: 'none' | 'thin' | 'small' | 'normal' | 'large' | 'xlarge';
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const FlexComponentReffed: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+type FlexType = typeof FlexComponentReffed & {
+    Restricted: React.FC<{
+        children?: React.ReactNode;
+    }>;
+};
+export declare const Flex: FlexType;
+export {};