prometeo-design-system 2.2.2 → 2.3.1

package/dist/ProgressBar.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import u from "react";
 const j = u.forwardRef(

package/dist/SegmentedButton.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/SegmentedButton'
+export {}

package/dist/SegmentedButton.es.js

@@ -0,0 +1,188 @@
+import { j as u } from "./jsx-runtime-ByW6EXIE.js";
+import { c as d } from "./cn-B6yFEsav.js";
+import z, { useState as M, useMemo as C, useEffect as L } from "react";
+import { motion as E } from "framer-motion";
+const X = (T) => {
+  const [c, _] = M({}), { size: t = "medium", color: R = "default", options: l, value: p, name: x, onChange: j, icon: y, allowExpand: n = !1, disabled: s = !1 } = T, m = Math.max(l.findIndex((e) => e.value === p), 0), b = l.length, N = 9, w = 26, o = {
+    small: 120,
+    medium: 120,
+    large: 120
+  }, a = {
+    small: 94,
+    medium: 94,
+    large: 94
+  }, k = 16, S = {
+    small: { container: "p-2" },
+    medium: { container: "p-4 h-[48px] rounded-lg" },
+    large: { container: "p-6" }
+  }, f = {
+    default: {
+      switch: "bg-primary-medium-default text-neutral-weak-default ",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-default"
+    },
+    success: {
+      switch: "bg-success-medium-default text-neutral-weak-default",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-default"
+    },
+    danger: {
+      switch: "bg-error-medium-default text-neutral-weak-default",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-default"
+    },
+    warning: {
+      switch: "bg-warning-medium-default text-neutral-weak-default",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-default"
+    },
+    disabled: {
+      switch: "bg-primary-medium-disabled text-neutral-strong-disabled",
+      container: "border-neutral-default-disabled",
+      icon: "text-neutral-strong-disabled",
+      option: "text-neutral-strong-disabled"
+    }
+  }, I = l.find((e) => e.value === p) ?? l[0], g = I.label.length * N + k * 2 + w, W = () => C(() => Object.values(c).reduce((i, r) => i + r, 0) + w, [c]), v = {
+    small: n ? W() : (b - 1) * a.small + o.small,
+    medium: n ? W() : (b - 1) * a.medium + o.medium,
+    large: n ? W() : (b - 1) * a.large + o.large
+  };
+  L(() => {
+    if (!n) return;
+    let e = {};
+    l.forEach((i, r) => {
+      e[r] = i.label.length * N + k * 2;
+    }), _(e);
+  }, []);
+  const H = C(() => n ? Object.values(c).reduce((e, i, r) => r < m ? e + i : e, 0) : Math.max(m * a[t] - 2, 0), [m]), D = () => {
+    if (s) return;
+    const e = m === l.length - 1 ? l[0] : l[m + 1];
+    j?.(x, e.value);
+  }, h = s ? "disabled" : R;
+  return /* @__PURE__ */ u.jsxs(
+    "button",
+    {
+      name: x,
+      type: "button",
+      id: "segmented-button-container",
+      style: {
+        width: v[t],
+        minWidth: v[t],
+        maxWidth: v[t]
+      },
+      className: d(
+        S[t].container,
+        f[h].container,
+        "border-[1px]",
+        !s && "cursor-pointer",
+        "relative"
+      ),
+      children: [
+        /* @__PURE__ */ u.jsxs(
+          E.div,
+          {
+            id: "segmented-button-switcher",
+            animate: {
+              left: `${H}px`,
+              width: n ? g : o[t],
+              minWidth: n ? g : o[t],
+              maxWidth: n ? g : o[t]
+            },
+            transition: {
+              type: "spring",
+              stiffness: 260,
+              damping: 30
+            },
+            className: d(
+              "absolute top-0 left-0 h-full rounded-[6px] z-30",
+              "flex items-center justify-center gap-[2px] p-4",
+              f[h].switch
+            ),
+            onClick: () => {
+              !s && D();
+            },
+            children: [
+              y && z.cloneElement(y, { className: d(
+                "w-6 h-6 text-neutral-weak-default min-w-6 min-h-6",
+                f[h].icon
+              ) }),
+              /* @__PURE__ */ u.jsx(
+                "p",
+                {
+                  className: d(
+                    "prometeo-fonts-label-large ",
+                    " overflow-hidden overflow-ellipsis text-nowrap ",
+                    f[h].switch
+                  ),
+                  children: I.label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "div",
+          {
+            id: "segmented-button-options",
+            className: d(
+              "absolute top-0 left-0 w-full h-full overflow-hidden",
+              "flex justify-center"
+            ),
+            children: l?.map((e, i) => {
+              const r = e.value === (p || l[0].value), A = n ? c[i] + w : o[t], P = n ? c[i] : a[t], O = r ? A : P;
+              return /* @__PURE__ */ u.jsx(
+                E.span,
+                {
+                  id: "segmented-button-option",
+                  onClick: () => {
+                    !s && j?.(x, e.value);
+                  },
+                  animate: {
+                    width: O,
+                    minWidth: O,
+                    maxWidth: O
+                  },
+                  transition: {
+                    duration: 0.3,
+                    delay: 0
+                  },
+                  className: d(
+                    "z-20 h-full ",
+                    "flex items-center justify-center px-3 py-[6px]",
+                    "prometeo-fonts-label-large text-neutral-medium-default",
+                    " overflow-hidden ",
+                    !s && "cursor-pointer"
+                  ),
+                  "aria-label": e.label,
+                  children: /* @__PURE__ */ u.jsx(
+                    "p",
+                    {
+                      style: {
+                        width: n ? "max-content" : a[t],
+                        minWidth: n ? "max-content" : a[t],
+                        maxWidth: n ? "max-content" : a[t]
+                      },
+                      className: d(
+                        "px-3 place-content-center overflow-hidden text-ellipsis text-wrap prometeo-fonts-label-large  h-full",
+                        f[h].option
+                      ),
+                      children: e.label
+                    }
+                  )
+                },
+                e.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  X as SegmentedButton
+};

package/dist/Select.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as w } from "./Icons.es.js";
 import { c as o } from "./cn-B6yFEsav.js";
 import { memo as se, useState as y, useRef as re, useEffect as oe } from "react";

package/dist/SelectFormik.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as h } from "./Icons.es.js";
 import { c as i } from "./cn-B6yFEsav.js";
 import { useField as P, ErrorMessage as M } from "formik";

package/dist/Skeleton.es.js

@@ -1,10 +1,28 @@
-import { j as x } from "./jsx-runtime-DKDX3adD.js";
+import { j as x } from "./jsx-runtime-ByW6EXIE.js";
 import { c as P } from "./cn-B6yFEsav.js";
-import { useRef as $, useLayoutEffect as B } from "react";
-const v = (g) => {
-  const e = $(null), { debugMode: b = !1, className: y = "", children: p, shape: f = "rounded", animation: i = "shimmer", onlyContainer: m = !1 } = g;
-  let d = "255, 255, 255", u = "255, 255, 255, 0.1";
-  B(() => {
+import { useRef as $, useCallback as B, useLayoutEffect as E } from "react";
+const A = (b) => {
+  const e = $(null), { debugMode: y = !1, className: p = "", children: f, shape: h = "rounded", animation: u = "shimmer", onlyContainer: l = !1 } = b;
+  let i = "255, 255, 255", m = "255, 255, 255, 0.1";
+  const g = B(() => {
+    if (!l && e.current)
+      switch (u) {
+        case "shimmer":
+          e.current.classList.add("skeleton-shimmer-animation");
+          const n = m.split(",").map(Number);
+          n && n.length >= 3 && (e.current.style.setProperty("--shimmer-color-r", n[0].toString()), e.current.style.setProperty("--shimmer-color-g", n[1].toString()), e.current.style.setProperty("--shimmer-color-b", n[2].toString()), e.current.style.setProperty("--shimmer-color-a", n[3].toString()));
+          break;
+        case "none":
+          e.current.style.animation = "none";
+          break;
+        case "border":
+          e.current.classList.add("skeleton-border-animation"), e.current.style.backgroundColor = "transparent";
+          const c = i.match(/\d+/g);
+          c && c.length >= 3 && (e.current.style.setProperty("--border-color-r", c[0]), e.current.style.setProperty("--border-color-g", c[1]), e.current.style.setProperty("--border-color-b", c[2]));
+          break;
+      }
+  }, [u, m, i, l]);
+  E(() => {
     if (e.current) {
       const n = (a) => {
         let r = a;
@@ -25,28 +43,11 @@ const v = (g) => {
         const o = t.getImageData(0, 0, 1, 1).data;
         return [o[0], o[1], o[2]];
       }, C = n(e.current.parentElement), s = c(C), S = s.reduce((a, r) => a + r, 0) < 382;
-      let l;
-      S ? l = `rgb(${s[0] + 10}, ${s[1] + 10}, ${s[2] + 10})` : (l = `rgb(${s[0] - 30}, ${s[1] - 30}, ${s[2] - 30})`, d = "115,115,115", u = "255,255,255, 0.4"), m && (l = "transparent", e.current.style.animation = "none"), e.current.style.backgroundColor = l, h();
+      let d;
+      S ? d = `rgb(${s[0] + 10}, ${s[1] + 10}, ${s[2] + 10})` : (d = `rgb(${s[0] - 30}, ${s[1] - 30}, ${s[2] - 30})`, i = "115,115,115", m = "255,255,255, 0.4"), l && (d = "transparent", e.current.style.animation = "none"), e.current.style.backgroundColor = d, g();
     }
-  }, [i]);
-  const h = () => {
-    if (!m && e.current)
-      switch (i) {
-        case "shimmer":
-          e.current.classList.add("skeleton-shimmer-animation");
-          const n = u.split(",").map(Number);
-          n && n.length >= 3 && (e.current.style.setProperty("--shimmer-color-r", n[0].toString()), e.current.style.setProperty("--shimmer-color-g", n[1].toString()), e.current.style.setProperty("--shimmer-color-b", n[2].toString()), e.current.style.setProperty("--shimmer-color-a", n[3].toString()));
-          break;
-        case "none":
-          e.current.style.animation = "none";
-          break;
-        case "border":
-          e.current.classList.add("skeleton-border-animation"), e.current.style.backgroundColor = "transparent";
-          const c = d.match(/\d+/g);
-          c && c.length >= 3 && (e.current.style.setProperty("--border-color-r", c[0]), e.current.style.setProperty("--border-color-g", c[1]), e.current.style.setProperty("--border-color-b", c[2]));
-          break;
-      }
-  }, k = {
+  }, [m, i, l, g]);
+  const k = {
     circle: "rounded-full aspect-square",
     square: "rounded-none",
     rounded: "rounded"
@@ -56,16 +57,16 @@ const v = (g) => {
     {
       ref: e,
       className: P(
-        b && " border-red-600/20 border",
-        y,
+        y && " border-red-600/20 border",
+        p,
         "skeleton-container",
-        k[f]
+        k[h]
       ),
-      children: p
+      children: f
     },
     `skeleton-${Math.random().toFixed(10)}`
   );
 };
 export {
-  v as Skeleton
+  A as Skeleton
 };

package/dist/Spinner.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { ClipLoader as l, SyncLoader as m, HashLoader as p, GridLoader as x, DotLoader as j, BounceLoader as f } from "react-spinners";
 import { c as L } from "./cn-B6yFEsav.js";
 const y = ({

package/dist/Steps.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as j } from "./cn-B6yFEsav.js";
 import { motion as r } from "framer-motion";
 import N from "react";

package/dist/SwipeContainer.es.js

@@ -1,4 +1,4 @@
-import { j as o } from "./jsx-runtime-DKDX3adD.js";
+import { j as o } from "./jsx-runtime-ByW6EXIE.js";
 import { c as i } from "./cn-B6yFEsav.js";
 import { useState as d, useRef as D, useEffect as L } from "react";
 const O = ({

package/dist/Switch.es.js

@@ -1,4 +1,4 @@
-import { j as n } from "./jsx-runtime-DKDX3adD.js";
+import { j as n } from "./jsx-runtime-ByW6EXIE.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { useRef as p } from "react";
 import { motion as l } from "framer-motion";

package/dist/TabLinks.es.js

@@ -1,4 +1,4 @@
-import { j as a } from "./jsx-runtime-DKDX3adD.js";
+import { j as a } from "./jsx-runtime-ByW6EXIE.js";
 import { motion as x } from "framer-motion";
 import { memo as b } from "react";
 import { c as r } from "./cn-B6yFEsav.js";

package/dist/Table.es.js

@@ -1,4 +1,4 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
+import { j as r } from "./jsx-runtime-ByW6EXIE.js";
 import { c as l } from "./cn-B6yFEsav.js";
 import * as o from "react";
 const n = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx("div", { className: "w-full", children: /* @__PURE__ */ r.jsx(

package/dist/TextArea.es.js

@@ -1,4 +1,4 @@
-import { j as y } from "./jsx-runtime-DKDX3adD.js";
+import { j as y } from "./jsx-runtime-ByW6EXIE.js";
 import { c as C } from "./cn-B6yFEsav.js";
 import * as s from "react";
 function M({

package/dist/Tooltip.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { AnimatePresence as f, motion as n } from "framer-motion";
 import { useState as p, cloneElement as x } from "react";
 import { Icons as b } from "./Icons.es.js";

package/dist/components/Image/GalleryPreview.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement, default as React } from 'react';
+import { ImageProps } from './Image';
+interface GalleryPreviewProps {
+    images?: ReactElement<ImageProps>[];
+    className?: string;
+}
+declare const GalleryPreview: React.NamedExoticComponent<GalleryPreviewProps & React.RefAttributes<unknown>>;
+export default GalleryPreview;

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,23 @@
+import { SpinnerProps } from '../Spinner/Spinner';
+import { ImageGalleryHandle } from './ImageGallery';
+export interface ImageProps {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    lazy?: boolean;
+    showLoader?: boolean;
+    loaderProps?: {
+        loaderType?: 'skeleton' | 'clasic';
+        variant?: SpinnerProps['variant'];
+        speedMultiplier?: SpinnerProps['speedMultiplier'];
+        className?: string;
+        size?: SpinnerProps['size'];
+        backdropClassName?: string;
+    };
+    allowPreview?: boolean;
+    galleryRef?: React.RefObject<ImageGalleryHandle | null>;
+}
+declare const CustomImage: import('react').MemoExoticComponent<(props: ImageProps) => import("react/jsx-runtime").JSX.Element>;
+export default CustomImage;

package/dist/components/Image/ImageGallery.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ImageProps } from './Image';
+export interface ImageGalleryProps {
+    children?: ReactElement<ImageProps> | ReactElement<ImageProps>[];
+    className?: string;
+    lightboxClassName?: string;
+    showThumbnails?: boolean;
+    thumbnailsClassName?: string;
+}
+export interface ImageGalleryHandle {
+    openLightbox: (index?: number) => void;
+    closeLightbox: () => void;
+    isOpen: boolean;
+    addImage: (image: ImageProps) => void;
+    images: ImageProps[];
+}
+declare const ImageGallery: import('react').ForwardRefExoticComponent<ImageGalleryProps & import('react').RefAttributes<ImageGalleryHandle>>;
+export default ImageGallery;

package/dist/components/Image/LightBox.d.ts

@@ -0,0 +1,14 @@
+import { ImageProps } from './Image';
+interface LightBoxProps {
+    images: ImageProps[];
+    lightboxClassName?: string;
+    closeLightbox: () => void;
+    showThumbnails?: boolean;
+    thumbnailsClassName?: string;
+    currentIndex: number;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    goToIndex: (index: number) => void;
+}
+declare const LightBox: import('react').MemoExoticComponent<({ images, lightboxClassName, closeLightbox, showThumbnails, thumbnailsClassName, currentIndex, goToNext, goToPrevious, goToIndex }: LightBoxProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default LightBox;

package/dist/components/Image/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Image } from './Image';
+export { default as ImageGallery } from './ImageGallery';
+export { useImageGallery } from './useImageGallery';
+export type { ImageProps } from './Image';
+export type { ImageGalleryHandle } from './ImageGallery';

package/dist/components/Image/useImageGallery.d.ts

@@ -0,0 +1,10 @@
+import { ImageGalleryHandle } from './ImageGallery';
+import { ImageProps } from './Image';
+export declare const useImageGallery: () => {
+    isOpen: () => boolean;
+    openLightbox: () => void;
+    closeLightbox: () => void;
+    galleryRef: import('react').RefObject<ImageGalleryHandle | null>;
+    addImage: (image: ImageProps) => void;
+    images: () => ImageProps[];
+};

package/dist/exports/Image.d.ts

@@ -0,0 +1 @@
+export { default } from '../components/Image/Image';

package/dist/exports/ImageGallery.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/Image/ImageGallery';
+export { useImageGallery } from '../components/Image/useImageGallery';

package/dist/index.d.ts

@@ -30,6 +30,8 @@ export { default as Tooltip } from './components/Tooltip/Tootip';
 export { default as Skeleton } from './components/Skeleton/Skeleton';
 export { default as SegmentedButton } from './components/SegmentedButton/SegmentedButton';
 export { default as LayoutGeneric } from './components/Layout/LayoutGeneric';
+export { default as ImageGallery } from './components/Image/ImageGallery';
+export { default as Image } from './components/Image/Image';
 export * from './components/Sidebar';
 export { SecondaryBar } from './components/Sidebar/SecondaryBar/SecondaryBar';
 export { Badge } from './components/Sidebar/components/badge';
@@ -81,4 +83,6 @@ export type { SwitchProps } from './components/Switch/Switch';
 export type { SkeletonProps } from './components/Skeleton/Skeleton';
 export type { SegmentedButtonProps } from './components/SegmentedButton/SegmentedButton';
 export type { DatePickerProps } from './components/DatePicker/DatePicker';
+export type { ImageProps } from './components/Image/Image';
+export type { ImageGalleryProps } from './components/Image/ImageGallery';
 export { Icons } from './Icons/Icons';