@sybilion/uilib 1.2.12 → 1.2.14

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

@@ -5,8 +5,8 @@ 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 }));
+function PageContentSection({ className, children, grow = true, ...rest }) {
+    return (jsx("div", { className: cn(S.section, className, grow && S.grow), ...rest, children: children }));
 }
 
 export { PageContent, PageContentSection };

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

@@ -1,7 +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"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageContent_root__caExB{display:flex;flex:1;flex-direction:column;max-width:var(--page-width);min-height:0;padding-bottom:var(--page-y-padding);width:100%}.PageContent_section__Wve-w{display:flex;flex-direction:column;min-height:0;padding-left:var(--page-x-padding);padding-right:var(--page-x-padding)}.PageContent_grow__Nkfqk{flex-grow:1}";
+var S = {"root":"PageContent_root__caExB","section":"PageContent_section__Wve-w","grow":"PageContent_grow__Nkfqk"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -3,8 +3,29 @@ 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, {}) })] })] }) }));
+function PageFooterLinkEl({ item }) {
+    const { label, url, ariaLabel } = item;
+    const openInNewTab = /^https?:\/\//i.test(url);
+    return (jsx("a", { href: url, className: S.link, ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}), ...(openInNewTab ? { target: '_blank', rel: 'noreferrer' } : {}), children: label }));
+}
+function PageFooter({ children, versionLink, versionLabel, homeTo = '/', brandText = 'Sybilion', logo, websiteHref = 'https://sybilion.com', mailHref = 'mailto:support@sybilion.com', copyrightText = '© 2026 Sybilion. All rights reserved.', links: linksProp, }) {
+    const resolvedLinks = linksProp !== undefined
+        ? linksProp
+        : [
+            {
+                id: 'website',
+                label: jsx(GlobeIcon, { "aria-hidden": true }),
+                url: websiteHref,
+                ariaLabel: 'Visit Sybilion website',
+            },
+            {
+                id: 'email',
+                label: jsx(MailIcon, { "aria-hidden": true }),
+                url: mailHref,
+                ariaLabel: 'Contact support via email',
+            },
+        ];
+    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.meta, children: [jsx("div", { className: S.copyright, children: copyrightText }), resolvedLinks.length > 0 && (jsx("nav", { className: S.links, "aria-label": "Footer links", children: resolvedLinks.map(item => (jsx(PageFooterLinkEl, { item: item }, item.id))) }))] })] }) }));
 }
 
 export { PageFooter };

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

