@sybilion/uilib 1.3.49 → 1.3.50

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

@@ -15,8 +15,8 @@ function hasTabPanelContent(content) {
         return false;
     return true;
 }
-function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, 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: cn(S.scrollbar, scrollbarClassName), innerClassName: innerClassName, 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)] }));
+function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant = 'link', ...props }) {
+    return (jsxs(Tabs, { className: cn(S.root, className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: innerClassName, children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), 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/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}.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"};
+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,.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{background-color:transparent!important;gap:var(--p-2)}.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-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:var(--background);border-radius:var(--p-6);color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-4);transition:box-shadow .15s ease-in-out,color .15s ease-in-out}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH:hover{color:var(--foreground)}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:inset 0 0 0 2px var(--selected-tab-outline-color,var(--brand-color-400));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(--selected-tab-outline-color,var(--brand-color-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)}.dark .Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:inset 0 0 0 2px var(--selected-tab-outline-color,var(--brand-color-400));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-outline__2CJJg.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border-radius:var(--p-4);font-size:var(--text-xs);padding:var(--p-1) var(--p-3)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border-radius:var(--p-8);font-size:var(--text-base);padding:var(--p-2) var(--p-5)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.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","variant-outline":"Tabs_variant-outline__2CJJg","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/types/src/components/ui/Page/PageTabs/PageTabs.d.ts

@@ -1,14 +1,18 @@
-import { TabsListProps, TabsProps } from '#uilib/components/ui/Tabs';
-export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, ...props }: {
-    items: {
-        value: string;
-        label: string;
-        content?: React.ReactNode;
-    }[];
+import { TabsListProps, TabsProps, type TabsVariant } from '#uilib/components/ui/Tabs';
+export type PageTabsItem = {
+    value: string;
+    label: React.ReactNode;
+    content?: React.ReactNode;
+    /** React list key when multiple items may share `value`. */
+    key?: string;
+};
+export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant, ...props }: {
+    items: PageTabsItem[];
     tabsListProps?: TabsListProps & {
         fullWidth?: boolean;
         withPaddings?: boolean;
     };
+    variant?: TabsVariant;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;

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

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

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

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

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

@@ -1,5 +1,6 @@
 import { ComponentProps } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+export type TabsVariant = 'button' | 'link' | 'outline';
 export type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
 export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
 export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.49",
+  "version": "1.3.50",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

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

@@ -8,6 +8,7 @@ import {
   TabsListProps,
   TabsProps,
   TabsTrigger,
+  type TabsVariant,
 } from '#uilib/components/ui/Tabs';
 
 import S from './PageTabs.styl';
@@ -20,6 +21,14 @@ function hasTabPanelContent(content: React.ReactNode | undefined): boolean {
   return true;
 }
 
+export type PageTabsItem = {
+  value: string;
+  label: React.ReactNode;
+  content?: React.ReactNode;
+  /** React list key when multiple items may share `value`. */
+  key?: string;
+};
+
 export function PageTabs({
   className,
   contentClassName,
@@ -27,20 +36,22 @@ export function PageTabs({
   scrollbarClassName,
   items,
   tabsListProps,
+  variant = 'link',
   ...props
 }: {
-  items: { value: string; label: string; content?: React.ReactNode }[];
+  items: PageTabsItem[];
   tabsListProps?: TabsListProps & {
     fullWidth?: boolean;
     withPaddings?: boolean;
   };
+  variant?: TabsVariant;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;
     scrollbarClassName?: string;
   }) {
   return (
-    <Tabs className={cn(S.root, className)} variant="link" {...props}>
+    <Tabs className={cn(S.root, className)} variant={variant} {...props}>
       <TabsList
         {...tabsListProps}
         className={cn(S.list, tabsListProps?.withPaddings && S.withPaddings)}
@@ -50,8 +61,11 @@ export function PageTabs({
           scrollbarClassName={cn(S.scrollbar, scrollbarClassName)}
           innerClassName={innerClassName}
         >
-          {items.map(item => (
-            <TabsTrigger value={item.value} key={item.value}>
+          {items.map((item, index) => (
+            <TabsTrigger
+              value={item.value}
+              key={item.key ?? `${item.value}-${index}`}
+            >
               {item.label}
             </TabsTrigger>
           ))}

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

@@ -15,7 +15,7 @@ export type {
   PageFooterLinkItem,
   PageFooterProps,
 } from './PageFooter/PageFooter';
-export { PageTabs } from './PageTabs/PageTabs';
+export { PageTabs, type PageTabsItem } from './PageTabs/PageTabs';
 export { PageColumns } from './PageColumns/PageColumns';
 export { SectionHeader } from './SectionHeader';
 export type { SectionHeaderProps } from './SectionHeader';

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

@@ -19,6 +19,7 @@
     background-color transparent !important
 
   .variant-button &
+  .variant-outline &
     // background-color var(--muted-50)
     border-radius 1.5rem // 24px
     // padding 0.25rem // 4px
@@ -26,6 +27,10 @@
     box-shadow none
     height auto
 
+  .variant-outline &
+    gap var(--p-2)
+    background-color transparent !important
+
 .trigger
   display inline-flex
   flex 1
@@ -83,6 +88,23 @@
       color var(--foreground)
       box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.05)
 
+  .variant-outline .list &
+    flex-shrink 0
+    background-color var(--background)
+    padding var(--p-1) var(--p-4)
+    border-radius var(--p-6)
+    transition box-shadow 0.15s ease-in-out, color 0.15s ease-in-out
+    font-weight 600
+    color var(--muted-foreground)
+
+    &:hover
+      color var(--foreground)
+
+    &[data-state="active"]
+      box-shadow inset 0 0 0 2px var(--selected-tab-outline-color, var(--brand-color-400))
+      background-color var(--background)
+      color var(--foreground)
+
   .variant-link > .list &
     background-color transparent !important
     border 0 !important
@@ -92,7 +114,7 @@
     font-size 16px
 
     &[data-state="active"]
-      box-shadow inset 0 -3px 0 -1px var(--sb-cyan-400) !important
+      box-shadow inset 0 -3px 0 -1px var(--selected-tab-outline-color, var(--brand-color-400)) !important
 
 
   & svg
@@ -111,6 +133,12 @@
       border-color var(--input)
       color var(--foreground)
 
+  :global(.dark) .variant-outline .list &
+    &[data-state="active"]
+      background-color var(--background)
+      box-shadow inset 0 0 0 2px var(--selected-tab-outline-color, var(--brand-color-400))
+      color var(--foreground)
+
 .content
   flex 1
   outline none
@@ -134,6 +162,25 @@
         &[data-state="active"]
           border-radius var(--p-8)
 
+  &.variant-outline
+    &.sizeSm
+      .list .trigger
+        padding var(--p-1) var(--p-3)
+        font-size var(--text-xs)
+        border-radius var(--p-4)
+
+        &[data-state="active"]
+          border-radius var(--p-4)
+
+    &.sizeLg
+      .list .trigger
+        padding var(--p-2) var(--p-5)
+        font-size var(--text-base)
+        border-radius var(--p-8)
+
+        &[data-state="active"]
+          border-radius var(--p-8)
+
   &.variant-link
     &.sizeSm
       > .list

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

@@ -11,6 +11,7 @@ interface CssExports {
   'trigger': string;
   'variant-button': string;
   'variant-link': string;
+  'variant-outline': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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

@@ -8,6 +8,7 @@ import {
   TabsListProps,
   TabsProps,
   TabsTriggerProps,
+  TabsVariant,
 } from './Tabs.types';
 
 function Tabs({
@@ -17,7 +18,7 @@ function Tabs({
   darker = false,
   ...props
 }: TabsProps & {
-  variant?: 'button' | 'link';
+  variant?: TabsVariant;
   size?: 'sm' | 'md' | 'lg';
   darker?: boolean;
 }) {

package/src/components/ui/Tabs/Tabs.types.ts

@@ -2,6 +2,8 @@ import { ComponentProps } from 'react';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
+export type TabsVariant = 'button' | 'link' | 'outline';
+
 export type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
 export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
 export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;

package/src/docs/pages/PageTabsPage.tsx

@@ -3,6 +3,13 @@ import { PageContentSection, PageTabs } from '#uilib/components/ui/Page';
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
+const OUTLINE_ITEMS = [
+  { value: 'outline-1', label: 'Crude Oil ↘ 15%' },
+  { value: 'outline-2', label: 'Consumer Staples ↘ 12%' },
+  { value: 'outline-3', label: 'Energy ↘ 8%' },
+  { value: 'outline-4', label: 'Metals ↘ 10%' },
+];
+
 const SCROLL_TEST_ITEMS = Array.from({ length: 10 }, (_, i) => {
   const n = i + 1;
   return {
@@ -54,6 +61,33 @@ export default function PageTabsPage() {
             />
           </div>
         </section>
+
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>Outline variant</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            <code>variant=&quot;outline&quot;</code> with horizontal scroll on a
+            muted surface.
+          </p>
+          <div
+            style={{
+              maxWidth: 500,
+              padding: '0.5rem 0',
+              borderRadius: 'var(--p-3)',
+              backgroundColor: 'var(--muted)',
+            }}
+          >
+            <PageTabs
+              variant="outline"
+              defaultValue={OUTLINE_ITEMS[0].value}
+              items={OUTLINE_ITEMS}
+            />
+          </div>
+        </section>
       </PageContentSection>
     </>
   );

package/src/docs/pages/TabsPage.tsx

@@ -1,22 +1,57 @@
+import type { CSSProperties } from 'react';
+
 import { PageContentSection } from '#uilib/components/ui/Page';
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  type TabsVariant,
 } from '#uilib/components/ui/Tabs';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-const VARIANTS = ['button', 'link'] as const;
+const VARIANTS: TabsVariant[] = ['button', 'link', 'outline'];
 const SIZES = ['sm', 'md', 'lg'] as const;
 
+const OUTLINE_DEMO_TABS = [
+  { value: 'crude-oil', label: 'Crude Oil', pct: 15 },
+  { value: 'consumer-staples', label: 'Consumer Staples Euro', pct: 15 },
+  { value: 'energy', label: 'Energy', pct: 8 },
+  { value: 'metals', label: 'Metals', pct: 12 },
+  { value: 'agriculture', label: 'Agriculture', pct: 5 },
+] as const;
+
+function OutlineTabLabel({ label, pct }: { label: string; pct: number }) {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--p-2)',
+      }}
+    >
+      <span>{label}</span>
+      <span
+        style={{
+          color: 'var(--destructive)',
+          fontSize: 'var(--text-xs)',
+          fontWeight: 600,
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      >
+        ↘ {pct}%
+      </span>
+    </span>
+  );
+}
+
 function TabsDemoCell({
   variant,
   size,
 }: {
-  variant: (typeof VARIANTS)[number];
+  variant: TabsVariant;
   size: (typeof SIZES)[number];
 }) {
   const id = `${variant}-${size}`;
@@ -92,6 +127,55 @@ export default function TabsPage() {
           </div>
         </section>
 
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Outline</h3>
+          <p
+            style={{
+              marginBottom: '0.75rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            White pill triggers; active tab uses a border via{' '}
+            <code>--selected-tab-outline-color</code> (defaults to{' '}
+            <code>--sb-cyan-400</code>).
+          </p>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '1.5rem',
+              padding: '1rem',
+              borderRadius: 'var(--p-3)',
+              backgroundColor: 'var(--muted)',
+            }}
+          >
+            <Tabs variant="outline" defaultValue={OUTLINE_DEMO_TABS[0].value}>
+              <TabsList>
+                {OUTLINE_DEMO_TABS.map(tab => (
+                  <TabsTrigger key={tab.value} value={tab.value}>
+                    <OutlineTabLabel label={tab.label} pct={tab.pct} />
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            <Tabs
+              variant="outline"
+              defaultValue="custom-a"
+              style={
+                {
+                  '--selected-tab-outline-color': 'oklch(0.55 0.2 250)',
+                } as CSSProperties
+              }
+            >
+              <TabsList>
+                <TabsTrigger value="custom-a">Custom outline</TabsTrigger>
+                <TabsTrigger value="custom-b">Second tab</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+        </section>
+
         <section>
           <h3 style={{ marginBottom: '1rem' }}>Darker</h3>
           <p