@redis-ui/components 42.0.0 → 42.7.0

package/dist/Slider/Slider.types.d.ts

@@ -0,0 +1,13 @@
+import { SliderComposeProps } from './components/Compose/Compose.types';
+import { SliderMarks } from './components/MarksAndLabels/MarksAndLabels.types';
+import { ChildFree } from '../Helpers';
+export type SliderProps = ChildFree<SliderComposeProps> & {
+    marks?: SliderMarks;
+};
+export type SliderContextType = {
+    value: number[];
+    min: number;
+    max: number;
+    disabled: boolean;
+    setValue: (values: number[]) => void;
+};

package/dist/Slider/components/Compose/Compose.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const index = require("../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
+const Slider_context = require("../../Slider.context.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Compose = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  disabled,
+  min: minProp = 0,
+  max: maxProp,
+  step = 1,
+  ...restProps
+}) => {
+  const [min, max] = minProp > maxProp ? [maxProp, minProp] : [minProp, maxProp];
+  const defValue = React.useMemo(() => [min], [min]);
+  const [value = defValue, setValue] = index.useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange
+  });
+  const contextValue = React.useMemo(() => ({
+    value,
+    setValue,
+    disabled: disabled || false,
+    min,
+    max
+  }), [value, disabled, setValue, min, max]);
+  return jsxRuntime.jsxRuntimeExports.jsx(Slider_context.SliderContextProvider, {
+    value: contextValue,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SliderCompose, {
+      onValueChange: setValue,
+      min,
+      max,
+      step,
+      value,
+      disabled,
+      ...restProps
+    })
+  });
+};
+exports.Compose = Compose;

package/dist/Slider/components/Compose/Compose.d.ts

@@ -0,0 +1,2 @@
+import { SliderComposeProps } from './Compose.types';
+export declare const Compose: ({ value: valueProp, defaultValue, onChange, disabled, min: minProp, max: maxProp, step, ...restProps }: SliderComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Slider/components/Compose/Compose.js

@@ -0,0 +1,45 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useMemo } from "react";
+import { useControllableState } from "../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
+import { SliderContextProvider } from "../../Slider.context.js";
+import { SliderCompose } from "./Compose.style.js";
+const Compose = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  disabled,
+  min: minProp = 0,
+  max: maxProp,
+  step = 1,
+  ...restProps
+}) => {
+  const [min, max] = minProp > maxProp ? [maxProp, minProp] : [minProp, maxProp];
+  const defValue = useMemo(() => [min], [min]);
+  const [value = defValue, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange
+  });
+  const contextValue = useMemo(() => ({
+    value,
+    setValue,
+    disabled: disabled || false,
+    min,
+    max
+  }), [value, disabled, setValue, min, max]);
+  return jsxRuntimeExports.jsx(SliderContextProvider, {
+    value: contextValue,
+    children: jsxRuntimeExports.jsx(SliderCompose, {
+      onValueChange: setValue,
+      min,
+      max,
+      step,
+      value,
+      disabled,
+      ...restProps
+    })
+  });
+};
+export {
+  Compose
+};

package/dist/Slider/components/Compose/Compose.style.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const index = require("../../../node_modules/@radix-ui/react-slider/dist/index.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SliderCompose = _styled__default.default(index.Root).withConfig({
+  displayName: "Composestyle__SliderCompose",
+  componentId: "RedisUI__sc-2l9rtc-0"
+})(["gap:", ";position:relative;display:flex;align-items:center;user-select:none;touch-action:none;width:100%;height:", ";cursor:pointer;&[data-disabled]{cursor:default;}"], () => redisUiStyles.useTheme().components.slider.gap, () => redisUiStyles.useTheme().components.slider.controlsHeight);
+exports.SliderCompose = SliderCompose;

package/dist/Slider/components/Compose/Compose.style.d.ts

