@simpli-route/apollo-ds 0.1.55 → 0.1.57

package/dist/index.es65.js

@@ -1,94 +1,18 @@
-import { cva as e } from "class-variance-authority";
-const s = e("relative rounded-full transition-colors duration-300", {
-  variants: {
-    isSelected: {
-      true: "bg-primary-500",
-      false: "bg-neutral-50 border border-primary-200"
-    },
-    isDisabled: {
-      true: "cursor-not-allowed bg-neutral-400 border-none",
-      false: "cursor-pointer"
-    },
-    isHoveredWhenOff: {
-      true: "bg-neutral-200 border-primary-700",
-      false: ""
-    },
-    isFocusVisible: {
-      true: "ring-2 ring-sky-400 ring-offset-2",
-      false: ""
-    },
-    size: {
-      sm: "w-[42px] h-[24px]",
-      md: "w-[56px] h-[32px]"
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    isSelected: !1,
-    isDisabled: !1,
-    isFocusVisible: !1,
-    isHoveredWhenOff: !1
-  },
-  compoundVariants: [
-    // Hover cuando el switch está apagado y no deshabilitado
-    {
-      isSelected: !1,
-      isDisabled: !1,
-      class: "hover:bg-neutral-200 hover:border-primary-700"
-    },
-    {
-      isSelected: !0,
-      isDisabled: !1,
-      class: "hover:bg-primary-700"
-    },
-    {
-      isSelected: !1,
-      isDisabled: !0,
-      class: "bg-neutral-400 border-none"
-    },
+import { j as r } from "./index.es40.js";
+import { ColorSlider as f, SliderTrack as l, ColorThumb as i } from "react-aria-components";
+function d(e) {
+  const { color: o } = e;
+  return /* @__PURE__ */ r.jsx(
+    f,
     {
-      isSelected: !0,
-      isDisabled: !0,
-      class: "bg-neutral-500"
+      channel: "hue",
+      value: o,
+      className: "mb-2 h-4 w-48 rounded border bg-[linear-gradient(to_right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]",
+      ...e,
+      children: /* @__PURE__ */ r.jsx(l, { className: "size-full", children: /* @__PURE__ */ r.jsx(i, { className: "box-border size-5 rounded-full border-2 border-white shadow-[0_0_0_1px_black,inset_0_0_0_1px_black] data-[focus-visible]:size-6" }) })
     }
-  ]
-}), a = e(
-  "absolute top-1/2 transform -translate-y-1/2 transition-all duration-300 rounded-full",
-  {
-    variants: {
-      isSelected: {
-        true: "bg-primary-50",
-        false: "bg-primary-200 border border-primary-200"
-      },
-      isDisabled: {
-        true: "bg-neutral-600 border-none",
-        false: ""
-      },
-      isHoveredWhenOff: {
-        true: "bg-primary-700 border-primary-700",
-        false: ""
-      },
-      size: {
-        sm: "w-[20px] h-[20px]",
-        md: "w-[24px] h-[24px]"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      isSelected: !1,
-      isDisabled: !1,
-      isHoveredWhenOff: !1
-    },
-    compoundVariants: [
-      {
-        isSelected: !0,
-        isDisabled: !0,
-        class: "bg-neutral-400"
-      }
-    ]
-  }
-);
+  );
+}
 export {
-  a as indicatorVariants,
-  s as switchVariants
+  d as ColorSlider
 };

package/dist/index.es66.js

@@ -1,24 +1,165 @@
-import { cva as t } from "class-variance-authority";
-const o = t("scroll-m-12 text-neutral-900", {
-  variants: {
-    size: {
-      h1: "text-[2rem] font-bold leading-10",
-      h2: "text-[1.75rem] font-bold leading-9",
-      h3: "text-2xl font-semibold",
-      h4: "text-[1.375rem] font-semibold leading-7",
-      h5: "text-xl font-semibold",
-      h6: "text-lg font-semibold"
-    }
+import { cva as e } from "class-variance-authority";
+const t = [
+  {
+    intent: "primary",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !1,
+    class: "bg-primary-100"
+  },
+  {
+    intent: "secondary",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !1,
+    class: "bg-primary-500 text-primary-50"
+  },
+  {
+    intent: "minimal",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !1,
+    class: "bg-neutral-200 text-neutral-800"
+  },
+  {
+    intent: "error",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !1,
+    class: "bg-error-100"
   }
-}), n = t("", {
-  variants: {
-    type: {
-      body: "text-base text-neutral-900",
-      caption: "text-xs text-neutral-700"
-    }
+], r = [
+  {
+    intent: "primary",
+    isActive: !0,
+    isDisabled: !1,
+    class: "bg-primary-500 text-primary-50"
+  },
+  {
+    intent: "primary",
+    isActive: !0,
+    isDisabled: !0,
+    class: "bg-primary-300 text-primary-100"
+  },
+  {
+    intent: "secondary",
+    isActive: !0,
+    isDisabled: !1,
+    class: "bg-primary-500 text-primary-50"
+  },
+  {
+    intent: "secondary",
+    isActive: !0,
+    isDisabled: !0,
+    class: "bg-primary-100 text-primary-300"
+  },
+  {
+    intent: "minimal",
+    isActive: !0,
+    isDisabled: !1,
+    class: "text-primary-500"
+  },
+  {
+    intent: "minimal",
+    isActive: !0,
+    isDisabled: !0,
+    class: "text-neutral-700"
+  },
+  {
+    intent: "error",
+    isActive: !0,
+    isDisabled: !1,
+    class: "bg-error-700 text-error-50"
+  },
+  {
+    intent: "error",
+    isActive: !0,
+    isDisabled: !0,
+    class: "bg-error-300 text-error-100"
   }
-});
+], i = [
+  {
+    intent: "primary",
+    isDisabled: !0,
+    isActive: !1,
+    class: "text-neutral-600"
+  },
+  {
+    intent: "primary",
+    isDisabled: !0,
+    isActive: !0,
+    class: "bg-primary-300 text-primary-100"
+  },
+  {
+    intent: "secondary",
+    isDisabled: !0,
+    isActive: !1,
+    class: "bg-neutral-400 text-neutral-600"
+  },
+  {
+    intent: "secondary",
+    isDisabled: !0,
+    isActive: !0,
+    class: "bg-primary-100 text-primary-300"
+  },
+  {
+    intent: "minimal",
+    isDisabled: !0,
+    isActive: !1,
+    class: "text-neutral-600"
+  },
+  {
+    intent: "minimal",
+    isDisabled: !0,
+    isActive: !0,
+    class: "text-neutral-700"
+  },
+  {
+    intent: "error",
+    isDisabled: !0,
+    isActive: !1,
+    class: "text-neutral-600"
+  },
+  {
+    intent: "error",
+    isDisabled: !0,
+    isActive: !0,
+    class: "bg-error-300 text-primary-100"
+  }
+], a = e(
+  "inline-flex items-center justify-center rounded-lg border border-transparent transition duration-150 ease-in-out focus:outline-none",
+  {
+    variants: {
+      intent: {
+        primary: "bg-transparent text-primary-500",
+        secondary: "bg-primary-200 text-primary-500",
+        minimal: "bg-transparent text-neutral-700",
+        error: "bg-transparent text-error-500"
+      },
+      size: {
+        xxs: "p-1",
+        xs: "p-2",
+        sm: "p-2.5",
+        md: "p-3",
+        lg: "p-4"
+      },
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed"
+      },
+      isHovered: {
+        true: ""
+      },
+      isActive: {
+        true: ""
+      },
+      isFocused: {
+        false: "",
+        true: "focus:outline-none focus:ring-offset-2 outline-none ring-2 ring-sky-400"
+      }
+    },
+    compoundVariants: [...t, ...r, ...i]
+  }
+);
 export {
-  n as textVariants,
-  o as titleVariants
+  a as buttonVariants
 };

package/dist/index.es67.js

@@ -1,14 +1,14 @@
 import { j as e } from "./index.es40.js";
 import { CrossCircleIcon as d } from "./index.es42.js";
-import { Autocomplete as p, SearchField as m, Input as b, Button as h, ListBox as f, ListBoxItem as g } from "react-aria-components";
+import { Autocomplete as p, SearchField as m, Input as f, Button as b, ListBox as h, ListBoxItem as j } from "react-aria-components";
 import { cn as n } from "./index.es41.js";
-const v = ({
+const C = ({
   enableSearch: a,
   contains: o,
   classNameSearchField: i,
   classNameSearchFieldInput: c,
-  placeholderSearch: u,
-  items: x
+  placeholderSearch: x,
+  items: u
 }) => /* @__PURE__ */ e.jsxs(p, { filter: o, disableAutoFocusFirst: !0, disableVirtualFocus: !0, children: [
   a ? /* @__PURE__ */ e.jsxs(
     m,
@@ -20,49 +20,62 @@ const v = ({
       ),
       children: [
         /* @__PURE__ */ e.jsx(
-          b,
+          f,
           {
-            placeholder: u,
+            placeholder: x,
             className: n(
               "h-8 min-w-0 flex-1 rounded border-none p-1 text-sm font-normal text-neutral-800 outline-none outline-0 placeholder:text-neutral-700 focus:outline-none focus:ring-0 [&::-webkit-search-cancel-button]:hidden",
               c
             )
           }
         ),
-        /* @__PURE__ */ e.jsx(h, { className: "pressed:bg-black/10 mr-1 flex w-6 items-center justify-center rounded-full border-0 bg-transparent p-1 text-center text-sm text-neutral-600 transition hover:bg-black/[5%] group-data-[empty]:invisible", children: /* @__PURE__ */ e.jsx(d, { "aria-hidden": !0, className: "size-4" }) })
+        /* @__PURE__ */ e.jsx(b, { className: "pressed:bg-black/10 mr-1 flex w-6 items-center justify-center rounded-full border-0 bg-transparent p-1 text-center text-sm text-neutral-600 transition hover:bg-black/[5%] group-data-[empty]:invisible", children: /* @__PURE__ */ e.jsx(d, { "aria-hidden": !0, className: "size-4" }) })
       ]
     }
   ) : null,
-  /* @__PURE__ */ e.jsx(f, { className: "lg:custom-scrollbar max-h-[260px] overflow-auto outline-none", items: x, children: (r) => /* @__PURE__ */ e.jsx(
-    g,
+  /* @__PURE__ */ e.jsx(h, { className: "lg:custom-scrollbar max-h-[260px] overflow-auto outline-none", items: u, children: (r) => /* @__PURE__ */ e.jsx(
+    j,
     {
       id: r.value,
       textValue: r.label,
       isDisabled: r.isDisabled,
-      className: ({ isSelected: t, isFocusVisible: s, isHovered: l }) => n(
-        "flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-normal outline-none",
-        t ? "bg-primary-100 text-primary-500" : "text-primary-900",
-        l && "bg-primary-50 text-primary-500",
-        (l || s) && !t && "bg-primary-50",
-        (l || s) && t && "bg-primary-200",
+      className: ({ isSelected: l, isFocusVisible: t, isHovered: s }) => n(
+        "flex cursor-pointer flex-col px-3 py-2 text-xs font-normal outline-none",
+        l ? "bg-primary-100 text-primary-500" : "text-primary-900",
+        s && "bg-primary-50 text-primary-500",
+        (s || t) && !l && "bg-primary-50",
+        (s || t) && l && "bg-primary-200",
         (r == null ? void 0 : r.isDisabled) && "cursor-not-allowed opacity-50"
       ),
-      children: ({ isSelected: t }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx("span", { children: r.label }),
-        /* @__PURE__ */ e.jsx("span", { className: "flex w-5 items-center", children: t && /* @__PURE__ */ e.jsx("svg", { width: "14", height: "13", viewBox: "0 0 14 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx(
-          "path",
+      children: ({ isSelected: l, isHovered: t }) => /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ e.jsx("span", { children: r.label }),
+          /* @__PURE__ */ e.jsx("span", { className: "flex w-5 items-center", children: l && /* @__PURE__ */ e.jsx("svg", { width: "14", height: "13", viewBox: "0 0 14 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M13.2241 0.601824C13.4808 0.780773 13.5439 1.13398 13.365 1.39073L5.69829 12.3907C5.59653 12.5367 5.43209 12.6264 5.25425 12.633C5.07641 12.6395 4.90582 12.5622 4.79359 12.4241L0.460261 7.09072C0.26291 6.84783 0.299829 6.49094 0.542723 6.29358C0.785617 6.09623 1.14251 6.13315 1.33986 6.37605L5.19872 11.1254L12.4352 0.7427C12.6141 0.485948 12.9673 0.422875 13.2241 0.601824Z",
+              fill: "#4C3BEF"
+            }
+          ) }) })
+        ] }),
+        r.description ? /* @__PURE__ */ e.jsx(
+          "span",
           {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M13.2241 0.601824C13.4808 0.780773 13.5439 1.13398 13.365 1.39073L5.69829 12.3907C5.59653 12.5367 5.43209 12.6264 5.25425 12.633C5.07641 12.6395 4.90582 12.5622 4.79359 12.4241L0.460261 7.09072C0.26291 6.84783 0.299829 6.49094 0.542723 6.29358C0.785617 6.09623 1.14251 6.13315 1.33986 6.37605L5.19872 11.1254L12.4352 0.7427C12.6141 0.485948 12.9673 0.422875 13.2241 0.601824Z",
-            fill: "#4C3BEF"
+            slot: "description",
+            className: n(
+              l ? "text-primary-400" : "text-neutral-700",
+              t && "text-primary-400"
+            ),
+            children: r.description
           }
-        ) }) })
+        ) : null
       ] })
     },
     r.value
   ) })
 ] });
 export {
-  v as PopoverContent
+  C as PopoverContent
 };

package/dist/index.es68.js

@@ -1,165 +1,32 @@
-import { cva as e } from "class-variance-authority";
-const t = [
-  {
-    intent: "primary",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !1,
-    class: "bg-primary-100"
-  },
-  {
-    intent: "secondary",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !1,
-    class: "bg-primary-500 text-primary-50"
-  },
-  {
-    intent: "minimal",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !1,
-    class: "bg-neutral-200 text-neutral-800"
-  },
-  {
-    intent: "error",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !1,
-    class: "bg-error-100"
-  }
-], r = [
-  {
-    intent: "primary",
-    isActive: !0,
-    isDisabled: !1,
-    class: "bg-primary-500 text-primary-50"
-  },
-  {
-    intent: "primary",
-    isActive: !0,
-    isDisabled: !0,
-    class: "bg-primary-300 text-primary-100"
-  },
-  {
-    intent: "secondary",
-    isActive: !0,
-    isDisabled: !1,
-    class: "bg-primary-500 text-primary-50"
-  },
-  {
-    intent: "secondary",
-    isActive: !0,
-    isDisabled: !0,
-    class: "bg-primary-100 text-primary-300"
-  },
-  {
-    intent: "minimal",
-    isActive: !0,
-    isDisabled: !1,
-    class: "text-primary-500"
-  },
-  {
-    intent: "minimal",
-    isActive: !0,
-    isDisabled: !0,
-    class: "text-neutral-700"
-  },
-  {
-    intent: "error",
-    isActive: !0,
-    isDisabled: !1,
-    class: "bg-error-700 text-error-50"
-  },
-  {
-    intent: "error",
-    isActive: !0,
-    isDisabled: !0,
-    class: "bg-error-300 text-error-100"
-  }
-], i = [
-  {
-    intent: "primary",
-    isDisabled: !0,
-    isActive: !1,
-    class: "text-neutral-600"
-  },
-  {
-    intent: "primary",
-    isDisabled: !0,
-    isActive: !0,
-    class: "bg-primary-300 text-primary-100"
-  },
-  {
-    intent: "secondary",
-    isDisabled: !0,
-    isActive: !1,
-    class: "bg-neutral-400 text-neutral-600"
-  },
-  {
-    intent: "secondary",
-    isDisabled: !0,
-    isActive: !0,
-    class: "bg-primary-100 text-primary-300"
-  },
-  {
-    intent: "minimal",
-    isDisabled: !0,
-    isActive: !1,
-    class: "text-neutral-600"
-  },
-  {
-    intent: "minimal",
-    isDisabled: !0,
-    isActive: !0,
-    class: "text-neutral-700"
-  },
-  {
-    intent: "error",
-    isDisabled: !0,
-    isActive: !1,
-    class: "text-neutral-600"
-  },
-  {
-    intent: "error",
-    isDisabled: !0,
-    isActive: !0,
-    class: "bg-error-300 text-primary-100"
-  }
-], a = e(
-  "inline-flex items-center justify-center rounded-lg border border-transparent transition duration-150 ease-in-out focus:outline-none",
-  {
-    variants: {
-      intent: {
-        primary: "bg-transparent text-primary-500",
-        secondary: "bg-primary-200 text-primary-500",
-        minimal: "bg-transparent text-neutral-700",
-        error: "bg-transparent text-error-500"
-      },
-      size: {
-        xxs: "p-1",
-        xs: "p-2",
-        sm: "p-2.5",
-        md: "p-3",
-        lg: "p-4"
-      },
-      isDisabled: {
-        true: "pointer-events-none cursor-not-allowed"
-      },
-      isHovered: {
-        true: ""
-      },
-      isActive: {
-        true: ""
-      },
-      isFocused: {
-        false: "",
-        true: "focus:outline-none focus:ring-offset-2 outline-none ring-2 ring-sky-400"
-      }
-    },
-    compoundVariants: [...t, ...r, ...i]
-  }
-);
+import { j as e } from "./index.es40.js";
+import { cn as l } from "./index.es41.js";
+const m = (r) => {
+  const { isIndeterminate: t, isSelected: s, className: n, isHovered: a } = r, o = a && !s && !t ? "text-neutral-500" : "", i = !!(o || s);
+  return /* @__PURE__ */ e.jsx("svg", { className: l("stroke-current", o, n), viewBox: "-1 1 17 17", children: t ? /* @__PURE__ */ e.jsx(
+    "line",
+    {
+      x1: 1,
+      y1: 10,
+      x2: 14,
+      y2: 10,
+      fill: "none",
+      strokeWidth: 2,
+      strokeDasharray: 14,
+      strokeDashoffset: s ? 28 : 42,
+      style: { transition: "all 400ms" }
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    "polyline",
+    {
+      points: "1 9 7 14 15 4",
+      fill: "none",
+      strokeWidth: 2,
+      strokeDasharray: 22,
+      strokeDashoffset: i ? 44 : 66,
+      style: { transition: "all 400ms" }
+    }
+  ) });
+};
 export {
-  a as buttonVariants
+  m as MarkIcon
 };

package/dist/index.es7.js

@@ -1,7 +1,7 @@
 import { j as r } from "./index.es40.js";
 import { usePress as j, useHover as b, useFocusRing as F } from "react-aria";
 import { cn as N } from "./index.es41.js";
-import { assistChipVariants as C } from "./index.es43.js";
+import { assistChipVariants as C } from "./index.es46.js";
 const q = (i) => {
   const {
     style: t = "square",

package/dist/index.es73.js

@@ -2,7 +2,7 @@ import { j as e } from "./index.es40.js";
 import { CrossCircleIcon as w } from "./index.es42.js";
 import { Button as x, SelectValue as N } from "react-aria-components";
 import { cn as r } from "./index.es41.js";
-import { selectInputButtonVariants as v, selectInputBadgeVariants as V } from "./index.es51.js";
+import { selectInputButtonVariants as v, selectInputBadgeVariants as V } from "./index.es47.js";
 const P = ({
   ref: C,
   isOpen: a,

package/dist/index.es8.js

@@ -3,9 +3,9 @@ import { parseColor as h } from "@react-stately/color";
 import { useState as a, useEffect as w } from "react";
 import { ColorPicker as L, Label as R, DialogTrigger as T, Button as W, ColorSwatch as $, Popover as q, Dialog as G } from "react-aria-components";
 import { cn as J } from "./index.es41.js";
-import { ColorArea as K } from "./index.es46.js";
-import { ColorField as M } from "./index.es47.js";
-import { ColorSlider as Q } from "./index.es48.js";
+import { ColorArea as K } from "./index.es63.js";
+import { ColorField as M } from "./index.es64.js";
+import { ColorSlider as Q } from "./index.es65.js";
 const ne = (v) => {
   const {
     value: l,

package/dist/index.es83.js

@@ -1,6 +1,6 @@
 import { j as i } from "./index.es40.js";
 import { cn as m } from "./index.es41.js";
-import { indicatorVariants as n } from "./index.es65.js";
+import { indicatorVariants as n } from "./index.es61.js";
 const c = ({ isSelected: r, isDisabled: o, isHovered: f, size: a, dimensions: t }) => /* @__PURE__ */ i.jsx(
   "div",
   {

package/dist/index.es9.js

@@ -5,8 +5,8 @@ import { useFilter as K, Button as Q, Select as T, Popover as U } from "react-ar
 import { cn as p } from "./index.es41.js";
 import { Loader as W } from "./index.es21.js";
 import { PopoverContent as X } from "./index.es67.js";
-import { selectInputPopoverVariants as Y } from "./index.es51.js";
-import { filterButtonVariants as Z, filterButtonBadgeVariants as _ } from "./index.es52.js";
+import { selectInputPopoverVariants as Y } from "./index.es47.js";
+import { filterButtonVariants as Z, filterButtonBadgeVariants as _ } from "./index.es48.js";
 const $ = ({
   renderPosition: t,
   leftIcon: f,

package/dist/stories/InvisibleTimeField.stories.d.ts

@@ -1,9 +1,10 @@
+import { TimeValue } from 'react-aria-components';
 import { StoryObj } from '@storybook/react';
 import { Time } from '@internationalized/date';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('../components').InvisibleTimeFieldProps<import('react-aria').TimeValue> & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<import('../components').InvisibleTimeFieldProps<TimeValue> & import('react').RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
     };
@@ -75,3 +76,4 @@ export declare const TwelveHourCycle: Story;
 export declare const TwentyFourHourCycle: Story;
 export declare const WithLeadingZeros: Story;
 export declare const WithPlaceholder: Story;
+export declare const ControlledExamples: Story;

package/dist/stories/SelectInput.stories.d.ts

@@ -41,6 +41,7 @@ type Story = StoryObj<typeof meta>;
 export declare const SingleSelection: Story;
 export declare const MultipleSelection: Story;
 export declare const MultipleSelectionWithSearch: Story;
+export declare const SingleSelectionWithDescription: Story;
 export declare const SizeXS: Story;
 export declare const SizeSM: Story;
 export declare const SizeMD: Story;