@phpsoftbox/react-softbox 0.5.3 → 0.6.1

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/foundations/typography.css

@@ -10,6 +10,7 @@ html,
 body {
   margin: 0;
   padding: 0;
+  min-width: 320px;
 }
 
 body {

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/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.3",
+  "version": "0.6.1",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",