@gunkin/uiify 0.0.3-alpha → 0.0.5-alpha

package/dist/components/slider/client/SliderClient.js

@@ -0,0 +1,170 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useControllableState } from "@gunkin/uiify/hooks";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+import { getSliderStops, snapSliderToStops } from "../slider-values.js";
+function normalizeValue(value, min, max) {
+  if (typeof value === "number") return Math.max(min, Math.min(max, value));
+  const first = Math.max(min, Math.min(max, value[0]));
+  const second = Math.max(min, Math.min(max, value[1]));
+  return first <= second ? [first, second] : [second, first];
+}
+function normalizeSelection(value, min, max, step, stops) {
+  const normalized = normalizeValue(value, min, max);
+  if (step !== null) return normalized;
+  if (typeof normalized === "number") return snapSliderToStops(normalized, stops);
+  const lowerStops = stops.filter((stop) => stop <= normalized[1]);
+  const lower = snapSliderToStops(normalized[0], lowerStops);
+  const upperStops = stops.filter((stop) => stop >= lower);
+  return [lower, snapSliderToStops(normalized[1], upperStops)];
+}
+function position(value, min, max) {
+  if (max <= min) return 0;
+  return Math.max(0, Math.min(100, (value - min) / (max - min) * 100));
+}
+function marksInRange(marks, min, max) {
+  return marks.filter(({ value }) => Number.isFinite(value) && value >= min && value <= max);
+}
+function SliderClient(props) {
+  const {
+    as,
+    render,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    orientation = "horizontal",
+    marks = [],
+    thumbLabels,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...consumerProps
+  } = props;
+  const stops = getSliderStops(min, max, marks);
+  const initialValue = normalizeSelection(defaultValue ?? min, min, max, step, stops);
+  const safeControlledValue = controlledValue === void 0 ? void 0 : normalizeSelection(controlledValue, min, max, step, stops);
+  const [value, setValue] = useControllableState({
+    defaultValue: initialValue,
+    onChange: onValueChange,
+    value: safeControlledValue
+  });
+  const [enhanced, setEnhanced] = useState(false);
+  useEffect(() => setEnhanced(true), []);
+  const normalizedValue = normalizeValue(value, min, max);
+  const values = typeof normalizedValue === "number" ? [normalizedValue] : [normalizedValue[0], normalizedValue[1]];
+  const isRange = values.length === 2;
+  const consumerStyle = "style" in consumerProps ? consumerProps.style : void 0;
+  const consumerRole = "role" in consumerProps ? consumerProps.role : void 0;
+  const positionStyles = values.map((currentValue) => ({
+    "--uiify-slider-position": String(position(currentValue, min, max)) + "%"
+  }));
+  const rootStyle = {
+    ...consumerStyle,
+    "--uiify-slider-start": String(position(values[0], min, max)) + "%",
+    "--uiify-slider-end": String(position(values[values.length - 1], min, max)) + "%",
+    "--uiify-slider-middle": String(
+      (position(values[0], min, max) + position(values[values.length - 1], min, max)) / 2
+    ) + "%"
+  };
+  const visibleMarks = marksInRange(marks, min, max);
+  const setThumbValue = (index, proposed) => {
+    if (disabled) return;
+    if (!isRange) {
+      const next = step === null ? snapSliderToStops(proposed, stops) : proposed;
+      setValue(next);
+      return;
+    }
+    const lower = index === 0 ? min : values[0];
+    const upper = index === 0 ? values[1] : max;
+    const availableStops = stops.filter((stop) => stop >= lower && stop <= upper);
+    const snapped = step === null ? snapSliderToStops(proposed, availableStops) : proposed;
+    const nextValue = index === 0 ? [Math.min(snapped, values[1]), values[1]] : [values[0], Math.max(snapped, values[0])];
+    setValue(nextValue);
+  };
+  const handleChange = (index, event) => {
+    setThumbValue(index, event.currentTarget.valueAsNumber);
+  };
+  const handleKeyDown = (index, event) => {
+    if (disabled || step !== null) return;
+    const direction = event.key === "ArrowRight" || event.key === "ArrowUp" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowDown" ? -1 : 0;
+    if (direction === 0) return;
+    event.preventDefault();
+    const currentValue = values[index];
+    const availableStops = isRange ? stops.filter((stop) => index === 0 ? stop <= values[1] : stop >= values[0]) : stops;
+    const currentIndex = availableStops.indexOf(currentValue);
+    const nextValue = availableStops[currentIndex + direction];
+    if (nextValue !== void 0) setThumbValue(index, nextValue);
+  };
+  const inputNodes = values.map((currentValue, index) => {
+    const inputLabel = isRange ? thumbLabels?.[index] ?? (index === 0 ? "Minimum value" : "Maximum value") : ariaLabel;
+    const inputLabelledBy = isRange ? void 0 : ariaLabelledBy;
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step: step === null ? "any" : step,
+        value: currentValue,
+        disabled,
+        "aria-label": inputLabel,
+        "aria-labelledby": inputLabelledBy,
+        "aria-orientation": orientation,
+        "data-part": "thumb",
+        "data-state": String(currentValue),
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : void 0,
+        onChange: (event) => handleChange(index, event),
+        onKeyDown: (event) => handleKeyDown(index, event)
+      },
+      index
+    );
+  });
+  return useRenderElement({
+    as,
+    defaultTag: "div",
+    props: {
+      ...consumerProps,
+      role: isRange ? "group" : consumerRole,
+      "aria-label": isRange ? ariaLabel : void 0,
+      "aria-labelledby": isRange ? ariaLabelledBy : void 0,
+      "data-uiify-slider-client": "",
+      "data-part": "root",
+      "data-range": isRange ? "" : void 0,
+      "data-state": isRange ? "range" : String(values[0]),
+      "data-orientation": orientation,
+      "data-disabled": disabled ? "" : void 0,
+      "data-enhanced": enhanced ? "" : void 0,
+      style: rootStyle,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { "data-part": "track", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { "data-part": "range" }),
+          visibleMarks.map((mark) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-part": "mark",
+              style: {
+                "--uiify-slider-position": String(position(mark.value, min, max)) + "%"
+              },
+              children: mark.label
+            },
+            mark.value
+          )),
+          positionStyles.map((style, index) => /* @__PURE__ */ jsx("span", { "data-part": "visual-thumb", style }, index))
+        ] }),
+        inputNodes
+      ] })
+    },
+    render,
+    state: { disabled, orientation, value: normalizedValue }
+  });
+}
+SliderClient.displayName = "SliderClient";
+export {
+  SliderClient
+};
+//# sourceMappingURL=SliderClient.js.map

