@simpli-route/apollo-ds 0.1.62 → 0.1.65

package/dist/index.es96.js

@@ -1,23 +1,103 @@
-import t from "react";
-const e = t, n = ({
-  title: r,
-  titleId: a,
-  ...l
-}, o) => /* @__PURE__ */ e.createElement("svg", Object.assign({
-  fill: "currentColor",
-  "aria-hidden": "true",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  ref: o,
-  "aria-labelledby": a
-}, l), r ? /* @__PURE__ */ e.createElement("title", {
-  id: a
-}, r) : null, /* @__PURE__ */ e.createElement("path", {
-  fillRule: "evenodd",
-  d: "M21.336 3.153a.85.85 0 0 1 .211 1.183l-11.5 16.5a.85.85 0 0 1-1.357.05l-6.5-8a.85.85 0 1 1 1.32-1.072l5.788 7.124L20.153 3.364a.85.85 0 0 1 1.183-.211",
-  clipRule: "evenodd"
-})), c = e.forwardRef(n);
-var i = c;
+import { j as l } from "./index.es47.js";
+import { cn as P } from "./index.es48.js";
+import { SliderThumb as j } from "./index.es129.js";
+const T = ({
+  state: r,
+  type: n,
+  showTypeValue: t,
+  suffix: c,
+  classNameFilled: a,
+  classNameUnfilled: m,
+  modeTooltip: b,
+  positionTooltip: h,
+  classNameThumb: d,
+  isHiddenValue: v,
+  suffixRangeCustom: e
+}) => /* @__PURE__ */ l.jsxs("div", { className: "relative", children: [
+  t === "default" && !v ? /* @__PURE__ */ l.jsxs("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ l.jsxs(
+      "div",
+      {
+        className: "absolute top-4 text-sm text-neutral-900",
+        style: { left: `${r.getThumbPercent(0) * 100}%`, transform: "translateX(-50%)" },
+        children: [
+          r.values[0],
+          n === "range" && (e == null ? void 0 : e.left) || c
+        ]
+      }
+    ),
+    n === "range" && /* @__PURE__ */ l.jsxs(
+      "div",
+      {
+        className: "absolute top-4 text-sm text-neutral-900",
+        style: { left: `${r.getThumbPercent(1) * 100}%`, transform: "translateX(-50%)" },
+        children: [
+          r.values[1],
+          (e == null ? void 0 : e.right) || c
+        ]
+      }
+    )
+  ] }) : null,
+  /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: P("absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-primary-100", m)
+    }
+  ),
+  /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: P("absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary-500", a),
+      style: {
+        width: `${n === "range" ? r.getThumbPercent(1) * 100 - r.getThumbPercent(0) * 100 : r.getThumbPercent(0) * 100}%`,
+        left: n === "range" ? `${r.getThumbPercent(0) * 100}%` : "0%"
+      }
+    }
+  ),
+  n === "range" ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    /* @__PURE__ */ l.jsx(
+      j,
+      {
+        index: 0,
+        valuePercent: r.getThumbPercent(0),
+        value: r.values[0],
+        suffix: (e == null ? void 0 : e.left) || c,
+        modeTooltip: b,
+        positionTooltip: h,
+        showTypeValue: t,
+        isHiddenValue: v,
+        classNameThumb: d
+      }
+    ),
+    /* @__PURE__ */ l.jsx(
+      j,
+      {
+        index: 1,
+        valuePercent: r.getThumbPercent(1),
+        value: r.values[1],
+        suffix: (e == null ? void 0 : e.right) || c,
+        modeTooltip: b,
+        positionTooltip: h,
+        showTypeValue: t,
+        isHiddenValue: v,
+        classNameThumb: d
+      }
+    )
+  ] }) : /* @__PURE__ */ l.jsx(
+    j,
+    {
+      index: 0,
+      valuePercent: r.getThumbPercent(0),
+      value: r.values[0],
+      suffix: c,
+      modeTooltip: b,
+      positionTooltip: h,
+      showTypeValue: t,
+      isHiddenValue: v,
+      classNameThumb: d
+    }
+  )
+] });
 export {
-  i as C
+  T as SliderContainerTrack
 };

package/dist/index.es97.js

