prometeo-design-system 7.3.6 → 7.3.7

package/dist/SplitButton.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/SplitButton'
+export {}
+import PrometeoDesignSystem from './exports/SplitButton'
+export default PrometeoDesignSystem
+export * from './exports/SplitButton'
+export {}

package/dist/SplitButton.es.js

@@ -0,0 +1,187 @@
+import { j as a } from "./jsx-runtime-GkKLlHH4.js";
+import { memo as v, createElement as f, isValidElement as g } from "react";
+import { ChevronDown as y } from "./Icons/ChevronDown.es.js";
+import { c as m } from "./cn-B6yFEsav.js";
+import { c as n } from "./index-BOQuZ0gG.js";
+function t(e) {
+  return e ? g(e) ? e : f(e, { size: 24 }) : null;
+}
+const h = n(
+  "inline-flex gap-0.5 items-stretch overflow-visible w-max",
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+), x = n(
+  [
+    "group inline-flex items-center gap-2 px-4 py-3 transition-[colors,border-radius,box-shadow] outline-none",
+    "rounded-l-[var(--radius-large)] rounded-r-[var(--radius-xsmall)] "
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "text-disabled-ondisabled dropshadow-200 bg-neutral-secondary-default",
+        false: "text-neutral-onbrandsecondary-default bg-brand-secondary-default icon-neutral-onbrandsecondary-default dropshadow-300"
+      },
+      interactive: {
+        true: [
+          "cursor-pointer",
+          "hover:rounded-r-[var(--radius-large)]",
+          "hover:bg-brand-secondary-hover active:bg-brand-secondary-pressed",
+          "active:ring-2 active:ring-[var(--border-brand-secondary-pressed)] ring-inset",
+          "focus-visible:ring-2 focus-visible:ring-primary-default-default",
+          "group-hover:icon-neutral-onbrandsecondary-hover group-active:icon-neutral-onbrandsecondary-pressed"
+        ],
+        false: "cursor-default"
+      },
+      pressed: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: !1,
+        pressed: !0,
+        interactive: !0,
+        class: "bg-brand-secondary-pressed ring-2 ring-[var(--border-brand-secondary-pressed)] ring-inset icon-neutral-onbrandsecondary-pressed hover:bg-brand-secondary-pressed hover:icon-neutral-onbrandsecondary-pressed"
+      },
+      {
+        disabled: !1,
+        pressed: !0,
+        interactive: !1,
+        class: "bg-brand-secondary-pressed ring-2 ring-[var(--border-brand-secondary-pressed)] ring-inset icon-neutral-onbrandsecondary-pressed"
+      }
+    ],
+    defaultVariants: { disabled: !1, pressed: !1, interactive: !0 }
+  }
+), I = n(
+  [
+    "group inline-flex items-center p-3 transition-[colors,border-radius]",
+    "rounded-r-[var(--radius-large)] rounded-l-[var(--radius-xsmall)] "
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "text-disabled-ondisabled icon-disabled-ondisabled dropshadow-200 bg-neutral-secondary-default",
+        false: "bg-brand-secondary-default icon-neutral-onbrandsecondary-default dropshadow-300"
+      },
+      interactive: {
+        true: [
+          "cursor-pointer",
+          "hover:rounded-l-[var(--radius-large)]",
+          "active:ring-2 active:ring-[var(--border-brand-secondary-pressed)] ring-inset",
+          "hover:bg-brand-secondary-hover active:bg-brand-secondary-pressed",
+          "focus-visible:ring-2 focus-visible:ring-primary-default-default",
+          "hover:icon-neutral-onbrandsecondary-hover active:icon-neutral-onbrandsecondary-pressed"
+        ],
+        false: "cursor-default"
+      },
+      pressed: {
+        true: "",
+        false: ""
+      },
+      defaultIcon: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: !1,
+        pressed: !0,
+        interactive: !0,
+        defaultIcon: !0,
+        class: [
+          "bg-brand-secondary-pressed ring-2! ring-[var(--border-brand-secondary-pressed)] ring-inset icon-neutral-onbrandsecondary-pressed hover:bg-brand-secondary-pressed hover:icon-neutral-onbrandsecondary-pressed rounded-l-[var(--radius-large)]!",
+          "[&>svg]:rotate-180"
+        ]
+      },
+      {
+        disabled: !1,
+        pressed: !0,
+        interactive: !1,
+        defaultIcon: !0,
+        class: [
+          "bg-brand-secondary-pressed ring-2! ring-[var(--border-brand-secondary-pressed)] ring-inset icon-neutral-onbrandsecondary-pressed rounded-l-[var(--radius-large)]!",
+          "[&>svg]:rotate-180"
+        ]
+      },
+      {
+        defaultIcon: !0,
+        class: "[&>svg]:transition-transform [&>svg]:duration-200"
+      },
+      {
+        disabled: !1,
+        pressed: !0,
+        interactive: !0,
+        defaultIcon: !1,
+        class: ["bg-brand-secondary-pressed ring-2! ring-[var(--border-brand-secondary-pressed)] ring-inset icon-neutral-onbrandsecondary-pressed hover:bg-brand-secondary-pressed hover:icon-neutral-onbrandsecondary-pressed rounded-l-[var(--radius-large)]!"]
+      },
+      {
+        disabled: !1,
+        pressed: !0,
+        interactive: !1,
+        defaultIcon: !1,
+        class: ["bg-brand-secondary-pressed ring-2! ring-[var(--border-brand-secondary-pressed)] ring-inset icon-neutral-onbrandsecondary-pressed rounded-l-[var(--radius-large)]!"]
+      }
+    ],
+    defaultVariants: { disabled: !1, pressed: !1, interactive: !0 }
+  }
+), i = ({
+  action: e,
+  trailing: s,
+  disabled: r = !1,
+  className: l
+}) => {
+  const c = e?.children ?? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    t(e?.icon),
+    e?.label && /* @__PURE__ */ a.jsx("span", { className: "prometeo-fonts-label-medium", children: e.label })
+  ] }), u = t(s?.icon ?? y), b = !!e?.onClick, p = !!s?.onClick, d = !r && !!e?.pressed, o = !r && !!s?.pressed;
+  return /* @__PURE__ */ a.jsxs("div", { className: m(h({ disabled: r }), l), children: [
+    /* @__PURE__ */ a.jsx(
+      "button",
+      {
+        ref: e?.ref,
+        type: "button",
+        disabled: r,
+        "aria-pressed": d || void 0,
+        onClick: e?.onClick,
+        className: x({
+          disabled: r,
+          interactive: b,
+          pressed: d
+        }),
+        children: c
+      }
+    ),
+    /* @__PURE__ */ a.jsx(
+      "button",
+      {
+        ref: s?.ref,
+        type: "button",
+        disabled: r,
+        "aria-pressed": o || void 0,
+        onClick: s?.onClick,
+        className: I({
+          disabled: r,
+          interactive: p,
+          pressed: o,
+          defaultIcon: !s?.icon
+        }),
+        children: u
+      }
+    )
+  ] });
+};
+i.displayName = "SplitButton";
+const k = v(i);
+export {
+  k as SplitButton,
+  k as default
+};