package/dist/components/slider/client/SliderClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/slider/client/SliderClient.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSProperties,\n  ElementType,\n  KeyboardEvent,\n  ReactElement,\n  SyntheticEvent,\n} from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { useControllableState } from \"@gunkin/uiify/hooks\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\n\nimport { getSliderStops, snapSliderToStops } from \"../slider-values.js\";\nimport type { SliderClientProps, SliderClientValue, SliderMark } from \"../types.js\";\n\ntype SliderPositionStyle = CSSProperties & {\n  readonly \"--uiify-slider-position\"?: string;\n  readonly \"--uiify-slider-start\"?: string;\n  readonly \"--uiify-slider-end\"?: string;\n  readonly \"--uiify-slider-middle\"?: string;\n};\n\nfunction normalizeValue(value: SliderClientValue, min: number, max: number): SliderClientValue {\n  if (typeof value === \"number\") return Math.max(min, Math.min(max, value));\n\n  const first = Math.max(min, Math.min(max, value[0]));\n  const second = Math.max(min, Math.min(max, value[1]));\n  return first <= second ? [first, second] : [second, first];\n}\n\nfunction normalizeSelection(\n  value: SliderClientValue,\n  min: number,\n  max: number,\n  step: number | null,\n  stops: readonly number[],\n): SliderClientValue {\n  const normalized = normalizeValue(value, min, max);\n  if (step !== null) return normalized;\n  if (typeof normalized === \"number\") return snapSliderToStops(normalized, stops);\n\n  const lowerStops = stops.filter((stop) => stop <= normalized[1]);\n  const lower = snapSliderToStops(normalized[0], lowerStops);\n  const upperStops = stops.filter((stop) => stop >= lower);\n  return [lower, snapSliderToStops(normalized[1], upperStops)];\n}\n\nfunction position(value: number, min: number, max: number): number {\n  if (max <= min) return 0;\n  return Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));\n}\n\nfunction marksInRange(\n  marks: readonly SliderMark[],\n  min: number,\n  max: number,\n): readonly SliderMark[] {\n  return marks.filter(({ value }) => Number.isFinite(value) && value >= min && value <= max);\n}\n\nexport function SliderClient<TAs extends ElementType = \"div\">(\n  props: SliderClientProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    value: controlledValue,\n    defaultValue,\n    onValueChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    disabled = false,\n    orientation = \"horizontal\",\n    marks = [],\n    thumbLabels,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...consumerProps\n  } = props as SliderClientProps<\"div\">;\n\n  const stops = getSliderStops(min, max, marks);\n  const initialValue = normalizeSelection(defaultValue ?? min, min, max, step, stops);\n  const safeControlledValue =\n    controlledValue === undefined\n      ? undefined\n      : normalizeSelection(controlledValue, min, max, step, stops);\n  const [value, setValue] = useControllableState<SliderClientValue>({\n    defaultValue: initialValue,\n    onChange: onValueChange,\n    value: safeControlledValue,\n  });\n  const [enhanced, setEnhanced] = useState(false);\n  useEffect(() => setEnhanced(true), []);\n\n  const normalizedValue = normalizeValue(value, min, max);\n  const values: readonly number[] =\n    typeof normalizedValue === \"number\"\n      ? [normalizedValue]\n      : [normalizedValue[0], normalizedValue[1]];\n  const isRange = values.length === 2;\n  const consumerStyle = \"style\" in consumerProps ? consumerProps.style : undefined;\n  const consumerRole = \"role\" in consumerProps ? consumerProps.role : undefined;\n  const positionStyles: readonly SliderPositionStyle[] = values.map((currentValue) => ({\n    \"--uiify-slider-position\": String(position(currentValue, min, max)) + \"%\",\n  }));\n  const rootStyle: SliderPositionStyle = {\n    ...consumerStyle,\n    \"--uiify-slider-start\": String(position(values[0]!, min, max)) + \"%\",\n    \"--uiify-slider-end\": String(position(values[values.length - 1]!, min, max)) + \"%\",\n    \"--uiify-slider-middle\":\n      String(\n        (position(values[0]!, min, max) + position(values[values.length - 1]!, min, max)) / 2,\n      ) + \"%\",\n  };\n  const visibleMarks = marksInRange(marks, min, max);\n\n  const setThumbValue = (index: number, proposed: number): void => {\n    if (disabled) return;\n\n    if (!isRange) {\n      const next = step === null ? snapSliderToStops(proposed, stops) : proposed;\n      setValue(next);\n      return;\n    }\n\n    const lower = index === 0 ? min : values[0]!;\n    const upper = index === 0 ? values[1]! : max;\n    const availableStops = stops.filter((stop) => stop >= lower && stop <= upper);\n    const snapped = step === null ? snapSliderToStops(proposed, availableStops) : proposed;\n    const nextValue =\n      index === 0\n        ? ([Math.min(snapped, values[1]!), values[1]!] as const)\n        : ([values[0]!, Math.max(snapped, values[0]!)] as const);\n    setValue(nextValue);\n  };\n\n  const handleChange = (index: number, event: SyntheticEvent<HTMLInputElement>): void => {\n    setThumbValue(index, event.currentTarget.valueAsNumber);\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (disabled || step !== null) return;\n\n    const direction =\n      event.key === \"ArrowRight\" || event.key === \"ArrowUp\"\n        ? 1\n        : event.key === \"ArrowLeft\" || event.key === \"ArrowDown\"\n          ? -1\n          : 0;\n    if (direction === 0) return;\n\n    event.preventDefault();\n    const currentValue = values[index]!;\n    const availableStops = isRange\n      ? stops.filter((stop) => (index === 0 ? stop <= values[1]! : stop >= values[0]!))\n      : stops;\n    const currentIndex = availableStops.indexOf(currentValue);\n    const nextValue = availableStops[currentIndex + direction];\n    if (nextValue !== undefined) setThumbValue(index, nextValue);\n  };\n\n  const inputNodes = values.map((currentValue, index) => {\n    const inputLabel = isRange\n      ? (thumbLabels?.[index] ?? (index === 0 ? \"Minimum value\" : \"Maximum value\"))\n      : ariaLabel;\n    const inputLabelledBy = isRange ? undefined : ariaLabelledBy;\n\n    return (\n      <input\n        key={index}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step === null ? \"any\" : step}\n        value={currentValue}\n        disabled={disabled}\n        aria-label={inputLabel}\n        aria-labelledby={inputLabelledBy}\n        aria-orientation={orientation}\n        data-part=\"thumb\"\n        data-state={String(currentValue)}\n        data-orientation={orientation}\n        data-disabled={disabled ? \"\" : undefined}\n        onChange={(event) => handleChange(index, event)}\n        onKeyDown={(event) => handleKeyDown(index, event)}\n      />\n    );\n  });\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      role: isRange ? \"group\" : consumerRole,\n      \"aria-label\": isRange ? ariaLabel : undefined,\n      \"aria-labelledby\": isRange ? ariaLabelledBy : undefined,\n      \"data-uiify-slider-client\": \"\",\n      \"data-part\": \"root\",\n      \"data-range\": isRange ? \"\" : undefined,\n      \"data-state\": isRange ? \"range\" : String(values[0]),\n      \"data-orientation\": orientation,\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-enhanced\": enhanced ? \"\" : undefined,\n      style: rootStyle,\n      children: (\n        <>\n          <div data-part=\"track\" aria-hidden=\"true\">\n            <span data-part=\"range\" />\n            {visibleMarks.map((mark) => (\n              <span\n                key={mark.value}\n                data-part=\"mark\"\n                style={\n                  {\n                    \"--uiify-slider-position\": String(position(mark.value, min, max)) + \"%\",\n                  } as SliderPositionStyle\n                }\n              >\n                {mark.label}\n              </span>\n            ))}\n            {positionStyles.map((style, index) => (\n              <span key={index} data-part=\"visual-thumb\" style={style} />\n            ))}\n          </div>\n          {inputNodes}\n        </>\n      ),\n    },\n    render,\n    state: { disabled, orientation, value: normalizedValue },\n  });\n}\n\nSliderClient.displayName = \"SliderClient\";\n"],"mappings":"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","names":[]}

