@zelelo/iskra-ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1231 @@
+// src/utils/utils.ts
+var cx = (...classes) => classes.filter(Boolean).join(" ");
+var toCss = (value) => typeof value === "number" ? `${value}px` : value;
+
+// src/components/Accordion/context.ts
+import { createContext } from "react";
+var AccordionContext = createContext(null);
+var AccordionItemContext = createContext(null);
+
+// src/components/Accordion/hooks/useAccordionState.ts
+import { useState } from "react";
+var useAccordionState = ({
+  type,
+  defaultValue = [],
+  value: controlledValue,
+  onValueChange
+}) => {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const openValues = isControlled ? controlledValue : uncontrolledValue;
+  const toggleItem = (itemValue) => {
+    const isCurrentlyOpen = openValues.includes(itemValue);
+    let nextValue;
+    if (type === "single") {
+      nextValue = isCurrentlyOpen ? [] : [itemValue];
+    } else {
+      nextValue = isCurrentlyOpen ? openValues.filter((v) => v !== itemValue) : [...openValues, itemValue];
+    }
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  return { openValues, toggleItem };
+};
+
+// src/components/Accordion/AccordionProvider/AccordionProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var AccordionProvider = ({
+  type = "single",
+  defaultValue,
+  value,
+  onValueChange,
+  disabled,
+  children
+}) => {
+  const { openValues, toggleItem } = useAccordionState({
+    type,
+    defaultValue,
+    value,
+    onValueChange
+  });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openValues, toggleItem, disabled }, children });
+};
+
+// src/components/Accordion/Accordion.module.css
+var Accordion_default = {
+  accordion: "Accordion_accordion",
+  item: "Accordion_item",
+  disabled: "Accordion_disabled",
+  header: "Accordion_header",
+  trigger: "Accordion_trigger",
+  icon: "Accordion_icon",
+  iconOpen: "Accordion_iconOpen",
+  contentWrapper: "Accordion_contentWrapper",
+  contentWrapperOpen: "Accordion_contentWrapperOpen",
+  contentInner: "Accordion_contentInner"
+};
+
+// src/components/Accordion/Accordion.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Accordion = ({
+  type = "single",
+  defaultValue,
+  value,
+  onValueChange,
+  disabled,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx2(
+  AccordionProvider,
+  {
+    type,
+    defaultValue,
+    value,
+    onValueChange,
+    disabled,
+    children: /* @__PURE__ */ jsx2("div", { className: cx(Accordion_default.accordion, className), ...props, children })
+  }
+);
+Accordion.displayName = "Accordion";
+
+// src/components/Accordion/hooks/useAccordionItem.ts
+import { useContext } from "react";
+var useAccordionItem = () => {
+  const context = useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error("useAccordionItem \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D \u0432\u043D\u0435 AccordionItem");
+  }
+  return context;
+};
+
+// src/components/Accordion/components/AccordionContent.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AccordionContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isOpen, baseId } = useAccordionItem();
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      id: `content-${baseId}`,
+      role: "region",
+      "aria-labelledby": `trigger-${baseId}`,
+      className: cx(Accordion_default.contentWrapper, isOpen && Accordion_default.contentWrapperOpen, className),
+      ...props,
+      children: /* @__PURE__ */ jsx3("div", { className: Accordion_default.contentInner, children })
+    }
+  );
+};
+AccordionContent.displayName = "AccordionContent";
+
+// src/components/Accordion/AccordionProvider/AccordionItemProvider.tsx
+import { useId } from "react";
+
+// src/components/Accordion/hooks/useAccordion.ts
+import { useContext as useContext2 } from "react";
+var useAccordion = () => {
+  const context = useContext2(AccordionContext);
+  if (!context) {
+    throw new Error("useAccordion \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D \u0432\u043D\u0435 Accordion");
+  }
+  return context;
+};
+
+// src/components/Accordion/AccordionProvider/AccordionItemProvider.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AccordionItemProvider = ({
+  value,
+  disabled: itemDisabled,
+  children
+}) => {
+  const { openValues, disabled: rootDisabled } = useAccordion();
+  const isOpen = openValues.includes(value);
+  const disabled = rootDisabled || itemDisabled;
+  const baseId = useId();
+  return /* @__PURE__ */ jsx4(AccordionItemContext.Provider, { value: { value, isOpen, baseId, disabled }, children });
+};
+
+// src/components/Accordion/components/AccordionItem.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AccordionItem = ({
+  value,
+  disabled,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx5(AccordionItemProvider, { value, disabled, children: /* @__PURE__ */ jsx5("div", { className: cx(Accordion_default.item, disabled && Accordion_default.disabled, className), ...props, children }) });
+
+// src/components/Accordion/components/AccordionTrigger.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var AccordionTrigger = ({
+  className,
+  children,
+  disabled: triggerDisabled,
+  ...props
+}) => {
+  const { toggleItem } = useAccordion();
+  const { value, isOpen, baseId, disabled } = useAccordionItem();
+  const isDisabled = disabled || triggerDisabled;
+  return /* @__PURE__ */ jsx6("h3", { className: Accordion_default.header, children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      id: `trigger-${baseId}`,
+      "aria-expanded": isOpen,
+      "aria-controls": `content-${baseId}`,
+      disabled: isDisabled,
+      className: cx(Accordion_default.trigger, className),
+      onClick: () => toggleItem(value),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx6(
+          "svg",
+          {
+            className: cx(Accordion_default.icon, isOpen && Accordion_default.iconOpen),
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx6(
+              "path",
+              {
+                d: "M4 6L8 10L12 6",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+AccordionTrigger.displayName = "AccordionTrigger";
+
+// src/components/Alert/Alert.tsx
+import { useState as useState2 } from "react";
+
+// src/components/Alert/Alert.module.css
+var Alert_default = {
+  alert: "Alert_alert",
+  content: "Alert_content",
+  title: "Alert_title",
+  description: "Alert_description",
+  closeButton: "Alert_closeButton",
+  info: "Alert_info",
+  success: "Alert_success",
+  warning: "Alert_warning",
+  error: "Alert_error"
+};
+
+// src/components/Alert/Alert.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var Alert = ({
+  variant = "info",
+  title,
+  closable = false,
+  onClose,
+  children,
+  className,
+  ...props
+}) => {
+  const [visible, setVisible] = useState2(true);
+  if (!visible) {
+    return null;
+  }
+  const handleClose = () => {
+    setVisible(false);
+    onClose?.();
+  };
+  const classes = cx(Alert_default.alert, Alert_default[variant], className);
+  return /* @__PURE__ */ jsxs2("div", { className: classes, role: "alert", ...props, children: [
+    /* @__PURE__ */ jsxs2("div", { className: Alert_default.content, children: [
+      title && /* @__PURE__ */ jsx7("div", { className: Alert_default.title, children: title }),
+      title && /* @__PURE__ */ jsx7("div", { className: Alert_default.description, children })
+    ] }),
+    closable && /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: Alert_default.closeButton,
+        onClick: handleClose,
+        "aria-label": "Close alert",
+        children: "\xD7"
+      }
+    )
+  ] });
+};
+Alert.displayName = "Alert";
+
+// src/components/Badge/Badge.module.css
+var Badge_default = {
+  badge: "Badge_badge",
+  count: "Badge_count",
+  dot: "Badge_dot",
+  blue: "Badge_blue",
+  red: "Badge_red",
+  green: "Badge_green"
+};
+
+// src/components/Badge/Badge.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var formatCount = (count, max) => {
+  if (count > max) {
+    return `${max}+`;
+  }
+  return String(count);
+};
+var Badge = ({
+  color = "blue",
+  max = 999,
+  count,
+  className,
+  ...props
+}) => {
+  const isDot = count === void 0;
+  const classes = cx(Badge_default.badge, isDot ? Badge_default.dot : Badge_default.count, Badge_default[color], className);
+  return /* @__PURE__ */ jsx8("span", { className: classes, ...props, children: isDot ? null : formatCount(count, max) });
+};
+Badge.displayName = "Badge";
+
+// src/components/Button/Button.tsx
+import { forwardRef } from "react";
+
+// src/components/Button/Button.module.css
+var Button_default = {
+  button: "Button_button",
+  primary: "Button_primary",
+  secondary: "Button_secondary",
+  sm: "Button_sm",
+  md: "Button_md",
+  lg: "Button_lg"
+};
+
+// src/components/Button/Button.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Button = forwardRef(
+  ({ variant = "primary", size = "md", type = "button", className, ...props }, ref) => {
+    const classes = cx(Button_default.button, Button_default[variant], Button_default[size], className);
+    return /* @__PURE__ */ jsx9("button", { ref, type, className: classes, ...props });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef2, useEffect, useId as useId2, useImperativeHandle, useRef } from "react";
+
+// src/components/Checkbox/Checkbox.module.css
+var Checkbox_default = {
+  sm: "Checkbox_sm",
+  md: "Checkbox_md",
+  lg: "Checkbox_lg",
+  root: "Checkbox_root",
+  label: "Checkbox_label",
+  input: "Checkbox_input",
+  disabled: "Checkbox_disabled",
+  required: "Checkbox_required",
+  error: "Checkbox_error"
+};
+
+// src/components/Checkbox/Checkbox.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var Checkbox = forwardRef2(
+  ({
+    size = "md",
+    label,
+    indeterminate,
+    error,
+    className,
+    disabled,
+    required,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const innerRef = useRef(null);
+    const autoId = useId2();
+    const checkboxId = id ?? autoId;
+    const hasError = Boolean(error);
+    const messageId = hasError ? `${checkboxId}-message` : void 0;
+    const describeBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || void 0;
+    useImperativeHandle(ref, () => innerRef.current, []);
+    useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = Boolean(indeterminate);
+      }
+    }, [indeterminate]);
+    return /* @__PURE__ */ jsxs3("div", { className: cx(Checkbox_default.root, Checkbox_default[size], disabled && Checkbox_default.disabled, className), children: [
+      /* @__PURE__ */ jsxs3("label", { className: Checkbox_default.label, children: [
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            id: checkboxId,
+            ref: innerRef,
+            type: "checkbox",
+            className: Checkbox_default.input,
+            disabled,
+            required,
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": describeBy,
+            ...props
+          }
+        ),
+        label,
+        required && /* @__PURE__ */ jsx10("span", { className: Checkbox_default.required, "aria-hidden": "true", children: " *" })
+      ] }),
+      hasError && /* @__PURE__ */ jsx10("p", { id: messageId, className: Checkbox_default.error, children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Input/Input.tsx
+import { forwardRef as forwardRef3, useId as useId3 } from "react";
+
+// src/components/Input/Input.module.css
+var Input_default = {
+  sm: "Input_sm",
+  md: "Input_md",
+  lg: "Input_lg",
+  root: "Input_root",
+  label: "Input_label",
+  required: "Input_required",
+  field: "Input_field",
+  disabled: "Input_disabled",
+  invalid: "Input_invalid",
+  input: "Input_input",
+  icon: "Input_icon",
+  message: "Input_message",
+  error: "Input_error"
+};
+
+// src/components/Input/Input.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var Input = forwardRef3(
+  ({
+    size = "md",
+    label,
+    hint,
+    error,
+    startIcon,
+    endIcon,
+    className,
+    id,
+    required,
+    disabled,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const autoId = useId3();
+    const inputId = id ?? autoId;
+    const hasError = Boolean(error);
+    const message = hasError ? error : hint;
+    const messageId = message ? `${inputId}-message` : void 0;
+    const describeBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs4("div", { className: cx(Input_default.root, Input_default[size], className), children: [
+      label && /* @__PURE__ */ jsxs4("label", { htmlFor: inputId, className: Input_default.label, children: [
+        label,
+        " ",
+        required && /* @__PURE__ */ jsx11("span", { className: Input_default.required, "aria-hidden": "true", children: " *" })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: cx(Input_default.field, hasError && Input_default.invalid, disabled && Input_default.disabled), children: [
+        startIcon && /* @__PURE__ */ jsx11("span", { className: Input_default.icon, children: startIcon }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            ref,
+            id: inputId,
+            required,
+            disabled,
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": describeBy,
+            className: Input_default.input,
+            ...props
+          }
+        ),
+        endIcon && /* @__PURE__ */ jsx11("span", { className: Input_default.icon, children: endIcon })
+      ] }),
+      message && /* @__PURE__ */ jsx11("p", { id: messageId, className: cx(Input_default.message, hasError && Input_default.error), children: message })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Modal/Modal.tsx
+import { useEffect as useEffect2, useId as useId4, useRef as useRef2 } from "react";
+
+// src/components/Modal/Modal.module.css
+var Modal_default = {
+  modal: "Modal_modal",
+  "modal-in": "Modal_modal-in",
+  "fade-in": "Modal_fade-in",
+  sm: "Modal_sm",
+  md: "Modal_md",
+  lg: "Modal_lg",
+  content: "Modal_content",
+  header: "Modal_header",
+  title: "Modal_title",
+  close: "Modal_close",
+  body: "Modal_body",
+  footer: "Modal_footer"
+};
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var Modal = ({
+  open,
+  onClose,
+  title,
+  footer,
+  size = "md",
+  width,
+  children
+}) => {
+  const ref = useRef2(null);
+  const titleId = useId4();
+  useEffect2(() => {
+    if (open) {
+      ref.current?.showModal();
+    } else {
+      ref.current?.close();
+    }
+  }, [open]);
+  const close = () => ref.current?.close();
+  return (
+    // Escape у <dialog> уже закрывает модалку с клавиатуры
+    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsx12(
+      "dialog",
+      {
+        ref,
+        className: cx(Modal_default.modal, Modal_default[size]),
+        style: { maxWidth: toCss(width) },
+        "aria-labelledby": title ? titleId : void 0,
+        onClose,
+        onClick: (e) => e.target === e.currentTarget && close(),
+        children: /* @__PURE__ */ jsxs5("div", { className: Modal_default.content, children: [
+          title && /* @__PURE__ */ jsxs5("header", { className: Modal_default.header, children: [
+            /* @__PURE__ */ jsx12("h2", { id: titleId, className: Modal_default.title, children: title }),
+            /* @__PURE__ */ jsx12("button", { type: "button", className: Modal_default.close, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", onClick: close, children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ jsx12("div", { className: Modal_default.body, children }),
+          footer && /* @__PURE__ */ jsx12("footer", { className: Modal_default.footer, children: footer })
+        ] })
+      }
+    )
+  );
+};
+Modal.displayName = "Modal";
+
+// src/components/Radio/Radio.tsx
+import { forwardRef as forwardRef4, useContext as useContext3, useId as useId5 } from "react";
+
+// src/components/RadioGroup/RadioGroupProvider/context.ts
+import { createContext as createContext2 } from "react";
+var RadioGroupContext = createContext2(null);
+
+// src/components/Radio/Radio.module.css
+var Radio_default = {
+  sm: "Radio_sm",
+  md: "Radio_md",
+  lg: "Radio_lg",
+  root: "Radio_root",
+  label: "Radio_label",
+  input: "Radio_input",
+  hasError: "Radio_hasError",
+  disabled: "Radio_disabled",
+  required: "Radio_required",
+  error: "Radio_error"
+};
+
+// src/components/Radio/Radio.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var Radio = forwardRef4(
+  ({
+    size = "md",
+    label,
+    error,
+    className,
+    disabled,
+    required,
+    id,
+    name,
+    value,
+    checked,
+    onChange,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const group = useContext3(RadioGroupContext);
+    const autoId = useId5();
+    const radioId = id ?? autoId;
+    const hasError = Boolean(error);
+    const messageId = hasError ? `${radioId}-message` : void 0;
+    const describeBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || void 0;
+    const inputName = group ? group.name : name;
+    const isChecked = group ? group.value === String(value) : checked;
+    const isDisabled = group?.disabled || disabled;
+    const isRequired = group ? group.required : required;
+    const handleChange = (event) => {
+      onChange?.(event);
+      group?.onChange(event.target.value);
+    };
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: cx(
+          Radio_default.root,
+          Radio_default[size],
+          disabled && Radio_default.disabled,
+          hasError && Radio_default.hasError,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs6("label", { className: Radio_default.label, children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                ref,
+                id: radioId,
+                name: inputName,
+                type: "radio",
+                value,
+                checked: isChecked,
+                onChange: handleChange,
+                className: Radio_default.input,
+                disabled: isDisabled,
+                required: isRequired,
+                "aria-describedby": describeBy,
+                ...props
+              }
+            ),
+            label,
+            required && !group && /* @__PURE__ */ jsx13("span", { className: Radio_default.required, "aria-hidden": "true", children: " *" })
+          ] }),
+          hasError && /* @__PURE__ */ jsx13("p", { id: messageId, className: Radio_default.error, children: error })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+// src/components/RadioGroup/RadioGroup.tsx
+import { useId as useId7 } from "react";
+
+// src/components/RadioGroup/RadioGroupProvider/RadioGroupProvider.tsx
+import { useId as useId6, useState as useState3 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var RadioGroupProvider = ({
+  name,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled,
+  required,
+  children
+}) => {
+  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : uncontrolledValue;
+  const autoId = useId6();
+  const finalName = name ?? `radiogroup-${autoId}`;
+  const handleChange = (newValue) => {
+    if (!isControlled) {
+      setUncontrolledValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx14(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        name: finalName,
+        value: currentValue,
+        onChange: handleChange,
+        disabled,
+        required
+      },
+      children
+    }
+  );
+};
+
+// src/components/RadioGroup/RadioGroup.module.css
+var RadioGroup_default = {
+  root: "RadioGroup_root",
+  disabled: "RadioGroup_disabled",
+  groupLabel: "RadioGroup_groupLabel",
+  required: "RadioGroup_required",
+  options: "RadioGroup_options",
+  error: "RadioGroup_error"
+};
+
+// src/components/RadioGroup/RadioGroup.tsx
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var RadioGroup = ({
+  value,
+  defaultValue,
+  onChange,
+  name,
+  label,
+  error,
+  required,
+  disabled,
+  className,
+  children,
+  ...props
+}) => {
+  const labelId = useId7();
+  const messageId = useId7();
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ jsx15(
+    RadioGroupProvider,
+    {
+      name,
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      required,
+      children: /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: cx(RadioGroup_default.root, disabled && RadioGroup_default.disabled, className),
+          role: "radiogroup",
+          "aria-labelledby": label ? labelId : void 0,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? messageId : void 0,
+          "aria-required": required || void 0,
+          ...props,
+          children: [
+            label && /* @__PURE__ */ jsxs7("div", { id: labelId, className: RadioGroup_default.groupLabel, children: [
+              label,
+              required && /* @__PURE__ */ jsx15("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" })
+            ] }),
+            /* @__PURE__ */ jsx15("div", { className: RadioGroup_default.options, children }),
+            hasError && /* @__PURE__ */ jsx15("p", { id: messageId, className: RadioGroup_default.error, children: error })
+          ]
+        }
+      )
+    }
+  );
+};
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/Skeleton/Skeleton.module.css
+var Skeleton_default = {
+  skeleton: "Skeleton_skeleton",
+  text: "Skeleton_text",
+  rect: "Skeleton_rect",
+  circle: "Skeleton_circle",
+  lines: "Skeleton_lines",
+  withChildren: "Skeleton_withChildren",
+  hidden: "Skeleton_hidden",
+  pulse: "Skeleton_pulse",
+  wave: "Skeleton_wave"
+};
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Skeleton = ({
+  variant = "text",
+  width,
+  height,
+  radius,
+  lines = 1,
+  animation = "pulse",
+  loading = true,
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  if (!loading) {
+    return children;
+  }
+  const baseClasses = cx(Skeleton_default.skeleton, Skeleton_default[variant], Skeleton_default[animation]);
+  const sizeStyle = {
+    width: toCss(width),
+    height: toCss(variant === "circle" ? height ?? width : height),
+    borderRadius: toCss(radius)
+  };
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx16(
+      "span",
+      {
+        className: cx(Skeleton_default.lines, className),
+        style: { width: sizeStyle.width, ...style },
+        "aria-hidden": "true",
+        ...props,
+        children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx16(
+          "span",
+          {
+            className: baseClasses,
+            style: { ...sizeStyle, width: i === lines - 1 ? "70%" : "100%" }
+          },
+          i
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    "span",
+    {
+      className: cx(baseClasses, children != null && Skeleton_default.withChildren, className),
+      style: { ...sizeStyle, ...style },
+      "aria-hidden": "true",
+      ...props,
+      children: children != null && /* @__PURE__ */ jsx16("span", { className: Skeleton_default.hidden, children })
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+
+// src/components/Spinner/constants.ts
+var SPINNER_VARIANTS = {
+  circle: { items: 0 },
+  dots: { items: 3 },
+  spiral: { items: 5 },
+  propagate: { items: 6 }
+};
+
+// src/components/Spinner/Spinner.module.css
+var Spinner_default = {
+  spinner: "Spinner_spinner",
+  sm: "Spinner_sm",
+  md: "Spinner_md",
+  lg: "Spinner_lg",
+  item: "Spinner_item",
+  circle: "Spinner_circle",
+  spin: "Spinner_spin",
+  dots: "Spinner_dots",
+  beat: "Spinner_beat",
+  spiral: "Spinner_spiral",
+  propagate: "Spinner_propagate"
+};
+
+// src/components/Spinner/Spinner.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Spinner = ({
+  variant = "circle",
+  size = "md",
+  label = "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430",
+  color,
+  className,
+  style,
+  ...props
+}) => {
+  const { items } = SPINNER_VARIANTS[variant];
+  return /* @__PURE__ */ jsx17(
+    "span",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cx(Spinner_default.spinner, Spinner_default[variant], Spinner_default[size], className),
+      style: { ...style, ...color && { color } },
+      ...props,
+      children: Array.from({ length: items }, (_, i) => /* @__PURE__ */ jsx17("span", { className: Spinner_default.item, style: { "--i": i } }, i))
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Switch/Switch.tsx
+import { forwardRef as forwardRef5 } from "react";
+
+// src/components/Switch/Switch.module.css
+var Switch_default = {
+  sm: "Switch_sm",
+  md: "Switch_md",
+  lg: "Switch_lg",
+  root: "Switch_root",
+  input: "Switch_input",
+  track: "Switch_track",
+  thumb: "Switch_thumb",
+  disabled: "Switch_disabled"
+};
+
+// src/components/Switch/Switch.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var Switch = forwardRef5(
+  ({ size = "md", label, className, disabled, ...props }, ref) => /* @__PURE__ */ jsxs8("label", { className: cx(Switch_default.root, Switch_default[size], disabled && Switch_default.disabled, className), children: [
+    /* @__PURE__ */ jsx18(
+      "input",
+      {
+        ref,
+        "aria-checked": true,
+        type: "checkbox",
+        role: "switch",
+        disabled,
+        className: Switch_default.input,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx18("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx18("span", { className: Switch_default.thumb }) }),
+    label && /* @__PURE__ */ jsx18("span", { className: Switch_default.label, children: label })
+  ] })
+);
+
+// src/components/Tabs/Tabs.tsx
+import { useId as useId8, useRef as useRef3, useState as useState4 } from "react";
+
+// src/components/Tabs/Tabs.module.css
+var Tabs_default = {
+  tabs: "Tabs_tabs",
+  list: "Tabs_list",
+  tab: "Tabs_tab",
+  panel: "Tabs_panel"
+};
+
+// src/components/Tabs/Tabs.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var Tabs = ({ items, defaultValue, onChange, className }) => {
+  const [active, setActive] = useState4(() => {
+    const isSelectable = items.some((item) => item.value === defaultValue && !item.disabled);
+    return isSelectable ? defaultValue : items.find((item) => !item.disabled)?.value;
+  });
+  const id = useId8();
+  const tabRefs = useRef3([]);
+  const activeIndex = items.findIndex((item) => item.value === active);
+  const select = (value) => {
+    if (value === active) return;
+    setActive(value);
+    onChange?.(value);
+  };
+  const handleKeyDown = (event, index) => {
+    const enabled = items.flatMap((item, i) => item.disabled ? [] : [i]);
+    const position = enabled.indexOf(index);
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+        next = enabled[(position + 1) % enabled.length];
+        break;
+      case "ArrowLeft":
+        next = enabled[(position - 1 + enabled.length) % enabled.length];
+        break;
+      case "Home":
+        next = enabled[0];
+        break;
+      case "End":
+        next = enabled[enabled.length - 1];
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    tabRefs.current[next]?.focus();
+    select(items[next].value);
+  };
+  return /* @__PURE__ */ jsxs9("div", { className: cx(Tabs_default.tabs, className), children: [
+    /* @__PURE__ */ jsx19("div", { role: "tablist", className: Tabs_default.list, children: items.map((item, index) => {
+      const selected = index === activeIndex;
+      return /* @__PURE__ */ jsx19(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[index] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${id}-tab-${index}`,
+          "aria-selected": selected,
+          "aria-controls": `${id}-panel`,
+          tabIndex: selected ? 0 : -1,
+          disabled: item.disabled,
+          className: Tabs_default.tab,
+          onClick: () => select(item.value),
+          onKeyDown: (event) => handleKeyDown(event, index),
+          children: item.label
+        },
+        item.value
+      );
+    }) }),
+    /* @__PURE__ */ jsx19(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${id}-panel`,
+        "aria-labelledby": activeIndex >= 0 ? `${id}-tab-${activeIndex}` : void 0,
+        tabIndex: 0,
+        className: Tabs_default.panel,
+        children: items[activeIndex]?.content
+      }
+    )
+  ] });
+};
+
+// src/components/Toast/Toast.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
+
+// src/components/Toast/Toast.module.css
+var Toast_default = {
+  toast: "Toast_toast",
+  "toast-in": "Toast_toast-in",
+  content: "Toast_content",
+  title: "Toast_title",
+  description: "Toast_description",
+  closeButton: "Toast_closeButton",
+  info: "Toast_info",
+  success: "Toast_success",
+  warning: "Toast_warning",
+  error: "Toast_error"
+};
+
+// src/components/Toast/Toast.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var Toast = ({
+  variant = "info",
+  title,
+  closable = true,
+  duration = 5e3,
+  onClose,
+  children,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}) => {
+  const [visible, setVisible] = useState5(true);
+  const timerRef = useRef4();
+  const remainingRef = useRef4(duration);
+  const startedAtRef = useRef4(0);
+  const onCloseRef = useRef4(onClose);
+  useEffect3(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    onCloseRef.current?.();
+  }, []);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = void 0;
+    }
+  }, []);
+  const startTimer = useCallback(
+    (ms) => {
+      if (ms <= 0) return;
+      startedAtRef.current = Date.now();
+      timerRef.current = setTimeout(handleClose, ms);
+    },
+    [handleClose]
+  );
+  useEffect3(() => {
+    startTimer(remainingRef.current);
+    return clearTimer;
+  }, [startTimer, clearTimer]);
+  const handleMouseEnter = (e) => {
+    clearTimer();
+    remainingRef.current -= Date.now() - startedAtRef.current;
+    onMouseEnter?.(e);
+  };
+  const handleMouseLeave = (e) => {
+    startTimer(remainingRef.current);
+    onMouseLeave?.(e);
+  };
+  if (!visible) {
+    return null;
+  }
+  const classes = cx(Toast_default.toast, Toast_default[variant], className);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: classes,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: Toast_default.content, role: "status", "aria-live": "polite", children: [
+          title && /* @__PURE__ */ jsx20("div", { className: Toast_default.title, children: title }),
+          children && /* @__PURE__ */ jsx20("div", { className: Toast_default.description, children })
+        ] }),
+        closable && /* @__PURE__ */ jsx20(
+          "button",
+          {
+            type: "button",
+            className: Toast_default.closeButton,
+            onClick: handleClose,
+            "aria-label": "Close toast",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+Toast.displayName = "Button";
+
+// src/components/Toast/ToastProvider/ToastProvider.tsx
+import { createContext as createContext3, useCallback as useCallback2, useMemo, useState as useState6 } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/Toast/ToastProvider/ToastContainer.module.css
+var ToastContainer_default = {
+  container: "ToastContainer_container",
+  "top-right": "ToastContainer_top-right",
+  "top-left": "ToastContainer_top-left",
+  "top-center": "ToastContainer_top-center",
+  "bottom-right": "ToastContainer_bottom-right",
+  "bottom-left": "ToastContainer_bottom-left",
+  "bottom-center": "ToastContainer_bottom-center"
+};
+
+// src/components/Toast/ToastProvider/ToastProvider.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var idCounter = 0;
+var nextId = () => `toast-${Date.now()}-${idCounter++}`;
+var ToastContext = createContext3(null);
+var ToastProvider = ({
+  children,
+  position = "top-right"
+}) => {
+  const [toasts, setToasts] = useState6([]);
+  const close = useCallback2((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const show = useCallback2((options) => {
+    const id = nextId();
+    setToasts((prev) => [...prev, { id, ...options }]);
+    return id;
+  }, []);
+  const value = useMemo(() => {
+    return { show, close };
+  }, [show, close]);
+  return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value, children: [
+    children,
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx21("div", { className: cx(ToastContainer_default.container, ToastContainer_default[position]), children: toasts.map(({ id, description, ...rest }) => /* @__PURE__ */ jsx21(Toast, { ...rest, onClose: () => close(id), children: description }, id)) }),
+      document.body
+    )
+  ] });
+};
+
+// src/components/Toast/ToastProvider/hook/useToast.ts
+import { useContext as useContext4 } from "react";
+var useToast = () => {
+  const ctx = useContext4(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D \u0432\u043D\u0435 ToastProvider");
+  }
+  const make = (variant) => (options = {}) => ctx.show({ variant, ...options });
+  return {
+    show: ctx.show,
+    close: ctx.close,
+    info: make("info"),
+    success: make("success"),
+    warning: make("warning"),
+    error: make("error")
+  };
+};
+
+// src/components/Tooltip/Tooltip.tsx
+import { cloneElement, isValidElement, useState as useState7 } from "react";
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useMergeRefs,
+  useRole
+} from "@floating-ui/react";
+
+// src/components/Tooltip/Tooltip.module.css
+var Tooltip_default = {
+  tooltip: "Tooltip_tooltip",
+  fadeIn: "Tooltip_fadeIn",
+  arrow: "Tooltip_arrow"
+};
+
+// src/components/Tooltip/Tooltip.tsx
+import { Fragment, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 200,
+  className,
+  ...props
+}) => {
+  const [open, setOpen] = useState7(false);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    placement: finalPlacement
+  } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(8), flip(), shift({ padding: 8 })]
+  });
+  const hover = useHover(context, { delay: { open: delay, close: 0 } });
+  const focus = useFocus(context);
+  const role = useRole(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, role]);
+  const childRef = isValidElement(children) ? children.props?.ref ?? children.ref : null;
+  const mergedRef = useMergeRefs([refs.setReference, childRef]);
+  const child = isValidElement(children) ? cloneElement(
+    children,
+    getReferenceProps({
+      ...children.props,
+      ref: mergedRef
+    })
+  ) : /* @__PURE__ */ jsx22("span", { ref: refs.setReference, ...getReferenceProps(), children });
+  return /* @__PURE__ */ jsxs12(Fragment, { children: [
+    child,
+    open && /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        "data-placement": finalPlacement,
+        className: cx(Tooltip_default.tooltip, className),
+        ...getFloatingProps(props),
+        children: [
+          content,
+          /* @__PURE__ */ jsx22("div", { className: Tooltip_default.arrow })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  Badge,
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  Radio,
+  RadioGroup,
+  Skeleton,
+  Spinner,
+  Switch,
+  Tabs,
+  Toast,
+  ToastProvider,
+  Tooltip,
+  useToast
+};
+//# sourceMappingURL=index.js.map