@quen-ui/components 0.0.14 → 1.0.1

package/dist/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from './Slider';
+export type { ISliderProps } from './types';

package/dist/Slider/styles.cjs.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const Text = require("../typography/Text/Text.cjs.js");
+const Tooltip = require("../Tooltip/Tooltip.cjs.js");
+const SliderContainer = styled.div`
+  position: relative;
+  margin: 0.5rem;
+  ${({ disabled }) => disabled && styled.css`
+      pointer-events: none;
+    `};
+`;
+const SliderTrackStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "size"].includes(prop)
+})`
+  position: absolute;
+  background: ${({ theme, disabled }) => disabled ? theme.components.Slider.trackDisabledBackgroundColor : theme.components.Slider.trackBackgroundColor};
+  border-radius: ${({ theme }) => theme.components.Slider.radius};
+  cursor: pointer;
+
+  ${({ isVertical }) => isVertical ? styled.css`
+          width: 6px;
+          height: 100%;
+        ` : styled.css`
+          height: 6px;
+          width: 100%;
+        `}
+`;
+const SliderProgressStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "color", "range", "isRange"].includes(prop)
+})`
+  position: absolute;
+  ${({ theme, isVertical }) => isVertical ? styled.css`
+          width: ${theme.components.Slider.height};
+        ` : styled.css`
+          height: ${theme.components.Slider.height};
+        `};
+  background: ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
+  border-radius: ${({ theme }) => theme.components.Slider.radius};
+  cursor: pointer;
+
+  ${({ isVertical, range, isRange }) => isVertical ? styled.css`
+          height: ${isRange ? range[1] - range[0] : range[1]}%;
+          bottom: ${isRange ? range[0] : 0}%;
+        ` : styled.css`
+          left: ${isRange ? range[0] : 0}%;
+          width: ${isRange ? `${range[1] - range[0]}%` : `${range[1]}%`};
+        `}
+`;
+const SliderThumbStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "color"].includes(prop)
+})`
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  background: white;
+  border: 2px solid
+    ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
+  border-radius: 50%;
+  cursor: grab;
+  transition: transform 0.15s ease;
+
+  &:active {
+    cursor: ${({ disabled }) => disabled ? "not-allowed" : "grabbing"};
+  }
+`;
+const SliderMarkStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "value"].includes(prop)
+})`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+
+  ${({ isVertical, value }) => isVertical ? styled.css`
+          transform: translateX(-50%);
+          bottom: ${value}%;
+          left: 50%;
+        ` : styled.css`
+          top: 50%;
+          transform: translateY(-50%);
+          flex-direction: column;
+          left: ${value}%;
+        `};
+`;
+const SliderDotStyled = styled.div`
+  width: 6px;
+  height: 6px;
+  background: ${({ theme }) => theme.components.Slider.markColor};
+  border-radius: ${({ theme }) => theme.components.Slider.radius};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  &:hover {
+    width: 8px;
+    height: 8px;
+  }
+`;
+const SliderLabelStyled = styled(Text).attrs({ size: "s" }).withConfig({
+  shouldForwardProp: (prop) => !["isVertical"].includes(prop)
+})`
+  user-select: none;
+  position: absolute;
+  ${({ isVertical }) => isVertical ? styled.css`
+          left: calc(50% + 10px);
+          top: 50%;
+          transform: translateY(-50%);
+        ` : styled.css`
+          top: calc(50% + 10px);
+          left: 50%;
+          transform: translateX(-50%);
+        `}
+`;
+const SliderTooltipStyled = styled(Tooltip).withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "value"].includes(prop)
+})`
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+
+  ${({ isVertical, value }) => isVertical ? styled.css`
+          bottom: ${value}%;
+          transform: translate(-25%, 25%);
+        ` : styled.css`
+          left: ${value}%;
+          transform: translate(-50%, -25%);
+        `};
+`;
+const SliderMarksWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical"].includes(prop)
+})`
+  position: absolute;
+  background: transparent;
+  pointer-events: none;
+  ${({ theme, isVertical }) => isVertical ? styled.css`
+          height: 100%;
+          width: ${theme.components.Slider.height};
+        ` : styled.css`
+          width: 100%;
+          height: ${theme.components.Slider.height};
+        `};
+`;
+exports.SliderContainer = SliderContainer;
+exports.SliderDotStyled = SliderDotStyled;
+exports.SliderLabelStyled = SliderLabelStyled;
+exports.SliderMarkStyled = SliderMarkStyled;
+exports.SliderMarksWrapperStyled = SliderMarksWrapperStyled;
+exports.SliderProgressStyled = SliderProgressStyled;
+exports.SliderThumbStyled = SliderThumbStyled;
+exports.SliderTooltipStyled = SliderTooltipStyled;
+exports.SliderTrackStyled = SliderTrackStyled;