package/dist/components/slider/client/index.d.ts

@@ -0,0 +1,3 @@
+export { SliderClient } from "./SliderClient.js";
+export type { SliderClientOwnProps, SliderClientProps, SliderClientRenderState, SliderClientValue, SliderMark, } from "../types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/slider/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,UAAU,GACX,MAAM,aAAa,CAAC"}

package/dist/components/slider/client/index.js

@@ -0,0 +1,5 @@
+import { SliderClient } from "./SliderClient.js";
+export {
+  SliderClient
+};
+//# sourceMappingURL=index.js.map

package/dist/components/slider/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/slider/client/index.ts"],"sourcesContent":["export { SliderClient } from \"./SliderClient.js\";\nexport type {\n  SliderClientOwnProps,\n  SliderClientProps,\n  SliderClientRenderState,\n  SliderClientValue,\n  SliderMark,\n} from \"../types.js\";\n"],"mappings":"AAAA,SAAS,oBAAoB;","names":[]}

package/dist/components/slider/client.d.ts

@@ -0,0 +1 @@
+export * from "./client/index.js";

package/dist/components/slider/client.js

@@ -0,0 +1 @@
+export * from "./client/index.js";

package/dist/components/slider/slider-values.d.ts

@@ -0,0 +1,4 @@
+import type { SliderMark } from "./types.js";
+export declare function getSliderStops(min: number, max: number, marks: readonly SliderMark[]): readonly number[];
+export declare function snapSliderToStops(value: number, stops: readonly number[]): number;
+//# sourceMappingURL=slider-values.d.ts.map

package/dist/components/slider/slider-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-values.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider-values.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,SAAS,UAAU,EAAE,GAC3B,SAAS,MAAM,EAAE,CAUnB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,CAajF"}

package/dist/components/slider/slider-values.js

@@ -0,0 +1,26 @@
+function getSliderStops(min, max, marks) {
+  return [
+    .../* @__PURE__ */ new Set([
+      min,
+      ...marks.map(({ value }) => value).filter((value) => Number.isFinite(value) && value >= min && value <= max),
+      max
+    ])
+  ].sort((a, b) => a - b);
+}
+function snapSliderToStops(value, stops) {
+  let closest = stops[0];
+  let closestDistance = Math.abs(value - closest);
+  for (const stop of stops.slice(1)) {
+    const distance = Math.abs(value - stop);
+    if (distance < closestDistance) {
+      closest = stop;
+      closestDistance = distance;
+    }
+  }
+  return closest;
+}
+export {
+  getSliderStops,
+  snapSliderToStops
+};
+//# sourceMappingURL=slider-values.js.map

package/dist/components/slider/slider-values.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/slider/slider-values.ts"],"sourcesContent":["import type { SliderMark } from \"./types.js\";\n\nexport function getSliderStops(\n  min: number,\n  max: number,\n  marks: readonly SliderMark[],\n): readonly number[] {\n  return [\n    ...new Set([\n      min,\n      ...marks\n        .map(({ value }) => value)\n        .filter((value) => Number.isFinite(value) && value >= min && value <= max),\n      max,\n    ]),\n  ].sort((a, b) => a - b);\n}\n\nexport function snapSliderToStops(value: number, stops: readonly number[]): number {\n  let closest = stops[0]!;\n  let closestDistance = Math.abs(value - closest);\n\n  for (const stop of stops.slice(1)) {\n    const distance = Math.abs(value - stop);\n    if (distance < closestDistance) {\n      closest = stop;\n      closestDistance = distance;\n    }\n  }\n\n  return closest;\n}\n"],"mappings":"AAEO,SAAS,eACd,KACA,KACA,OACmB;AACnB,SAAO;AAAA,IACL,GAAG,oBAAI,IAAI;AAAA,MACT;AAAA,MACA,GAAG,MACA,IAAI,CAAC,EAAE,MAAM,MAAM,KAAK,EACxB,OAAO,CAAC,UAAU,OAAO,SAAS,KAAK,KAAK,SAAS,OAAO,SAAS,GAAG;AAAA,MAC3E;AAAA,IACF,CAAC;AAAA,EACH,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxB;AAEO,SAAS,kBAAkB,OAAe,OAAkC;AACjF,MAAI,UAAU,MAAM,CAAC;AACrB,MAAI,kBAAkB,KAAK,IAAI,QAAQ,OAAO;AAE9C,aAAW,QAAQ,MAAM,MAAM,CAAC,GAAG;AACjC,UAAM,WAAW,KAAK,IAAI,QAAQ,IAAI;AACtC,QAAI,WAAW,iBAAiB;AAC9B,gBAAU;AACV,wBAAkB;AAAA,IACpB;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}