@@ -1,27 +1,15 @@
-import c from "react";
-const e = c, t = ({
-  title: l,
-  titleId: r,
-  ...o
-}, a) => /* @__PURE__ */ e.createElement("svg", Object.assign({
-  fill: "currentColor",
-  "aria-hidden": "true",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  ref: a,
-  "aria-labelledby": r
-}, o), l ? /* @__PURE__ */ e.createElement("title", {
-  id: r
-}, l) : null, /* @__PURE__ */ e.createElement("path", {
-  fillRule: "evenodd",
-  d: "M12 3.25c-4.81 0-8.75 3.94-8.75 8.75s3.94 8.75 8.75 8.75 8.75-3.94 8.75-8.75A8.733 8.733 0 0 0 12 3.25M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.571 2 12 2",
-  clipRule: "evenodd"
-}), /* @__PURE__ */ e.createElement("path", {
-  fillRule: "evenodd",
-  d: "M11.167 5.453c.394 0 .714.32.714.714v5.952h5.12a.715.715 0 0 1 0 1.43h-5.834a.715.715 0 0 1-.715-.715V6.167c0-.394.32-.714.715-.714",
-  clipRule: "evenodd"
-})), n = e.forwardRef(t);
-var i = n;
+const o = (e, g, r = 1) => {
+  if (g === "range" && Array.isArray(e) && e.length === 2) {
+    const [t, f] = e;
+    if (f - t < r) {
+      if (t > f - r)
+        return [f - r, f];
+      if (f < t + r)
+        return [t, t + r];
+    }
+  }
+  return e;
+};
 export {
-  i as C
+  o as validateMinDistance
 };

package/dist/index.es98.js

@@ -1,25 +1,42 @@
-import o from "react";
-const e = o, c = ({
-  title: r,
-  titleId: a,
-  ...l
-}, t) => /* @__PURE__ */ e.createElement("svg", Object.assign({
-  fill: "currentColor",
-  "aria-hidden": "true",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  ref: t,
-  "aria-labelledby": a
-}, l), r ? /* @__PURE__ */ e.createElement("title", {
-  id: a
-}, r) : null, /* @__PURE__ */ e.createElement("path", {
-  fillRule: "evenodd",
-  d: "M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17m0 1.5c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10",
-  clipRule: "evenodd"
-}), /* @__PURE__ */ e.createElement("path", {
-  d: "M8.47 14.47a.75.75 0 1 0 1.06 1.06L12 13.06l2.48 2.48a.75.75 0 1 0 1.06-1.06L13.06 12l2.48-2.48a.75.75 0 0 0-1.06-1.06L12 10.94 9.53 8.47a.75.75 0 0 0-1.06 1.06L10.94 12z"
-})), n = e.forwardRef(c);
-var i = n;
+import { cva as e } from "class-variance-authority";
+const t = 'after:content-[""] after:absolute after:border-8 after:border-x-transparent', o = `${t} after:left-4 after:top-[100%] after:border-b-transparent`, a = `${t} after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-b-transparent`, b = `${t} after:right-4 after:top-[100%] after:border-b-transparent`, l = `${t} after:left-4 after:bottom-[100%] after:border-t-transparent`, f = `${t} after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-t-transparent`, n = `${t} after:right-4 after:bottom-[100%] after:border-t-transparent`, r = 'before:content-[""] before:absolute before:top-1/2 before:-translate-y-1/2 before:border-8 before:border-y-transparent', s = `${r} before:right-[100%] before:border-l-transparent`, p = `${r} before:left-[100%] before:border-r-transparent`, u = e(
+  "absolute z-20 w-max max-w-[250px] whitespace-normal break-words rounded-lg transition duration-150 ease-in-out shadow-[0px_2px_4px_-2px_#22242A0F,0px_4px_8px_-2px_#22242A1A] py-2 px-3",
+  {
+    variants: {
+      mode: {
+        light: "bg-blue-50 text-neutral-900 after:border-t-blue-50 after:border-b-blue-50 before:border-r-blue-50 before:border-l-blue-50",
+        dark: "bg-blue-900 text-blue-50 after:border-t-blue-900 after:border-b-blue-900 before:border-r-blue-900 before:border-l-blue-900"
+      },
+      hasSupportText: {
+        true: "",
+        false: ""
+      },
+      placement: {
+        none: "bottom-full left-1/2 mb-3 -translate-x-1/2",
+        "top-start": `bottom-full left-0 mb-3 ${o}`,
+        top: `bottom-full left-1/2 mb-3 -translate-x-1/2 ${a}`,
+        "top-end": `bottom-full right-0 mb-3 ${b}`,
+        right: `left-full top-1/2 ml-3 -translate-y-1/2 ${s}`,
+        "bottom-start": `left-0 top-full mt-3 ${l}`,
+        bottom: `left-1/2 top-full mt-3 -translate-x-1/2 ${f}`,
+        "bottom-end": `right-0 top-full mt-3 ${n}`,
+        left: `right-full top-1/2 mr-3 -translate-y-1/2 ${p}`
+      }
+    },
+    compoundVariants: [
+      {
+        hasSupportText: !0,
+        mode: "dark",
+        class: "text-[16px] text-blue-50 font-semibold leading-5"
+      },
+      {
+        hasSupportText: !0,
+        mode: "light",
+        class: "text-[16px] text-neutral-900 font-semibold leading-5"
+      }
+    ]
+  }
+);
 export {
-  i as C
+  u as tooltipVariants
 };

package/dist/index.es99.js