package/dist/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,28 @@
+import { IconComponent } from '../../Icons/types';
+export interface SplitButtonActionSlot {
+    icon?: IconComponent | React.ReactElement;
+    label?: string;
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    ref?: React.Ref<HTMLButtonElement>;
+    /** Mantiene el aspecto pressed (p. ej. menú abierto en este slot). */
+    pressed?: boolean;
+}
+export interface SplitButtonTrailingSlot {
+    icon?: IconComponent;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    ref?: React.Ref<HTMLButtonElement>;
+    /** Mantiene el aspecto pressed (p. ej. menú abierto en este slot). */
+    pressed?: boolean;
+}
+export interface SplitButtonProps {
+    action?: SplitButtonActionSlot;
+    trailing?: SplitButtonTrailingSlot;
+    disabled?: boolean;
+    className?: string;
+}
+declare const _default: import('react').MemoExoticComponent<{
+    ({ action, trailing, disabled, className, }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default _default;

package/dist/exports/SplitButton.d.ts

@@ -0,0 +1,3 @@
+export { default } from '../components/SplitButton/SplitButton';
+export { default as SplitButton } from '../components/SplitButton/SplitButton';
+export type { SplitButtonProps, SplitButtonActionSlot, SplitButtonTrailingSlot, } from '../components/SplitButton/SplitButton';

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export { ProfilePictureUpload } from './exports/ProfilePictureUpload';
 export { default as ProgressBar } from './exports/ProgressBar';
 export { default as Select } from './exports/Select';
 export { default as Spinner } from './exports/Spinner';
+export { default as SplitButton } from './exports/SplitButton';
 export { default as Steps } from './exports/Steps';
 export { default as Toggle } from './exports/Toggle';
 /** @deprecated Use Toggle instead */
@@ -115,6 +116,7 @@ export type { OtpInputProps } from './exports/OtpInput';
 export type { BadgeProps } from './components/Sidebar/components/badge';
 export type { NavbarCollapseButtonProps } from './components/Sidebar/components/collapse-button';
 export type { SpinnerProps } from './exports/Spinner';
+export type { SplitButtonProps, SplitButtonActionSlot, SplitButtonTrailingSlot, } from './exports/SplitButton';
 export type { PaginationProps } from './exports/Pagination';
 export type { ProfilePictureUploadProps } from './exports/ProfilePictureUpload';
 export type { Step, StepsProps } from './exports/Steps';

package/dist/prometeo-design-system.es.js

@@ -65,11 +65,12 @@ import { default as lr } from "./Check.es.js";
 import { default as ir } from "./CheckBox.es.js";
 import { default as dr } from "./InputMultiple.es.js";
 import { default as fr } from "./ProfilePictureUpload.es.js";
-import { default as pr, default as hr } from "./Toggle.es.js";
-import { default as br } from "./IconButton.es.js";
-import { default as vr } from "./Skeleton.es.js";
-import { default as yr } from "./AttachInput.es.js";
-import { useScrollable as Sr } from "./useScrollable.es.js";
+import { default as pr } from "./SplitButton.es.js";
+import { default as xr, default as br } from "./Toggle.es.js";
+import { default as vr } from "./IconButton.es.js";
+import { default as yr } from "./Skeleton.es.js";
+import { default as Sr } from "./AttachInput.es.js";
+import { useScrollable as Tr } from "./useScrollable.es.js";
 const B = ({
   secondaryActionsSlot: e,
   primaryActionsSlot: t,
@@ -426,7 +427,7 @@ const be = Object.assign(W, {
 };
 export {
   be as ActionInput,
-  yr as AttachInput,
+  Sr as AttachInput,
   st as Avatar,
   it as AvatarAndSubavatar,
   er as AvatarBase,
@@ -460,7 +461,7 @@ export {
   kt as Header,
   Me as HeaderCell,
   J as HelperComponent,
-  br as IconButton,
+  vr as IconButton,
   Sa as Image,
   ya as ImageGallery,
   Mt as Input,
@@ -490,10 +491,11 @@ export {
   U as Select,
   Oa as SelectSearch,
   ge as SelectSearchLegacy,
-  vr as Skeleton,
+  yr as Skeleton,
   Yt as Spinner,
+  pr as SplitButton,
   ta as Steps,
-  pr as Switch,
+  xr as Switch,
   Je as Tab,
   Ke as TabLinkItem,
   Qe as TabLinks,
@@ -515,7 +517,7 @@ export {
   ca as TextArea,
   Ta as Toast,
   Da as ToastProvider,
-  hr as Toggle,
+  br as Toggle,
   ma as Tooltip,
   xt as groupMessagesBySender,
   Na as toastpyrion,
@@ -533,5 +535,5 @@ export {
   St as useModalControl,
   Lt as useModalState,
   we as usePopover,
-  Sr as useScrollable
+  Tr as useScrollable
 };