package/dist/components/slider/types.d.ts

@@ -1,5 +1,9 @@
-import type { ElementType } from "react";
+import type { ElementType, ReactNode } from "react";
 import type { RenderableProps } from "@gunkin/uiify/core/render";
+export interface SliderMark {
+    readonly value: number;
+    readonly label?: ReactNode;
+}
 export interface SliderOwnProps {
     readonly value?: number;
     readonly defaultValue?: number;
@@ -9,5 +13,26 @@ export interface SliderOwnProps {
     readonly step?: number;
     readonly disabled?: boolean;
 }
+export type SliderClientValue = number | readonly [number, number];
+export interface SliderClientOwnProps {
+    readonly value?: SliderClientValue;
+    readonly defaultValue?: SliderClientValue;
+    readonly onValueChange?: (value: SliderClientValue) => void;
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number | null;
+    readonly disabled?: boolean;
+    readonly orientation?: "horizontal" | "vertical";
+    readonly marks?: readonly SliderMark[];
+    readonly thumbLabels?: readonly [string, string];
+    readonly "aria-label"?: string;
+    readonly "aria-labelledby"?: string;
+}
+export interface SliderClientRenderState {
+    readonly disabled: boolean;
+    readonly orientation: "horizontal" | "vertical";
+    readonly value: SliderClientValue;
+}
+export type SliderClientProps<TAs extends ElementType = "div"> = RenderableProps<TAs, SliderClientOwnProps, SliderClientRenderState, HTMLDivElement>;
 export type SliderProps<TAs extends ElementType = "input"> = RenderableProps<TAs, SliderOwnProps, SliderOwnProps, HTMLInputElement>;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/slider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,IAAI,eAAe,CAC1E,GAAG,EACH,cAAc,EACd,cAAc,EACd,gBAAgB,CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IACnC,QAAQ,CAAC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAC1C,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAChD,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;CACnC;AAED,MAAM,MAAM,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAC9E,GAAG,EACH,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,CACf,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,IAAI,eAAe,CAC1E,GAAG,EACH,cAAc,EACd,cAAc,EACd,gBAAgB,CACjB,CAAC"}