@sybilion/uilib 1.0.20

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.js

@@ -0,0 +1,35 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useCallback, useEffect } from 'react';
+import { useIsTouchDevice } from '../../../hooks/useIsTouchDevice.js';
+import S from './InteractionOverlay.styl.js';
+
+function InteractionOverlay({ className, children, }) {
+    const isTouchDevice = useIsTouchDevice();
+    const [isVisible, setIsVisible] = useState(true);
+    const handleClick = useCallback(() => {
+        setIsVisible(false);
+    }, []);
+    useEffect(() => {
+        if (isTouchDevice) {
+            setIsVisible(true);
+        }
+    }, [isTouchDevice]);
+    useEffect(() => {
+        if (!isTouchDevice)
+            return;
+        const handleScroll = () => {
+            setIsVisible(true);
+        };
+        document.addEventListener('scroll', handleScroll, { capture: true });
+        return () => {
+            document.removeEventListener('scroll', handleScroll, { capture: true });
+        };
+    }, [isTouchDevice]);
+    if (!isTouchDevice) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx("div", { className: cn(S.root, !isVisible && S.hidden, className), onClick: handleClick, children: children }));
+}
+
+export { InteractionOverlay };

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".InteractionOverlay_root__9FV58{inset:0;opacity:.7;pointer-events:auto;position:relative;transition:opacity .2s ease-out}.InteractionOverlay_root__9FV58:after{content:\"\";height:100%;inset:0;position:absolute;touch-action:manipulation;width:100%;z-index:4}.InteractionOverlay_root__9FV58.InteractionOverlay_hidden__NRlgG{opacity:1;pointer-events:none}";
+var S = {"root":"InteractionOverlay_root__9FV58","hidden":"InteractionOverlay_hidden__NRlgG"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/InteractiveContent/InteractiveContent.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { applyFormattingInline, applyFormatting } from '../Chat/ChatMessage/AgentMessageContent.helpers.js';
+import S from './InteractiveContent.styl.js';
+
+function InteractiveContent({ text, variant = 'full', }) {
+    const parts = variant === 'inline' ? applyFormattingInline(text) : applyFormatting(text);
+    return jsx("span", { className: S.root, children: parts });
+}
+
+export { InteractiveContent };

package/dist/esm/components/ui/InteractiveContent/InteractiveContent.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".InteractiveContent_root__FHnlY strong{font-weight:600}";
+var S = {"root":"InteractiveContent_root__FHnlY"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Label/Label.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import S from './Label.styl.js';
+
+function Label({ className, ...props }) {
+    return (jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn(S.root, className), ...props }));
+}
+
+export { Label };

