@simpli-route/apollo-ds 0.1.36 → 0.1.38

package/dist/index.es98.js

@@ -1,51 +1,168 @@
-import { __exports as c } from "./index.es100.js";
-import { c as p } from "./index.es130.js";
-import "./index.es131.js";
-import { __exports as d } from "./index.es132.js";
-(function(r) {
-  Object.defineProperty(r, "__esModule", {
-    value: !0
-  }), Object.defineProperty(r, "default", {
-    enumerable: !0,
-    get: function() {
-      return a;
-    }
-  });
-  const o = /* @__PURE__ */ s(p), n = d;
-  function s(e) {
-    return e && e.__esModule ? e : {
-      default: e
-    };
-  }
-  function a(e) {
-    var l;
-    const f = ((l = e == null ? void 0 : e.presets) !== null && l !== void 0 ? l : [
-      o.default
-    ]).slice().reverse().flatMap((t) => a(t instanceof Function ? t() : t)), i = {
-      // Add experimental configs here...
-      respectDefaultRingColorOpacity: {
-        theme: {
-          ringColor: ({ theme: t }) => ({
-            DEFAULT: "#3b82f67f",
-            ...t("colors")
-          })
-        }
+import { getDefaultExportFromCjs as r } from "./index.es93.js";
+import { p as o } from "./index.es110.js";
+const l = o;
+function e(a) {
+  return Object.fromEntries(
+    Object.entries(a).filter(([i]) => i !== "DEFAULT")
+  );
+}
+var s = l(
+  ({ addUtilities: a, matchUtilities: i, theme: n }) => {
+    a({
+      "@keyframes enter": n("keyframes.enter"),
+      "@keyframes exit": n("keyframes.exit"),
+      ".animate-in": {
+        animationName: "enter",
+        animationDuration: n("animationDuration.DEFAULT"),
+        "--tw-enter-opacity": "initial",
+        "--tw-enter-scale": "initial",
+        "--tw-enter-rotate": "initial",
+        "--tw-enter-translate-x": "initial",
+        "--tw-enter-translate-y": "initial"
+      },
+      ".animate-out": {
+        animationName: "exit",
+        animationDuration: n("animationDuration.DEFAULT"),
+        "--tw-exit-opacity": "initial",
+        "--tw-exit-scale": "initial",
+        "--tw-exit-rotate": "initial",
+        "--tw-exit-translate-x": "initial",
+        "--tw-exit-translate-y": "initial"
+      }
+    }), i(
+      {
+        "fade-in": (t) => ({ "--tw-enter-opacity": t }),
+        "fade-out": (t) => ({ "--tw-exit-opacity": t })
       },
-      disableColorOpacityUtilitiesByDefault: {
-        corePlugins: {
-          backgroundOpacity: !1,
-          borderOpacity: !1,
-          divideOpacity: !1,
-          placeholderOpacity: !1,
-          ringOpacity: !1,
-          textOpacity: !1
+      { values: n("animationOpacity") }
+    ), i(
+      {
+        "zoom-in": (t) => ({ "--tw-enter-scale": t }),
+        "zoom-out": (t) => ({ "--tw-exit-scale": t })
+      },
+      { values: n("animationScale") }
+    ), i(
+      {
+        "spin-in": (t) => ({ "--tw-enter-rotate": t }),
+        "spin-out": (t) => ({ "--tw-exit-rotate": t })
+      },
+      { values: n("animationRotate") }
+    ), i(
+      {
+        "slide-in-from-top": (t) => ({
+          "--tw-enter-translate-y": `-${t}`
+        }),
+        "slide-in-from-bottom": (t) => ({
+          "--tw-enter-translate-y": t
+        }),
+        "slide-in-from-left": (t) => ({
+          "--tw-enter-translate-x": `-${t}`
+        }),
+        "slide-in-from-right": (t) => ({
+          "--tw-enter-translate-x": t
+        }),
+        "slide-out-to-top": (t) => ({
+          "--tw-exit-translate-y": `-${t}`
+        }),
+        "slide-out-to-bottom": (t) => ({
+          "--tw-exit-translate-y": t
+        }),
+        "slide-out-to-left": (t) => ({
+          "--tw-exit-translate-x": `-${t}`
+        }),
+        "slide-out-to-right": (t) => ({
+          "--tw-exit-translate-x": t
+        })
+      },
+      { values: n("animationTranslate") }
+    ), i(
+      { duration: (t) => ({ animationDuration: t }) },
+      { values: e(n("animationDuration")) }
+    ), i(
+      { delay: (t) => ({ animationDelay: t }) },
+      { values: n("animationDelay") }
+    ), i(
+      { ease: (t) => ({ animationTimingFunction: t }) },
+      { values: e(n("animationTimingFunction")) }
+    ), a({
+      ".running": { animationPlayState: "running" },
+      ".paused": { animationPlayState: "paused" }
+    }), i(
+      { "fill-mode": (t) => ({ animationFillMode: t }) },
+      { values: n("animationFillMode") }
+    ), i(
+      { direction: (t) => ({ animationDirection: t }) },
+      { values: n("animationDirection") }
+    ), i(
+      { repeat: (t) => ({ animationIterationCount: t }) },
+      { values: n("animationRepeat") }
+    );
+  },
+  {
+    theme: {
+      extend: {
+        animationDelay: ({ theme: a }) => ({
+          ...a("transitionDelay")
+        }),
+        animationDuration: ({ theme: a }) => ({
+          0: "0ms",
+          ...a("transitionDuration")
+        }),
+        animationTimingFunction: ({ theme: a }) => ({
+          ...a("transitionTimingFunction")
+        }),
+        animationFillMode: {
+          none: "none",
+          forwards: "forwards",
+          backwards: "backwards",
+          both: "both"
+        },
+        animationDirection: {
+          normal: "normal",
+          reverse: "reverse",
+          alternate: "alternate",
+          "alternate-reverse": "alternate-reverse"
+        },
+        animationOpacity: ({ theme: a }) => ({
+          DEFAULT: 0,
+          ...a("opacity")
+        }),
+        animationTranslate: ({ theme: a }) => ({
+          DEFAULT: "100%",
+          ...a("translate")
+        }),
+        animationScale: ({ theme: a }) => ({
+          DEFAULT: 0,
+          ...a("scale")
+        }),
+        animationRotate: ({ theme: a }) => ({
+          DEFAULT: "30deg",
+          ...a("rotate")
+        }),
+        animationRepeat: {
+          0: "0",
+          1: "1",
+          infinite: "infinite"
+        },
+        keyframes: {
+          enter: {
+            from: {
+              opacity: "var(--tw-enter-opacity, 1)",
+              transform: "translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))"
+            }
+          },
+          exit: {
+            to: {
+              opacity: "var(--tw-exit-opacity, 1)",
+              transform: "translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))"
+            }
+          }
         }
       }
-    }, u = Object.keys(i).filter((t) => (0, n.flagEnabled)(e, t)).map((t) => i[t]);
-    return [
-      e,
-      ...u,
-      ...f
-    ];
+    }
   }
-})(c);
+);
+const u = /* @__PURE__ */ r(s);
+export {
+  u as default
+};

package/dist/index.es99.js

@@ -1,4 +1,59 @@
-var e = {};
+import { j as r } from "./index.es36.js";
+import { SliderThumb as m } from "react-aria-components";
+import { cn as i } from "./index.es37.js";
+import { Tooltip as c } from "./index.es32.js";
+import { TooltipTrigger as d } from "./index.es33.js";
+const y = ({
+  index: o,
+  valuePercent: n,
+  value: a,
+  suffix: p,
+  modeTooltip: g,
+  positionTooltip: t,
+  showTypeValue: s,
+  classNameThumb: e,
+  isHiddenValue: l
+}) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    className: i("absolute", s === "tooltip" && !l ? "top-[-6px]" : "top-1/2"),
+    style: { left: `${n * 100}%`, transform: "translate(-50%, -50%)" },
+    children: s === "tooltip" && !l ? /* @__PURE__ */ r.jsxs(d, { closeDelay: 100, delay: 100, children: [
+      /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(
+        m,
+        {
+          index: o,
+          className: i(
+            "dragging:bg-primary-100 size-5 rounded-full bg-primary-500 outline-none ring-black transition focus-visible:ring-2",
+            e
+          )
+        }
+      ) }),
+      /* @__PURE__ */ r.jsxs(
+        c,
+        {
+          mode: g,
+          placement: t,
+          size: "sm",
+          className: i("!text-sm", t === "top" ? "!mb-6" : "!mt-6"),
+          children: [
+            a,
+            p
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ r.jsx(
+      m,
+      {
+        index: o,
+        className: i(
+          "dragging:bg-primary-100 size-5 rounded-full bg-primary-500 outline-none ring-black transition focus-visible:ring-2",
+          e
+        )
+      }
+    )
+  }
+);
 export {
-  e as __exports
+  y as SliderThumb
 };

package/dist/stories/InvisibleNumberField.stories.d.ts

@@ -0,0 +1,70 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('../components').InvisibleNumberFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        captionError: string;
+        placeholder: string;
+        size: "bodyDefault";
+        defaultValue: number;
+        minValue: number;
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        orientation: {
+            control: "select";
+            options: string[];
+        };
+        validationState: {
+            control: "select";
+            options: (string | undefined)[];
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        isRequired: {
+            control: "boolean";
+        };
+        minValue: {
+            control: "number";
+        };
+        maxValue: {
+            control: "number";
+        };
+        step: {
+            control: "number";
+        };
+        showStepper: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Hover: Story;
+export declare const Active: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const Required: Story;
+export declare const WithTooltip: Story;
+export declare const BodySm: Story;
+export declare const H5: Story;
+export declare const H3: Story;
+export declare const Horizontal: Story;
+export declare const HorizontalWithError: Story;
+export declare const WithMinMax: Story;
+export declare const WithStep: Story;
+export declare const WithFormatOptions: Story;
+export declare const WithFormatOptionsPercentage: Story;
+export declare const WithoutStepper: Story;

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

@@ -0,0 +1,77 @@
+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-components').TimeValue> & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        captionError: string;
+        size: "bodyDefault";
+        defaultValue: Time;
+        granularity: "minute";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        orientation: {
+            control: "select";
+            options: string[];
+        };
+        validationState: {
+            control: "select";
+            options: (string | undefined)[];
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        isRequired: {
+            control: "boolean";
+        };
+        granularity: {
+            control: "select";
+            options: string[];
+        };
+        hourCycle: {
+            control: "select";
+            options: number[];
+        };
+        hideTimeZone: {
+            control: "boolean";
+        };
+        shouldForceLeadingZeros: {
+            control: "boolean";
+        };
+        confirmButtonLabel: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Hover: Story;
+export declare const Active: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const Required: Story;
+export declare const WithTooltip: Story;
+export declare const BodySm: Story;
+export declare const H5: Story;
+export declare const H3: Story;
+export declare const Horizontal: Story;
+export declare const HorizontalWithError: Story;
+export declare const WithMinMax: Story;
+export declare const HourGranularity: Story;
+export declare const SecondGranularity: Story;
+export declare const TwelveHourCycle: Story;
+export declare const TwentyFourHourCycle: Story;
+export declare const WithLeadingZeros: Story;
+export declare const WithPlaceholder: Story;

package/dist/style.css

@@ -778,6 +778,9 @@ select {
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .collapse {
   visibility: collapse;
 }
@@ -864,6 +867,14 @@ select {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.my-0\.5 {
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
+}
 .my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -956,6 +967,12 @@ select {
 .box-border {
   box-sizing: border-box;
 }
+.box-content {
+  box-sizing: content-box;
+}
+.block {
+  display: block;
+}
 .flex {
   display: flex;
 }
@@ -1011,6 +1028,9 @@ select {
   width: 100%;
   height: 100%;
 }
+.h-0 {
+  height: 0px;
+}
 .h-1 {
   height: 0.25rem;
 }
@@ -1041,9 +1061,15 @@ select {
 .h-6 {
   height: 1.5rem;
 }
+.h-7 {
+  height: 1.75rem;
+}
 .h-8 {
   height: 2rem;
 }
+.h-\[180px\] {
+  height: 180px;
+}
 .h-\[20px\] {
   height: 20px;
 }
@@ -1080,6 +1106,9 @@ select {
 .w-12 {
   width: 3rem;
 }
+.w-14 {
+  width: 3.5rem;
+}
 .w-16 {
   width: 4rem;
 }
@@ -1095,6 +1124,12 @@ select {
 .w-5 {
   width: 1.25rem;
 }
+.w-6 {
+  width: 1.5rem;
+}
+.w-7 {
+  width: 1.75rem;
+}
 .w-8 {
   width: 2rem;
 }
@@ -1104,6 +1139,12 @@ select {
 .w-\[--trigger-width\] {
   width: var(--trigger-width);
 }
+.w-\[140px\] {
+  width: 140px;
+}
+.w-\[180px\] {
+  width: 180px;
+}
 .w-\[20px\] {
   width: 20px;
 }
@@ -1286,6 +1327,15 @@ select {
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(247 247 248 / var(--tw-divide-opacity));
+}
 .self-start {
   align-self: flex-start;
 }
@@ -1346,6 +1396,9 @@ select {
 .border-r-2 {
   border-right-width: 2px;
 }
+.border-t {
+  border-top-width: 1px;
+}
 .border-solid {
   border-style: solid;
 }
@@ -1797,6 +1850,10 @@ select {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1856,6 +1913,9 @@ select {
 .text-center {
   text-align: center;
 }
+.text-right {
+  text-align: right;
+}
 .\!text-sm {
   font-size: 0.875rem !important;
   line-height: 1.25rem !important;
@@ -2189,6 +2249,9 @@ select {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
+.ring-black\/10 {
+  --tw-ring-color: rgb(0 0 0 / 0.1);
+}
 .ring-black\/5 {
   --tw-ring-color: rgb(0 0 0 / 0.05);
 }
@@ -2587,6 +2650,14 @@ select {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
+.focus\:bg-primary-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(76 59 239 / var(--tw-bg-opacity));
+}
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2662,6 +2733,10 @@ select {
 .focus-visible\:ring-offset-1:focus-visible {
   --tw-ring-offset-width: 1px;
 }
+.group:focus .group-focus\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .group:active .group-active\:border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(76 59 239 / var(--tw-border-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpli-route/apollo-ds",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "files": [
     "dist"