@versini/ui-system 5.1.0 → 6.0.0

package/README.md

@@ -32,7 +32,8 @@ npm install @versini/ui-system
 ### Basic Grid Layout
 
 ```tsx
-import { Flexgrid, FlexgridItem } from "@versini/ui-system";
+import { Flexgrid } from "@versini/ui-system/flexgrid";
+import { FlexgridItem } from "@versini/ui-system/flexgrid-item";
 
 function App() {
   return (

package/dist/common/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const FLEXGRID_CLASSNAME = "av-flexgrid";
+export declare const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item";
+export declare const THEMEPROVIDER_CLASSNAME = "av-theme-provider";
+export declare const FLEXGRID_GAP_RATIO = 0.25;

package/dist/common/constants.js

@@ -0,0 +1,8 @@
+
+;// CONCATENATED MODULE: ./src/common/constants.ts
+const FLEXGRID_CLASSNAME = "av-flexgrid";
+const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item";
+const THEMEPROVIDER_CLASSNAME = "av-theme-provider";
+const FLEXGRID_GAP_RATIO = 0.25;
+
+export { FLEXGRID_CLASSNAME, FLEXGRID_GAP_RATIO, FLEXGRID_ITEM_CLASSNAME, THEMEPROVIDER_CLASSNAME };

package/dist/components/Flexgrid/Flexgrid.d.ts

@@ -0,0 +1,3 @@
+import type { FlexgridProps } from "./FlexgridTypes";
+export declare const Flexgrid: ({ children, className, columnGap, rowGap, height, width, direction, alignHorizontal, alignVertical, ...otherProps }: FlexgridProps) => import("react/jsx-runtime").JSX.Element;
+export default Flexgrid;

package/dist/components/Flexgrid/Flexgrid.js

@@ -1,39 +1,61 @@
-import { jsx as r } from "react/jsx-runtime";
-import u from "clsx";
-import { FLEXGRID_CLASSNAME as p, FLEXGRID_GAP_RATIO as a } from "../../chunks/constants.Gcd2KXZh.js";
-import { FlexgridContext as d } from "../../chunks/FlexgridContext.W67Qim_P.js";
-const L = ({
-  children: e,
-  className: o,
-  columnGap: t = 1,
-  rowGap: i = 0,
-  height: x = "auto",
-  width: f = "auto",
-  direction: c = "row",
-  alignHorizontal: v = "normal",
-  alignVertical: g = "normal",
-  ...l
-}) => {
-  const m = {
-    flexDirection: c,
-    justifyContent: v,
-    alignItems: g,
-    height: x,
-    width: f,
-    /**
-     * Trick to account for the extra space taken
-     * by the columnGap and rowGap that will be applied
-     * to all FlexgridItems (see context and paddings).
-     */
-    marginLeft: t * -1 * a + "rem",
-    marginTop: i * -1 * a + "rem"
-  }, n = u(
-    p,
-    "box-border flex flex-wrap"
-  ), s = { columnGap: t, rowGap: i };
-  return o ? /* @__PURE__ */ r("div", { className: o, children: /* @__PURE__ */ r("div", { className: n, style: m, ...l, children: /* @__PURE__ */ r(d.Provider, { value: s, children: e }) }) }) : /* @__PURE__ */ r("div", { className: n, style: m, ...l, children: /* @__PURE__ */ r(d.Provider, { value: s, children: e }) });
-};
-export {
-  L as Flexgrid,
-  L as default
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { FLEXGRID_CLASSNAME, FLEXGRID_GAP_RATIO } from "../../common/constants.js";
+import { FlexgridContext } from "./FlexgridContext.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "../../common/constants.js"
+
+;// CONCATENATED MODULE: external "./FlexgridContext.js"
+
+;// CONCATENATED MODULE: ./src/components/Flexgrid/Flexgrid.tsx
+
+
+
+
+const Flexgrid = ({ children, className, columnGap = 1, rowGap = 0, height = "auto", width = "auto", direction = "row", alignHorizontal = "normal", alignVertical = "normal", ...otherProps })=>{
+    const cssRoot = {
+        flexDirection: direction,
+        justifyContent: alignHorizontal,
+        alignItems: alignVertical,
+        height,
+        width,
+        /**
+		 * Trick to account for the extra space taken
+		 * by the columnGap and rowGap that will be applied
+		 * to all FlexgridItems (see context and paddings).
+		 */ marginLeft: columnGap * -1 * FLEXGRID_GAP_RATIO + "rem",
+        marginTop: rowGap * -1 * FLEXGRID_GAP_RATIO + "rem"
+    };
+    const flexgridClassName = clsx(FLEXGRID_CLASSNAME, "box-border flex flex-wrap");
+    const context = {
+        columnGap,
+        rowGap
+    };
+    return className ? /*#__PURE__*/ jsx("div", {
+        className: className,
+        children: /*#__PURE__*/ jsx("div", {
+            className: flexgridClassName,
+            style: cssRoot,
+            ...otherProps,
+            children: /*#__PURE__*/ jsx(FlexgridContext.Provider, {
+                value: context,
+                children: children
+            })
+        })
+    }) : /*#__PURE__*/ jsx("div", {
+        className: flexgridClassName,
+        style: cssRoot,
+        ...otherProps,
+        children: /*#__PURE__*/ jsx(FlexgridContext.Provider, {
+            value: context,
+            children: children
+        })
+    });
 };
+/* export default */ const Flexgrid_Flexgrid = (Flexgrid);
+
+export { Flexgrid, Flexgrid_Flexgrid as default };

package/dist/components/Flexgrid/FlexgridContext.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const FlexgridContext: React.Context<{
+    columnGap: number;
+    rowGap: number;
+}>;

package/dist/components/Flexgrid/FlexgridContext.js

@@ -0,0 +1,12 @@
+import react from "react";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/components/Flexgrid/FlexgridContext.ts
+
+const FlexgridContext = react.createContext({
+    columnGap: 0,
+    rowGap: 0
+});
+
+export { FlexgridContext };

package/dist/components/Flexgrid/FlexgridItem.d.ts

@@ -0,0 +1,7 @@
+import type { FlexgridItemProps } from "./FlexgridTypes";
+/**
+ * FlexgridItem is a child of Flexgrid. It is used to define the width of a
+ * column in a Flexgrid. It can be used to span across multiple columns in a
+ * Flexgrid by providing a number of columns or "auto" value to the `span` prop.
+ */
+export declare const FlexgridItem: ({ children, className, span, ...otherProps }: FlexgridItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Flexgrid/FlexgridItem.js

@@ -1,119 +1,45 @@
-import { jsx as I } from "react/jsx-runtime";
-import { useContext as F } from "react";
-import { FLEXGRID_ITEM_CLASSNAME as g, FLEXGRID_GAP_RATIO as u } from "../../chunks/constants.Gcd2KXZh.js";
-import { FlexgridContext as G } from "../../chunks/FlexgridContext.W67Qim_P.js";
-import m from "clsx";
-const i = (l, s) => m({
-  "basis-1/12": l === 1 && !s,
-  "sm:basis-1/12": l === 1 && s === "sm",
-  "md:basis-1/12": l === 1 && s === "md",
-  "lg:basis-1/12": l === 1 && s === "lg",
-  "xl:basis-1/12": l === 1 && s === "xl",
-  "2xl:basis-1/12": l === 1 && s === "2xl",
-  "basis-2/12": l === 2 && !s,
-  "sm:basis-2/12": l === 2 && s === "sm",
-  "md:basis-2/12": l === 2 && s === "md",
-  "lg:basis-2/12": l === 2 && s === "lg",
-  "xl:basis-2/12": l === 2 && s === "xl",
-  "2xl:basis-2/12": l === 2 && s === "2xl",
-  "basis-3/12": l === 3 && !s,
-  "sm:basis-3/12": l === 3 && s === "sm",
-  "md:basis-3/12": l === 3 && s === "md",
-  "lg:basis-3/12": l === 3 && s === "lg",
-  "xl:basis-3/12": l === 3 && s === "xl",
-  "2xl:basis-3/12": l === 3 && s === "2xl",
-  "basis-4/12": l === 4 && !s,
-  "sm:basis-4/12": l === 4 && s === "sm",
-  "md:basis-4/12": l === 4 && s === "md",
-  "lg:basis-4/12": l === 4 && s === "lg",
-  "xl:basis-4/12": l === 4 && s === "xl",
-  "2xl:basis-4/12": l === 4 && s === "2xl",
-  "basis-5/12": l === 5 && !s,
-  "sm:basis-5/12": l === 5 && s === "sm",
-  "md:basis-5/12": l === 5 && s === "md",
-  "lg:basis-5/12": l === 5 && s === "lg",
-  "xl:basis-5/12": l === 5 && s === "xl",
-  "2xl:basis-5/12": l === 5 && s === "2xl",
-  "basis-6/12": l === 6 && !s,
-  "sm:basis-6/12": l === 6 && s === "sm",
-  "md:basis-6/12": l === 6 && s === "md",
-  "lg:basis-6/12": l === 6 && s === "lg",
-  "xl:basis-6/12": l === 6 && s === "xl",
-  "2xl:basis-6/12": l === 6 && s === "2xl",
-  "basis-7/12": l === 7 && !s,
-  "sm:basis-7/12": l === 7 && s === "sm",
-  "md:basis-7/12": l === 7 && s === "md",
-  "lg:basis-7/12": l === 7 && s === "lg",
-  "xl:basis-7/12": l === 7 && s === "xl",
-  "2xl:basis-7/12": l === 7 && s === "2xl",
-  "basis-8/12": l === 8 && !s,
-  "sm:basis-8/12": l === 8 && s === "sm",
-  "md:basis-8/12": l === 8 && s === "md",
-  "lg:basis-8/12": l === 8 && s === "lg",
-  "xl:basis-8/12": l === 8 && s === "xl",
-  "2xl:basis-8/12": l === 8 && s === "2xl",
-  "basis-9/12": l === 9 && !s,
-  "sm:basis-9/12": l === 9 && s === "sm",
-  "md:basis-9/12": l === 9 && s === "md",
-  "lg:basis-9/12": l === 9 && s === "lg",
-  "xl:basis-9/12": l === 9 && s === "xl",
-  "2xl:basis-9/12": l === 9 && s === "2xl",
-  "basis-10/12": l === 10 && !s,
-  "sm:basis-10/12": l === 10 && s === "sm",
-  "md:basis-10/12": l === 10 && s === "md",
-  "lg:basis-10/12": l === 10 && s === "lg",
-  "xl:basis-10/12": l === 10 && s === "xl",
-  "2xl:basis-10/12": l === 10 && s === "2xl",
-  "basis-11/12": l === 11 && !s,
-  "sm:basis-11/12": l === 11 && s === "sm",
-  "md:basis-11/12": l === 11 && s === "md",
-  "lg:basis-11/12": l === 11 && s === "lg",
-  "xl:basis-11/12": l === 11 && s === "xl",
-  "2xl:basis-11/12": l === 11 && s === "2xl",
-  "basis-full": l === 12 && !s,
-  "sm:basis-full": l === 12 && s === "sm",
-  "md:basis-full": l === 12 && s === "md",
-  "lg:basis-full": l === 12 && s === "lg",
-  "xl:basis-full": l === 12 && s === "xl",
-  "2xl:basis-full": l === 12 && s === "2xl"
-}), w = ({
-  className: l,
-  span: s
-}) => {
-  if (!s)
-    return m(l, g, "box-border basis-auto");
-  if (typeof s == "number")
-    return m(l, g, "box-border max-w-full", {
-      [`${i(s)}`]: !0
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FLEXGRID_GAP_RATIO } from "../../common/constants.js";
+import { FlexgridContext } from "./FlexgridContext.js";
+import { getFlexItemClasses } from "./utilities.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "../../common/constants.js"
+
+;// CONCATENATED MODULE: external "./FlexgridContext.js"
+
+;// CONCATENATED MODULE: external "./utilities.js"
+
+;// CONCATENATED MODULE: ./src/components/Flexgrid/FlexgridItem.tsx
+
+
+
+
+
+/**
+ * FlexgridItem is a child of Flexgrid. It is used to define the width of a
+ * column in a Flexgrid. It can be used to span across multiple columns in a
+ * Flexgrid by providing a number of columns or "auto" value to the `span` prop.
+ */ const FlexgridItem = ({ children, className, span, ...otherProps })=>{
+    const { columnGap, rowGap } = useContext(FlexgridContext);
+    const cssRoot = {
+        paddingLeft: columnGap * FLEXGRID_GAP_RATIO + "rem",
+        paddingTop: rowGap * FLEXGRID_GAP_RATIO + "rem"
+    };
+    const flexgridItemClassName = getFlexItemClasses({
+        className,
+        span
     });
-  if (typeof s == "string")
-    return m(l, g, "box-border basis-auto", {
-      "max-w-full grow": s === "auto"
+    return /*#__PURE__*/ jsx("div", {
+        className: flexgridItemClassName,
+        style: cssRoot,
+        ...otherProps,
+        children: children
     });
-  if (typeof s == "object") {
-    const f = Object.entries(s).map(([x, d]) => x === "fallback" ? i(d) : i(d, x));
-    return m(
-      l,
-      g,
-      "box-border",
-      f
-    );
-  }
-}, j = ({
-  children: l,
-  className: s,
-  span: f,
-  ...x
-}) => {
-  const { columnGap: d, rowGap: b } = F(G), c = {
-    paddingLeft: d * u + "rem",
-    paddingTop: b * u + "rem"
-  }, C = w({
-    className: s,
-    span: f
-  });
-  return /* @__PURE__ */ I("div", { className: C, style: c, ...x, children: l });
-};
-export {
-  j as FlexgridItem
 };
+
+export { FlexgridItem };

package/dist/components/Flexgrid/utilities.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns the classes for a FlexgridItem component.
+ * @param className - The class name to be applied to the FlexgridItem.
+ * @param span - The number of columns to span across in the Flexgrid.
+ * @returns The classes for a FlexgridItem component.
+ */
+export declare const getFlexItemClasses: ({ className, span, }: {
+    className?: string;
+    span?: number | "auto" | {
+        fallback?: number;
+        lg?: number;
+        md?: number;
+        sm?: number;
+        xl?: number;
+    };
+}) => string | undefined;

package/dist/components/Flexgrid/utilities.js

@@ -0,0 +1,123 @@
+import clsx from "clsx";
+import { FLEXGRID_ITEM_CLASSNAME } from "../../common/constants.js";
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "../../common/constants.js"
+
+;// CONCATENATED MODULE: ./src/components/Flexgrid/utilities.ts
+
+
+const getBasisClass = (span, breakpoint)=>{
+    return clsx({
+        "basis-1/12": span === 1 && !breakpoint,
+        "sm:basis-1/12": span === 1 && breakpoint === "sm",
+        "md:basis-1/12": span === 1 && breakpoint === "md",
+        "lg:basis-1/12": span === 1 && breakpoint === "lg",
+        "xl:basis-1/12": span === 1 && breakpoint === "xl",
+        "2xl:basis-1/12": span === 1 && breakpoint === "2xl",
+        "basis-2/12": span === 2 && !breakpoint,
+        "sm:basis-2/12": span === 2 && breakpoint === "sm",
+        "md:basis-2/12": span === 2 && breakpoint === "md",
+        "lg:basis-2/12": span === 2 && breakpoint === "lg",
+        "xl:basis-2/12": span === 2 && breakpoint === "xl",
+        "2xl:basis-2/12": span === 2 && breakpoint === "2xl",
+        "basis-3/12": span === 3 && !breakpoint,
+        "sm:basis-3/12": span === 3 && breakpoint === "sm",
+        "md:basis-3/12": span === 3 && breakpoint === "md",
+        "lg:basis-3/12": span === 3 && breakpoint === "lg",
+        "xl:basis-3/12": span === 3 && breakpoint === "xl",
+        "2xl:basis-3/12": span === 3 && breakpoint === "2xl",
+        "basis-4/12": span === 4 && !breakpoint,
+        "sm:basis-4/12": span === 4 && breakpoint === "sm",
+        "md:basis-4/12": span === 4 && breakpoint === "md",
+        "lg:basis-4/12": span === 4 && breakpoint === "lg",
+        "xl:basis-4/12": span === 4 && breakpoint === "xl",
+        "2xl:basis-4/12": span === 4 && breakpoint === "2xl",
+        "basis-5/12": span === 5 && !breakpoint,
+        "sm:basis-5/12": span === 5 && breakpoint === "sm",
+        "md:basis-5/12": span === 5 && breakpoint === "md",
+        "lg:basis-5/12": span === 5 && breakpoint === "lg",
+        "xl:basis-5/12": span === 5 && breakpoint === "xl",
+        "2xl:basis-5/12": span === 5 && breakpoint === "2xl",
+        "basis-6/12": span === 6 && !breakpoint,
+        "sm:basis-6/12": span === 6 && breakpoint === "sm",
+        "md:basis-6/12": span === 6 && breakpoint === "md",
+        "lg:basis-6/12": span === 6 && breakpoint === "lg",
+        "xl:basis-6/12": span === 6 && breakpoint === "xl",
+        "2xl:basis-6/12": span === 6 && breakpoint === "2xl",
+        "basis-7/12": span === 7 && !breakpoint,
+        "sm:basis-7/12": span === 7 && breakpoint === "sm",
+        "md:basis-7/12": span === 7 && breakpoint === "md",
+        "lg:basis-7/12": span === 7 && breakpoint === "lg",
+        "xl:basis-7/12": span === 7 && breakpoint === "xl",
+        "2xl:basis-7/12": span === 7 && breakpoint === "2xl",
+        "basis-8/12": span === 8 && !breakpoint,
+        "sm:basis-8/12": span === 8 && breakpoint === "sm",
+        "md:basis-8/12": span === 8 && breakpoint === "md",
+        "lg:basis-8/12": span === 8 && breakpoint === "lg",
+        "xl:basis-8/12": span === 8 && breakpoint === "xl",
+        "2xl:basis-8/12": span === 8 && breakpoint === "2xl",
+        "basis-9/12": span === 9 && !breakpoint,
+        "sm:basis-9/12": span === 9 && breakpoint === "sm",
+        "md:basis-9/12": span === 9 && breakpoint === "md",
+        "lg:basis-9/12": span === 9 && breakpoint === "lg",
+        "xl:basis-9/12": span === 9 && breakpoint === "xl",
+        "2xl:basis-9/12": span === 9 && breakpoint === "2xl",
+        "basis-10/12": span === 10 && !breakpoint,
+        "sm:basis-10/12": span === 10 && breakpoint === "sm",
+        "md:basis-10/12": span === 10 && breakpoint === "md",
+        "lg:basis-10/12": span === 10 && breakpoint === "lg",
+        "xl:basis-10/12": span === 10 && breakpoint === "xl",
+        "2xl:basis-10/12": span === 10 && breakpoint === "2xl",
+        "basis-11/12": span === 11 && !breakpoint,
+        "sm:basis-11/12": span === 11 && breakpoint === "sm",
+        "md:basis-11/12": span === 11 && breakpoint === "md",
+        "lg:basis-11/12": span === 11 && breakpoint === "lg",
+        "xl:basis-11/12": span === 11 && breakpoint === "xl",
+        "2xl:basis-11/12": span === 11 && breakpoint === "2xl",
+        "basis-full": span === 12 && !breakpoint,
+        "sm:basis-full": span === 12 && breakpoint === "sm",
+        "md:basis-full": span === 12 && breakpoint === "md",
+        "lg:basis-full": span === 12 && breakpoint === "lg",
+        "xl:basis-full": span === 12 && breakpoint === "xl",
+        "2xl:basis-full": span === 12 && breakpoint === "2xl"
+    });
+};
+/**
+ * Returns the classes for a FlexgridItem component.
+ * @param className - The class name to be applied to the FlexgridItem.
+ * @param span - The number of columns to span across in the Flexgrid.
+ * @returns The classes for a FlexgridItem component.
+ */ const getFlexItemClasses = ({ className, span })=>{
+    if (!span) {
+        return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border basis-auto");
+    }
+    if (typeof span === "number") {
+        return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border max-w-full", {
+            [`${getBasisClass(span)}`]: true
+        });
+    }
+    if (typeof span === "string") {
+        return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border basis-auto", {
+            "max-w-full grow": span === "auto"
+        });
+    }
+    /**
+	 * If span is an object, it means it's a responsive prop.
+	 * For example:
+	 * { fallback: 12, sm: 6, md: 3, lg: 3, xl: 12 }
+	 * should be converted to:
+	 * "basis-full sm:basis-6/12 md:basis-3/12 lg:basis-3/12 xl:basis-full"
+	 */ /* v8 ignore start - responsive span object handling */ if (typeof span === "object") {
+        const responsiveClasses = Object.entries(span).map(([key, value])=>{
+            if (key === "fallback") {
+                return getBasisClass(value);
+            }
+            return getBasisClass(value, key);
+        });
+        return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border", responsiveClasses);
+    }
+/* v8 ignore stop */ };
+
+export { getFlexItemClasses };

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProviderProps } from "./ThemeProviderTypes";
+export declare const ThemeProvider: ({ customTheme, children, global, className, }: ThemeProviderProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,21 +1,45 @@
-import { jsx as i } from "react/jsx-runtime";
-import m from "clsx";
-import { useRef as u, useEffect as E } from "react";
-import { THEMEPROVIDER_CLASSNAME as a } from "../../chunks/constants.Gcd2KXZh.js";
-const v = ({
-  customTheme: r,
-  children: t,
-  global: e,
-  className: s
-}) => {
-  const o = u(null), f = m(a, "contents", s);
-  return E(() => {
-    const n = e ? document.documentElement.style : o?.current?.style;
-    if (!(!n || !r))
-      for (const [p, c] of Object.entries(r))
-        n.setProperty(p, c);
-  }, [r, e]), e && !r ? t : /* @__PURE__ */ i("div", { ref: o, className: f, children: t });
-};
-export {
-  v as ThemeProvider
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import { THEMEPROVIDER_CLASSNAME } from "../../common/constants.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "../../common/constants.js"
+
+;// CONCATENATED MODULE: ./src/components/ThemeProvider/ThemeProvider.tsx
+
+
+
+
+const ThemeProvider = ({ customTheme, children, global, className })=>{
+    const wrapperRef = useRef(null);
+    const wrapperClass = clsx(THEMEPROVIDER_CLASSNAME, "contents", className);
+    useEffect(()=>{
+        const wrapper = global ? document.documentElement.style : wrapperRef?.current?.style;
+        if (!wrapper || !customTheme) {
+            return;
+        }
+        for (const [key, value] of Object.entries(customTheme)){
+            wrapper.setProperty(key, value);
+        }
+    }, [
+        customTheme,
+        global
+    ]);
+    // If global is true and no customTheme, just return children without wrapper
+    if (global && !customTheme) {
+        return children;
+    }
+    return /*#__PURE__*/ jsx("div", {
+        ref: wrapperRef,
+        className: wrapperClass,
+        children: children
+    });
 };
+
+export { ThemeProvider };

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+import { Flexgrid } from "./Flexgrid/Flexgrid";
+import { FlexgridItem } from "./Flexgrid/FlexgridItem";
+import { ThemeProvider } from "./ThemeProvider/ThemeProvider";
+export { Flexgrid, FlexgridItem, ThemeProvider };

package/dist/components/index.js

@@ -0,0 +1,17 @@
+import { Flexgrid } from "./Flexgrid/Flexgrid.js";
+import { FlexgridItem } from "./Flexgrid/FlexgridItem.js";
+import { ThemeProvider } from "./ThemeProvider/ThemeProvider.js";
+
+;// CONCATENATED MODULE: external "./Flexgrid/Flexgrid.js"
+
+;// CONCATENATED MODULE: external "./Flexgrid/FlexgridItem.js"
+
+;// CONCATENATED MODULE: external "./ThemeProvider/ThemeProvider.js"
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+
+
+export { Flexgrid, FlexgridItem, ThemeProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-system",
-	"version": "5.1.0",
+	"version": "6.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -12,8 +12,20 @@
 		"url": "git@github.com:aversini/ui-components.git"
 	},
 	"type": "module",
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
+	"exports": {
+		"./flexgrid": {
+			"types": "./dist/components/Flexgrid/Flexgrid.d.ts",
+			"import": "./dist/components/Flexgrid/Flexgrid.js"
+		},
+		"./flexgrid-item": {
+			"types": "./dist/components/Flexgrid/FlexgridItem.d.ts",
+			"import": "./dist/components/Flexgrid/FlexgridItem.js"
+		},
+		"./theme-provider": {
+			"types": "./dist/components/ThemeProvider/ThemeProvider.d.ts",
+			"import": "./dist/components/ThemeProvider/ThemeProvider.js"
+		}
+	},
 	"bin": {
 		"flexgrid-to-tw": "dist/cli/flexgrid-to-tw.js"
 	},
@@ -24,13 +36,13 @@
 	"scripts": {
 		"build:check": "tsc",
 		"build:cli": "vite build --config vite.cli.config.ts",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:cli build:types",
-		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js build:cli",
+		"clean": "rimraf dist tmp coverage",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -42,7 +54,7 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-types": "8.1.0"
+		"@versini/ui-types": "8.1.1"
 	},
 	"dependencies": {
 		"clsx": "2.1.1",
@@ -51,5 +63,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "b2ee2e328ecadfbedcb26d14afa896a30f0ab54b"
+	"gitHead": "6c08c752fd230a10f88c1bf315be99d714d55b08"
 }

package/dist/chunks/FlexgridContext.W67Qim_P.js

@@ -1,8 +0,0 @@
-import t from "react";
-const e = t.createContext({
-  columnGap: 0,
-  rowGap: 0
-});
-export {
-  e as FlexgridContext
-};

package/dist/chunks/constants.Gcd2KXZh.js

@@ -1,7 +0,0 @@
-const E = "av-flexgrid", A = "av-flexgrid-item", e = "av-theme-provider", t = 0.25;
-export {
-  E as FLEXGRID_CLASSNAME,
-  t as FLEXGRID_GAP_RATIO,
-  A as FLEXGRID_ITEM_CLASSNAME,
-  e as THEMEPROVIDER_CLASSNAME
-};

package/dist/index.d.ts

@@ -1,137 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-
-type FlexgridProps = {
-	/**
-	 * Children of the Flexgrid (FlexgridItem(s) or any other nodes).
-	 */
-	children: React.ReactNode;
-
-	/**
-	 * Equivalent to "justify-content" in flexbox, this prop defines
-	 * the alignment along the main axis (horizontal).
-	 */
-	alignHorizontal?:
-		| "normal"
-		| "flex-start"
-		| "center"
-		| "flex-end"
-		| "space-between"
-		| "space-around"
-		| "space-evenly";
-
-	/**
-	 * Equivalent to "align-items" in flexbox, this prop defines
-	 * the alignment along the cross axis (vertical).
-	 */
-	alignVertical?:
-		| "normal"
-		| "flex-start"
-		| "center"
-		| "flex-end"
-		| "stretch"
-		| "baseline";
-
-	/**
-	 * The class name of the Flexgrid.
-	 * It follows the [CSS class name property](https://developer.mozilla.org/en-US/docs/Web/CSS/class).
-	 */
-	className?: string;
-
-	/**
-	 * Width of the gutters between the columns.
-	 * See the “Customization -> Spacing” section for
-	 * more information about this unit.
-	 */
-	columnGap?: number;
-
-	/**
-	 * Equivalent to "flex-direction" in flexbox, this prop
-	 * establishes the main-axis, thus defining the direction
-	 * flex items are placed in the flex container. Flexbox is
-	 * (aside from optional wrapping) a single-direction layout
-	 * concept. Think of flex items as primarily laying out
-	 * either in horizontal rows or vertical columns.
-	 */
-	direction?: "row" | "row-reverse" | "column" | "column-reverse";
-
-	/**
-	 * The height of the Flexgrid.
-	 * It follows the [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height).
-	 */
-	height?: string;
-
-	/**
-	 * Width of the gutters between the rows.
-	 * See the “Customization -> Spacing” section for
-	 * more information about this unit.
-	 */
-	rowGap?: number;
-
-	/**
-	 * The width of the Flexgrid.
-	 * It follows the [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width).
-	 */
-	width?: string;
-};
-
-type FlexgridItemProps = {
-	/** Children of the FlexgridItem. */
-	children?: React.ReactNode;
-
-	/** Classname to apply to the FlexgridItem. */
-	className?: string;
-
-	/** The item will span across the provided number of grid tracks. */
-	span?:
-		| number
-		| "auto"
-		| {
-				fallback?: number;
-				lg?: number;
-				md?: number;
-				sm?: number;
-				xl?: number;
-		  };
-};
-
-declare const Flexgrid: ({ children, className, columnGap, rowGap, height, width, direction, alignHorizontal, alignVertical, ...otherProps }: FlexgridProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * FlexgridItem is a child of Flexgrid. It is used to define the width of a
- * column in a Flexgrid. It can be used to span across multiple columns in a
- * Flexgrid by providing a number of columns or "auto" value to the `span` prop.
- */
-declare const FlexgridItem: ({ children, className, span, ...otherProps }: FlexgridItemProps) => react_jsx_runtime.JSX.Element;
-
-type ThemeProviderProps = {
-	/**
-	 * The children to render.
-	 */
-	children: React.ReactNode;
-	/**
-	 * CSS class(es) to add to the main component wrapper.
-	 */
-	className?: string;
-	/**
-	 * An object specifying custom properties impacting the base theme.
-	 * Not all custom properties need to be specified.
-	 * @example
-	 * ```tsx
-	 * // this will change the color of the button to red.
-	 * <ThemeProvider customTheme={{ '--av-action-dark': 'red' }}>
-	 *  <Button kind="dark">Click me</Button>
-	 * </ThemeProvider>
-	 * ```
-	 */
-	customTheme?: Record<string, string>;
-	/**
-	 * Whether to apply the theme globally or not.
-	 * @default false
-	 */
-	global?: boolean;
-};
-
-declare const ThemeProvider: ({ customTheme, children, global, className, }: ThemeProviderProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
-
-export { Flexgrid, FlexgridItem, ThemeProvider };

package/dist/index.js

@@ -1,17 +0,0 @@
-import { Flexgrid as o } from "./components/Flexgrid/Flexgrid.js";
-import { FlexgridItem as m } from "./components/Flexgrid/FlexgridItem.js";
-import { ThemeProvider as I } from "./components/ThemeProvider/ThemeProvider.js";
-try {
-  window.__VERSINI_UI_SYSTEM__ || (window.__VERSINI_UI_SYSTEM__ = {
-    version: "5.1.0",
-    buildTime: "12/25/2025 10:40 AM EST",
-    homepage: "https://www.npmjs.com/package/@versini/ui-system",
-    license: "MIT"
-  });
-} catch {
-}
-export {
-  o as Flexgrid,
-  m as FlexgridItem,
-  I as ThemeProvider
-};