package/dist/Slider/styles.d.ts

@@ -0,0 +1,35 @@
+import { ISliderProps } from './types';
+export declare const SliderContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+}>> & string;
+export declare const SliderTrackStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isVertical: boolean;
+    disabled?: boolean;
+}>> & string;
+export declare const SliderProgressStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isVertical: boolean;
+    disabled?: boolean;
+    color: ISliderProps["color"];
+    range: [number, number];
+    isRange?: boolean;
+}>> & string;
+export declare const SliderThumbStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isVertical: boolean;
+    disabled?: boolean;
+    color: ISliderProps["color"];
+}>> & string;
+export declare const SliderMarkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isVertical: boolean;
+    value: number;
+}>> & string;
+export declare const SliderDotStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SliderLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('..').ITextProps, import('..').ITextProps>, never>, {
+    isVertical: boolean;
+}>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
+export declare const SliderTooltipStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').ITooltipProps, {
+    isVertical: boolean;
+    value: number;
+}>> & string & Omit<({ children, text, position, open: controlledOpen, show, zIndex, color, width, className, classNameContent, ...props }: import('..').ITooltipProps) => React.ReactElement, keyof import('react').Component<any, {}, any>>;
+export declare const SliderMarksWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isVertical: boolean;
+}>> & string;

package/dist/Slider/styles.es.js

@@ -0,0 +1,156 @@
+import styled, { css } from "styled-components";
+import Text from "../typography/Text/Text.es.js";
+import Tooltip from "../Tooltip/Tooltip.es.js";
+const SliderContainer = styled.div`
+  position: relative;
+  margin: 0.5rem;
+  ${({ disabled }) => disabled && css`
+      pointer-events: none;
+    `};
+`;
+const SliderTrackStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "size"].includes(prop)
+})`
+  position: absolute;
+  background: ${({ theme, disabled }) => disabled ? theme.components.Slider.trackDisabledBackgroundColor : theme.components.Slider.trackBackgroundColor};
+  border-radius: ${({ theme }) => theme.components.Slider.radius};
+  cursor: pointer;
+
+  ${({ isVertical }) => isVertical ? css`
+          width: 6px;
+          height: 100%;
+        ` : css`
+          height: 6px;
+          width: 100%;
+        `}
+`;
+const SliderProgressStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "color", "range", "isRange"].includes(prop)
+})`
+  position: absolute;
+  ${({ theme, isVertical }) => isVertical ? css`
+          width: ${theme.components.Slider.height};
+        ` : css`
+          height: ${theme.components.Slider.height};
+        `};
+  background: ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
+  border-radius: ${({ theme }) => theme.components.Slider.radius};
+  cursor: pointer;
+
+  ${({ isVertical, range, isRange }) => isVertical ? css`
+          height: ${isRange ? range[1] - range[0] : range[1]}%;
+          bottom: ${isRange ? range[0] : 0}%;
+        ` : css`
+          left: ${isRange ? range[0] : 0}%;
+          width: ${isRange ? `${range[1] - range[0]}%` : `${range[1]}%`};
+        `}
+`;
+const SliderThumbStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "color"].includes(prop)
+})`
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  background: white;
+  border: 2px solid
+    ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
+  border-radius: 50%;
+  cursor: grab;
+  transition: transform 0.15s ease;
+
+  &:active {
+    cursor: ${({ disabled }) => disabled ? "not-allowed" : "grabbing"};
+  }
+`;
+const SliderMarkStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "value"].includes(prop)
+})`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+
+  ${({ isVertical, value }) => isVertical ? css`
+          transform: translateX(-50%);
+          bottom: ${value}%;
+          left: 50%;
+        ` : css`
+          top: 50%;
+          transform: translateY(-50%);
+          flex-direction: column;
+          left: ${value}%;
+        `};
+`;
+const SliderDotStyled = styled.div`
+  width: 6px;
+  height: 6px;
+  background: ${({ theme }) => theme.components.Slider.markColor};
+  border-radius: ${({ theme }) => theme.components.Slider.radius};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  &:hover {
+    width: 8px;
+    height: 8px;
+  }
+`;
+const SliderLabelStyled = styled(Text).attrs({ size: "s" }).withConfig({
+  shouldForwardProp: (prop) => !["isVertical"].includes(prop)
+})`
+  user-select: none;
+  position: absolute;
+  ${({ isVertical }) => isVertical ? css`
+          left: calc(50% + 10px);
+          top: 50%;
+          transform: translateY(-50%);
+        ` : css`
+          top: calc(50% + 10px);
+          left: 50%;
+          transform: translateX(-50%);
+        `}
+`;
+const SliderTooltipStyled = styled(Tooltip).withConfig({
+  shouldForwardProp: (prop) => !["isVertical", "value"].includes(prop)
+})`
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+
+  ${({ isVertical, value }) => isVertical ? css`
+          bottom: ${value}%;
+          transform: translate(-25%, 25%);
+        ` : css`
+          left: ${value}%;
+          transform: translate(-50%, -25%);
+        `};
+`;
+const SliderMarksWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isVertical"].includes(prop)
+})`
+  position: absolute;
+  background: transparent;
+  pointer-events: none;
+  ${({ theme, isVertical }) => isVertical ? css`
+          height: 100%;
+          width: ${theme.components.Slider.height};
+        ` : css`
+          width: 100%;
+          height: ${theme.components.Slider.height};
+        `};
+`;
+export {
+  SliderContainer,
+  SliderDotStyled,
+  SliderLabelStyled,
+  SliderMarkStyled,
+  SliderMarksWrapperStyled,
+  SliderProgressStyled,
+  SliderThumbStyled,
+  SliderTooltipStyled,
+  SliderTrackStyled
+};

package/dist/Slider/types.d.ts

@@ -0,0 +1,53 @@
+import { ITooltipProps } from '../Tooltip';
+import { CSSProperties } from 'react';
+import { IQuenUITheme } from '../../../theme/src';
+export type TSliderSingleValue = number;
+export type TSliderRangeValue = [number, number];
+export type TSliderValue = TSliderSingleValue | TSliderRangeValue;
+export interface TSliderMark {
+    value: number;
+    label?: string;
+    style?: CSSProperties;
+    className?: string;
+}
+export interface ISliderTooltipProps {
+    color?: ITooltipProps["color"];
+    position?: ITooltipProps["position"];
+    zIndex?: ITooltipProps["zIndex"];
+    width?: ITooltipProps["width"];
+    className?: ITooltipProps["className"];
+    classNameContent?: ITooltipProps["classNameContent"];
+    open?: ITooltipProps["open"];
+}
+export interface ISliderProps {
+    /** Current value or range */
+    value?: TSliderValue;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** The moving step includes a snap magnet */
+    step?: number;
+    /** Called when the value changes */
+    onChange?: (value: TSliderValue) => void;
+    /** Show tooltip above thumbs */
+    showTooltip?: boolean;
+    /** Enables range mode */
+    range?: boolean;
+    /** Orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Tags and signatures */
+    marks?: TSliderMark[];
+    /** Allows you to move the entire range */
+    draggableTrack?: boolean;
+    /** */
+    tooltip?: ISliderTooltipProps;
+    /** Additional class for container */
+    className?: string;
+    /** Additional styles */
+    style?: CSSProperties;
+    /** Disabled mode */
+    disabled?: boolean;
+    /** Controls color of track and thumb*/
+    color?: keyof IQuenUITheme["colors"];
+}

package/dist/Spoiler/Spoiler.cjs.js

@@ -0,0 +1,62 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Flex = require("../Flex/Flex.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const styles = require("./styles.cjs.js");
+const Spoiler = ({
+  maxHeight = 100,
+  initiallyOpen = false,
+  children,
+  style,
+  className,
+  hideLabel = "Hide",
+  showLabel = "Show more",
+  transitionDuration = 100,
+  open,
+  onOpenChange
+}) => {
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initiallyOpen);
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const innerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (innerRef.current) {
+      const scrollHeight = innerRef.current.scrollHeight;
+      if (isOpen) {
+        setContentHeight(scrollHeight);
+        setTimeout(() => setContentHeight("auto"), transitionDuration);
+      } else {
+        setContentHeight(scrollHeight);
+        setTimeout(() => setContentHeight(maxHeight), transitionDuration);
+      }
+    }
+  }, [isOpen, maxHeight, children]);
+  const toggle = React.useCallback(() => {
+    const next = !isOpen;
+    if (isControlled) {
+      onOpenChange?.(next);
+    } else {
+      setUncontrolledOpen(next);
+    }
+  }, [isOpen, isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: "xs", style, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styles.SpoilerStyles,
+      {
+        role: "region",
+        "aria-hidden": !isOpen,
+        "aria-expanded": isOpen,
+        maxHeight,
+        isOpen,
+        style: {
+          height: contentHeight === "auto" ? "auto" : `${contentHeight}px`
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, children })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "link", onClick: toggle, children: isOpen ? hideLabel : showLabel })
+  ] });
+};
+module.exports = Spoiler;

package/dist/Spoiler/Spoiler.d.ts

@@ -0,0 +1,3 @@
+import { ISpoilerProps } from './types';
+declare const Spoiler: ({ maxHeight, initiallyOpen, children, style, className, hideLabel, showLabel, transitionDuration, open, onOpenChange }: ISpoilerProps) => import("react/jsx-runtime").JSX.Element;
+export default Spoiler;

package/dist/Spoiler/Spoiler.es.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import Flex from "../Flex/Flex.es.js";
+import Button from "../Button/Button.es.js";
+import { SpoilerStyles } from "./styles.es.js";
+const Spoiler = ({
+  maxHeight = 100,
+  initiallyOpen = false,
+  children,
+  style,
+  className,
+  hideLabel = "Hide",
+  showLabel = "Show more",
+  transitionDuration = 100,
+  open,
+  onOpenChange
+}) => {
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initiallyOpen);
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const [contentHeight, setContentHeight] = useState(0);
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (innerRef.current) {
+      const scrollHeight = innerRef.current.scrollHeight;
+      if (isOpen) {
+        setContentHeight(scrollHeight);
+        setTimeout(() => setContentHeight("auto"), transitionDuration);
+      } else {
+        setContentHeight(scrollHeight);
+        setTimeout(() => setContentHeight(maxHeight), transitionDuration);
+      }
+    }
+  }, [isOpen, maxHeight, children]);
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    if (isControlled) {
+      onOpenChange?.(next);
+    } else {
+      setUncontrolledOpen(next);
+    }
+  }, [isOpen, isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "xs", style, className, children: [
+    /* @__PURE__ */ jsx(
+      SpoilerStyles,
+      {
+        role: "region",
+        "aria-hidden": !isOpen,
+        "aria-expanded": isOpen,
+        maxHeight,
+        isOpen,
+        style: {
+          height: contentHeight === "auto" ? "auto" : `${contentHeight}px`
+        },
+        children: /* @__PURE__ */ jsx("div", { ref: innerRef, children })
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { view: "link", onClick: toggle, children: isOpen ? hideLabel : showLabel })
+  ] });
+};
+export {
+  Spoiler as default
+};

