@pantoia/ui 0.14.1 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {

package/palette.css

@@ -3,9 +3,9 @@
   --pds-gray-400:#b0b8c1;  --pds-gray-500:#8b95a1; --pds-gray-600:#6b7684; --pds-gray-700:#4e5968;
   --pds-gray-800:#333d4b;  --pds-gray-900:#191f28;
 
-  --pds-brand-50:#e4ebf6;  --pds-brand-100:#c7daf7; --pds-brand-200:#9fc1f8; --pds-brand-300:#78a7f9;
-  --pds-brand-400:#5c90f9; --pds-brand-500:#4c7bf7; --pds-brand-600:#4569ed; --pds-brand-700:#3e5eda;
-  --pds-brand-800:#3653c3; --pds-brand-900:#2e48aa;
+  --pds-brand-50:#e5f9f3;  --pds-brand-100:#b7e5d8; --pds-brand-200:#84cfbc; --pds-brand-300:#6eb2a1;
+  --pds-brand-400:#43a18d; --pds-brand-500:#01937c; --pds-brand-600:#008671; --pds-brand-700:#017b67;
+  --pds-brand-800:#036e5d; --pds-brand-900:#036252;
 
   --pds-blue-50:#e8f3ff;  --pds-blue-100:#c9e2ff; --pds-blue-200:#90c2ff; --pds-blue-300:#64a8ff;
   --pds-blue-400:#4593fc; --pds-blue-500:#3182f6; --pds-blue-600:#2272eb; --pds-blue-700:#1b64da;
@@ -29,9 +29,9 @@
   --pds-gray-400:#62626d;  --pds-gray-500:#7e7e87; --pds-gray-600:#9e9ea4; --pds-gray-700:#c3c3c6;
   --pds-gray-800:#e4e4e5;  --pds-gray-900:#ffffff;
 
-  --pds-brand-50:#222f4e;  --pds-brand-100:#23396f; --pds-brand-200:#29448e; --pds-brand-300:#3051af;
-  --pds-brand-400:#3d67d5; --pds-brand-500:#4c7bf7; --pds-brand-600:#6290ff; --pds-brand-700:#86aaff;
-  --pds-brand-800:#b1c8ff; --pds-brand-900:#d9e5ff;
+  --pds-brand-50:#1d3630;  --pds-brand-100:#13453b; --pds-brand-200:#065547; --pds-brand-300:#036555;
+  --pds-brand-400:#037d69; --pds-brand-500:#01937c; --pds-brand-600:#41a48f; --pds-brand-700:#6abba8;
+  --pds-brand-800:#9bd1c3; --pds-brand-900:#d7eae4;
 
   --pds-blue-50:#202c4d;  --pds-blue-100:#23386a; --pds-blue-200:#25478c; --pds-blue-300:#265ab3;
   --pds-blue-400:#2970d9; --pds-blue-500:#3485fa; --pds-blue-600:#449bff; --pds-blue-700:#61b0ff;

package/registry.json

@@ -585,6 +585,10 @@
         {
           "path": "segmented-control/index.tsx",
           "type": "registry:ui"
+        },
+        {
+          "path": "segmented-control/index.module.css",
+          "type": "registry:ui"
         }
       ],
       "dependencies": [

package/segmented-control/index.module.css

@@ -0,0 +1,19 @@
+.thumb {
+  display: none;
+  position: absolute;
+  inset-block: 4px;
+  left: 0;
+  width: var(--segmented-control-width);
+  translate: var(--segmented-control-left) 0;
+  border-radius: var(--radius-r6);
+  background: var(--color-bg-neutral-thumb);
+  box-shadow: var(--shadow-s1);
+  transition: translate var(--dur-state) var(--ease-state),
+              width var(--dur-state) var(--ease-state);
+}
+
+[data-thumb] > .thumb { display: block; }
+
+@media (prefers-reduced-motion: reduce) {
+  .thumb { transition: none; }
+}

package/segmented-control/index.tsx

@@ -2,21 +2,24 @@
 
 import { Radio } from '@base-ui/react/radio'
 import { RadioGroup } from '@base-ui/react/radio-group'
-import { createContext, use, type ComponentProps } from 'react'
+import { createContext, use, useLayoutEffect, useState, type ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
+import s from './index.module.css'
+
 type Size = 'sm' | 'md' | 'lg'
 
 const Context = createContext<{ size: Size, fill: boolean }>({ size: 'md', fill: false })
 
 export const segmentedControl = tv({
   slots: {
-    root: 'bg-bg-neutral-selected rounded-r10 inline-flex shrink-0 gap-0.5 p-1',
-    item: 'text-label text-fg-muted rounded-r6 inline-flex h-full items-center justify-center gap-tight whitespace-nowrap'
+    root: 'group/segmented-control bg-bg-neutral-selected rounded-r10 relative inline-flex shrink-0 gap-0.5 p-1',
+    item: 'text-label text-fg-muted rounded-r6 relative inline-flex h-full items-center justify-center gap-tight whitespace-nowrap'
       + ' transition-state press-shrink cursor-pointer'
       + ' not-data-disabled:hover:text-fg'
       + ' checked:bg-bg-neutral-thumb checked:text-fg checked:shadow-s1'
+      + ' group-data-thumb/segmented-control:checked:bg-transparent group-data-thumb/segmented-control:checked:shadow-none'
       + ' focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-line-focus-ring'
       + ' data-disabled:text-fg-disabled data-disabled:cursor-not-allowed',
   },
@@ -42,12 +45,45 @@ export type SegmentedControlProps<Value> = Omit<ComponentProps<typeof RadioGroup
   className?: string
 }
 
-export function SegmentedControl<Value>({ size = 'md', fill = false, className, ...rest }: SegmentedControlProps<Value>) {
+export function SegmentedControl<Value>({ size = 'md', fill = false, className, children, ref, ...rest }: SegmentedControlProps<Value>) {
   const ui = segmentedControl({ size, fill })
+  const [root, setRoot] = useState<HTMLDivElement | null>(null)
+
+  useLayoutEffect(() => {
+    if (!root) return
+    const place = () => {
+      const on = root.querySelector<HTMLElement>('[role="radio"][data-checked]')
+      if (!on) {
+        root.removeAttribute('data-thumb')
+        return
+      }
+      root.style.setProperty('--segmented-control-left', `${on.offsetLeft}px`)
+      root.style.setProperty('--segmented-control-width', `${on.offsetWidth}px`)
+      root.setAttribute('data-thumb', '')
+    }
+    place()
+    const resize = new ResizeObserver(place)
+    const change = new MutationObserver(place)
+    resize.observe(root)
+    change.observe(root, { subtree: true, attributeFilter: ['data-checked'] })
+    return () => {
+      resize.disconnect()
+      change.disconnect()
+    }
+  }, [root])
+
+  const attach = (el: HTMLDivElement | null) => {
+    setRoot(el)
+    if (typeof ref === 'function') ref(el)
+    else if (ref) ref.current = el
+  }
 
   return (
     <Context value={{ size, fill }}>
-      <RadioGroup {...rest} className={ui.root({ className })} />
+      <RadioGroup {...rest} ref={attach} className={ui.root({ className })}>
+        <span aria-hidden className={s.thumb} />
+        {children}
+      </RadioGroup>
     </Context>
   )
 }

package/tabs/index.tsx

@@ -34,7 +34,7 @@ export function TabsList({ className, children, ...rest }: TabsListProps) {
 const tabsTrigger = tv({
   base: 'text-label text-fg-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
     + ' [&_svg]:size-4'
-    + ' press-shrink not-data-disabled:cursor-pointer not-data-disabled:hover:text-fg'
+    + ' not-data-disabled:cursor-pointer not-data-disabled:hover:text-fg'
     + ' data-disabled:text-fg-disabled data-disabled:cursor-not-allowed'
     + ' aria-selected:text-fg'
     + ' focus-visible:outline-2 focus-visible:-outline-offset-2'