@phpsoftbox/react-softbox 0.1.0

package/dist/components/Button/Button.module.css

@@ -0,0 +1,130 @@
+.button {
+  border: 1px solid var(--btn-border, rgba(30, 51, 85, 0.6));
+  cursor: pointer;
+  font-weight: 600;
+  padding: 12px 18px;
+  border-radius: var(--radius-sm);
+  background: var(--btn-bg, rgba(15, 30, 51, 0.9));
+  color: var(--btn-color, var(--color-text));
+  box-shadow: var(--btn-shadow, none);
+  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.3);
+}
+
+.button:hover:not(:disabled) {
+  background: var(--btn-bg-hover, var(--btn-bg));
+  box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
+}
+
+.button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.solid {
+  transform: translateY(0);
+}
+
+.solid:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.outline,
+.ghost {
+  background: transparent;
+  color: var(--btn-accent, var(--color-teal));
+  border-color: var(--btn-accent, var(--color-teal));
+  box-shadow: none;
+  --btn-bg-hover: var(--btn-accent-soft, rgba(20, 201, 214, 0.12));
+  --btn-shadow-hover: none;
+}
+
+.ghost {
+  border-color: transparent;
+}
+
+.outline:hover:not(:disabled),
+.ghost:hover:not(:disabled) {
+  background: var(--btn-accent-soft, rgba(20, 201, 214, 0.12));
+}
+
+.variantDefault {
+  --btn-accent: var(--btn-default-accent, rgba(158, 178, 204, 0.9));
+  --btn-accent-soft: var(--btn-default-soft, rgba(30, 51, 85, 0.35));
+  --btn-bg: linear-gradient(135deg, var(--btn-default-start, #2a3750), var(--btn-default-end, #1b263c));
+  --btn-bg-hover: linear-gradient(135deg, var(--btn-default-start-hover, #31415c), var(--btn-default-end-hover, #212d44));
+  --btn-border: var(--btn-default-border, rgba(30, 51, 85, 0.6));
+  --btn-color: var(--color-on-solid, var(--color-text));
+  --btn-shadow: 0 10px 24px rgba(10, 20, 35, 0.2);
+  --btn-shadow-hover: 0 14px 30px rgba(10, 20, 35, 0.28);
+}
+
+.variantPrimary {
+  --btn-accent: var(--btn-primary-accent, rgba(20, 201, 214, 0.9));
+  --btn-accent-soft: var(--btn-primary-soft, rgba(20, 201, 214, 0.18));
+  --btn-bg: linear-gradient(135deg, var(--btn-primary-start, #14c9d6), var(--btn-primary-end, #1e63e9));
+  --btn-bg-hover: linear-gradient(135deg, var(--btn-primary-start-hover, #18d1de), var(--btn-primary-end-hover, #2a74ff));
+  --btn-border: var(--btn-primary-accent, rgba(20, 201, 214, 0.5));
+  --btn-color: var(--color-on-solid, #06201c);
+  --btn-shadow: 0 12px 30px rgba(20, 201, 214, 0.3);
+  --btn-shadow-hover: 0 16px 36px rgba(20, 201, 214, 0.4);
+}
+
+.variantInfo {
+  --btn-accent: var(--btn-info-accent, rgba(30, 99, 233, 0.9));
+  --btn-accent-soft: var(--btn-info-soft, rgba(30, 99, 233, 0.18));
+  --btn-bg: linear-gradient(135deg, var(--btn-info-start, #4f7bff), var(--btn-info-end, #2e5be6));
+  --btn-bg-hover: linear-gradient(135deg, var(--btn-info-start-hover, #5b86ff), var(--btn-info-end-hover, #3263f0));
+  --btn-border: var(--btn-info-accent, rgba(30, 99, 233, 0.5));
+  --btn-color: var(--color-on-solid, #f0f6ff);
+  --btn-shadow: 0 12px 30px rgba(30, 99, 233, 0.3);
+  --btn-shadow-hover: 0 16px 36px rgba(30, 99, 233, 0.4);
+}
+
+.variantSuccess {
+  --btn-accent: var(--btn-success-accent, rgba(79, 230, 163, 0.9));
+  --btn-accent-soft: var(--btn-success-soft, rgba(79, 230, 163, 0.16));
+  --btn-bg: linear-gradient(135deg, var(--btn-success-start, #35d092), var(--btn-success-end, #1faf75));
+  --btn-bg-hover: linear-gradient(135deg, var(--btn-success-start-hover, #3bd99b), var(--btn-success-end-hover, #21b87d));
+  --btn-border: var(--btn-success-accent, rgba(79, 230, 163, 0.5));
+  --btn-color: var(--color-on-solid, #06201c);
+  --btn-shadow: 0 12px 30px rgba(79, 230, 163, 0.28);
+  --btn-shadow-hover: 0 16px 36px rgba(79, 230, 163, 0.36);
+}
+
+.variantWarning {
+  --btn-accent: var(--btn-warning-accent, rgba(246, 200, 106, 0.95));
+  --btn-accent-soft: var(--btn-warning-soft, rgba(246, 200, 106, 0.2));
+  --btn-bg: linear-gradient(135deg, var(--btn-warning-start, #ffd166), var(--btn-warning-end, #f4a62a));
+  --btn-bg-hover: linear-gradient(135deg, var(--btn-warning-start-hover, #ffd87d), var(--btn-warning-end-hover, #f7b13f));
+  --btn-border: var(--btn-warning-accent, rgba(246, 200, 106, 0.6));
+  --btn-color: var(--color-on-solid, #2b1b00);
+  --btn-shadow: 0 12px 30px rgba(246, 200, 106, 0.28);
+  --btn-shadow-hover: 0 16px 36px rgba(246, 200, 106, 0.36);
+}
+
+.variantDanger {
+  --btn-accent: var(--btn-danger-accent, rgba(255, 107, 107, 0.95));
+  --btn-accent-soft: var(--btn-danger-soft, rgba(255, 107, 107, 0.2));
+  --btn-bg: linear-gradient(135deg, var(--btn-danger-start, #ff8f8f), var(--btn-danger-end, #ff5b5b));
+  --btn-bg-hover: linear-gradient(135deg, var(--btn-danger-start-hover, #ff9a9a), var(--btn-danger-end-hover, #ff6868));
+  --btn-border: var(--btn-danger-accent, rgba(255, 107, 107, 0.6));
+  --btn-color: var(--color-on-solid, #2b0b0b);
+  --btn-shadow: 0 12px 30px rgba(255, 107, 107, 0.28);
+  --btn-shadow-hover: 0 16px 36px rgba(255, 107, 107, 0.36);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    right?: React.ReactNode;
+};
+type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
+type CardComponent = React.FC<CardProps> & {
+    Header: React.FC<CardHeaderProps>;
+    Body: React.FC<CardSectionProps>;
+    Footer: React.FC<CardSectionProps>;
+};
+declare const Card: CardComponent;
+export default Card;

package/dist/components/Card/Card.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './Card.module.css';
+function CardBase({ className, ...props }) {
+    const classes = [styles.card, className].filter(Boolean).join(' ');
+    return _jsx("section", { className: classes, ...props });
+}
+function CardHeader({ title, subtitle, right, className, children, ...props }) {
+    const classes = [styles.header, className].filter(Boolean).join(' ');
+    const left = children ?? (_jsxs(_Fragment, { children: [title ? _jsx("h3", { className: styles.title, children: title }) : null, subtitle ? _jsx("p", { className: styles.subtitle, children: subtitle }) : null] }));
+    return (_jsxs("div", { className: classes, ...props, children: [_jsx("div", { className: styles.headerMain, children: left }), right ? _jsx("div", { className: styles.headerAside, children: right }) : null] }));
+}
+function CardBody({ className, ...props }) {
+    const classes = [styles.body, className].filter(Boolean).join(' ');
+    return _jsx("div", { className: classes, ...props });
+}
+function CardFooter({ className, ...props }) {
+    const classes = [styles.footer, className].filter(Boolean).join(' ');
+    return _jsx("div", { className: classes, ...props });
+}
+const Card = Object.assign(CardBase, {
+    Header: CardHeader,
+    Body: CardBody,
+    Footer: CardFooter,
+});
+export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAkBvC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IAClD,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,OAAO,kBAAS,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAC5F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrE,MAAM,IAAI,GAAG,QAAQ,IAAI,CACvB,8BACG,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EACxD,QAAQ,CAAC,CAAC,CAAC,YAAG,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAK,CAAC,CAAC,CAAC,IAAI,IAC/D,CACJ,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,KAAM,KAAK,aAChC,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,YAAG,IAAI,GAAO,EAC9C,KAAK,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,KAAK,GAAO,CAAC,CAAC,CAAC,IAAI,IAC7D,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IACzD,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,OAAO,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAChD,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IAC3D,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrE,OAAO,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAChD,CAAC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACnC,MAAM,EAAE,UAAU;IAClB,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE,UAAU;CACnB,CAAkB,CAAC;AAEpB,eAAe,IAAI,CAAC"}

package/dist/components/Card/Card.module.css

@@ -0,0 +1,55 @@
+.card {
+  background: var(--surface-card);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-7);
+  box-shadow: var(--shadow-soft);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  flex-wrap: wrap;
+}
+
+.headerMain {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.headerAside {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-left: auto;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-muted);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-3);
+}

package/dist/components/CollapseButton/CollapseButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const CollapseButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    targetId: string;
+    open: boolean;
+    label?: React.ReactNode;
+    variant?: "burger" | "chevron";
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default CollapseButton;

package/dist/components/CollapseButton/CollapseButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styles from './CollapseButton.module.css';
+const CollapseButton = React.forwardRef(({ targetId, open, label, variant = 'chevron', className, children, ...props }, ref) => {
+    const classes = [styles.button, styles[variant], className].filter(Boolean).join(' ');
+    const content = children ?? label;
+    return (_jsxs("button", { ref: ref, type: "button", className: classes, "aria-controls": targetId, "aria-expanded": open, ...props, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true" }), content ? _jsx("span", { className: styles.label, children: content }) : null] }));
+});
+CollapseButton.displayName = 'CollapseButton';
+export default CollapseButton;
+//# sourceMappingURL=CollapseButton.js.map

package/dist/components/CollapseButton/CollapseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseButton.js","sourceRoot":"","sources":["../../../src/components/CollapseButton/CollapseButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAUjD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrF,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtF,MAAM,OAAO,GAAG,QAAQ,IAAI,KAAK,CAAC;IAElC,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,mBACH,QAAQ,mBACR,IAAI,KACf,KAAK,aAET,eAAM,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,GAAG,EAClD,OAAO,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,OAAO,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC1D,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,57 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(30, 99, 233, 0.3);
+  background: var(--surface-control);
+  color: var(--color-text);
+  padding: 8px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.label {
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.icon {
+  width: 18px;
+  height: 2px;
+  background: currentColor;
+  display: inline-block;
+  position: relative;
+}
+
+.burger .icon::before,
+.burger .icon::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 18px;
+  height: 2px;
+  background: currentColor;
+}
+
+.burger .icon::before {
+  top: -6px;
+}
+
+.burger .icon::after {
+  top: 6px;
+}
+
+.chevron .icon {
+  width: 10px;
+  height: 10px;
+  background: transparent;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.chevron[aria-expanded="true"] .icon {
+  transform: rotate(225deg);
+}

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type Props = {
+    open: boolean;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    position?: 'left' | 'right';
+    width?: number | string;
+    closeOnBackdrop?: boolean;
+    id?: string;
+    mode?: 'overlay' | 'inline';
+    className?: string;
+    overlayClassName?: string;
+    showHeader?: boolean;
+    showClose?: boolean;
+    onClose?: () => void;
+};
+export default function Drawer({ open, title, children, footer, position, width, closeOnBackdrop, id, mode, className, overlayClassName, showHeader, showClose, onClose, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createPortal } from 'react-dom';
+import styles from './Drawer.module.css';
+export default function Drawer({ open, title, children, footer, position = 'right', width = 360, closeOnBackdrop = true, id, mode = 'overlay', className, overlayClassName, showHeader = true, showClose = true, onClose, }) {
+    const shouldRenderHeader = showHeader || showClose;
+    React.useEffect(() => {
+        if (!open || mode === 'inline') {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose?.();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, onClose]);
+    if (!open) {
+        return null;
+    }
+    const handleBackdropClick = (event) => {
+        if (!closeOnBackdrop) {
+            return;
+        }
+        if (event.target === event.currentTarget) {
+            onClose?.();
+        }
+    };
+    const inlineStyle = {
+        width: typeof width === 'number' ? `${width}px` : width,
+    };
+    const panelClasses = [styles.panel, styles[position], mode === 'inline' ? styles.inline : null, className]
+        .filter(Boolean)
+        .join(' ');
+    const panel = (_jsxs("aside", { className: panelClasses, style: inlineStyle, id: id, role: mode === 'inline' ? 'complementary' : 'dialog', "aria-modal": mode === 'inline' ? undefined : 'true', "aria-label": mode === 'inline' && title ? title : undefined, children: [shouldRenderHeader ? (_jsxs("header", { className: styles.header, children: [title ? _jsx("h3", { children: title }) : _jsx("span", {}), showClose ? (_jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: "\u00D7" })) : null] })) : null, _jsx("div", { className: styles.body, children: children }), footer ? _jsx("footer", { className: styles.footer, children: footer }) : null] }));
+    if (mode === 'inline') {
+        return panel;
+    }
+    return createPortal(_jsx("div", { className: [styles.overlay, overlayClassName].filter(Boolean).join(' '), onMouseDown: handleBackdropClick, children: panel }), document.body);
+}
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

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

package/dist/components/Drawer/Drawer.module.css

@@ -0,0 +1,104 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay);
+  display: flex;
+  justify-content: flex-end;
+  z-index: 45;
+  animation: overlay-fade-in 0.2s ease;
+}
+
+.panel {
+  height: 100%;
+  background: var(--surface-panel);
+  border-left: 1px solid var(--color-line);
+  box-shadow: var(--shadow-soft);
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-6);
+  gap: var(--spacing-4);
+  animation: drawer-slide-in-right 0.24s ease;
+}
+
+.inline {
+  animation: none;
+  box-shadow: none;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: visible;
+}
+
+.left {
+  margin-right: auto;
+  border-left: none;
+  border-right: 1px solid var(--color-line);
+  animation-name: drawer-slide-in-left;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.close {
+  border: none;
+  background: transparent;
+  color: var(--color-muted);
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.body {
+  flex: 1;
+  color: var(--color-muted);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-3);
+}
+
+@keyframes overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawer-slide-in-right {
+  from {
+    transform: translateX(12%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawer-slide-in-left {
+  from {
+    transform: translateX(-12%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .overlay,
+  .panel {
+    animation: none;
+  }
+}

package/dist/components/Flex/Flex.module.css

@@ -0,0 +1,11 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-gap, 16px);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap, 16px);
+}

package/dist/components/Flex/Row.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    gap?: number | string;
+    align?: React.CSSProperties['alignItems'];
+    justify?: React.CSSProperties['justifyContent'];
+    wrap?: React.CSSProperties['flexWrap'];
+};
+export default function Row({ gap, align, justify, wrap, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Flex/Row.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './Flex.module.css';
+export default function Row({ gap = '16px', align = 'center', justify = 'flex-start', wrap = 'nowrap', className, style, ...props }) {
+    const classes = [styles.row, className].filter(Boolean).join(' ');
+    const inlineStyle = {
+        ...style,
+        alignItems: align,
+        justifyContent: justify,
+        flexWrap: wrap,
+        ['--ui-gap']: typeof gap === 'number' ? `${gap}px` : gap,
+    };
+    return _jsx("div", { className: classes, style: inlineStyle, ...props });
+}
+//# sourceMappingURL=Row.js.map

package/dist/components/Flex/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/components/Flex/Row.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AASvC,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAAE,GAAG,GAAG,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,OAAO,GAAG,YAAY,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS;IACxI,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClE,MAAM,WAAW,GAAwB;QACvC,GAAG,KAAK;QACR,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,OAAO;QACvB,QAAQ,EAAE,IAAI;QACd,CAAC,UAAoB,CAAC,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;KACnE,CAAC;IAEF,OAAO,cAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAM,KAAK,GAAI,CAAC;AACpE,CAAC"}

package/dist/components/Flex/Stack.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    gap?: number | string;
+    align?: React.CSSProperties['alignItems'];
+    justify?: React.CSSProperties['justifyContent'];
+};
+export default function Stack({ gap, align, justify, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Flex/Stack.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './Flex.module.css';
+export default function Stack({ gap = '16px', align = 'stretch', justify = 'flex-start', className, style, ...props }) {
+    const classes = [styles.stack, className].filter(Boolean).join(' ');
+    const inlineStyle = {
+        ...style,
+        alignItems: align,
+        justifyContent: justify,
+        ['--ui-gap']: typeof gap === 'number' ? `${gap}px` : gap,
+    };
+    return _jsx("div", { className: classes, style: inlineStyle, ...props });
+}
+//# sourceMappingURL=Stack.js.map

package/dist/components/Flex/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/components/Flex/Stack.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,GAAG,GAAG,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,OAAO,GAAG,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS;IAC1H,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpE,MAAM,WAAW,GAAwB;QACvC,GAAG,KAAK;QACR,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,OAAO;QACvB,CAAC,UAAoB,CAAC,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;KACnE,CAAC;IAEF,OAAO,cAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAM,KAAK,GAAI,CAAC;AACpE,CAAC"}

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    columns?: number;
+    columnsLg?: number;
+    columnsMd?: number;
+    columnsSm?: number;
+    gap?: number | string;
+    minWidth?: number | string;
+};
+export default function Grid({ columns, columnsLg, columnsMd, columnsSm, gap, minWidth, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Grid/Grid.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './Grid.module.css';
+export default function Grid({ columns = 12, columnsLg, columnsMd, columnsSm, gap = '24px', minWidth = '0', className, style, ...props }) {
+    const classes = [styles.grid, className].filter(Boolean).join(' ');
+    const inlineStyle = {
+        ...style,
+        ['--ui-grid-columns']: String(columns),
+        ['--ui-grid-columns-lg']: columnsLg ? String(columnsLg) : undefined,
+        ['--ui-grid-columns-md']: columnsMd ? String(columnsMd) : undefined,
+        ['--ui-grid-columns-sm']: columnsSm ? String(columnsSm) : undefined,
+        ['--ui-grid-gap']: typeof gap === 'number' ? `${gap}px` : gap,
+        ['--ui-grid-min']: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
+    };
+    return _jsx("div", { className: classes, style: inlineStyle, ...props });
+}
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,OAAO,GAAG,EAAE,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACT,GAAG,GAAG,MAAM,EACZ,QAAQ,GAAG,GAAG,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACF;IACN,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,WAAW,GAAwB;QACvC,GAAG,KAAK;QACR,CAAC,mBAA6B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;QAChD,CAAC,sBAAgC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;QAC7E,CAAC,sBAAgC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;QAC7E,CAAC,sBAAgC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;QAC7E,CAAC,eAAyB,CAAC,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;QACvE,CAAC,eAAyB,CAAC,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,CAAC,CAAC,CAAC,QAAQ;KACvF,CAAC;IAEF,OAAO,cAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAM,KAAK,GAAI,CAAC;AACpE,CAAC"}

package/dist/components/Grid/Grid.module.css

@@ -0,0 +1,32 @@
+.grid {
+  display: grid;
+  gap: var(--ui-grid-gap, 24px);
+  grid-template-columns: repeat(var(--ui-grid-columns, 12), minmax(var(--ui-grid-min, 0), 1fr));
+}
+
+@media (max-width: 1280px) {
+  .grid {
+    grid-template-columns: repeat(
+      var(--ui-grid-columns-lg, var(--ui-grid-columns, 12)),
+      minmax(var(--ui-grid-min, 0), 1fr)
+    );
+  }
+}
+
+@media (max-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(
+      var(--ui-grid-columns-md, var(--ui-grid-columns, 12)),
+      minmax(var(--ui-grid-min, 0), 1fr)
+    );
+  }
+}
+
+@media (max-width: 720px) {
+  .grid {
+    grid-template-columns: repeat(
+      var(--ui-grid-columns-sm, var(--ui-grid-columns-md, var(--ui-grid-columns, 12))),
+      minmax(var(--ui-grid-min, 0), 1fr)
+    );
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    withTime?: boolean;
+};
+export default function DatePicker({ withTime, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input/DatePicker.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import InputField from './Field';
+export default function DatePicker({ withTime = false, ...props }) {
+    return _jsx(InputField, { ...props, type: withTime ? 'datetime-local' : 'date' });
+}
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/Input/DatePicker.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,SAAS,CAAC;AAMjC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,EAAS;IACtE,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,GAAI,CAAC;AAC/E,CAAC"}