@phpsoftbox/react-softbox 0.1.0

package/dist/foundations/typography.css

@@ -0,0 +1,49 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--color-text);
+  background: var(--color-body-bg);
+  min-height: 100vh;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 0 0 var(--spacing-4);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+p {
+  margin: 0 0 var(--spacing-4);
+  color: var(--color-muted);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea,
+select {
+  font-family: inherit;
+}

package/dist/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Options = {
+    gap?: number;
+    align?: 'left' | 'right';
+    placement?: 'auto' | 'down' | 'up';
+    anchorRef?: React.RefObject<HTMLElement | null>;
+};
+type Result = {
+    ref: React.RefObject<HTMLDivElement | null>;
+    style: React.CSSProperties;
+    placement: 'up' | 'down';
+};
+export default function useDropdownPosition(open: boolean, options?: Options): Result;
+export {};

package/dist/hooks/useDropdownPosition.js

@@ -0,0 +1,61 @@
+import React from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export default function useDropdownPosition(open, options = {}) {
+    const { gap = 8, align = 'right', placement: requestedPlacement = 'auto', anchorRef } = options;
+    const ref = React.useRef(null);
+    const [style, setStyle] = React.useState({});
+    const [currentPlacement, setCurrentPlacement] = React.useState('down');
+    const compute = React.useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getBoundingClientRect();
+        const anchorRect = anchorRef?.current?.getBoundingClientRect() ?? rect;
+        const padding = 12;
+        const availableWidth = window.innerWidth - padding * 2;
+        const availableBelow = window.innerHeight - padding - anchorRect.bottom - gap;
+        const availableAbove = anchorRect.top - padding - gap;
+        let offset = 0;
+        let maxWidth;
+        let maxHeight;
+        let nextPlacement = requestedPlacement === 'auto' ? 'down' : requestedPlacement;
+        if (rect.right > window.innerWidth - padding) {
+            offset = window.innerWidth - padding - rect.right;
+        }
+        if (rect.left + offset < padding) {
+            offset = padding - rect.left;
+        }
+        if (rect.width > availableWidth) {
+            maxWidth = availableWidth;
+        }
+        if (requestedPlacement === 'auto') {
+            if (rect.height > availableBelow && availableAbove > availableBelow) {
+                nextPlacement = 'up';
+            }
+        }
+        const availableSpace = nextPlacement === 'up' ? availableAbove : availableBelow;
+        if (availableSpace > 0 && rect.height > availableSpace) {
+            maxHeight = Math.max(140, availableSpace);
+        }
+        setCurrentPlacement(nextPlacement);
+        setStyle({
+            marginLeft: offset ? `${offset}px` : undefined,
+            maxWidth: maxWidth ? `${maxWidth}px` : undefined,
+            maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+            overflowY: maxHeight ? 'auto' : undefined,
+            top: nextPlacement === 'down' ? `calc(100% + ${gap}px)` : 'auto',
+            bottom: nextPlacement === 'up' ? `calc(100% + ${gap}px)` : 'auto',
+            transformOrigin: `${nextPlacement === 'up' ? 'bottom' : 'top'} ${align}`,
+        });
+    }, [gap, align, requestedPlacement, anchorRef]);
+    useIsomorphicLayoutEffect(() => {
+        if (!open) {
+            setStyle({});
+            setCurrentPlacement('down');
+            return;
+        }
+        compute();
+    }, [open, compute]);
+    return { ref, style, placement: currentPlacement };
+}
+//# sourceMappingURL=useDropdownPosition.js.map