@@ -0,0 +1,2 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export declare const SliderCompose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<SliderPrimitive.SliderProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/Slider/components/Compose/Compose.style.js

@@ -0,0 +1,10 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { Root } from "../../../node_modules/@radix-ui/react-slider/dist/index.js";
+const SliderCompose = _styled(Root).withConfig({
+  displayName: "Composestyle__SliderCompose",
+  componentId: "RedisUI__sc-2l9rtc-0"
+})(["gap:", ";position:relative;display:flex;align-items:center;user-select:none;touch-action:none;width:100%;height:", ";cursor:pointer;&[data-disabled]{cursor:default;}"], () => useTheme().components.slider.gap, () => useTheme().components.slider.controlsHeight);
+export {
+  SliderCompose
+};

package/dist/Slider/components/Compose/Compose.types.d.ts

@@ -0,0 +1,12 @@
+import { ComposeElementProps } from '../../../Helpers';
+export type OwnSliderComposeProps = {
+    value?: number[];
+    defaultValue?: number[];
+    onChange?: (index: number[]) => void;
+    disabled?: boolean;
+    min?: number;
+    max: number;
+    step?: number;
+};
+export type RestSliderComposeProps = Omit<ComposeElementProps, 'dir' | 'defaultValue' | 'onChange'>;
+export type SliderComposeProps = OwnSliderComposeProps & RestSliderComposeProps;

package/dist/Slider/components/Label/Compose/Compose.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../node_modules/react/jsx-runtime.cjs");
+const useOffset = require("../../../hooks/useOffset.cjs");
+const Slider_context = require("../../../Slider.context.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Compose = ({
+  value,
+  clickable = true,
+  children,
+  ...restProps
+}) => {
+  const offset = useOffset.useOffset(value);
+  const {
+    setValue,
+    disabled
+  } = Slider_context.useSliderContext();
+  if (offset === void 0) return null;
+  const handleClick = () => {
+    if (clickable && !disabled) {
+      setValue([value]);
+    }
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SliderLabelCompose, {
+    "$offset": offset,
+    "$clickable": clickable,
+    "$disabled": disabled,
+    onClick: handleClick,
+    ...restProps,
+    children
+  });
+};
+exports.Compose = Compose;

package/dist/Slider/components/Label/Compose/Compose.d.ts

@@ -0,0 +1,2 @@
+import { SliderLabelComposeProps } from './Compose.types';
+export declare const Compose: ({ value, clickable, children, ...restProps }: SliderLabelComposeProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Slider/components/Label/Compose/Compose.js

@@ -0,0 +1,33 @@
+import { j as jsxRuntimeExports } from "../../../../node_modules/react/jsx-runtime.js";
+import { useOffset } from "../../../hooks/useOffset.js";
+import { useSliderContext } from "../../../Slider.context.js";
+import { SliderLabelCompose } from "./Compose.style.js";
+const Compose = ({
+  value,
+  clickable = true,
+  children,
+  ...restProps
+}) => {
+  const offset = useOffset(value);
+  const {
+    setValue,
+    disabled
+  } = useSliderContext();
+  if (offset === void 0) return null;
+  const handleClick = () => {
+    if (clickable && !disabled) {
+      setValue([value]);
+    }
+  };
+  return jsxRuntimeExports.jsx(SliderLabelCompose, {
+    "$offset": offset,
+    "$clickable": clickable,
+    "$disabled": disabled,
+    onClick: handleClick,
+    ...restProps,
+    children
+  });
+};
+export {
+  Compose
+};

package/dist/Slider/components/Label/Compose/Compose.style.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SliderLabelCompose = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__SliderLabelCompose",
+  componentId: "RedisUI__sc-gahy3w-0"
+})(["position:absolute;inset-inline-start:", ";inset-block-start:50%;transform:translate(-50%,calc(-100% - ", "));white-space:nowrap;pointer-events:", ";cursor:", ";"], ({
+  $offset
+}) => `${$offset}%`, () => redisUiStyles.useTheme().components.slider.label.offset, ({
+  $clickable,
+  $disabled
+}) => $clickable && !$disabled ? "auto" : "none", ({
+  $clickable,
+  $disabled
+}) => $clickable && !$disabled ? "pointer" : "default");
+exports.SliderLabelCompose = SliderLabelCompose;

package/dist/Slider/components/Label/Compose/Compose.style.d.ts

@@ -0,0 +1,5 @@
+export declare const SliderLabelCompose: import("styled-components").StyledComponent<"div", any, {
+    $offset: number;
+    $clickable?: boolean;
+    $disabled?: boolean;
+}, never>;

package/dist/Slider/components/Label/Compose/Compose.style.js

@@ -0,0 +1,17 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SliderLabelCompose = _styled.div.withConfig({
+  displayName: "Composestyle__SliderLabelCompose",
+  componentId: "RedisUI__sc-gahy3w-0"
+})(["position:absolute;inset-inline-start:", ";inset-block-start:50%;transform:translate(-50%,calc(-100% - ", "));white-space:nowrap;pointer-events:", ";cursor:", ";"], ({
+  $offset
+}) => `${$offset}%`, () => useTheme().components.slider.label.offset, ({
+  $clickable,
+  $disabled
+}) => $clickable && !$disabled ? "auto" : "none", ({
+  $clickable,
+  $disabled
+}) => $clickable && !$disabled ? "pointer" : "default");
+export {
+  SliderLabelCompose
+};

package/dist/Slider/components/Label/Compose/Compose.types.d.ts

@@ -0,0 +1,11 @@
+import { ComposeElementProps } from '../../../../Helpers';
+export type OwnSliderLabelComposeProps = {
+    value: number;
+    /**
+     * When true, enables pointer events on the label and clicking sets the slider value.
+     * @default true
+     */
+    clickable?: boolean;
+};
+export type RestSliderLabelComposeProps = ComposeElementProps;
+export type SliderLabelComposeProps = OwnSliderLabelComposeProps & RestSliderLabelComposeProps;

package/dist/Slider/components/Label/Label.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Compose = require("./Compose/Compose.cjs");
+const Typography = require("../../../Typography/Typography.cjs");
+const Label = Object.assign(({
+  value,
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Label.Compose, {
+  value,
+  ...restProps,
+  children: jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+    size: "M",
+    children
+  })
+}), {
+  Compose: Compose.Compose
+});
+exports.Label = Label;

package/dist/Slider/components/Label/Label.d.ts

@@ -0,0 +1,4 @@
+import { SliderLabelProps } from './Label.types';
+export declare const Label: (({ value, children, ...restProps }: SliderLabelProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ value, clickable, children, ...restProps }: import("./Compose/Compose.types").SliderLabelComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+};

package/dist/Slider/components/Label/Label.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { Compose } from "./Compose/Compose.js";
+import Typography from "../../../Typography/Typography.js";
+const Label = Object.assign(({
+  value,
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(Label.Compose, {
+  value,
+  ...restProps,
+  children: jsxRuntimeExports.jsx(Typography.Body, {
+    size: "M",
+    children
+  })
+}), {
+  Compose
+});
+export {
+  Label
+};

package/dist/Slider/components/Label/Label.types.d.ts

@@ -0,0 +1,4 @@
+import { OwnSliderLabelComposeProps, RestSliderLabelComposeProps } from './Compose/Compose.types';
+export type OwnSliderLabelProps = OwnSliderLabelComposeProps;
+export type RestSliderLabelProps = RestSliderLabelComposeProps;
+export type SliderLabelProps = OwnSliderLabelProps & RestSliderLabelProps;

package/dist/Slider/components/Mark/Compose/Compose.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../node_modules/react/jsx-runtime.cjs");
+const Slider_context = require("../../../Slider.context.cjs");
+const useOffset = require("../../../hooks/useOffset.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Compose = ({
+  value,
+  children,
+  ...restProps
+}) => {
+  const {
+    value: sliderValue,
+    disabled
+  } = Slider_context.useSliderContext();
+  const offset = useOffset.useOffset(value);
+  if (offset === void 0) return null;
+  const isInRange = sliderValue[0] >= value;
+  return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SliderMarkCompose, {
+    "$offset": offset,
+    "data-in-range": String(isInRange),
+    "data-disabled": disabled ? "" : void 0,
+    ...restProps,
+    children
+  });
+};
+exports.Compose = Compose;

package/dist/Slider/components/Mark/Compose/Compose.d.ts

@@ -0,0 +1,2 @@
+import { SliderMarkComposeProps } from './Compose.types';
+export declare const Compose: ({ value, children, ...restProps }: SliderMarkComposeProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Slider/components/Mark/Compose/Compose.js

@@ -0,0 +1,27 @@
+import { j as jsxRuntimeExports } from "../../../../node_modules/react/jsx-runtime.js";
+import { useSliderContext } from "../../../Slider.context.js";
+import { useOffset } from "../../../hooks/useOffset.js";
+import { SliderMarkCompose } from "./Compose.style.js";
+const Compose = ({
+  value,
+  children,
+  ...restProps
+}) => {
+  const {
+    value: sliderValue,
+    disabled
+  } = useSliderContext();
+  const offset = useOffset(value);
+  if (offset === void 0) return null;
+  const isInRange = sliderValue[0] >= value;
+  return jsxRuntimeExports.jsx(SliderMarkCompose, {
+    "$offset": offset,
+    "data-in-range": String(isInRange),
+    "data-disabled": disabled ? "" : void 0,
+    ...restProps,
+    children
+  });
+};
+export {
+  Compose
+};

package/dist/Slider/components/Mark/Compose/Compose.style.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SliderMarkCompose = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__SliderMarkCompose",
+  componentId: "RedisUI__sc-1hq5gw7-0"
+})(["position:absolute;inset-block-start:50%;inset-inline-start:", ";transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;&[data-disabled]{cursor:default;}"], ({
+  $offset
+}) => `${$offset}%`);
+exports.SliderMarkCompose = SliderMarkCompose;

package/dist/Slider/components/Mark/Compose/Compose.style.d.ts

@@ -0,0 +1,3 @@
+export declare const SliderMarkCompose: import("styled-components").StyledComponent<"div", any, {
+    $offset: number;
+}, never>;

package/dist/Slider/components/Mark/Compose/Compose.style.js

@@ -0,0 +1,10 @@
+import _styled from "styled-components";
+const SliderMarkCompose = _styled.div.withConfig({
+  displayName: "Composestyle__SliderMarkCompose",
+  componentId: "RedisUI__sc-1hq5gw7-0"
+})(["position:absolute;inset-block-start:50%;inset-inline-start:", ";transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;&[data-disabled]{cursor:default;}"], ({
+  $offset
+}) => `${$offset}%`);
+export {
+  SliderMarkCompose
+};

package/dist/Slider/components/Mark/Compose/Compose.types.d.ts

@@ -0,0 +1,6 @@
+import { ComposeElementProps } from '../../../../Helpers';
+export type OwnSliderMarkComposeProps = {
+    value: number;
+};
+export type RestSliderMarkComposeProps = ComposeElementProps;
+export type SliderMarkComposeProps = OwnSliderMarkComposeProps & RestSliderMarkComposeProps;