package/dist/Spoiler/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Spoiler } from './Spoiler';
+export type { ISpoilerProps } from './types';

package/dist/Spoiler/styles.cjs.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const SpoilerStyles = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isOpen", "maxHeight"].includes(props)
+}).attrs({ className: "quen-ui__spoiler__content" })`
+  overflow: hidden;
+  transition: height 0.3s ease;
+  position: relative;
+
+  ${({ isOpen }) => !isOpen && styled.css`
+      mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
+    `}
+`;
+exports.SpoilerStyles = SpoilerStyles;

package/dist/Spoiler/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const SpoilerStyles: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, {
+    isOpen: boolean;
+    maxHeight: number;
+}>> & string;

package/dist/Spoiler/styles.es.js

@@ -0,0 +1,15 @@
+import styled, { css } from "styled-components";
+const SpoilerStyles = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isOpen", "maxHeight"].includes(props)
+}).attrs({ className: "quen-ui__spoiler__content" })`
+  overflow: hidden;
+  transition: height 0.3s ease;
+  position: relative;
+
+  ${({ isOpen }) => !isOpen && css`
+      mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
+    `}
+`;
+export {
+  SpoilerStyles
+};

package/dist/Spoiler/types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface ISpoilerProps {
+    /** Maximum height when closed */
+    maxHeight?: number;
+    /** Initial state - open or closed */
+    initiallyOpen?: boolean;
+    /** Controlled state */
+    open?: boolean;
+    /** Callback on state change */
+    onOpenChange?: (open: boolean) => void;
+    /** Button text of show */
+    showLabel?: string;
+    /** Button text of hide */
+    hideLabel?: string;
+    /** Spoiler content */
+    children: ReactNode;
+    /** Additional classname */
+    className?: string;
+    /** Additional style */
+    style?: CSSProperties;
+    /** Spoiler reveal transition duration in ms */
+    transitionDuration?: number;
+}

package/dist/Switch/Switch.cjs.js

@@ -1,5 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const hooks = require("@quen-ui/hooks");
 const styles = require("./styles.cjs.js");
 const Text = require("../typography/Text/Text.cjs.js");
 const Switch = ({
@@ -13,13 +15,27 @@ const Switch = ({
   onClick,
   disabled,
   style,
+  thumbIcon,
+  id,
   ...props
 }) => {
+  const refInput = React.useRef(null);
+  const [checked, setChecked] = hooks.useControllableState({
+    value,
+    defaultValue: defaultChecked
+  });
+  React.useEffect(() => {
+    setChecked(value ?? false);
+  }, [value]);
   const handleChange = (e) => {
-    onChange == null ? void 0 : onChange(e.target.checked, e);
+    onChange?.(e.target.checked, e);
   };
   const handleClick = (e) => {
-    onClick == null ? void 0 : onClick(e.target.checked, e);
+    onClick?.(e.target.checked, e);
+    setChecked(e.target.checked);
+  };
+  const handleClickThumbIcon = () => {
+    refInput.current?.click();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.SwitchWrapperStyled,
@@ -29,11 +45,13 @@ const Switch = ({
       style,
       ...props,
       children: [
-        label && labelPosition === "after" && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, as: "label", children: label }),
+        label && labelPosition === "after" && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, as: "label", htmlForId: id, children: label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           styles.SwitchStyled,
           {
-            "aria-checked": value,
+            ref: refInput,
+            id,
+            "aria-checked": checked,
             "aria-disabled": disabled,
             role: "switch",
             type: "checkbox",
@@ -41,8 +59,16 @@ const Switch = ({
             disabled,
             onClick: handleClick,
             onChange: handleChange,
-            defaultChecked,
-            checked: value
+            checked
+          }
+        ),
+        thumbIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          styles.SwitchThumbWrapper,
+          {
+            onClick: handleClickThumbIcon,
+            size,
+            checked,
+            children: thumbIcon
           }
         ),
         label && labelPosition === "before" && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, as: "label", children: label })