@@ -1,7 +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"};
+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_meta__Gvenf{align-items:center;display:flex;flex-wrap:wrap;gap:var(--p-4)}.PageFooter_copyright__4LFUP{font-size:14px}.PageFooter_links__q5BXo{align-items:center;display:flex;flex-wrap:wrap;gap:var(--p-4)}.PageFooter_link__mel3N{align-items:center;color:var(--foreground);display:inline-flex;font-size:14px;gap:var(--p-2);text-decoration:none}.PageFooter_link__mel3N:hover{text-decoration:underline}.PageFooter_link__mel3N svg{color:var(--brand-color-400);flex-shrink:0;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-","meta":"PageFooter_meta__Gvenf","copyright":"PageFooter_copyright__4LFUP","links":"PageFooter_links__q5BXo","link":"PageFooter_link__mel3N","logo":"PageFooter_logo__B2SRg","version":"PageFooter_version__8pZXn","versionLink":"PageFooter_versionLink__dILP5"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -3,8 +3,8 @@ import cn from 'classnames';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import S from './Tabs.styl.js';
 
-function Tabs({ className, variant = 'button', darker = false, ...props }) {
-    return (jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn(S.root, S[`variant-${variant}`], darker && S.darker, className), ...props }));
+function Tabs({ className, variant = 'button', size = 'md', darker = false, ...props }) {
+    return (jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn(S.root, S[`variant-${variant}`], size === 'sm' && S.sizeSm, size === 'lg' && S.sizeLg, darker && S.darker, className), ...props }));
 }
 function TabsList({ className, fullWidth, darker, ...props }) {
     return (jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn(S.list, fullWidth && S.fullWidth, darker && S.darker, className), ...props }));

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

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Tabs_root__cB9Au{display:flex;flex-direction:column;gap:.5rem}.Tabs_list__9Hs22{align-items:center;color:var(--muted-foreground);display:inline-flex;height:48px;justify-content:center;width:-moz-fit-content;width:fit-content}.Tabs_list__9Hs22.Tabs_fullWidth__Lj2Dd{width:100%}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22{background-color:transparent!important}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_trigger__uzdqH{align-items:center;border:1px solid transparent;border-radius:.375rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;flex:1;font-size:var(--text-sm);font-weight:500;gap:.375rem;height:calc(100% - 1px);justify-content:center;padding:.25rem .5rem;transition:color .2s,box-shadow .2s;white-space:nowrap}.Tabs_trigger__uzdqH:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50);outline:1px solid var(--ring);outline-offset:0}.Tabs_trigger__uzdqH:disabled{opacity:.5;pointer-events:none}.Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.Tabs_trigger__uzdqH:hover,.Tabs_trigger__uzdqH[data-state=active]{color:var(--foreground)!important}.Tabs_darker__l-R0I .Tabs_trigger__uzdqH{background-color:var(--muted)}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-3);transition:all .15s ease-in-out}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-6);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:0!important;font-size:16px;padding:12px 16px}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{box-shadow:inset 0 -3px 0 -1px var(--sb-cyan-400)!important}.Tabs_trigger__uzdqH svg{flex-shrink:0;pointer-events:none}.Tabs_trigger__uzdqH svg:not([class*=size-]){height:1rem;width:1rem}.dark .Tabs_trigger__uzdqH{color:var(--muted-foreground)}.dark .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--input-30);border-color:var(--input);color:var(--foreground)}.Tabs_content__K27Vl{flex:1;outline:none}";
-var S = {"root":"Tabs_root__cB9Au","list":"Tabs_list__9Hs22","fullWidth":"Tabs_fullWidth__Lj2Dd","variant-link":"Tabs_variant-link__xOMDg","variant-button":"Tabs_variant-button__wtc8k","trigger":"Tabs_trigger__uzdqH","darker":"Tabs_darker__l-R0I","content":"Tabs_content__K27Vl"};
+var css_248z = ".Tabs_root__cB9Au{display:flex;flex-direction:column;gap:.5rem}.Tabs_list__9Hs22{align-items:center;color:var(--muted-foreground);display:inline-flex;height:48px;justify-content:center;width:-moz-fit-content;width:fit-content}.Tabs_list__9Hs22.Tabs_fullWidth__Lj2Dd{width:100%}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22{background-color:transparent!important}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_trigger__uzdqH{align-items:center;border:1px solid transparent;border-radius:.375rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;flex:1;font-size:var(--text-sm);font-weight:500;gap:.375rem;height:calc(100% - 1px);justify-content:center;padding:.25rem .5rem;transition:color .2s,box-shadow .2s;white-space:nowrap}.Tabs_trigger__uzdqH:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50);outline:1px solid var(--ring);outline-offset:0}.Tabs_trigger__uzdqH:disabled{opacity:.5;pointer-events:none}.Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.Tabs_trigger__uzdqH:hover,.Tabs_trigger__uzdqH[data-state=active]{color:var(--foreground)!important}.Tabs_darker__l-R0I .Tabs_trigger__uzdqH{background-color:var(--muted)}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-3);transition:all .15s ease-in-out}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-6);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:0!important;font-size:16px;padding:12px 16px}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{box-shadow:inset 0 -3px 0 -1px var(--sb-cyan-400)!important}.Tabs_trigger__uzdqH svg{flex-shrink:0;pointer-events:none}.Tabs_trigger__uzdqH svg:not([class*=size-]){height:1rem;width:1rem}.dark .Tabs_trigger__uzdqH{color:var(--muted-foreground)}.dark .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--input-30);border-color:var(--input);color:var(--foreground)}.Tabs_content__K27Vl{flex:1;outline:none}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-xs);padding:var(--p-1) var(--p-2)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-base);padding:var(--p-2) var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-8)}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22{height:auto;min-height:36px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:14px;padding:8px 12px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22{height:auto;min-height:56px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:18px;padding:16px 24px}";
+var S = {"root":"Tabs_root__cB9Au","list":"Tabs_list__9Hs22","fullWidth":"Tabs_fullWidth__Lj2Dd","variant-link":"Tabs_variant-link__xOMDg","variant-button":"Tabs_variant-button__wtc8k","trigger":"Tabs_trigger__uzdqH","darker":"Tabs_darker__l-R0I","content":"Tabs_content__K27Vl","sizeSm":"Tabs_sizeSm__gfpc6","sizeLg":"Tabs_sizeLg__CcRFZ"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/hooks/index.js

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile.js';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+export { useIsMobile } from './hooks/useIsMobile.js';
 export { ThemeProvider, useTheme } from './contexts/theme-context.js';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';

package/dist/esm/types/src/components/ui/Page/PageContent/PageContent.d.ts

@@ -3,7 +3,8 @@ export declare function PageContent({ className, children, variant, }: {
     children: React.ReactNode;
     variant?: 'default' | 'clean';
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PageContentSection({ className, children, ...rest }: {
+export declare function PageContentSection({ className, children, grow, ...rest }: {
     className?: string;
     children: React.ReactNode;
+    grow?: boolean;
 } & Omit<React.ComponentProps<'div'>, 'className' | 'children'>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Page/PageFooter/PageFooter.d.ts

@@ -1,4 +1,11 @@
 import type { ReactNode } from 'react';
+export interface PageFooterLinkItem {
+    id: string;
+    label: ReactNode;
+    url: string;
+    /** For icon-only or non-text labels (screen readers). */
+    ariaLabel?: string;
+}
 export interface PageFooterProps {
     logo?: ReactNode;
     /** Rendered between logo block and copyright (e.g. debug UI from the app). */
@@ -12,5 +19,10 @@ export interface PageFooterProps {
     websiteHref?: string;
     mailHref?: string;
     copyrightText?: string;
+    /**
+     * Footer links. When set (including `[]`), replaces default website + email icons.
+     * Omit to keep icon links from `websiteHref` / `mailHref`.
+     */
+    links?: PageFooterLinkItem[];
 }
-export declare function PageFooter({ children, versionLink, versionLabel, homeTo, brandText, logo, websiteHref, mailHref, copyrightText, }: PageFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageFooter({ children, versionLink, versionLabel, homeTo, brandText, logo, websiteHref, mailHref, copyrightText, links: linksProp, }: PageFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Page/index.d.ts

@@ -6,7 +6,7 @@ export { PageScroll } from './PageScroll/PageScroll';
 export { PageXScroll } from './PageXScroll/PageXScroll';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 export { PageFooter } from './PageFooter/PageFooter';
-export type { PageFooterProps } from './PageFooter/PageFooter';
+export type { PageFooterLinkItem, PageFooterProps, } from './PageFooter/PageFooter';
 export { PageTabs } from './PageTabs/PageTabs';
 export { PageColumns } from './PageColumns/PageColumns';
 export { SectionHeader } from './SectionHeader';

package/dist/esm/types/src/components/ui/Tabs/Tabs.d.ts

@@ -1,6 +1,7 @@
 import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from './Tabs.types';
-declare function Tabs({ className, variant, darker, ...props }: TabsProps & {
+declare function Tabs({ className, variant, size, darker, ...props }: TabsProps & {
     variant?: 'button' | 'link';
+    size?: 'sm' | 'md' | 'lg';
     darker?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function TabsList({ className, fullWidth, darker, ...props }: TabsListProps & {

package/dist/esm/types/src/docs/pages/PageFooterPage.d.ts

@@ -0,0 +1 @@
+export default function PageFooterPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/pages/PageTabsPage.d.ts

@@ -0,0 +1 @@
+export default function PageTabsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile';

package/dist/esm/types/src/index.d.ts

@@ -1,3 +1,4 @@
+export { useIsMobile } from './hooks/useIsMobile';
 export * from './contexts/theme-context';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -29,6 +29,11 @@
       "import": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./hooks": {
+      "types": "./dist/esm/types/src/hooks/index.d.ts",
+      "import": "./dist/esm/hooks/index.js",
+      "default": "./dist/esm/hooks/index.js"
+    },
     "./src/*": "./src/*",
     "./vite-standalone-dev": {
       "types": "./dist/standalone/vite-sybilion-standalone-dev.d.ts",

package/src/components/ui/Page/PageContent/PageContent.styl

@@ -13,5 +13,7 @@
   pageXPadding()
   display flex
   flex-direction column
-  flex 1
   min-height 0
+
+.grow
+  flex-grow 1

package/src/components/ui/Page/PageContent/PageContent.styl.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'grow': string;
   'root': string;
   'section': string;
 }

package/src/components/ui/Page/PageContent/PageContent.tsx

@@ -21,13 +21,15 @@ export function PageContent({
 export function PageContentSection({
   className,
   children,
+  grow = true,
   ...rest
 }: {
   className?: string;
   children: React.ReactNode;
+  grow?: boolean;
 } & Omit<React.ComponentProps<'div'>, 'className' | 'children'>) {
   return (
-    <div className={cn(S.section, className)} {...rest}>
+    <div className={cn(S.section, className, grow && S.grow)} {...rest}>
       {children}
     </div>
   );

package/src/components/ui/Page/PageFooter/PageFooter.styl

@@ -15,14 +15,34 @@
   &:last-child
     min-height 55px
 
+.meta
+  display flex
+  flex-wrap wrap
+  align-items center
+  gap var(--p-4)
+
 .copyright
-  position relative
+  font-size 14px
+
+.links
   display flex
+  flex-wrap wrap
   align-items center
   gap var(--p-4)
+
+.link
+  display inline-flex
+  align-items center
+  gap var(--p-2)
   font-size 14px
+  color var(--foreground)
+  text-decoration none
+
+  &:hover
+    text-decoration underline
 
   svg
+    flex-shrink 0
     color var(--brand-color-400)
     height 20px
     width 20px

package/src/components/ui/Page/PageFooter/PageFooter.styl.d.ts

@@ -3,7 +3,10 @@
 interface CssExports {
   'copyright': string;
   'line': string;
+  'link': string;
+  'links': string;
   'logo': string;
+  'meta': string;
   'root': string;
   'version': string;
   'versionLink': string;

package/src/components/ui/Page/PageFooter/PageFooter.tsx

@@ -5,6 +5,14 @@ import { GlobeIcon, MailIcon } from 'lucide-react';
 
 import S from './PageFooter.styl';
 
+export interface PageFooterLinkItem {
+  id: string;
+  label: ReactNode;
+  url: string;
+  /** For icon-only or non-text labels (screen readers). */
+  ariaLabel?: string;
+}
+
 export interface PageFooterProps {
   logo?: ReactNode;
   /** Rendered between logo block and copyright (e.g. debug UI from the app). */
@@ -18,6 +26,27 @@ export interface PageFooterProps {
   websiteHref?: string;
   mailHref?: string;
   copyrightText?: string;
+  /**
+   * Footer links. When set (including `[]`), replaces default website + email icons.
+   * Omit to keep icon links from `websiteHref` / `mailHref`.
+   */
+  links?: PageFooterLinkItem[];
+}
+
+function PageFooterLinkEl({ item }: { item: PageFooterLinkItem }): ReactNode {
+  const { label, url, ariaLabel } = item;
+  const openInNewTab = /^https?:\/\//i.test(url);
+
+  return (
+    <a
+      href={url}
+      className={S.link}
+      {...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {})}
+      {...(openInNewTab ? { target: '_blank', rel: 'noreferrer' } : {})}
+    >
+      {label}
+    </a>
+  );
 }
 
 export function PageFooter({
@@ -30,7 +59,26 @@ export function PageFooter({
   websiteHref = 'https://sybilion.com',
   mailHref = 'mailto:support@sybilion.com',
   copyrightText = '© 2026 Sybilion. All rights reserved.',
+  links: linksProp,
 }: PageFooterProps) {
+  const resolvedLinks: PageFooterLinkItem[] =
+    linksProp !== undefined
+      ? linksProp
+      : [
+          {
+            id: 'website',
+            label: <GlobeIcon aria-hidden />,
+            url: websiteHref,
+            ariaLabel: 'Visit Sybilion website',
+          },
+          {
+            id: 'email',
+            label: <MailIcon aria-hidden />,
+            url: mailHref,
+            ariaLabel: 'Contact support via email',
+          },
+        ];
+
   return (
     <footer className={S.root}>
       <div className={S.line}>
@@ -48,19 +96,15 @@ export function PageFooter({
           )}
         </div>
         {children}
-        <div className={S.copyright}>
-          {copyrightText}
-          <Link
-            to={websiteHref}
-            target="_blank"
-            rel="noreferrer"
-            aria-label="Visit Sybilion website"
-          >
-            <GlobeIcon />
-          </Link>
-          <a href={mailHref} aria-label="Contact support via email">
-            <MailIcon />
-          </a>
+        <div className={S.meta}>
+          <div className={S.copyright}>{copyrightText}</div>
+          {resolvedLinks.length > 0 && (
+            <nav className={S.links} aria-label="Footer links">
+              {resolvedLinks.map(item => (
+                <PageFooterLinkEl key={item.id} item={item} />
+              ))}
+            </nav>
+          )}
         </div>
       </div>
     </footer>

package/src/components/ui/Page/index.ts

@@ -11,7 +11,10 @@ export { PageScroll } from './PageScroll/PageScroll';
 export { PageXScroll } from './PageXScroll/PageXScroll';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 export { PageFooter } from './PageFooter/PageFooter';
-export type { PageFooterProps } from './PageFooter/PageFooter';
+export type {
+  PageFooterLinkItem,
+  PageFooterProps,
+} from './PageFooter/PageFooter';
 export { PageTabs } from './PageTabs/PageTabs';
 export { PageColumns } from './PageColumns/PageColumns';
 export { SectionHeader } from './SectionHeader';

package/src/components/ui/Tabs/Tabs.styl

@@ -115,3 +115,41 @@
   flex 1
   outline none
 
+// Sizes (md = default styles above)
+.root
+  &.variant-button
+    &.sizeSm
+      .list .trigger
+        padding var(--p-1) var(--p-2)
+        font-size var(--text-xs)
+
+        &[data-state="active"]
+          border-radius var(--p-4)
+
+    &.sizeLg
+      .list .trigger
+        padding var(--p-2) var(--p-4)
+        font-size var(--text-base)
+
+        &[data-state="active"]
+          border-radius var(--p-8)
+
+  &.variant-link
+    &.sizeSm
+      > .list
+        height auto
+        min-height 36px
+
+      > .list .trigger
+        padding 8px 12px
+        font-size 14px
+
+    &.sizeLg
+      > .list
+        height auto
+        min-height 56px
+
+      > .list .trigger
+        padding 16px 24px
+        font-size 18px
+

package/src/components/ui/Tabs/Tabs.styl.d.ts

@@ -6,6 +6,8 @@ interface CssExports {
   'fullWidth': string;
   'list': string;
   'root': string;
+  'sizeLg': string;
+  'sizeSm': string;
   'trigger': string;
   'variant-button': string;
   'variant-link': string;

package/src/components/ui/Tabs/Tabs.tsx

@@ -13,15 +13,22 @@ import {
 function Tabs({
   className,
   variant = 'button',
+  size = 'md',
   darker = false,
   ...props
-}: TabsProps & { variant?: 'button' | 'link'; darker?: boolean }) {
+}: TabsProps & {
+  variant?: 'button' | 'link';
+  size?: 'sm' | 'md' | 'lg';
+  darker?: boolean;
+}) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
       className={cn(
         S.root,
         S[`variant-${variant}`],
+        size === 'sm' && S.sizeSm,
+        size === 'lg' && S.sizeLg,
         darker && S.darker,
         className,
       )}

package/src/docs/pages/PageFooterPage.styl

@@ -0,0 +1,10 @@
+@import 'lib/theme.styl'
+
+.demo
+  margin-top var(--p-4)
+  border 1px solid var(--border)
+  border-radius var(--radius-md)
+  overflow hidden
+
+.isMobile
+  max-width 560px

package/src/docs/pages/PageFooterPage.styl.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'demo': string;
+  'isMobile': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/docs/pages/PageFooterPage.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+
+import { Label } from '#uilib/components/ui/Label';
+import {
+  PageContent,
+  PageContentSection,
+  PageFooter,
+} from '#uilib/components/ui/Page';
+import type { PageFooterLinkItem } from '#uilib/components/ui/Page/PageFooter/PageFooter';
+import { Switch } from '#uilib/components/ui/Switch';
+import { GlobeIcon, Hash, MailIcon, MessageCircle } from 'lucide-react';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+import S from './PageFooterPage.styl';
+
+const DEMO_LINKS: PageFooterLinkItem[] = [
+  {
+    id: 'site',
+    label: (
+      <>
+        <GlobeIcon aria-hidden />
+        Website
+      </>
+    ),
+    url: 'https://sybilion.com',
+  },
+  {
+    id: 'email',
+    label: (
+      <>
+        <MailIcon aria-hidden />
+        Email
+      </>
+    ),
+    url: 'mailto:support@sybilion.com',
+  },
+  {
+    id: 'discord',
+    label: (
+      <>
+        <MessageCircle aria-hidden />
+        Discord
+      </>
+    ),
+    url: 'https://discord.com',
+  },
+  {
+    id: 'slack',
+    label: (
+      <>
+        <Hash aria-hidden />
+        Slack
+      </>
+    ),
+    url: 'https://slack.com',
+  },
+];
+
+export default function PageFooterPage() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'PageFooter' }]}
+        title="PageFooter"
+        subheader="Copyright + optional link row with gap and wrapping."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContent>
+        <PageContentSection title="With links prop">
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              marginTop: 'var(--p-3)',
+            }}
+          >
+            <Switch
+              id="page-footer-mobile-preview"
+              checked={isMobile}
+              onCheckedChange={setIsMobile}
+            />
+            <Label htmlFor="page-footer-mobile-preview">Mobile</Label>
+          </div>
+          <div className={isMobile ? `${S.demo} ${S.isMobile}` : S.demo}>
+            <PageFooter
+              versionLink=""
+              versionLabel="0.0.0"
+              links={DEMO_LINKS}
+            />
+          </div>
+        </PageContentSection>
+      </PageContent>
+    </>
+  );
+}

package/src/docs/pages/PageTabsPage.tsx

@@ -0,0 +1,60 @@
+import { PageContentSection, PageTabs } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const SCROLL_TEST_ITEMS = Array.from({ length: 10 }, (_, i) => {
+  const n = i + 1;
+  return {
+    value: `scroll-demo-${n}`,
+    label: `Tab ${n} — wider label`,
+    content: (
+      <p style={{ margin: 0, padding: '0 var(--page-x-padding)' }}>
+        Content for tab {n}. Narrow container forces horizontal scroll on tab
+        row.
+      </p>
+    ),
+  };
+});
+
+export default function PageTabsPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'PageTabs' }]}
+        title="PageTabs"
+        subheader="Page-scoped tabs with horizontally scrollable tab strip."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>Scrollable row (10 tabs)</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Container capped at <code>280px</code> so tab triggers overflow and
+            use <code>PageXScroll</code>.
+          </p>
+          <div
+            style={{
+              maxWidth: 500,
+              border: '2px dashed var(--border)',
+              borderRadius: 'var(--p-3)',
+              backgroundColor: 'var(--background)',
+            }}
+          >
+            <PageTabs
+              defaultValue={SCROLL_TEST_ITEMS[0].value}
+              items={SCROLL_TEST_ITEMS}
+            />
+          </div>
+        </section>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/TabsPage.tsx

@@ -9,24 +9,120 @@ import {
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
+const VARIANTS = ['button', 'link'] as const;
+const SIZES = ['sm', 'md', 'lg'] as const;
+
+function TabsDemoCell({
+  variant,
+  size,
+}: {
+  variant: (typeof VARIANTS)[number];
+  size: (typeof SIZES)[number];
+}) {
+  const id = `${variant}-${size}`;
+  return (
+    <Tabs
+      variant={variant}
+      size={size}
+      defaultValue={`${id}-a`}
+      style={{ maxWidth: 360 }}
+    >
+      <TabsList>
+        <TabsTrigger value={`${id}-a`}>Alpha</TabsTrigger>
+        <TabsTrigger value={`${id}-b`}>Beta</TabsTrigger>
+      </TabsList>
+      <TabsContent value={`${id}-a`}>
+        Panel A ({variant}, {size}).
+      </TabsContent>
+      <TabsContent value={`${id}-b`}>
+        Panel B ({variant}, {size}).
+      </TabsContent>
+    </Tabs>
+  );
+}
+
 export default function TabsPage() {
   return (
     <>
       <AppPageHeader
         breadcrumbs={[{ label: 'Tabs' }]}
         title="Tabs"
-        subheader="Tabbed panels."
+        subheader="Variants, sizes, full-width list, darker surface."
         actions={<DocsHeaderActions />}
       />
-      <PageContentSection>
-        <Tabs defaultValue="a" style={{ maxWidth: 400 }}>
-          <TabsList>
-            <TabsTrigger value="a">Tab A</TabsTrigger>
-            <TabsTrigger value="b">Tab B</TabsTrigger>
-          </TabsList>
-          <TabsContent value="a">Content for tab A.</TabsContent>
-          <TabsContent value="b">Content for tab B.</TabsContent>
-        </Tabs>
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Variants × sizes</h3>
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+              <thead>
+                <tr>
+                  <th style={{ textAlign: 'left', padding: '0.5rem' }} />
+                  {SIZES.map(s => (
+                    <th key={s} style={{ padding: '0.5rem' }}>
+                      {s}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {VARIANTS.map(v => (
+                  <tr key={v}>
+                    <td
+                      style={{
+                        padding: '0.5rem',
+                        fontWeight: 600,
+                        whiteSpace: 'nowrap',
+                        verticalAlign: 'top',
+                      }}
+                    >
+                      {v}
+                    </td>
+                    {SIZES.map(s => (
+                      <td key={s} style={{ padding: '0.5rem' }}>
+                        <TabsDemoCell variant={v} size={s} />
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Darker</h3>
+          <p
+            style={{
+              marginBottom: '0.75rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Pass <code>darker</code> on root and/or list for muted segment
+            background on inactive triggers.
+          </p>
+          <div
+            style={{
+              display: 'flex',
+              gap: '1rem',
+              backgroundColor: 'var(--background)',
+              padding: '1rem',
+              borderRadius: 'var(--p-3)',
+              width: '200px',
+            }}
+          >
+            <Tabs defaultValue="dk-a" variant="button" darker>
+              <TabsList darker>
+                <TabsTrigger value="dk-a">One</TabsTrigger>
+                <TabsTrigger value="dk-b">Two</TabsTrigger>
+              </TabsList>
+              <TabsContent value="dk-a">Button tabs + darker.</TabsContent>
+              <TabsContent value="dk-b">Second tab.</TabsContent>
+            </Tabs>
+          </div>
+        </section>
       </PageContentSection>
     </>
   );

package/src/docs/registry.ts

@@ -216,6 +216,18 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Layout',
     load: () => import('./pages/PagePage'),
   },
+  {
+    slug: 'page-footer',
+    title: 'PageFooter',
+    section: 'Layout',
+    load: () => import('./pages/PageFooterPage'),
+  },
+  {
+    slug: 'page-tabs',
+    title: 'PageTabs',
+    section: 'Layout',
+    load: () => import('./pages/PageTabsPage'),
+  },
   {
     slug: 'standalone-app-layout',
     title: 'Standalone app layout',

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile';

package/src/index.ts

@@ -1,3 +1,4 @@
+export { useIsMobile } from './hooks/useIsMobile';
 export * from './contexts/theme-context';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';