package/dist/Slider/components/Mark/Mark.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Compose = require("./Compose/Compose.cjs");
+const Mark_style = require("./Mark.style.cjs");
+const Mark = Object.assign(({
+  value,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Mark.Compose, {
+  value,
+  ...restProps,
+  children: jsxRuntime.jsxRuntimeExports.jsx(Mark_style.SliderMarkRender, {})
+}), {
+  Compose: Compose.Compose
+});
+exports.Mark = Mark;

package/dist/Slider/components/Mark/Mark.d.ts

@@ -0,0 +1,4 @@
+import { SliderMarkProps } from './Mark.types';
+export declare const Mark: (({ value, ...restProps }: SliderMarkProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ value, children, ...restProps }: import("./Compose/Compose.types").SliderMarkComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+};

package/dist/Slider/components/Mark/Mark.js

@@ -0,0 +1,16 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { Compose } from "./Compose/Compose.js";
+import { SliderMarkRender } from "./Mark.style.js";
+const Mark = Object.assign(({
+  value,
+  ...restProps
+}) => jsxRuntimeExports.jsx(Mark.Compose, {
+  value,
+  ...restProps,
+  children: jsxRuntimeExports.jsx(SliderMarkRender, {})
+}), {
+  Compose
+});
+export {
+  Mark
+};

package/dist/Slider/components/Mark/Mark.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SliderMarkRender = _styled__default.default.div.withConfig({
+  displayName: "Markstyle__SliderMarkRender",
+  componentId: "RedisUI__sc-a1n4ni-0"
+})(["pointer-events:none;width:", ";height:", ";background-color:", ";[data-in-range='true'] &{background-color:", ";}[data-disabled] > &{background-color:", ";}[data-disabled][data-in-range='true'] > &{background-color:", ";}"], () => redisUiStyles.useTheme().components.slider.mark.width, () => redisUiStyles.useTheme().components.slider.mark.height, () => redisUiStyles.useTheme().components.slider.mark.rangeStates.outOfRange.normal.bgColor, () => redisUiStyles.useTheme().components.slider.mark.rangeStates.inRange.normal.bgColor, () => redisUiStyles.useTheme().components.slider.mark.rangeStates.outOfRange.disabled.bgColor, () => redisUiStyles.useTheme().components.slider.mark.rangeStates.inRange.disabled.bgColor);
+exports.SliderMarkRender = SliderMarkRender;

package/dist/Slider/components/Mark/Mark.style.d.ts

@@ -0,0 +1 @@
+export declare const SliderMarkRender: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Slider/components/Mark/Mark.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SliderMarkRender = _styled.div.withConfig({
+  displayName: "Markstyle__SliderMarkRender",
+  componentId: "RedisUI__sc-a1n4ni-0"
+})(["pointer-events:none;width:", ";height:", ";background-color:", ";[data-in-range='true'] &{background-color:", ";}[data-disabled] > &{background-color:", ";}[data-disabled][data-in-range='true'] > &{background-color:", ";}"], () => useTheme().components.slider.mark.width, () => useTheme().components.slider.mark.height, () => useTheme().components.slider.mark.rangeStates.outOfRange.normal.bgColor, () => useTheme().components.slider.mark.rangeStates.inRange.normal.bgColor, () => useTheme().components.slider.mark.rangeStates.outOfRange.disabled.bgColor, () => useTheme().components.slider.mark.rangeStates.inRange.disabled.bgColor);
+export {
+  SliderMarkRender
+};

package/dist/Slider/components/Mark/Mark.types.d.ts

@@ -0,0 +1,5 @@
+import { OwnSliderMarkComposeProps, RestSliderMarkComposeProps } from './Compose/Compose.types';
+import { ChildFree } from '../../../Helpers';
+export type OwnSliderMarkProps = OwnSliderMarkComposeProps;
+export type RestSliderMarkProps = ChildFree<RestSliderMarkComposeProps>;
+export type SliderMarkProps = OwnSliderMarkProps & RestSliderMarkProps;

package/dist/Slider/components/MarksAndLabels/MarksAndLabels.cjs

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const Mark = require("../Mark/Mark.cjs");
+const Label = require("../Label/Label.cjs");
+const Slider_context = require("../../Slider.context.cjs");
+const MarksAndLabels = ({
+  marks,
+  renderMark,
+  renderLabel
+}) => {
+  const {
+    min,
+    max
+  } = Slider_context.useSliderContext();
+  const filteredMarks = marks == null ? void 0 : marks.filter(({
+    value
+  }) => value >= min && value <= max);
+  return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children: filteredMarks == null ? void 0 : filteredMarks.map(({
+      value,
+      mark = true,
+      label
+    }) => jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
+      children: [mark && (renderMark ? jsxRuntime.jsxRuntimeExports.jsx(Mark.Mark.Compose, {
+        value,
+        children: renderMark({
+          value
+        })
+      }) : jsxRuntime.jsxRuntimeExports.jsx(Mark.Mark, {
+        value
+      })), label && (renderLabel ? jsxRuntime.jsxRuntimeExports.jsx(Label.Label.Compose, {
+        value,
+        children: renderLabel({
+          value,
+          label
+        })
+      }) : jsxRuntime.jsxRuntimeExports.jsx(Label.Label, {
+        value,
+        children: label
+      }))]
+    }, value))
+  });
+};
+exports.MarksAndLabels = MarksAndLabels;

package/dist/Slider/components/MarksAndLabels/MarksAndLabels.d.ts

@@ -0,0 +1,2 @@
+import { SliderMarksAndLabelsProps } from './MarksAndLabels.types';
+export declare const MarksAndLabels: ({ marks, renderMark, renderLabel }: SliderMarksAndLabelsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Slider/components/MarksAndLabels/MarksAndLabels.js

@@ -0,0 +1,46 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { Fragment } from "react";
+import { Mark } from "../Mark/Mark.js";
+import { Label } from "../Label/Label.js";
+import { useSliderContext } from "../../Slider.context.js";
+const MarksAndLabels = ({
+  marks,
+  renderMark,
+  renderLabel
+}) => {
+  const {
+    min,
+    max
+  } = useSliderContext();
+  const filteredMarks = marks == null ? void 0 : marks.filter(({
+    value
+  }) => value >= min && value <= max);
+  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+    children: filteredMarks == null ? void 0 : filteredMarks.map(({
+      value,
+      mark = true,
+      label
+    }) => jsxRuntimeExports.jsxs(Fragment, {
+      children: [mark && (renderMark ? jsxRuntimeExports.jsx(Mark.Compose, {
+        value,
+        children: renderMark({
+          value
+        })
+      }) : jsxRuntimeExports.jsx(Mark, {
+        value
+      })), label && (renderLabel ? jsxRuntimeExports.jsx(Label.Compose, {
+        value,
+        children: renderLabel({
+          value,
+          label
+        })
+      }) : jsxRuntimeExports.jsx(Label, {
+        value,
+        children: label
+      }))]
+    }, value))
+  });
+};
+export {
+  MarksAndLabels
+};

package/dist/Slider/components/MarksAndLabels/MarksAndLabels.types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { OwnSliderMarkProps } from '../Mark/Mark.types';
+import { OwnSliderLabelProps } from '../Label/Label.types';
+export type SliderMark = {
+    value: number;
+    mark?: boolean;
+    label?: string;
+};
+export type SliderMarks = SliderMark[];
+export type SliderMarkRenderProps = OwnSliderMarkProps;
+export type SliderLabelRenderProps = OwnSliderLabelProps & {
+    label?: string;
+};
+export type SliderMarksAndLabelsProps = {
+    marks?: SliderMarks;
+    renderMark?: ({ value }: SliderMarkRenderProps) => ReactNode;
+    renderLabel?: ({ value, label }: SliderLabelRenderProps) => ReactNode;
+};

package/dist/Slider/components/Thumb/Compose/Compose.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../node_modules/react/jsx-runtime.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Compose = ({
+  children,
+  ...restProps
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SliderThumbCompose, {
+    ...restProps,
+    children
+  });
+};
+exports.Compose = Compose;