@simpli-route/apollo-ds 0.1.50 → 0.1.52

package/dist/index.es43.js

@@ -1,36 +1,173 @@
 import { cva as r } from "class-variance-authority";
-const t = r("bg-primary-50 inline-flex items-center select-none border border-transparent", {
-  variants: {
-    style: {
-      square: "rounded-md",
-      rounded: "rounded-full"
+const t = r(
+  "inline-flex select-none items-center justify-center text-center text-xs font-semibold leading-6 transition duration-150 ease-in-out focus:outline-none",
+  {
+    variants: {
+      intent: {
+        primary: "bg-primary-500 text-primary-50",
+        secondary: "border border-primary-500 bg-primary-50 text-primary-500",
+        tertiary: "text-primary-500",
+        outline: "border border-primary-500 text-primary-500",
+        success: "border bg-success-500 text-success-50",
+        error: "border bg-error-500 text-error-50",
+        orangeWarning: "border bg-orange-warning-500 text-orange-warning-50",
+        yellowWarning: "border bg-yellow-warning-500 text-yellow-warning-900",
+        info: "border bg-blue-500 text-blue-50"
+      },
+      size: {
+        xs: "rounded px-3 py-1",
+        sm: "rounded px-3 py-2",
+        md: "rounded px-4 py-3",
+        lg: "rounded-lg px-6 py-4"
+      },
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed border-none bg-neutral-400 text-neutral-600"
+      },
+      isHovered: {
+        true: ""
+      },
+      isActive: {
+        true: ""
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      isLoading: {
+        true: "pointer-events-none cursor-not-allowed opacity-70"
+      },
+      isFocused: {
+        true: "focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-[0.4px] border-none",
+        false: ""
+      }
     },
-    size: {
-      xs: [
-        "gap-1 py-[2px] pr-[6px] pl-1 font-normal text-neutral-900 text-[10px]",
-        "[&_svg]:w-[10px] [&_svg]:h-[10px]"
-      ],
-      sm: ["gap-1 py-[2px] pr-[6px] pl-1 font-normal text-neutral-900 text-xs", "[&_svg]:w-3 [&_svg]:h-3"],
-      md: ["gap-1 py-1 pr-3 pl-2 font-normal text-neutral-900 text-sm", "[&_svg]:w-4 [&_svg]:h-4"],
-      lg: ["gap-2 py-1 pr-3 pl-2 font-normal text-neutral-900 text-sm", "[&_svg]:w-4 [&_svg]:h-4"]
+    defaultVariants: {
+      intent: "primary",
+      size: "md"
     },
-    pressable: {
-      true: "cursor-pointer"
-    },
-    isFocused: {
-      true: "border-primary-500"
-    },
-    isHovered: {
-      true: "border-primary-300"
-    },
-    isPressed: {
-      true: "bg-primary-200"
-    },
-    isDisabled: {
-      true: "bg-neutral-50 text-neutral-600 [&_svg]:text-neutral-600 cursor-not-allowed"
-    }
+    compoundVariants: [
+      /* Hover State */
+      {
+        intent: "primary",
+        isHovered: !0,
+        class: "bg-primary-700"
+      },
+      {
+        intent: "secondary",
+        isHovered: !0,
+        class: "bg-primary-200"
+      },
+      {
+        intent: "tertiary",
+        isHovered: !0,
+        class: "bg-primary-300 text-primary-800"
+      },
+      {
+        intent: "outline",
+        isHovered: !0,
+        class: "bg-primary-500 text-primary-50"
+      },
+      {
+        intent: "success",
+        isHovered: !0,
+        class: "bg-success-700 text-neutral-50"
+      },
+      {
+        intent: "error",
+        isHovered: !0,
+        class: "bg-error-700 text-error-50"
+      },
+      {
+        intent: "orangeWarning",
+        isHovered: !0,
+        class: "bg-orange-warning-700 text-orange-warning-50"
+      },
+      {
+        intent: "yellowWarning",
+        isHovered: !0,
+        class: "bg-yellow-warning-700 text-neutral-50"
+      },
+      {
+        intent: "info",
+        isHovered: !0,
+        class: "bg-blue-700 text-blue-50"
+      },
+      /* /Focus State */
+      {
+        intent: "success",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-success-500"
+      },
+      {
+        intent: "error",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-error-500"
+      },
+      {
+        intent: "orangeWarning",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-orange-500"
+      },
+      {
+        intent: "yellowWarning",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-yellow-500"
+      },
+      {
+        intent: "info",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-blue-500"
+      },
+      /* Active State */
+      {
+        intent: "primary",
+        isActive: !0,
+        class: "bg-primary-900"
+      },
+      {
+        intent: "secondary",
+        isActive: !0,
+        class: "bg-primary-300"
+      },
+      {
+        intent: "tertiary",
+        isActive: !0,
+        class: "bg-primary-500 text-white"
+      },
+      {
+        intent: "outline",
+        isActive: !0,
+        class: "border border-primary-500 bg-primary-300 text-primary-500"
+      },
+      {
+        intent: "success",
+        isActive: !0,
+        class: "border border-transparent bg-success-300 text-success-900"
+      },
+      {
+        intent: "error",
+        isActive: !0,
+        class: "border border-transparent bg-error-300 text-error-900"
+      },
+      {
+        intent: "orangeWarning",
+        isActive: !0,
+        class: "border border-transparent bg-orange-warning-300 text-orange-warning-900"
+      },
+      {
+        intent: "yellowWarning",
+        isActive: !0,
+        class: "border border-transparent bg-yellow-warning-300 text-yellow-warning-900"
+      },
+      {
+        intent: "info",
+        isActive: !0,
+        class: "border border-transparent bg-blue-200 text-blue-900"
+      }
+      /* /Active State */
+    ]
   }
-});
+);
 export {
-  t as assistChipVariants
+  t as buttonVariants
 };

package/dist/index.es44.js

@@ -1,20 +1,45 @@
-import { j as r } from "./index.es39.js";
-import { ColorArea as s, ColorThumb as l } from "react-aria-components";
-function t({ color: o, onChange: e, ...a }) {
-  return /* @__PURE__ */ r.jsx(
-    s,
-    {
-      colorSpace: "hsb",
-      xChannel: "saturation",
-      yChannel: "brightness",
-      value: o,
-      className: "mb-2 h-32 w-48 rounded border",
-      onChange: e,
-      ...a,
-      children: /* @__PURE__ */ r.jsx(l, { 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" })
-    }
-  );
-}
+import { cva as r } from "class-variance-authority";
+const i = r(
+  "flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border-2 border-primary-200 text-white transition duration-150 ease-in-out",
+  {
+    variants: {
+      isHovered: {
+        true: ""
+      },
+      isSelected: {
+        true: "border-primary-500 bg-primary-500",
+        false: "bg-white"
+      },
+      isFocusVisible: {
+        true: "border-primary-500 group-active:border-primary-500"
+      },
+      isDisabled: {
+        true: "border-neutral-500 cursor-not-allowed"
+      },
+      label: {
+        true: "mr-2"
+      }
+    },
+    compoundVariants: [
+      {
+        isHovered: !0,
+        isSelected: !0,
+        class: "border-none bg-primary-600 group-active:bg-primary-600"
+      },
+      {
+        isHovered: !0,
+        isSelected: !1,
+        isDisabled: !1,
+        class: "border-primary-700 group-active:bg-primary-600"
+      },
+      {
+        isDisabled: !0,
+        isSelected: !0,
+        class: "bg-neutral-500"
+      }
+    ]
+  }
+);
 export {
-  t as ColorArea
+  i as checkboxVariants
 };

package/dist/index.es45.js

@@ -1,19 +1,36 @@
-import { j as e } from "./index.es39.js";
-import { ColorField as n, Input as t } from "react-aria-components";
-function p(o) {
-  const { isDisabled: l, inputProps: r = {}, ...s } = o;
-  return /* @__PURE__ */ e.jsx(n, { className: "relative flex h-8 w-32 items-center", isDisabled: l, ...s, children: /* @__PURE__ */ e.jsx(
-    t,
-    {
-      className: "size-full border-none bg-transparent p-0 outline-none focus:outline-none focus:ring-0",
-      maxLength: 7,
-      "aria-label": "Color hex",
-      spellCheck: !1,
-      autoComplete: "off",
-      ...r
+import { cva as r } from "class-variance-authority";
+const t = r("bg-primary-50 inline-flex items-center select-none border border-transparent", {
+  variants: {
+    style: {
+      square: "rounded-md",
+      rounded: "rounded-full"
+    },
+    size: {
+      xs: [
+        "gap-1 py-[2px] pr-[6px] pl-1 font-normal text-neutral-900 text-[10px]",
+        "[&_svg]:w-[10px] [&_svg]:h-[10px]"
+      ],
+      sm: ["gap-1 py-[2px] pr-[6px] pl-1 font-normal text-neutral-900 text-xs", "[&_svg]:w-3 [&_svg]:h-3"],
+      md: ["gap-1 py-1 pr-3 pl-2 font-normal text-neutral-900 text-sm", "[&_svg]:w-4 [&_svg]:h-4"],
+      lg: ["gap-2 py-1 pr-3 pl-2 font-normal text-neutral-900 text-sm", "[&_svg]:w-4 [&_svg]:h-4"]
+    },
+    pressable: {
+      true: "cursor-pointer"
+    },
+    isFocused: {
+      true: "border-primary-500"
+    },
+    isHovered: {
+      true: "border-primary-300"
+    },
+    isPressed: {
+      true: "bg-primary-200"
+    },
+    isDisabled: {
+      true: "bg-neutral-50 text-neutral-600 [&_svg]:text-neutral-600 cursor-not-allowed"
     }
-  ) });
-}
+  }
+});
 export {
-  p as ColorField
+  t as assistChipVariants
 };

package/dist/index.es46.js

@@ -1,18 +1,82 @@
-import { j as r } from "./index.es39.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,
-    {
-      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" }) })
+import { cva as e } from "class-variance-authority";
+const t = e(
+  "flex w-full items-center justify-between gap-2 py-1 rounded border bg-neutral-50 text-xs font-normal text-primary-900 outline-none transition-all duration-150",
+  {
+    variants: {
+      size: {
+        xs: "min-h-8 px-3",
+        sm: "min-h-10 px-3",
+        md: "min-h-12 px-4",
+        lg: "min-h-14 px-4"
+      },
+      isDisabled: {
+        true: "cursor-not-allowed bg-neutral-200 border-none",
+        false: ""
+      },
+      isHovered: {
+        true: "",
+        false: ""
+      },
+      isFocusVisible: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        isDisabled: !1,
+        isHovered: !1,
+        isFocusVisible: !1,
+        class: "border-neutral-500"
+      },
+      {
+        isDisabled: !1,
+        isHovered: !0,
+        isFocusVisible: !1,
+        class: "border-neutral-800"
+      },
+      {
+        isDisabled: !1,
+        isFocusVisible: !0,
+        class: "border-2 border-primary-500"
+      }
+    ],
+    defaultVariants: {
+      size: "xs",
+      isDisabled: !1,
+      isHovered: !1,
+      isFocusVisible: !1
     }
-  );
-}
+  }
+), a = e(
+  "flex items-center gap-1 rounded bg-primary-100 font-normal text-primary-800",
+  {
+    variants: {
+      size: {
+        xs: "px-1.5 py-0.5 text-[10px]",
+        sm: "px-2 py-1 text-xs",
+        md: "px-2.5 py-1 text-sm",
+        lg: "px-3 py-1.5 text-base"
+      },
+      isDisabled: {
+        true: "bg-neutral-50 text-neutral-600",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isDisabled: !1,
+      size: "xs"
+    }
+  }
+), r = e(
+  "w-[--trigger-width] overflow-auto rounded border border-neutral-300 bg-white shadow-lg outline-none",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
 export {
-  d as ColorSlider
+  a as selectInputBadgeVariants,
+  t as selectInputButtonVariants,
+  r as selectInputPopoverVariants
 };

package/dist/index.es47.js

@@ -1,67 +1,132 @@
-import { j as e } from "./index.es39.js";
-import { CrossCircleIcon as m } from "./index.es40.js";
-import { Autocomplete as d, SearchField as p, Input as b, Button as h, ListBox as f, ListBoxItem as g } from "react-aria-components";
-import { cn as n } from "./index.es41.js";
-const v = ({
-  enableSearch: a,
-  contains: o,
-  classNameSearchField: i,
-  classNameSearchFieldInput: c,
-  placeholderSearch: u,
-  items: x
-}) => /* @__PURE__ */ e.jsxs(d, { filter: o, disableAutoFocusFirst: !0, disableVirtualFocus: !0, children: [
-  a ? /* @__PURE__ */ e.jsxs(
-    p,
-    {
-      "aria-label": "Search",
-      className: n(
-        "group m-1 flex items-center rounded border border-neutral-500 bg-neutral-50",
-        i
-      ),
-      children: [
-        /* @__PURE__ */ e.jsx(
-          b,
-          {
-            placeholder: u,
-            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(m, { "aria-hidden": !0, className: "size-4" }) })
-      ]
+import { cva as e } from "class-variance-authority";
+const r = e(
+  "group inline-flex select-none items-center justify-center gap-1 text-center font-semibold text-xs transition duration-150 leading-6 ease-in-out focus:outline-none",
+  {
+    variants: {
+      size: {
+        xs: "rounded px-3 py-1",
+        sm: "rounded px-3 py-2",
+        md: "rounded px-4 py-3",
+        lg: "rounded-lg px-6 py-4"
+      },
+      isActive: {
+        true: "bg-primary-50 text-primary-500",
+        false: "bg-transparent text-primary-500"
+      },
+      isHovered: {
+        true: "",
+        false: ""
+      },
+      isFocused: {
+        true: "",
+        false: ""
+      },
+      isPressed: {
+        true: "",
+        false: ""
+      },
+      isDisabled: {
+        true: "cursor-not-allowed",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Inactive states
+      {
+        isActive: !1,
+        isHovered: !0,
+        isDisabled: !1,
+        class: "bg-primary-50"
+      },
+      {
+        isActive: !1,
+        isFocused: !0,
+        isDisabled: !1,
+        class: "bg-primary-50 border border-primary-500"
+      },
+      {
+        isActive: !1,
+        isPressed: !0,
+        isDisabled: !1,
+        class: "bg-primary-50 border border-primary-500"
+      },
+      {
+        isActive: !1,
+        isDisabled: !0,
+        class: "bg-neutral-50 text-neutral-600"
+      },
+      // Active states
+      {
+        isActive: !0,
+        isHovered: !0,
+        isDisabled: !1,
+        class: "bg-primary-100"
+      },
+      {
+        isActive: !0,
+        isFocused: !0,
+        isDisabled: !1,
+        class: "bg-primary-100 border border-primary-500"
+      },
+      {
+        isActive: !0,
+        isPressed: !0,
+        isDisabled: !1,
+        class: "bg-primary-100 border border-primary-500"
+      },
+      {
+        isActive: !0,
+        isDisabled: !0,
+        class: "bg-neutral-100 text-neutral-600"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      isActive: !1,
+      isHovered: !1,
+      isFocused: !1,
+      isPressed: !1,
+      isDisabled: !1
     }
-  ) : null,
-  /* @__PURE__ */ e.jsx(f, { className: "lg:custom-scrollbar max-h-[260px] overflow-auto outline-none", items: x, children: (r) => /* @__PURE__ */ e.jsx(
-    g,
-    {
-      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"
-      ),
-      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",
-          {
-            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"
-          }
-        ) }) })
-      ] })
+  }
+), i = e(
+  "inline-flex items-center justify-center w-4 h-4 rounded-full text-xs p-0.5 font-semibold ml-0.5",
+  {
+    variants: {
+      isActive: {
+        true: "bg-primary-500 text-primary-50",
+        false: ""
+      },
+      isHovered: {
+        true: "",
+        false: ""
+      },
+      isDisabled: {
+        true: "bg-neutral-400 text-neutral-50",
+        false: ""
+      }
     },
-    r.value
-  ) })
-] });
+    compoundVariants: [
+      {
+        isActive: !0,
+        isHovered: !0,
+        isDisabled: !1,
+        class: "bg-primary-500 text-primary-100"
+      },
+      {
+        isActive: !0,
+        isDisabled: !0,
+        class: "bg-neutral-400 text-neutral-50"
+      }
+    ],
+    defaultVariants: {
+      isActive: !1,
+      isHovered: !1,
+      isDisabled: !1
+    }
+  }
+);
 export {
-  v as PopoverContent
+  i as filterButtonBadgeVariants,
+  r as filterButtonVariants
 };