@phpsoftbox/react-softbox 0.5.2 → 0.6.0

package/README.md

@@ -16,6 +16,7 @@ import {
   Button,
   Card,
   Checkbox,
+  Collapse,
   CollapseButton,
   Drawer,
   Dropdown,

package/dist/components/Collapse/Collapse.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    open: boolean;
+    duration?: number;
+};
+export default function Collapse({ open, duration, className, style, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styles from './Collapse.module.css';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export default function Collapse({ open, duration = 180, className, style, children, ...props }) {
+    const contentRef = React.useRef(null);
+    const [height, setHeight] = React.useState(open ? 'auto' : 0);
+    useIsomorphicLayoutEffect(() => {
+        const node = contentRef.current;
+        if (!node) {
+            return;
+        }
+        if (open) {
+            const nextHeight = node.scrollHeight;
+            setHeight(nextHeight);
+            return;
+        }
+        if (height === 'auto') {
+            const nextHeight = node.scrollHeight;
+            setHeight(nextHeight);
+            if (typeof window !== 'undefined') {
+                window.requestAnimationFrame(() => setHeight(0));
+            }
+            else {
+                setHeight(0);
+            }
+            return;
+        }
+        setHeight(0);
+    }, [open]);
+    const handleTransitionEnd = (event) => {
+        if (event.propertyName !== 'height') {
+            return;
+        }
+        if (open) {
+            setHeight('auto');
+        }
+    };
+    const resolvedStyle = {
+        ...style,
+        height: typeof height === 'number' ? `${height}px` : height,
+        transitionDuration: `${duration}ms`,
+    };
+    return (_jsx("div", { className: [styles.collapse, className].filter(Boolean).join(' '), style: resolvedStyle, "data-state": open ? 'open' : 'closed', "aria-hidden": !open, onTransitionEnd: handleTransitionEnd, ...props, children: _jsx("div", { ref: contentRef, className: styles.inner, children: children }) }));
+}
+//# sourceMappingURL=Collapse.js.map

package/dist/components/Collapse/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../src/components/Collapse/Collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAO3C,MAAM,yBAAyB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;AAE1G,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAS;IACpG,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/E,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC;YACrC,SAAS,CAAC,UAAU,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QAED,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC;YACrC,SAAS,CAAC,UAAU,CAAC,CAAC;YACtB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;gBAClC,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YACnD,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,CAAC,CAAC,CAAC;YACf,CAAC;YACD,OAAO;QACT,CAAC;QAED,SAAS,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,mBAAmB,GAAG,CAAC,KAA4C,EAAE,EAAE;QAC3E,IAAI,KAAK,CAAC,YAAY,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QACD,IAAI,IAAI,EAAE,CAAC;YACT,SAAS,CAAC,MAAM,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAwB;QACzC,GAAG,KAAK;QACR,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;QAC3D,kBAAkB,EAAE,GAAG,QAAQ,IAAI;KACpC,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACjE,KAAK,EAAE,aAAa,gBACR,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,iBACvB,CAAC,IAAI,EAClB,eAAe,EAAE,mBAAmB,KAChC,KAAK,YAET,cAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,YAC1C,QAAQ,GACL,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Collapse/Collapse.module.css

@@ -0,0 +1,25 @@
+.collapse {
+  --collapse-padding-y: var(--spacing-3);
+  --collapse-padding-x: var(--spacing-4);
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: height var(--collapse-duration, 180ms) ease, opacity var(--collapse-duration, 180ms) ease;
+  will-change: height, opacity;
+}
+
+.collapse[data-state='open'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.inner {
+  display: block;
+  padding: var(--collapse-padding-y) var(--collapse-padding-x);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapse {
+    transition: none;
+  }
+}

package/dist/components/CollapseButton/CollapseButton.module.css

@@ -5,8 +5,8 @@
   border: 1px solid rgba(30, 99, 233, 0.3);
   background: var(--surface-control);
   color: var(--color-text);
-  padding: 8px 12px;
-  border-radius: 999px;
+  padding: var(--spacing-3) calc(var(--spacing-4) + var(--spacing-1) / 2);
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
 

package/dist/components/Input/Input.d.ts

@@ -15,7 +15,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
     layout?: "row" | "column";
     gap?: number | string;
     labelWidth?: number | string;
-    align?: "start" | "center" | "end";
+    align?: "center" | "end" | "start";
     labelAlign?: "right" | "center" | "left";
 }> & {
     Label: React.FC<import("react").LabelHTMLAttributes<HTMLLabelElement>>;
@@ -50,7 +50,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
         layout?: "row" | "column";
         gap?: number | string;
         labelWidth?: number | string;
-        align?: "start" | "center" | "end";
+        align?: "center" | "end" | "start";
         labelAlign?: "right" | "center" | "left";
     }> & {
         Label: React.FC<import("react").LabelHTMLAttributes<HTMLLabelElement>>;

package/dist/components/Input/MaskedInput.d.ts

@@ -4,6 +4,7 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChan
     value?: string;
     onChange?: (value: string) => void;
     placeholderChar?: string;
+    escapeChar?: string;
 };
-export default function MaskedInput({ mask, value, onChange, placeholderChar, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function MaskedInput({ mask, value, onChange, placeholderChar, escapeChar, onPaste, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/MaskedInput.js

@@ -4,14 +4,23 @@ import InputField from './Field';
 const isDigit = (char) => /\d/.test(char);
 const isLetter = (char) => /[a-zA-Z]/.test(char);
 const isAlphaNum = (char) => /[a-zA-Z0-9]/.test(char);
-const stripRaw = (value) => value.replace(/[^a-zA-Z0-9]/g, '');
-const applyMask = (raw, mask, placeholderChar) => {
+const isToken = (char) => char === '9' || char === 'A' || char === '*';
+const applyMask = (raw, mask, placeholderChar, escapeChar = '\\') => {
     let rawIndex = 0;
     let output = '';
     for (let i = 0; i < mask.length; i += 1) {
         const maskChar = mask[i];
+        if (maskChar === escapeChar) {
+            if (i + 1 < mask.length) {
+                output += mask[i + 1];
+                i += 1;
+                continue;
+            }
+            output += maskChar;
+            continue;
+        }
         const rawChar = raw[rawIndex];
-        if (maskChar === '9' || maskChar === 'A' || maskChar === '*') {
+        if (isToken(maskChar)) {
             if (!rawChar) {
                 if (placeholderChar) {
                     output += placeholderChar;
@@ -36,13 +45,24 @@ const applyMask = (raw, mask, placeholderChar) => {
     }
     return output;
 };
-const extractRaw = (masked, mask) => {
+const extractRaw = (masked, mask, escapeChar = '\\') => {
     let raw = '';
     let maskIndex = 0;
     for (let i = 0; i < masked.length && maskIndex < mask.length; i += 1) {
         const maskChar = mask[maskIndex];
         const char = masked[i];
-        if (maskChar === '9' || maskChar === 'A' || maskChar === '*') {
+        if (maskChar === escapeChar) {
+            const literal = maskIndex + 1 < mask.length ? mask[maskIndex + 1] : escapeChar;
+            if (char === literal) {
+                maskIndex += 2;
+            }
+            else {
+                maskIndex += 2;
+                i -= 1;
+            }
+            continue;
+        }
+        if (isToken(maskChar)) {
             const matches = (maskChar === '9' && isDigit(char)) ||
                 (maskChar === 'A' && isLetter(char)) ||
                 (maskChar === '*' && isAlphaNum(char));
@@ -62,21 +82,41 @@ const extractRaw = (masked, mask) => {
     }
     return raw;
 };
-export default function MaskedInput({ mask, value, onChange, placeholderChar, ...props }) {
+export default function MaskedInput({ mask, value, onChange, placeholderChar, escapeChar = '\\', onPaste, ...props }) {
     const isControlled = value !== undefined;
     const [internal, setInternal] = React.useState('');
     const displayValue = React.useMemo(() => {
-        const raw = stripRaw(String(isControlled ? value ?? '' : internal));
-        return applyMask(raw, mask, placeholderChar);
-    }, [value, internal, mask, placeholderChar, isControlled]);
+        const raw = extractRaw(String(isControlled ? value ?? '' : internal), mask, escapeChar);
+        return applyMask(raw, mask, placeholderChar, escapeChar);
+    }, [value, internal, mask, placeholderChar, isControlled, escapeChar]);
     const handleChange = (event) => {
         const rawInput = event.target.value;
-        const raw = extractRaw(rawInput, mask);
+        const raw = extractRaw(rawInput, mask, escapeChar);
+        if (!isControlled) {
+            setInternal(raw);
+        }
+        onChange?.(raw);
+    };
+    const handlePaste = (event) => {
+        onPaste?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        const text = event.clipboardData?.getData('text');
+        if (!text) {
+            return;
+        }
+        const raw = extractRaw(text, mask, escapeChar);
+        console.log(raw);
+        if (!raw) {
+            return;
+        }
+        event.preventDefault();
         if (!isControlled) {
             setInternal(raw);
         }
         onChange?.(raw);
     };
-    return _jsx(InputField, { ...props, value: displayValue, onChange: handleChange });
+    return _jsx(InputField, { ...props, value: displayValue, onChange: handleChange, onPaste: handlePaste });
 }
 //# sourceMappingURL=MaskedInput.js.map

package/dist/components/Input/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaskedInput.js","sourceRoot":"","sources":["../../../src/components/Input/MaskedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MaskedInput.js","sourceRoot":"","sources":["../../../src/components/Input/MaskedInput.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from './components/Button/Button';
 export { default as Badge } from './components/Badge/Badge';
 export { default as Card } from './components/Card/Card';
 export { default as CollapseButton } from './components/CollapseButton/CollapseButton';
+export { default as Collapse } from './components/Collapse/Collapse';
 export { default as FormField } from './components/Input/FormField/FormField';
 export { default as Input } from './components/Input/Input';
 export { default as Textarea } from './components/Input/Textarea/Textarea';

package/dist/index.js

@@ -2,6 +2,7 @@ export { default as Button } from './components/Button/Button';
 export { default as Badge } from './components/Badge/Badge';
 export { default as Card } from './components/Card/Card';
 export { default as CollapseButton } from './components/CollapseButton/CollapseButton';
+export { default as Collapse } from './components/Collapse/Collapse';
 export { default as FormField } from './components/Input/FormField/FormField';
 export { default as Input } from './components/Input/Input';
 export { default as Textarea } from './components/Input/Textarea/Textarea';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAY5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAY5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/docs/README.md

@@ -27,7 +27,7 @@ import { Button, Card, Menu } from '@phpsoftbox/react-softbox';
 
 ## Разделы
 
-- `layout.md` — Grid, Flex, утилиты
+- `layout.md` — Grid, Flex, утилиты, Collapse
 - `navigation.md` — Menu, Dropdown, CollapseButton
 - `forms.md` — Input (Field/Select/FloatLabel), Switch, Radio, Checkbox, FileUploader
 - `table.md` — Table, сортировка, футер

package/docs/forms.md

@@ -177,6 +177,14 @@ const statusOptions = [
 </Input>
 ```
 
+`value` можно передавать как в маске, так и в виде "сырых" символов — компонент сам нормализует.
+
+Если нужно указать литеральный символ маски `9`/`A`/`*`, экранируйте его через `\`:
+
+```tsx
+<Input.MaskedInput mask="+7 (\\9 99) 999-99-99" />
+```
+
 ## Number (money)
 
 ```tsx

package/docs/layout.md

@@ -38,6 +38,24 @@
 - `align`, `justify` — соответствуют flex‑свойствам
 - `wrap` — управление переносом для `Row`
 
+## Collapse
+
+`Collapse` — анимированное сворачивание контента. Обычно используется вместе с `CollapseButton`.
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<CollapseButton targetId="filters-panel" open={open} onClick={() => setOpen((v) => !v)}>
+  Фильтры
+</CollapseButton>
+
+<Collapse id="filters-panel" open={open}>
+  <Card>
+    <Card.Body>Контент фильтров</Card.Body>
+  </Card>
+</Collapse>
+```
+
 ## Утилитарные отступы
 
 Глобальные классы для отступов и gap основаны на `--spacing-1…10`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phpsoftbox/react-softbox",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",