package/dist/hooks/useDropdownPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownPosition.js","sourceRoot":"","sources":["../../src/hooks/useDropdownPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,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,mBAAmB,CAAC,IAAa,EAAE,UAAmB,EAAE;IAC9E,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,EAAE,kBAAkB,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAChG,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsB,EAAE,CAAC,CAAC;IAClE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,MAAM,CAAC,CAAC;IAEtF,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,SAAS,EAAE,OAAO,EAAE,qBAAqB,EAAE,IAAI,IAAI,CAAC;QACvE,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,GAAG,OAAO,GAAG,CAAC,CAAC;QACvD,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,MAAM,GAAG,GAAG,CAAC;QAC9E,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,GAAG,OAAO,GAAG,GAAG,CAAC;QACtD,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,IAAI,QAA4B,CAAC;QACjC,IAAI,SAA6B,CAAC;QAClC,IAAI,aAAa,GAAkB,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC;QAE/F,IAAI,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,OAAO,EAAE,CAAC;YAC7C,MAAM,GAAG,MAAM,CAAC,UAAU,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;QACpD,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC;YACjC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QAC/B,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,GAAG,cAAc,EAAE,CAAC;YAChC,QAAQ,GAAG,cAAc,CAAC;QAC5B,CAAC;QAED,IAAI,kBAAkB,KAAK,MAAM,EAAE,CAAC;YAClC,IAAI,IAAI,CAAC,MAAM,GAAG,cAAc,IAAI,cAAc,GAAG,cAAc,EAAE,CAAC;gBACpE,aAAa,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC;QAED,MAAM,cAAc,GAAG,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC;QAChF,IAAI,cAAc,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,cAAc,EAAE,CAAC;YACvD,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;QAC5C,CAAC;QAED,mBAAmB,CAAC,aAAa,CAAC,CAAC;QACnC,QAAQ,CAAC;YACP,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,SAAS;YAC9C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,CAAC,CAAC,CAAC,SAAS;YAChD,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS;YACnD,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YACzC,GAAG,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM;YAChE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM;YACjE,eAAe,EAAE,GAAG,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE;SACzE,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhD,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,QAAQ,CAAC,EAAE,CAAC,CAAC;YACb,mBAAmB,CAAC,MAAM,CAAC,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACrD,CAAC"}

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(query: string): boolean;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,33 @@
+import React from 'react';
+export default function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const media = window.matchMedia(query);
+        const handler = () => setMatches(media.matches);
+        handler();
+        if (media.addEventListener) {
+            media.addEventListener('change', handler);
+        }
+        else {
+            media.addListener(handler);
+        }
+        return () => {
+            if (media.removeEventListener) {
+                media.removeEventListener('change', handler);
+            }
+            else {
+                media.removeListener(handler);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+//# sourceMappingURL=useMediaQuery.js.map

package/dist/hooks/useMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.js","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAa;IACjD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAChD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACvC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEhD,OAAO,EAAE,CAAC;QAEV,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC3B,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;gBAC9B,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+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 FormField } from './components/Input/FormField/FormField';
+export { default as Input } from './components/Input/Input';
+export { default as Textarea } from './components/Input/Textarea/Textarea';
+export { default as Radio } from './components/Input/Radio/Radio';
+export { default as Switch } from './components/Input/Switch/Switch';
+export { default as Select } from './components/Input/Select/Select';
+export { default as Alert } from './components/Alert/Alert';
+export { default as Notifier } from './components/Notifier/Notifier';
+export { default as FloatLabel } from './components/Input/FloatLabel/FloatLabel';
+export { default as Grid } from './components/Grid/Grid';
+export { default as Row } from './components/Flex/Row';
+export { default as Stack } from './components/Flex/Stack';
+export { default as Menu } from './components/Menu/Menu';
+export { default as Dropdown } from './components/Menu/Dropdown';
+export { default as Modal } from './components/Modal/Modal';
+export { default as Drawer } from './components/Drawer/Drawer';
+export { default as Pagination } from './components/Pagination/Pagination';
+export { default as Tabs } from './components/Tabs/Tabs';
+export { default as Progress } from './components/Progress/Progress';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
+export { default as Text } from './components/Typography/Text';
+export { default as Heading } from './components/Typography/Heading';
+export { default as useMediaQuery } from './hooks/useMediaQuery';
+export type { UiVariant } from './types';
+export { applyTheme, setThemeMode, getStoredThemeMode, initTheme } from './theme';
+export type { ThemeMode, ThemeOptions } from './theme';

package/dist/index.js

@@ -0,0 +1,29 @@
+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 FormField } from './components/Input/FormField/FormField';
+export { default as Input } from './components/Input/Input';
+export { default as Textarea } from './components/Input/Textarea/Textarea';
+export { default as Radio } from './components/Input/Radio/Radio';
+export { default as Switch } from './components/Input/Switch/Switch';
+export { default as Select } from './components/Input/Select/Select';
+export { default as Alert } from './components/Alert/Alert';
+export { default as Notifier } from './components/Notifier/Notifier';
+export { default as FloatLabel } from './components/Input/FloatLabel/FloatLabel';
+export { default as Grid } from './components/Grid/Grid';
+export { default as Row } from './components/Flex/Row';
+export { default as Stack } from './components/Flex/Stack';
+export { default as Menu } from './components/Menu/Menu';
+export { default as Dropdown } from './components/Menu/Dropdown';
+export { default as Modal } from './components/Modal/Modal';
+export { default as Drawer } from './components/Drawer/Drawer';
+export { default as Pagination } from './components/Pagination/Pagination';
+export { default as Tabs } from './components/Tabs/Tabs';
+export { default as Progress } from './components/Progress/Progress';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
+export { default as Text } from './components/Typography/Text';
+export { default as Heading } from './components/Typography/Heading';
+export { default as useMediaQuery } from './hooks/useMediaQuery';
+export { applyTheme, setThemeMode, getStoredThemeMode, initTheme } from './theme';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,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,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/dist/theme.d.ts

@@ -0,0 +1,12 @@
+export type ThemeMode = 'light' | 'dark' | 'system' | 'auto';
+export type ThemeOptions = {
+    storageKey?: string;
+    root?: HTMLElement;
+    defaultMode?: ThemeMode;
+    autoStartHour?: number;
+    autoEndHour?: number;
+};
+export declare const applyTheme: (mode: ThemeMode, options?: ThemeOptions) => void;
+export declare const setThemeMode: (mode: ThemeMode, options?: ThemeOptions) => void;
+export declare const getStoredThemeMode: (options?: ThemeOptions) => ThemeMode | null;
+export declare const initTheme: (options?: ThemeOptions) => ThemeMode;

package/dist/theme.js

@@ -0,0 +1,133 @@
+const DEFAULT_STORAGE_KEY = 'psb-theme-mode';
+let cleanup = null;
+let autoTimer = null;
+const clearWatchers = () => {
+    if (cleanup) {
+        cleanup();
+        cleanup = null;
+    }
+    if (autoTimer) {
+        window.clearTimeout(autoTimer);
+        autoTimer = null;
+    }
+};
+const getRoot = (options) => options?.root ?? document.documentElement;
+const resolveSystemTheme = () => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return 'dark';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+const resolveAutoTheme = (options, now = new Date()) => {
+    const start = options?.autoStartHour ?? 7;
+    const end = options?.autoEndHour ?? 19;
+    const hour = now.getHours();
+    if (start === end) {
+        return 'dark';
+    }
+    if (start < end) {
+        return hour >= start && hour < end ? 'light' : 'dark';
+    }
+    return hour >= start || hour < end ? 'light' : 'dark';
+};
+const scheduleAuto = (options) => {
+    const now = new Date();
+    const start = options?.autoStartHour ?? 7;
+    const end = options?.autoEndHour ?? 19;
+    const next = new Date(now);
+    const hour = now.getHours();
+    if (start < end) {
+        if (hour < start) {
+            next.setHours(start, 0, 0, 0);
+        }
+        else if (hour < end) {
+            next.setHours(end, 0, 0, 0);
+        }
+        else {
+            next.setDate(now.getDate() + 1);
+            next.setHours(start, 0, 0, 0);
+        }
+    }
+    else {
+        if (hour < end) {
+            next.setHours(end, 0, 0, 0);
+        }
+        else if (hour < start) {
+            next.setHours(start, 0, 0, 0);
+        }
+        else {
+            next.setDate(now.getDate() + 1);
+            next.setHours(end, 0, 0, 0);
+        }
+    }
+    const delay = Math.max(next.getTime() - now.getTime(), 0) + 1000;
+    autoTimer = window.setTimeout(() => {
+        applyTheme('auto', options);
+    }, delay);
+};
+const setThemeAttrs = (mode, resolved, options) => {
+    const root = getRoot(options);
+    root.setAttribute('data-theme-mode', mode);
+    root.setAttribute('data-theme', resolved);
+};
+export const applyTheme = (mode, options) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    clearWatchers();
+    if (mode === 'system') {
+        const resolved = resolveSystemTheme();
+        setThemeAttrs(mode, resolved, options);
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            const media = window.matchMedia('(prefers-color-scheme: dark)');
+            const handler = () => setThemeAttrs(mode, resolveSystemTheme(), options);
+            if (media.addEventListener) {
+                media.addEventListener('change', handler);
+            }
+            else {
+                media.addListener(handler);
+            }
+            cleanup = () => {
+                if (media.removeEventListener) {
+                    media.removeEventListener('change', handler);
+                }
+                else {
+                    media.removeListener(handler);
+                }
+            };
+        }
+        return;
+    }
+    if (mode === 'auto') {
+        const resolved = resolveAutoTheme(options);
+        setThemeAttrs(mode, resolved, options);
+        scheduleAuto(options);
+        return;
+    }
+    setThemeAttrs(mode, mode, options);
+};
+export const setThemeMode = (mode, options) => {
+    const storageKey = options?.storageKey ?? DEFAULT_STORAGE_KEY;
+    if (typeof window !== 'undefined' && window.localStorage) {
+        window.localStorage.setItem(storageKey, mode);
+    }
+    applyTheme(mode, options);
+};
+export const getStoredThemeMode = (options) => {
+    const storageKey = options?.storageKey ?? DEFAULT_STORAGE_KEY;
+    if (typeof window === 'undefined' || !window.localStorage) {
+        return null;
+    }
+    const saved = window.localStorage.getItem(storageKey);
+    if (saved === 'light' || saved === 'dark' || saved === 'system' || saved === 'auto') {
+        return saved;
+    }
+    return null;
+};
+export const initTheme = (options) => {
+    const saved = getStoredThemeMode(options);
+    const mode = saved ?? options?.defaultMode ?? 'system';
+    applyTheme(mode, options);
+    return mode;
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

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

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type UiVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/docs/README.md

@@ -0,0 +1,40 @@
+# ReactSoftBox · Документация
+
+ReactSoftBox — набор базовых компонентов для админ‑панели. Все стили построены на CSS‑модулях и общих токенах из `foundations/`.
+
+## Структура
+
+- `foundations/` — токены, типографика, layout‑переменные
+- `components/` — UI‑компоненты
+- `docs/` — документация по компонентам
+
+## Принципы
+
+- Все компоненты самодостаточны и не зависят от глобальных CSS.
+- Адаптив — через `Grid`/`Row` и CSS‑модули компонентов.
+- Состояния (hover, focus, disabled) задаются внутри компонента.
+
+## Быстрый старт
+
+```ts
+import '@phpsoftbox/react-softbox/foundations/index.css';
+```
+
+```ts
+import { Button, Card, Menu } from '@phpsoftbox/react-softbox';
+```
+
+## Разделы
+
+- `layout.md` — Grid, Flex, утилиты
+- `navigation.md` — Menu, Dropdown, CollapseButton
+- `forms.md` — Input (Field/Select/FloatLabel), Switch, Radio
+- `overlays.md` — Modal, Drawer
+- `feedback.md` — Badge, Alert, Notifier
+- `card.md` — Card и его секции
+- `typography.md` — Тексты и заголовки
+- `theme.md` — Темы и режимы
+- `pagination.md` — Pagination и управление ссылками
+- `tabs.md` — Tabs (горизонтальные и вертикальные)
+- `progress.md` — Progress и его варианты
+- `breadcrumbs.md` — Breadcrumbs и разделители

package/docs/breadcrumbs.md

@@ -0,0 +1,47 @@
+# Breadcrumbs
+
+`Breadcrumbs` — цепочка навигации с поддержкой активного элемента и кастомного разделителя.
+
+## Базовое использование
+
+```tsx
+<Breadcrumbs
+  items={[
+    { label: 'Главная', href: '/' },
+    { label: 'Проекты', href: '/projects' },
+    { label: 'Project', current: true },
+  ]}
+/>;
+```
+
+## Кастомный компонент ссылок
+
+По умолчанию используется `<a href>`. Можно передать любой компонент через `as`:
+
+```tsx
+import { Link } from '@inertiajs/react';
+
+<Breadcrumbs
+  as={Link}
+  items={[
+    { label: 'Главная', href: '/' },
+    { label: 'Проекты', href: '/projects' },
+    { label: 'ReactSoftBox', current: true },
+  ]}
+/>
+```
+
+## Настройка разделителя
+
+```tsx
+<Breadcrumbs
+  separator="/"
+  items={[
+    { label: 'Команда', href: '/team' },
+    { label: 'Дизайн‑система', href: '/team/ui' },
+    { label: 'ReactSoftBox', current: true },
+  ]}
+/>;
+```
+
+Если `current` явно не указан, активным считается последний элемент.

package/docs/card.md

@@ -0,0 +1,18 @@
+# Card
+
+`Card` — базовый контейнер для секций.
+
+```tsx
+<Card>
+  <Card.Header title="Заголовок" right={<Button appearance="ghost">...</Button>} />
+  <Card.Body>Контент</Card.Body>
+  <Card.Footer>
+    <Button appearance="ghost">Отмена</Button>
+    <Button>Сохранить</Button>
+  </Card.Footer>
+</Card>
+```
+
+`Card.Header` умеет принимать:
+- `title` и `subtitle`
+- `right` для иконок/кнопок

package/docs/feedback.md

@@ -0,0 +1,38 @@
+# Feedback
+
+Все статусные компоненты используют единый набор вариантов: `default`, `primary`, `info`, `success`, `warning`, `danger`.
+
+## Badge
+
+```tsx
+<Badge>Default</Badge>
+<Badge variant="primary">Primary</Badge>
+<Badge variant="info">Info</Badge>
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="danger">Danger</Badge>
+```
+
+## Alert
+
+```tsx
+<Alert title="Info">Синхронизация завершится через 3 минуты.</Alert>
+<Alert variant="success" title="Success">Релиз опубликован успешно.</Alert>
+<Alert variant="warning" title="Warning">Лимит запросов близок к максимуму.</Alert>
+<Alert variant="danger" title="Danger" onClose={() => {}}>
+  Ошибка доступа к сервису хранения.
+</Alert>
+```
+
+## Notifier
+
+```tsx
+<Notifier
+  items={[
+    { id: '1', title: 'Оповещение', message: 'Проверка уведомления', variant: 'info', duration: 3000 },
+  ]}
+  onDismiss={(id) => console.log(id)}
+/>
+```
+
+`duration` включает авто‑dismiss и отображает таймер‑полосу внизу уведомления. Таймер ставится на паузу при наведении и когда вкладка браузера неактивна.