package/dist/esm/components/ui/Label/Label.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Label_root__G9VCj{align-items:center;display:flex;font-size:14px;font-weight:500;gap:8px;line-height:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.group[data-disabled=true] .Label_root__G9VCj{opacity:.5;pointer-events:none}.Label_root__G9VCj:has(+:disabled){cursor:not-allowed;opacity:.5}";
+var S = {"root":"Label_root__G9VCj"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/LabelWithId/AltKeyProvider.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import useEvent from '../../../hooks/useEvent.js';
+
+function AltKeyProvider({ isDebug }) {
+    useEvent({
+        isActive: isDebug,
+        event: ['keydown'],
+        callback: (e) => {
+            if (!(e instanceof KeyboardEvent) || e.key !== 'Alt')
+                return;
+            document.body.classList.toggle('alt');
+        },
+    });
+    useEffect(() => {
+        if (!isDebug) {
+            document.body.classList.remove('alt');
+        }
+    }, [isDebug]);
+    return null;
+}
+
+export { AltKeyProvider };

package/dist/esm/components/ui/LabelWithId/LabelWithId.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './LabelWithId.styl.js';
+
+function LabelWithId({ id, label, className }) {
+    return (jsxs("span", { "data-slot": "label-with-id", className: cn(S.root, className), children: [String(id) !== '-1' && jsx("div", { className: S.id, children: id }), " ", label] }));
+}
+
+export { LabelWithId };

package/dist/esm/components/ui/LabelWithId/LabelWithId.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".LabelWithId_root__czAKK{display:inline-block}.LabelWithId_root__czAKK .LabelWithId_id__RDTFH{align-items:center;background-color:var(--muted);border-radius:var(--p-2);display:none;font-size:80%;margin-right:var(--p-1);padding:0 4px}.alt .LabelWithId_root__czAKK .LabelWithId_id__RDTFH{display:inline-flex}";
+var S = {"root":"LabelWithId_root__czAKK","id":"LabelWithId_id__RDTFH"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/LabeledInput/LabeledInput.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { CheckIcon } from '@phosphor-icons/react';
+import S from './LabeledInput.styl.js';
+
+const LabeledInput = ({ label, id, type, name, value, onChange, placeholder = '', size = 'md', showCheckmark = false, disabled = false, }) => {
+    return (jsxs("div", { className: cn(S.root, S[`size-${size}`]), children: [jsx(Label, { htmlFor: id, className: S.label, children: label }), jsxs("div", { className: S.inputWrapper, children: [jsx(Input, { className: S.input, id: id, type: type, size: size, name: name, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled }), showCheckmark && jsx(CheckIcon, { className: S.checkmark, weight: "bold" })] })] }));
+};
+
+export { LabeledInput };

package/dist/esm/components/ui/LabeledInput/LabeledInput.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".LabeledInput_root__JjEeK{position:relative}.LabeledInput_label__sOppZ{margin-bottom:0;padding-bottom:var(--p-1)}.LabeledInput_inputWrapper__jE-Mm{position:relative}.LabeledInput_input__-i7RR{padding-right:32px;width:100%}.LabeledInput_size-sm__5OQ-O .LabeledInput_input__-i7RR{font-size:var(--text-xs);height:32px}.LabeledInput_size-md__xltGn .LabeledInput_input__-i7RR{font-size:var(--text-sm);height:40px}.LabeledInput_size-lg__bvqnm .LabeledInput_input__-i7RR{font-size:var(--text-base);height:48px}.LabeledInput_checkmark__PWfsE{color:#22c55e;height:20px;pointer-events:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px}";
+var S = {"root":"LabeledInput_root__JjEeK","label":"LabeledInput_label__sOppZ","inputWrapper":"LabeledInput_inputWrapper__jE-Mm","input":"LabeledInput_input__-i7RR","size-sm":"LabeledInput_size-sm__5OQ-O","size-md":"LabeledInput_size-md__xltGn","size-lg":"LabeledInput_size-lg__bvqnm","checkmark":"LabeledInput_checkmark__PWfsE"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/LegacyPlatformLink/LegacyPlatformLink.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import S from './LegacyPlatformLink.styl.js';
+
+function LegacyPlatformLink({ redirectPath, children, className, ...props }) {
+    const apiDomain = 'https://api.sybilion.com';
+    const legacyUrl = `${apiDomain}${redirectPath}`;
+    return (jsx("a", { href: legacyUrl, className: className || S.link, ...props, children: children }));
+}
+
+export { LegacyPlatformLink };

package/dist/esm/components/ui/LegacyPlatformLink/LegacyPlatformLink.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.LegacyPlatformLink_link__Ul3uT{color:var(--foreground);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}.LegacyPlatformLink_link__Ul3uT:hover{color:var(--sb-link-color-hover)}";
+var S = {"link":"LegacyPlatformLink_link__Ul3uT"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Logo/Logo.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './Logo.styl.js';
+
+function Logo({ showText = true, size = 'md', className, ...props }) {
+    return (jsxs("div", { className: cn(S.root, S[size], className), ...props, children: [jsx("img", { src: "/logo.svg", alt: "Sybilion", className: S.icon }), showText && jsx("span", { className: S.text, children: "Sybilion" })] }));
+}
+
+export { Logo };

package/dist/esm/components/ui/Logo/Logo.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Logo_root__-IFVw{align-items:center;color:var(--color-foreground);display:flex;gap:8px}.Logo_icon__cE1BI{height:24px;width:auto}.Logo_text__YpU3U{font-family:var(--font-family-heading);line-height:48px}.Logo_sm__p25D- .Logo_icon__cE1BI{height:18px}.Logo_sm__p25D- .Logo_text__YpU3U{font-size:var(--text-lg);line-height:36px}.Logo_md__1Y9mG .Logo_icon__cE1BI{height:24px}.Logo_md__1Y9mG .Logo_text__YpU3U{font-size:var(--text-2xl);line-height:48px}.Logo_lg__V9Yy2 .Logo_icon__cE1BI{height:32px}.Logo_lg__V9Yy2 .Logo_text__YpU3U{font-size:var(--text-3xl);line-height:56px}";
+var S = {"root":"Logo_root__-IFVw","icon":"Logo_icon__cE1BI","text":"Logo_text__YpU3U","sm":"Logo_sm__p25D-","md":"Logo_md__1Y9mG","lg":"Logo_lg__V9Yy2"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/MobileAdaptiveSelector/MobileAdaptiveSelector.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useCallback } from 'react';
+import { useIsMobile } from '../../../hooks/useIsMobile.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/Select.js';
+import { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup.js';
+import S from './MobileAdaptiveSelector.styl.js';
+
+function MobileAdaptiveSelector({ value, onChange, items, placeholder = 'Select option', disabled = false, className, size = 'md', variant = 'default', darker = false, isDropdown = useIsMobile() || items.length > 4, ...props }) {
+    const handleToggleGroupChange = useCallback((newValue) => {
+        if (newValue) {
+            onChange(newValue);
+        }
+    }, [onChange]);
+    const handleSelectChange = useCallback((newValue) => {
+        onChange(newValue);
+    }, [onChange]);
+    const renderItem = (item) => (jsxs(Fragment, { children: [item.icon && (jsx("img", { src: item.icon, alt: item.label, className: S.selectItemIcon })), item.label] }));
+    const hasSingleItem = items.length === 1;
+    return (jsx("div", { className: cn(S.root, className), ...props, children: isDropdown ? (jsxs(Select, { value: String(value), onValueChange: handleSelectChange, disabled: disabled, children: [jsx(SelectTrigger, { className: cn(S.selectTrigger, hasSingleItem && S.disabledSelect), size: size, variant: variant, "aria-label": placeholder, "data-state": isDropdown ? 'open' : 'closed', disabled: disabled, darker: darker, hideChevron: hasSingleItem, children: jsx(SelectValue, { placeholder: placeholder }) }), jsx(SelectContent, { className: S.selectContent, children: items.map(item => (jsx(SelectItem, { value: String(item.value), selected: item.value === value, className: S.selectItem, children: renderItem(item) }, item.value))) })] })) : (jsx(ToggleGroup, { type: "single", size: size, value: String(value), onValueChange: handleToggleGroupChange, variant: "outline", className: S.toggleGroupDesktop, disabled: disabled, children: items.map(item => (jsx(ToggleGroupItem, { value: String(item.value), disabled: disabled, title: item.value.toString(), children: renderItem(item) }, item.value))) })) }));
+}
+
+export { MobileAdaptiveSelector };

package/dist/esm/components/ui/MobileAdaptiveSelector/MobileAdaptiveSelector.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.MobileAdaptiveSelector_root__6523B{display:flex;position:relative}.MobileAdaptiveSelector_selectTrigger__-dIyV{max-width:100%}.MobileAdaptiveSelector_selectTrigger__-dIyV.MobileAdaptiveSelector_disabledSelect__2iBys{pointer-events:none}.MobileAdaptiveSelector_selectContent__uut6B{z-index:50}.MobileAdaptiveSelector_selectItem__SoBew{cursor:pointer}.MobileAdaptiveSelector_selectItem__SoBew>span:first-child{align-items:center;display:flex;gap:var(--p-2)}.MobileAdaptiveSelector_selectItemIcon__BNs-Z{height:20px;-o-object-fit:cover;object-fit:cover;width:20px}.MobileAdaptiveSelector_toggleGroupDesktop__2gBZg{display:flex;flex-wrap:wrap}";
+var S = {"root":"MobileAdaptiveSelector_root__6523B","selectTrigger":"MobileAdaptiveSelector_selectTrigger__-dIyV","disabledSelect":"MobileAdaptiveSelector_disabledSelect__2iBys","selectContent":"MobileAdaptiveSelector_selectContent__uut6B","selectItem":"MobileAdaptiveSelector_selectItem__SoBew","selectItemIcon":"MobileAdaptiveSelector_selectItemIcon__BNs-Z","toggleGroupDesktop":"MobileAdaptiveSelector_toggleGroupDesktop__2gBZg"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/NumberControl/NumberControl.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { MinusIcon, PlusIcon } from '@phosphor-icons/react';
+import { Button } from '../Button/Button.js';
+import S from './NumberControl.styl.js';
+
+function NumberControl({ className, value = 1, onChange, min, max, step = 0.1, ...props }) {
+    const round = (v) => (v ? Number(v.toFixed(2)) : 0);
+    const handleMinus = () => {
+        const newValue = round(value - step);
+        if (min === undefined || newValue >= min) {
+            onChange(newValue);
+        }
+    };
+    const handlePlus = () => {
+        const newValue = round(value + step);
+        if (max === undefined || newValue <= max) {
+            onChange(newValue);
+        }
+    };
+    const isMinDisabled = min !== undefined && value <= min;
+    const isMaxDisabled = max !== undefined && value >= max;
+    return (jsxs("div", { className: cn(S.root, className), ...props, children: [jsx(Button, { variant: "ghost", size: "sm", onClick: handleMinus, disabled: isMinDisabled, children: jsx(MinusIcon, { size: 16 }) }), jsx("span", { className: S.value, children: value }), jsx(Button, { variant: "ghost", size: "sm", onClick: handlePlus, disabled: isMaxDisabled, children: jsx(PlusIcon, { size: 16 }) })] }));
+}
+
+export { NumberControl };

package/dist/esm/components/ui/NumberControl/NumberControl.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".NumberControl_root__L33Io{align-items:center;display:inline-flex;gap:8px}.NumberControl_value__hmx4f{font-size:14px;font-weight:500;min-width:4ch;text-align:center}";
+var S = {"root":"NumberControl_root__L33Io","value":"NumberControl_value__hmx4f"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/AppShell/AppShell.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import S from './AppShell.styl.js';
+
+/** Main column in app shell (grid cell + header / body / footer). */
+function AppShellMainContent({ className, bodyClassName, children, header, footer, }) {
+    return (jsxs("div", { className: cn(S.mainColumn, className), children: [header, jsx("div", { className: cn(S.mainBody, bodyClassName), children: children }), footer] }));
+}
+const AppShell = forwardRef(function AppShell({ className, ...props }, ref) {
+    return jsx("div", { ref: ref, className: cn(S.root, className), ...props });
+});
+
+export { AppShell, AppShellMainContent };

package/dist/esm/components/ui/Page/AppShell/AppShell.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppShell_root__ONlNK{display:grid;flex:1;grid-template-areas:\"main\";grid-template-columns:1fr;min-height:0;width:100%}@media (min-width:768px){.AppShell_root__ONlNK{grid-template-areas:\"sidebar main\";grid-template-columns:var(--sidebar-width) 1fr}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_root__ONlNK{grid-template-columns:0 1fr}}.AppShell_mainColumn__Emn1p{display:flex;flex:1;flex-direction:column;grid-area:main;min-height:0;min-width:0}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_mainColumn__Emn1p{margin-left:var(--p-3)}.AppShell_mainBody__IoVuy{background-color:var(--page-color);border-radius:var(--p-4);flex:1;min-width:0;padding-bottom:var(--page-y-padding)}";
+var S = {"root":"AppShell_root__ONlNK","mainColumn":"AppShell_mainColumn__Emn1p","mainBody":"AppShell_mainBody__IoVuy"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,22 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Fragment as Fragment$1 } from 'react';
+import { Link } from 'react-router-dom';
+import { SidebarTrigger } from '../../Sidebar/Sidebar.js';
+import { SlashIcon } from 'lucide-react';
+import S from './Breadcrumbs.styl.js';
+
+function Breadcrumbs({ className, items, children, clientLogo, companyName, 
+/** When false, omits the nav menu trigger (use in shells without SidebarProvider). */
+sidebarTrigger = true, }) {
+    const renderItem = (item, index) => {
+        if (item === 'client-name') {
+            return (jsxs("div", { className: S.item, children: [clientLogo, companyName] }, index));
+        }
+        return (jsxs(Fragment$1, { children: [index > 0 && jsx(BreadCrumbsSeparator, {}), item.href ? (jsx(Link, { className: S.item, to: item.href, children: item.label })) : (jsx("div", { className: S.item, children: item.label }))] }, index));
+    };
+    return (jsxs("div", { className: cn(S.root, className), children: [sidebarTrigger && (jsxs(Fragment, { children: [jsx(SidebarTrigger, {}), jsx(BreadCrumbsSeparator, {})] })), items.map(renderItem), children] }));
+}
+const BreadCrumbsSeparator = ({ className, ...props }) => (jsx(SlashIcon, { className: cn(S.separator, className), ...props }));
+
+export { BreadCrumbsSeparator, Breadcrumbs };

package/dist/esm/components/ui/Page/Breadcrumbs/Breadcrumbs.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Breadcrumbs_root__XsRXW{align-items:center;display:inline-flex;gap:var(--p-3);height:var(--p-5)}.Breadcrumbs_separator__MX02E{color:var(--sb-slate-300);flex-shrink:0;height:14px;width:14px}.Breadcrumbs_separator__MX02E.Breadcrumbs_line__-P6BQ{background-color:var(--border);height:100%;margin:0 var(--p-3);width:1px}.Breadcrumbs_item__QCiO4{align-items:center;color:var(--muted-foreground);display:flex;flex-shrink:0;font-size:var(--text-sm);gap:var(--p-3)}.Breadcrumbs_item__QCiO4:last-child{color:var(--foreground)}a.Breadcrumbs_item__QCiO4:hover{text-decoration:underline}";
+var S = {"root":"Breadcrumbs_root__XsRXW","separator":"Breadcrumbs_separator__MX02E","line":"Breadcrumbs_line__-P6BQ","item":"Breadcrumbs_item__QCiO4"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageColumns/PageColumns.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './PageColumns.styl.js';
+
+function PageColumns({ columns, fill = 'all', className, }) {
+    return (jsx("div", { className: cn(S.root, fill === 'left' && S.fillLeft, fill === 'right' && S.fillRight, fill === 'all' && S.fillAll, className), children: columns.map((column, index) => (jsx("div", { className: cn(S.column), children: column }, index))) }));
+}
+
+export { PageColumns };

package/dist/esm/components/ui/Page/PageColumns/PageColumns.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageColumns_root__bokbA{display:flex;gap:var(--p-10);width:100%}.PageColumns_column__rgXYS{flex-shrink:1;max-width:360px;min-width:360px;position:relative}@media (max-width:768px){.PageColumns_root__bokbA{flex-direction:column}.PageColumns_column__rgXYS{max-width:100%;min-width:100%}}.PageColumns_fillAll__0n856 .PageColumns_column__rgXYS,.PageColumns_fillLeft__Gvsse .PageColumns_column__rgXYS:first-child,.PageColumns_fillRight__N3PFQ .PageColumns_column__rgXYS:last-child{flex-grow:1;max-width:none}";
+var S = {"root":"PageColumns_root__bokbA","column":"PageColumns_column__rgXYS","fillLeft":"PageColumns_fillLeft__Gvsse","fillRight":"PageColumns_fillRight__N3PFQ","fillAll":"PageColumns_fillAll__0n856"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageContent/PageContent.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './PageContent.styl.js';
+
+function PageContent({ className, children, variant = 'default', }) {
+    return (jsx("div", { className: cn(S.root, S[`variant-${variant}`], className), children: children }));
+}
+function PageContentSection({ className, children, ...rest }) {
+    return (jsx("div", { className: cn(S.section, className), ...rest, children: children }));
+}
+
+export { PageContent, PageContentSection };

package/dist/esm/components/ui/Page/PageContent/PageContent.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageContent_root__caExB{max-width:var(--page-width);padding-bottom:var(--page-y-padding);width:100%}.PageContent_root__caExB,.PageContent_section__Wve-w{display:flex;flex:1;flex-direction:column;min-height:0}.PageContent_section__Wve-w{padding-left:var(--page-x-padding);padding-right:var(--page-x-padding)}";
+var S = {"root":"PageContent_root__caExB","section":"PageContent_section__Wve-w"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageEmptyCanvas/PageEmptyCanvas.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import S from './PageEmptyCanvas.styl.js';
+
+function PageEmptyCanvas({ title, hint, children, }) {
+    return (jsxs("div", { className: S.root, children: [jsx("p", { className: S.title, children: title }), jsx("p", { className: S.hint, children: hint }), children] }));
+}
+
+export { PageEmptyCanvas };

package/dist/esm/components/ui/Page/PageEmptyCanvas/PageEmptyCanvas.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageEmptyCanvas_root__UnPyd{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:12px;justify-content:center;margin:0 auto;max-width:28rem;min-height:280px;padding-bottom:var(--p-20);text-align:center}.PageEmptyCanvas_title__uU0QG{color:var(--text-color);font-size:var(--text-lg);font-weight:600;margin:0}.PageEmptyCanvas_hint__ljxnK{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.5;margin:0}";
+var S = {"root":"PageEmptyCanvas_root__UnPyd","title":"PageEmptyCanvas_title__uU0QG","hint":"PageEmptyCanvas_hint__ljxnK"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageFooter/PageFooter.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from 'react-router-dom';
+import { GlobeIcon, MailIcon } from 'lucide-react';
+import S from './PageFooter.styl.js';
+
+function PageFooter({ children, versionLink, versionLabel, homeTo = '/', brandText = 'Sybilion', logo, websiteHref = 'https://sybilion.com', mailHref = 'mailto:support@sybilion.com', copyrightText = '© 2026 Sybilion. All rights reserved.', }) {
+    return (jsx("footer", { className: S.root, children: jsxs("div", { className: S.line, children: [jsxs("div", { className: S.logo, children: [jsxs(Link, { to: homeTo, children: [logo, "\u00A0", brandText] }), versionLink !== '' && (jsx("div", { className: S.version, children: jsx(Link, { to: versionLink, className: S.versionLink, children: versionLabel }) }))] }), children, jsxs("div", { className: S.copyright, children: [copyrightText, jsx(Link, { to: websiteHref, target: "_blank", rel: "noreferrer", "aria-label": "Visit Sybilion website", children: jsx(GlobeIcon, {}) }), jsx("a", { href: mailHref, "aria-label": "Contact support via email", children: jsx(MailIcon, {}) })] })] }) }));
+}
+
+export { PageFooter };

package/dist/esm/components/ui/Page/PageFooter/PageFooter.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageFooter_root__TAfX6{display:flex;flex-direction:column;gap:6px;padding:var(--p-5) var(--p-10)}.PageFooter_line__OyGA-{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}.PageFooter_line__OyGA-:last-child{min-height:55px}.PageFooter_copyright__4LFUP{align-items:center;display:flex;font-size:14px;gap:var(--p-4);position:relative}.PageFooter_copyright__4LFUP svg{color:var(--brand-color-400);height:20px;width:20px}.PageFooter_logo__B2SRg{align-items:center;display:flex;font-size:var(--text-2xl);position:relative}.PageFooter_logo__B2SRg a{align-items:center;color:var(--foreground);display:flex;gap:var(--p-2);text-decoration:none}.PageFooter_logo__B2SRg svg{height:24px;width:24px}.PageFooter_version__8pZXn{align-items:center;bottom:5px;color:var(--muted-foreground);display:flex;font-size:14px;left:calc(100% + 10px);opacity:.5;position:absolute;transition:opacity .3s ease-out;white-space:nowrap}.PageFooter_version__8pZXn:before{content:\"v\"}.PageFooter_versionLink__dILP5{color:inherit;text-decoration:none}.PageFooter_logo__B2SRg:hover .PageFooter_version__8pZXn{opacity:1}";
+var S = {"root":"PageFooter_root__TAfX6","line":"PageFooter_line__OyGA-","copyright":"PageFooter_copyright__4LFUP","logo":"PageFooter_logo__B2SRg","version":"PageFooter_version__8pZXn","versionLink":"PageFooter_versionLink__dILP5"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageHeader/PageHeader.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useContext } from 'react';
+import { Breadcrumbs, BreadCrumbsSeparator } from '../Breadcrumbs/Breadcrumbs.js';
+import { PageContext } from '../pageContext.js';
+import { TextWithDeferTooltip } from '../../TextWithDeferTooltip/TextWithDeferTooltip.js';
+import S from './PageHeader.styl.js';
+
+function PageHeader({ breadcrumbs, breadcrumbClientLogo, breadcrumbCompanyName, breadcrumbSidebarTrigger = true, title, subheader, actions, }) {
+    const { isScrolled } = useContext(PageContext);
+    return (jsx("div", { className: cn(S.root, actions && S.hasActions, isScrolled && S.scrolled), children: jsxs("div", { className: S.inner, children: [jsx(Breadcrumbs, { className: S.breadcrumbs, items: breadcrumbs ?? [], clientLogo: breadcrumbClientLogo, companyName: breadcrumbCompanyName, sidebarTrigger: breadcrumbSidebarTrigger, children: isScrolled && (jsxs("div", { className: S.titleDupe, children: [jsx(BreadCrumbsSeparator, { size: 14 }), title] })) }), jsxs("div", { className: S.main, children: [jsxs("div", { className: S.title, children: [jsx("h1", { children: title }), subheader && (jsx(TextWithDeferTooltip, { className: S.subheader, children: subheader }))] }), actions && jsx("div", { className: S.actions, children: actions })] })] }) }));
+}
+
+export { PageHeader };

package/dist/esm/components/ui/Page/PageHeader/PageHeader.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageHeader_root__GyAnO{position:relative;top:0;z-index:50;--transition-duration:0.2s;align-items:center;border-top-left-radius:20px;border-top-right-radius:20px;display:flex;max-width:100%;overflow:hidden;padding:var(--page-y-padding) var(--page-x-padding);padding-bottom:var(--p-7);width:var(--page-width)}@media (max-width:768px){.PageHeader_root__GyAnO{padding-bottom:var(--p-5)}}.PageHeader_inner__m5W4O{align-items:flex-start;display:flex;flex-direction:column;flex-shrink:0;flex-wrap:wrap;justify-content:center;max-width:100%;transition:transform var(--transition-duration) ease-out;width:100%}.PageHeader_main__-5rXn{display:flex;gap:var(--p-4);justify-content:space-between;margin-top:var(--p-4);width:100%}.PageHeader_breadcrumbs__zw0fJ,.PageHeader_title__HBXW-{margin-right:var(--p-2);max-width:100%}.PageHeader_hasActions__o-2yF .PageHeader_breadcrumbs__zw0fJ,.PageHeader_hasActions__o-2yF .PageHeader_title__HBXW-{max-width:calc(100% - 200px)}@media (max-width:768px){.PageHeader_hasActions__o-2yF .PageHeader_breadcrumbs__zw0fJ,.PageHeader_hasActions__o-2yF .PageHeader_title__HBXW-{max-width:calc(100% - 130px)}}.PageHeader_title__HBXW-{flex-grow:1;transition:opacity .5s ease-out .1s}.PageHeader_title__HBXW- h1{color:var(--foreground);font-family:var(--font-family-heading);font-size:var(--text-2xl);font-weight:300;line-height:var(--text-2xl);margin:0;opacity:1;width:100%}.PageHeader_subheader__od0nn{display:block;display:-webkit-box;-webkit-line-clamp:2;margin:0;margin-top:var(--p-1);max-height:2.8em;max-width:100%;overflow:hidden;width:100%;word-break:break-word;-webkit-box-orient:vertical;color:var(--muted-foreground);font-family:Manrope,sans-serif;font-size:.75rem;font-weight:500;line-height:1rem;-webkit-user-select:text;-moz-user-select:text;user-select:text}.PageHeader_subheader__od0nn::-moz-selection{color:var(--foreground)}.PageHeader_subheader__od0nn::selection{color:var(--foreground)}.PageHeader_actions__Mrsd8{align-items:flex-start;display:flex;flex-shrink:0;transition:transform .2s ease-out}.PageHeader_actions__Mrsd8 button{border:0;position:relative}.PageHeader_actions__Mrsd8>*+*{margin-left:.5rem}.PageHeader_titleDupe__-xqqF{align-items:center;animation:PageHeader_expandTitle__h9-jv .3s ease-out;display:flex;gap:.5rem;max-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.PageHeader_titleDupe__-xqqF svg{flex-shrink:0}@media (max-width:768px){.PageHeader_inner__m5W4O,.PageHeader_root__GyAnO{transition:none}.PageHeader_main__-5rXn{flex-direction:column}.PageHeader_title__HBXW-{max-width:100%!important}}.PageHeader_scrolled__5Si-r{align-items:center;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:0;padding-top:0;transform:translateY(-130px)}.PageHeader_scrolled__5Si-r .PageHeader_inner__m5W4O{transform:translateY(106px)}.PageHeader_scrolled__5Si-r .PageHeader_breadcrumbs__zw0fJ{max-width:100%}@media (max-width:768px){.PageHeader_scrolled__5Si-r{transform:translateY(-84px)}.PageHeader_scrolled__5Si-r .PageHeader_inner__m5W4O{transform:translateY(86px)}}.PageHeader_scrolled__5Si-r .PageHeader_actions__Mrsd8,.PageHeader_scrolled__5Si-r .PageHeader_title__HBXW-{opacity:0;transition:opacity .1s ease-out}@keyframes PageHeader_expandTitle__h9-jv{0%{opacity:0}to{opacity:1}}";
+var S = {"root":"PageHeader_root__GyAnO","inner":"PageHeader_inner__m5W4O","main":"PageHeader_main__-5rXn","breadcrumbs":"PageHeader_breadcrumbs__zw0fJ","title":"PageHeader_title__HBXW-","hasActions":"PageHeader_hasActions__o-2yF","subheader":"PageHeader_subheader__od0nn","actions":"PageHeader_actions__Mrsd8","titleDupe":"PageHeader_titleDupe__-xqqF","expandTitle":"PageHeader_expandTitle__h9-jv","scrolled":"PageHeader_scrolled__5Si-r"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageScroll/PageScroll.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useRef, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { PageContext } from '../pageContext.js';
+import { Scroll } from '@homecode/ui';
+import S from './PageScroll.styl.js';
+
+function PageScrollInner({ className, children, }) {
+    // const { setIsScrolled } = useContext(PageContext);
+    // const prevScrollTop = useRef(0);
+    const location = useLocation();
+    const scrollInnerRef = useRef(null);
+    useEffect(() => {
+        scrollInnerRef.current?.scrollTo({ top: 0 });
+    }, [location.pathname]);
+    // const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    //   if (e.currentTarget.scrollTop > prevScrollTop.current) {
+    //     // if (e.currentTarget.scrollTop > 0) {
+    //     setIsScrolled(true);
+    //   } else {
+    //     setIsScrolled(false);
+    //   }
+    //   prevScrollTop.current = e.currentTarget.scrollTop;
+    // };
+    return (jsx(Scroll, { y: true, 
+        // fadeSize="l"
+        offset: { y: { before: 120, after: 130 } }, className: S.root, autoHide: true, innerClassName: cn(S.inner, className), yScrollbarClassName: S.scrollbar, onInnerRef: el => {
+            scrollInnerRef.current = el;
+        }, children: children }));
+}
+const PageScroll = ({ children, className, }) => {
+    const [isScrolled, setIsScrolled] = useState(false);
+    return (jsx(PageContext.Provider, { value: { isScrolled, setIsScrolled }, children: jsx(PageScrollInner, { className: className, children: children }) }));
+};
+
+export { PageScroll };

package/dist/esm/components/ui/Page/PageScroll/PageScroll.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageScroll_root__k2uq6{display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative;width:100%}@media (max-width:768px){.PageScroll_root__k2uq6{flex:1;height:auto;min-height:0}}@media (min-width:768px){.PageScroll_root__k2uq6[data-variant=inset]{margin-left:0}}.PageScroll_inner__MhjKZ{max-height:100%;min-height:100%;padding-right:var(--p-3);width:100%}.PageScroll_scrollbar__X18YB:before,.PageScroll_scrollbar__X18YB>div{right:14px!important}";
+var S = {"root":"PageScroll_root__k2uq6","inner":"PageScroll_inner__MhjKZ","scrollbar":"PageScroll_scrollbar__X18YB"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageTabs/PageTabs.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { PageXScroll } from '../PageXScroll/PageXScroll.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../Tabs/Tabs.js';
+import S from './PageTabs.styl.js';
+
+function hasTabPanelContent(content) {
+    if (content == null)
+        return false;
+    if (typeof content === 'boolean')
+        return false;
+    if (Array.isArray(content) && content.length === 0)
+        return false;
+    if (content === '')
+        return false;
+    return true;
+}
+function PageTabs({ className, contentClassName, items, tabsListProps, ...props }) {
+    return (jsxs(Tabs, { className: cn(S.root, className), variant: "link", ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: S.scrollbar, children: items.map(item => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.value))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
+}
+
+export { PageTabs };

package/dist/esm/components/ui/Page/PageTabs/PageTabs.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".PageTabs_root__0c-ao{gap:var(--p-12);margin-bottom:var(--p-10);max-width:100%;width:var(--page-width)}.PageTabs_scrollbar__-2Uze{max-height:12px}.PageTabs_list__fNzQB{max-width:100%}.PageTabs_list__fNzQB.PageTabs_withPaddings__pt93u{padding-left:var(--page-x-padding);padding-right:var(--page-x-padding)}.PageTabs_content__6XOr3{display:flex;flex-direction:column;position:relative}";
+var S = {"root":"PageTabs_root__0c-ao","scrollbar":"PageTabs_scrollbar__-2Uze","list":"PageTabs_list__fNzQB","withPaddings":"PageTabs_withPaddings__pt93u","content":"PageTabs_content__6XOr3"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageXScroll/PageXScroll.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useEffect } from 'react';
+import { Scroll } from '@homecode/ui';
+import S from './PageXScroll.styl.js';
+
+const scrollSizeMap = {
+    sm: 's',
+    md: 'm',
+    lg: 'l',
+};
+function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth = false, size = 'md', ...props }) {
+    const [pageXPadding, setPageXPadding] = useState(24); // Default fallback
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const value = getComputedStyle(document.documentElement)
+                .getPropertyValue('--page-x-padding')
+                .trim();
+            if (value) {
+                // Convert rem/px to number (assuming px, if rem multiply by 16)
+                const numValue = parseFloat(value);
+                setPageXPadding(value.includes('rem') ? numValue * 16 : numValue);
+            }
+        }
+    }, []);
+    return (jsx(Scroll, { x: true, size: scrollSizeMap[size], fadeSize: "xl", className: cn(className, S.root, fullWidth && S.fullWidth), innerClassName: cn(innerClassName, S.inner), xScrollbarClassName: scrollbarClassName, offset: {
+            x: {
+                before: pageXPadding,
+                after: pageXPadding,
+            },
+        }, autoHide: true, ...props, children: children }));
+}
+
+export { PageXScroll };

package/dist/esm/components/ui/Page/PageXScroll/PageXScroll.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".PageXScroll_root__s7sK6{max-width:100%}.PageXScroll_fullWidth__j-g0P{width:var(--page-width)}.PageXScroll_inner__u81h9{display:flex}.PageXScroll_inner__u81h9:after,.PageXScroll_inner__u81h9:before{content:\"\";display:block;height:100%;min-width:var(--page-x-padding);width:var(--page-x-padding)}";
+var S = {"root":"PageXScroll_root__s7sK6","fullWidth":"PageXScroll_fullWidth__j-g0P","inner":"PageXScroll_inner__u81h9"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/SectionHeader/SectionHeader.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './SectionHeader.styl.js';
+
+function SectionHeader({ title, description, actions, className, withMargin = false, ...props }) {
+    return (jsxs("div", { className: cn(S.root, withMargin && S.withMargin, className), ...props, children: [jsxs("div", { className: S.content, children: [jsx("h2", { className: S.title, children: title }), description && jsx("p", { className: S.description, children: description })] }), actions && jsx("div", { className: S.actions, children: actions })] }));
+}
+
+export { SectionHeader };

package/dist/esm/components/ui/Page/SectionHeader/SectionHeader.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".SectionHeader_root__g-Hnv{align-items:center;display:flex;justify-content:space-between;width:100%}.SectionHeader_withMargin__n0CUJ{margin:var(--p-6) 0}.SectionHeader_content__PhLKN{display:flex;flex:1 1 0;flex-direction:column;gap:6px;min-width:0}.SectionHeader_title__qrgRi{color:#001b1b;color:var(--foreground,#001b1b);font-family:Manrope,sans-serif;font-size:20px;font-weight:500;line-height:32px;margin:0}.SectionHeader_description__GdNzQ{color:#71717a;color:var(--muted-foreground,#71717a);font-family:Manrope,sans-serif;font-size:12px;font-weight:400;line-height:16px;margin:0}.SectionHeader_actions__SOUlm{align-items:center;display:flex;flex-shrink:0}";
+var S = {"root":"SectionHeader_root__g-Hnv","withMargin":"SectionHeader_withMargin__n0CUJ","content":"SectionHeader_content__PhLKN","title":"SectionHeader_title__qrgRi","description":"SectionHeader_description__GdNzQ","actions":"SectionHeader_actions__SOUlm"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/pageContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const PageContext = createContext({
+    isScrolled: false,
+    setIsScrolled: () => { },
+});
+
+export { PageContext };

package/dist/esm/components/ui/Progress/Progress.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import S from './Progress.styl.js';
+
+const Progress = forwardRef(({ className, value, ...props }, ref) => (jsx(ProgressPrimitive.Root, { ref: ref, className: cn(S.root, className), ...props, children: jsx(ProgressPrimitive.Indicator, { className: S.indicator, style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };