@julseb-lib/react 1.1.23 → 1.1.25

package/dist/{Image-2WXN57FZ.js → Image-SKLDS4YE.js}

@@ -1,6 +1,6 @@
 import {
   Image
-} from "./chunk-AKGT77NY.js";
+} from "./chunk-UHS3R3PM.js";
 
 // src/lib/components/LazyImage/Image.tsx
 import { jsx } from "react/jsx-runtime";
@@ -11,4 +11,4 @@ var Image_default = Image2;
 export {
   Image_default as default
 };
-//# sourceMappingURL=Image-2WXN57FZ.js.map
+//# sourceMappingURL=Image-SKLDS4YE.js.map

package/dist/{chunk-AKGT77NY.js → chunk-UHS3R3PM.js}

@@ -8,6 +8,77 @@ var libTextDisplayTags = {
 };
 var designTokens = {
   libColors: {
+    /**
+     * All the colors in the lib
+     * Primary 50 — #eff6ff
+     * Primary 100 — #dbeafe
+     * Primary 200 — #bfdbfe
+     * Primary 300 — #93c5fd
+     * Primary 400 — #60a5fa
+     * Primary 500 — #3b82f6
+     * Primary 600 — #2563eb
+     * Primary 700 — #1d4ed8
+     * Primary 800 — #1e40af
+     * Primary 900 — #1e3a8a
+     * Primary 950 — #172554
+     * Secondary 50 — #ecfeff
+     * Secondary 100 — #cffafe
+     * Secondary 200 — #a5f3fc
+     * Secondary 300 — #67e8f9
+     * Secondary 400 — #22d3ee
+     * Secondary 500 — #06b6d4
+     * Secondary 600 — #0891b2
+     * Secondary 700 — #0e7490
+     * Secondary 800 — #155e75
+     * Secondary 900 — #164e63
+     * Secondary 950 — #083344
+     * Success 50 — #f0fdf4
+     * Success 100 — #dcfce7
+     * Success 200 — #bbf7d0
+     * Success 300 — #86efac
+     * Success 400 — #4ade80
+     * Success 500 — #22c55e
+     * Success 600 — #16a34a
+     * Success 700 — #15803d
+     * Success 800 — #166534
+     * Success 900 — #14532d
+     * Success 950 — #052e16
+     * Danger 50 — #fef2f2
+     * Danger 100 — #fee2e2
+     * Danger 200 — #fecaca
+     * Danger 300 — #fca5a5
+     * Danger 400 — #f87171
+     * Danger 500 — #ef4444
+     * Danger 600 — #dc2626
+     * Danger 700 — #b91c1c
+     * Danger 800 — #991b1b
+     * Danger 900 — #7f1d1d
+     * Danger 950 — #450a0a
+     * Warning 50 — #fffbeb
+     * Warning 100 — #fef3c7
+     * Warning 200 — #fde68a
+     * Warning 300 — #fcd34d
+     * Warning 400 — #fbbf24
+     * Warning 500 — #f59e42
+     * Warning 600 — #d97706
+     * Warning 700 — #b45309
+     * Warning 800 — #92400e
+     * Warning 900 — #78350f
+     * Warning 950 — #451a03
+     * Gray 50 — #f9fafb
+     * Gray 100 — #f3f4f6
+     * Gray 200 — #e5e7eb
+     * Gray 300 — #d1d5db
+     * Gray 400 — #9ca3af
+     * Gray 500 — #6b7280
+     * Gray 600 — #4b5563
+     * Gray 700 — #374151
+     * Gray 800 — #1f2937
+     * Gray 900 — #111827
+     * Gray 950 — #030712
+     * Black — #000000
+     * White — #ffffff
+     */
     "primary-50": "#eff6ff",
     "primary-100": "#dbeafe",
     "primary-200": "#bfdbfe",
@@ -82,6 +153,20 @@ var designTokens = {
     font: "font"
   },
   libColorsShort: {
+    /**
+     * Shorthand for each color (value is <color>-500)
+     * Primary — #3b82f6
+     * Secondary — #06b6d4
+     * Success — #22c55e
+     * Danger — #ef4444
+     * Warning — #f59e42
+     * Gray — #6b7280
+     * Black — #000000
+     * White — #ffffff
+     * Current - currentColor
+     * Transparent - transparent
+     * Background: #ffffff in light mode, #000000 in dark mode
+     */
     primary: "primary",
     secondary: "secondary",
     success: "success",
@@ -95,6 +180,16 @@ var designTokens = {
     background: "background"
   },
   libColorsHover: {
+    /**
+     * Colors used when an item is hovered
+     * Primary: Default Primary 500 — #3b82f6; Hover: Primary 300 — #93c5fd; Active: Primary 600 — #2563eb
+     * Secondary: Default: Secondary 500 — #06b6d4; Hover: Secondary 300 — #67e8f9; Active: Secondary 600 — #0891b2
+     * Success: Default: Success 500 — #22c55e; Hover: Success 300 — #86efac; Active: Success 600 — #16a34a
+     * Danger: Default: Danger 500 — #ef4444; Hover: Danger 300 — #fca5a5; Active: Danger 600 — #dc2626
+     * Warning: Default: Warning 500 — #f59e42; Hover: Warning 300 — #fcd34d; Active: Warning 600 — #d97706
+     * Gray: Default: Gray 500 — #6b7280; Hover: Gray 300 — #d1d5db; Active: Gray 600 — #4b5563
+     * White: Default: White - #ffffff; Hover: Gray 300 - #d1d5db; Active: Gray 100 - #f3f4f6
+     */
     primary: "primary",
     secondary: "secondary",
     success: "success",
@@ -104,6 +199,15 @@ var designTokens = {
     white: "white"
   },
   libOverlays: {
+    /**
+     * Overlay colors
+     * Black 50 - rgba(0, 0, 0, 0.5)
+     * Black 80 - rgba(0, 0, 0, 0.8)
+     * White 50 - rgba(255, 255, 255, 0.5)
+     * White 80 - rgba(255, 255, 255, 0.8)
+     * Gradient Black - linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%)
+     * Gradient White - linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%)
+     */
     "black-50": "black-50",
     "black-80": "black-80",
     "white-50": "white-50",
@@ -112,48 +216,77 @@ var designTokens = {
     "gradient-white": "gradient-white"
   },
   libFontFamilies: {
+    /**
+     * Font Families
+     * Body - Lato
+     * Code - monospace
+     */
     body: "body",
     code: "code"
   },
   libSpacers: {
-    /** 4px */
+    /** Spacers
+     * 2xs - 4px
+     * xs - 8px
+     * sm - 12px
+     * md - 16px
+     * lg - 24px
+     * xl - 32px
+     * 2xl - 48px
+     */
     "2xs": "2xs",
-    /** 8px */
     xs: "xs",
-    /** 12px */
     sm: "sm",
-    /** 16px */
     md: "md",
-    /** 24px */
     lg: "lg",
-    /** 32px */
     xl: "xl",
-    /** 48px */
     "2xl": "2xl"
   },
   libBreakpoints: {
+    /**
+     * Tailwind Breakpoints
+     * sm - 640px
+     * md - 768px
+     * lg - 1024px
+     * xl - 1280px
+     * 2xl - 1536px
+     */
     sm: "sm",
     md: "md",
     lg: "lg",
     xl: "xl",
     "2xl": "2xl"
   },
-  libContainer: {
-    "3xs": "3xs",
-    "2xs": "2xs",
-    xs: "xs",
-    sm: "sm",
-    md: "md",
-    lg: "lg",
-    xl: "xl",
-    "2xl": "2xl",
-    "3xl": "3xl",
-    "4xl": "4xl",
-    "5xl": "5xl",
-    "6xl": "6xl",
-    "7xl": "7xl"
-  },
   libFontSizes: {
+    /**
+     * Tailwind & Lib Font Sizes
+     * xs - 12px (0.75rem)
+     * sm - 14px (0.875rem)
+     * base - 16px (1rem)
+     * lg - 18px (1.125rem)
+     * xl - 20px (1.25rem)
+     * 2xl - 24px (1.5rem)
+     * 3xl - 30px (1.875rem)
+     * 4xl - 36px (2.25rem)
+     * 5xl - 48px (3rem)
+     * 6xl - 60px (3.75rem)
+     * 7xl - 72px (4.5rem)
+     * 8xl - 96px (6rem)
+     * 9xl - 128px (8rem)
+     * display-h1 - 80px (5rem)
+     * display-h2 - 64px (4rem)
+     * display-h3 - 56px (3.5rem)
+     * display-h4 - 48px (3rem)
+     * display-h5 - 40px (2.5rem)
+     * h1 - 40px (2.5rem)
+     * h2 - 32px (2rem)
+     * h3 - 28.8px (1.8rem)
+     * h4 - 24px (1.5rem)
+     * h5 - 20.8px (1.3rem)
+     * h6 - 17.6px (1.1rem)
+     * body - 16px (1rem)
+     * small - 14px (0.875rem)
+     */
     xs: "xs",
     sm: "sm",
     base: "base",
@@ -166,32 +299,34 @@ var designTokens = {
     "6xl": "6xl",
     "7xl": "7xl",
     "8xl": "8xl",
-    "9xl": "9xl"
-  },
-  libLineHeights: {
-    xs: "xs--line-height",
-    sm: "sm--line-height",
-    base: "base--line-height",
-    lg: "lg--line-height",
-    xl: "xl--line-height",
-    "2xl": "2xl--line-height",
-    "3xl": "3xl--line-height",
-    "4xl": "4xl--line-height",
-    "5xl": "5xl--line-height",
-    "6xl": "6xl--line-height",
-    "7xl": "7xl--line-height",
-    "8xl": "8xl--line-height",
-    "9xl": "9xl--line-height"
+    "9xl": "9xl",
+    "display-h1": "display-h1",
+    "display-h2": "display-h2",
+    "display-h3": "display-h3",
+    "display-h4": "display-h4",
+    "display-h5": "display-h5",
+    h1: "h1",
+    h2: "h2",
+    h3: "h3",
+    h4: "h4",
+    h5: "h5",
+    h6: "h6",
+    body: "body",
+    small: "small"
   },
   libFontWeights: {
+    /**
+     * Font weights for Lato
+     * Thin - 100
+     * Light - 300
+     * Normal - 400
+     * Bold - 700
+     * Black - 900
+     */
     thin: "thin",
-    extralight: "extralight",
     light: "light",
     normal: "normal",
-    medium: "medium",
-    semibold: "semibold",
     bold: "bold",
-    extrabold: "extrabold",
     black: "black"
   },
   libTracking: {
@@ -1569,16 +1704,57 @@ function scrollToTop() {
   }
 }
 
+// src/lib/utils/gen-font-size.ts
+var genFontSize = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl",
+  "5xl": "text-5xl",
+  "6xl": "text-6xl",
+  "7xl": "text-7xl",
+  "8xl": "text-8xl",
+  "9xl": "text-9xl",
+  "display-h1": "text-(length:--text-display-h1)",
+  "display-h2": "text-(length:--text-display-h2)",
+  "display-h3": "text-(length:--text-display-h3)",
+  "display-h4": "text-(length:--text-display-h4)",
+  "display-h5": "text-(length:--text-display-h5)",
+  h1: "text-(length:--text-h1)",
+  h2: "text-(length:--text-h2)",
+  h3: "text-(length:--text-h3)",
+  h4: "text-(length:--text-h4)",
+  h5: "text-(length:--text-h5)",
+  h6: "text-(length:--text-h6)",
+  body: "text-(length:--text-body)",
+  small: "text-(length:--text-small)"
+};
+
+// src/lib/utils/gen-font-weight.ts
+var genFontWeight = {
+  thin: "font-thin",
+  light: "font-light",
+  normal: "font-normal",
+  bold: "font-bold",
+  black: "font-black"
+};
+
 // src/lib/components/Text/templates/H1.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var H1 = ({
   element = "h1",
   className,
   children,
-  color = "currentColor",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
   display,
+  fontSize = display ? "display-h1" : "h1",
+  fontWeight = "black",
   ...rest
 }) => {
   const Element = element;
@@ -1586,9 +1762,9 @@ var H1 = ({
     Element,
     {
       className: clsx(
-        display ? "text-(length:--text-display-h1)" : "text-(length:--text-h1)",
+        genFontSize[fontSize],
         TEXT_BASE_CLASSES,
-        "font-black",
+        genFontWeight[fontWeight],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -1608,10 +1784,12 @@ var H2 = ({
   element = "h2",
   className,
   children,
-  color = "currentColor",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
   display,
+  fontSize = display ? "display-h2" : "h2",
+  fontWeight = "black",
   ...rest
 }) => {
   const Element = element;
@@ -1620,8 +1798,8 @@ var H2 = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "font-black",
-        display ? "text-(length:--text-display-h2)" : "text-(length:--text-h2)",
+        genFontWeight[fontWeight],
+        genFontSize[fontSize],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -1641,10 +1819,12 @@ var H3 = ({
   element = "h3",
   className,
   children,
-  color = "currentColor",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
   display,
+  fontSize = display ? "display-h3" : "h3",
+  fontWeight = "black",
   ...rest
 }) => {
   const Element = element;
@@ -1653,8 +1833,8 @@ var H3 = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "font-black",
-        display ? "text-(length:--text-display-h3)" : "text-(length:--text-h3)",
+        genFontWeight[fontWeight],
+        genFontSize[fontSize],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -1674,10 +1854,12 @@ var H4 = ({
   element = "h4",
   className,
   children,
-  color = "currentColor",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
   display,
+  fontSize = display ? "display-h4" : "h4",
+  fontWeight = "black",
   ...rest
 }) => {
   const Element = element;
@@ -1686,8 +1868,8 @@ var H4 = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "font-black",
-        display ? "text-(length:--text-display-h4)" : "text-(length:--text-h4)",
+        genFontWeight[fontWeight],
+        genFontSize[fontSize],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -1707,10 +1889,12 @@ var H5 = ({
   element = "h5",
   className,
   children,
-  color = "currentColor",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
   display,
+  fontSize = display ? "display-h5" : "h5",
+  fontWeight = "black",
   ...rest
 }) => {
   const Element = element;
@@ -1719,8 +1903,8 @@ var H5 = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "font-black",
-        display ? "text-(length:--text-display-h5)" : "text-(length:--text-h5)",
+        genFontWeight[fontWeight],
+        genFontSize[fontSize],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -1740,9 +1924,11 @@ var H6 = ({
   element = "h6",
   className,
   children,
-  color = "currentColor",
+  fontSize = "h6",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "black",
   ...rest
 }) => {
   const Element = element;
@@ -1751,8 +1937,8 @@ var H6 = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "text-h6",
-        "font-black",
+        genFontSize[fontSize],
+        genFontWeight[fontWeight],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -1772,9 +1958,11 @@ var P = ({
   element = "p",
   className,
   children,
-  color = "currentColor",
+  fontSize = "body",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "normal",
   ...rest
 }) => {
   const Element = element;
@@ -1783,11 +1971,12 @@ var P = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "text-body",
+        genFontSize[fontSize],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
         genButtonColor[linkColor],
+        genFontWeight[fontWeight],
         "p",
         className
       ),
@@ -1803,9 +1992,11 @@ var Small = ({
   element = "small",
   className,
   children,
-  color = "currentColor",
+  fontSize = "small",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "normal",
   ...rest
 }) => {
   const Element = element;
@@ -1814,11 +2005,12 @@ var Small = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "text-small",
+        genFontSize[fontSize],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
         genButtonColor[linkColor],
+        genFontWeight[fontWeight],
         "small",
         className
       ),
@@ -1834,9 +2026,11 @@ var Strong = ({
   element = "strong",
   className,
   children,
-  color = "currentColor",
+  fontSize = "body",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "black",
   ...rest
 }) => {
   const Element = element;
@@ -1845,7 +2039,8 @@ var Strong = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "font-black",
+        genFontSize[fontSize],
+        genFontWeight[fontWeight],
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -1865,9 +2060,11 @@ var Em = ({
   element = "em",
   className,
   children,
-  color = "currentColor",
+  fontSize = "body",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "normal",
   ...rest
 }) => {
   const Element = element;
@@ -1876,6 +2073,8 @@ var Em = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
+        genFontSize[fontSize],
+        genFontWeight[fontWeight],
         "italic",
         genTextAlign[textAlign],
         genTextAllColor[color],
@@ -1896,9 +2095,11 @@ var Blockquote = ({
   element = "blockquote",
   className,
   children,
-  color = "currentColor",
+  fontSize = "h6",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "normal",
   ...rest
 }) => {
   const Element = element;
@@ -1907,9 +2108,10 @@ var Blockquote = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "text-h6",
+        genFontSize[fontSize],
         "italic ps-4",
         genTextAlign[textAlign],
+        genFontWeight[fontWeight],
         genTextAllColor[color],
         genLinkColor[linkColor],
         genButtonColor[linkColor],
@@ -1928,9 +2130,11 @@ var Ul = ({
   element = "ul",
   className,
   children,
-  color = "currentColor",
+  fontSize = "body",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "normal",
   ...rest
 }) => {
   const Element = element;
@@ -1939,7 +2143,8 @@ var Ul = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "text-body",
+        genFontSize[fontSize],
+        genFontWeight[fontWeight],
         "list-disc ps-8",
         genTextAlign[textAlign],
         genTextAllColor[color],
@@ -1960,9 +2165,11 @@ var Ol = ({
   element = "ol",
   className,
   children,
-  color = "currentColor",
+  fontSize = "body",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "normal",
   ...rest
 }) => {
   const Element = element;
@@ -1971,7 +2178,8 @@ var Ol = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "text-body",
+        genFontSize[fontSize],
+        genFontWeight[fontWeight],
         "list-decimal ps-8",
         genTextAlign[textAlign],
         genTextAllColor[color],
@@ -1992,9 +2200,12 @@ var Dl = ({
   element = "dl",
   className,
   children,
-  color = "currentColor",
+  fontSize = "body",
+  color = "current",
   linkColor = "primary",
   textAlign = "left",
+  fontWeight = "normal",
+  dtFontWeight = "bold",
   ...rest
 }) => {
   const Element = element;
@@ -2003,9 +2214,10 @@ var Dl = ({
     {
       className: clsx(
         TEXT_BASE_CLASSES,
-        "text-body",
-        "[&>dt]:font-bold",
-        "[&>dd]:font-normal [&>dd]:ps-4",
+        genFontSize[fontSize],
+        generateFontWeightDt[dtFontWeight],
+        generateFontWeightDd[fontWeight],
+        "[&_dd]:ps-4",
         genTextAlign[textAlign],
         genTextAllColor[color],
         genLinkColor[linkColor],
@@ -2018,6 +2230,20 @@ var Dl = ({
     }
   );
 };
+var generateFontWeightDt = {
+  thin: "[&_dt]:font-thin",
+  light: "[&_dt]:font-light",
+  normal: "[&_dt]:font-normal",
+  bold: "[&_dt]:font-bold",
+  black: "[&_dt]:font-black"
+};
+var generateFontWeightDd = {
+  thin: "[&_dd]:font-thin",
+  light: "[&_dd]:font-light",
+  normal: "[&_dd]:font-normal",
+  bold: "[&_dd]:font-bold",
+  black: "[&_dd]:font-black"
+};
 
 // src/lib/components/Text/Text.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
@@ -2175,6 +2401,8 @@ export {
   disableScroll,
   enableScroll,
   scrollToTop,
+  genFontSize,
+  genFontWeight,
   Image
 };
-//# sourceMappingURL=chunk-AKGT77NY.js.map
+//# sourceMappingURL=chunk-UHS3R3PM.js.map