@@ -1,23 +1,4 @@
-import t from "react";
-const e = t, n = ({
-  title: r,
-  titleId: a,
-  ...l
-}, o) => /* @__PURE__ */ e.createElement("svg", Object.assign({
-  fill: "currentColor",
-  "aria-hidden": "true",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  ref: o,
-  "aria-labelledby": a
-}, l), r ? /* @__PURE__ */ e.createElement("title", {
-  id: a
-}, r) : null, /* @__PURE__ */ e.createElement("path", {
-  fillRule: "evenodd",
-  d: "M2.253 2.253a.863.863 0 0 1 1.22 0L12 10.78l8.527-8.527a.863.863 0 1 1 1.22 1.22L13.22 12l8.527 8.527a.863.863 0 1 1-1.22 1.22L12 13.22l-8.527 8.527a.863.863 0 1 1-1.22-1.22L10.78 12 2.253 3.473a.863.863 0 0 1 0-1.22",
-  clipRule: "evenodd"
-})), s = e.forwardRef(n);
-var d = s;
+var e = { exports: {} };
 export {
-  d as C
+  e as __module
 };

package/dist/stories/MultiTextField.stories.d.ts

@@ -0,0 +1,53 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: (props: import('../components').MultiTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        placeholder: string;
+        size: "sm";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        validationState: {
+            control: "select";
+            options: (string | undefined)[];
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        isReadOnly: {
+            control: "boolean";
+        };
+        isRequired: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const WithEmailValidation: Story;
+export declare const WithCustomValidation: Story;
+export declare const WithURLValidation: Story;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;
+export declare const WithPreselectedValues: Story;
+export declare const WithErrorMessage: Story;
+export declare const Sizes: Story;
+export declare const PasteMultipleValues: Story;
+export declare const CustomSeparator: Story;
+export declare const InvalidValueExample: Story;
+export declare const AllStates: Story;

package/dist/stories/TextField.stories.d.ts

@@ -0,0 +1,56 @@
+import { TextField } from '../components';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: typeof TextField;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        placeholder: string;
+        size: "sm";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        validationState: {
+            control: "select";
+            options: (string | undefined)[];
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        isReadOnly: {
+            control: "boolean";
+        };
+        isRequired: {
+            control: "boolean";
+        };
+        multiline: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const WithIcon: Story;
+export declare const Valid: Story;
+export declare const Invalid: Story;
+export declare const WithTooltip: Story;
+export declare const Controlled: Story;
+export declare const Sizes: Story;
+export declare const Multiline: Story;
+export declare const MultilineWithValidation: Story;
+export declare const EmailType: Story;
+export declare const PasswordType: Story;
+export declare const AllStates: Story;

package/dist/stories/TimeField.stories.d.ts

@@ -0,0 +1,79 @@
+import { TimeField } from '../components';
+import { StoryObj } from '@storybook/react';
+import { Time } from '@internationalized/date';
+
+declare const meta: {
+    title: string;
+    component: typeof TimeField;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        size: "sm";
+        defaultValue: Time;
+        granularity: "minute";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        validationState: {
+            control: "select";
+            options: (string | undefined)[];
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        isReadOnly: {
+            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 WithDescription: Story;
+export declare const Error: Story;
+export declare const Valid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Required: Story;
+export declare const WithTooltip: Story;
+export declare const SizeXS: Story;
+export declare const SizeSM: Story;
+export declare const SizeMD: Story;
+export declare const SizeLG: 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;
+export declare const AllSizes: Story;
+export declare const AllValidationStates: Story;
+export declare const ControlledExamples: Story;

package/dist/style.css

@@ -1120,6 +1120,9 @@ select {
 .w-6 {
   width: 1.5rem;
 }
+.w-64 {
+  width: 16rem;
+}
 .w-7 {
   width: 1.75rem;
 }
@@ -1304,6 +1307,9 @@ select {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
 .gap-4 {
   gap: 1rem;
 }
@@ -2259,6 +2265,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(233 254 245 / var(--tw-text-opacity));
 }
+.text-success-500 {
+  --tw-text-opacity: 1;
+  color: rgb(31 181 118 / var(--tw-text-opacity));
+}
 .text-success-800 {
   --tw-text-opacity: 1;
   color: rgb(2 96 56 / var(--tw-text-opacity));
@@ -2357,6 +2367,10 @@ select {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(27 51 173 / var(--tw-ring-opacity));
 }
+.ring-error-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(204 64 51 / var(--tw-ring-opacity));
+}
 .ring-primary-500 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(76 59 239 / var(--tw-ring-opacity));
@@ -2365,6 +2379,10 @@ select {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(38 157 217 / var(--tw-ring-opacity));
 }
+.ring-success-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 181 118 / var(--tw-ring-opacity));
+}
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -2722,6 +2740,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(38 68 217 / var(--tw-text-opacity));
 }
+.hover\:text-neutral-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(34 36 42 / var(--tw-text-opacity));
+}
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(76 59 239 / var(--tw-text-opacity));

package/package.json

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