@pantoia/ui 0.12.1 → 0.14.0

package/toggle-group/index.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
+import { createContext, use, type ReactNode } from 'react'
+
+import { toggle, type ToggleColor, type ToggleShape, type ToggleSize, type ToggleSurface } from '../toggle'
+import { tv } from '../tv'
+
+interface Shared {
+  size: ToggleSize
+  shape: ToggleShape
+  surface: ToggleSurface
+  multiple: boolean
+}
+
+const Context = createContext<Shared>({ size: 'sm', shape: 'pill', surface: 'bare', multiple: false })
+
+const toggleGroup = tv({ base: 'flex flex-wrap gap-2' })
+
+interface ToggleGroupLook {
+  size?: ToggleSize
+  shape?: ToggleShape
+  surface?: ToggleSurface
+  className?: string
+}
+
+export type ToggleGroupSingleProps = Omit<RadioGroup.Props<string | null>, 'className'> & ToggleGroupLook & {
+  multiple?: false
+}
+
+export type ToggleGroupMultipleProps = Omit<ToggleGroupPrimitive.Props<string>, 'className' | 'multiple'> & ToggleGroupLook & {
+  multiple: true
+}
+
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps
+
+export function ToggleGroup({ size = 'sm', shape = 'pill', surface = 'bare', className, ...rest }: ToggleGroupProps) {
+  const root = toggleGroup({ className })
+
+  if (rest.multiple) {
+    return (
+      <Context value={{ size, shape, surface, multiple: true }}>
+        <ToggleGroupPrimitive<string> {...rest} className={root} />
+      </Context>
+    )
+  }
+
+  const { multiple: _multiple, ...single } = rest
+
+  return (
+    <Context value={{ size, shape, surface, multiple: false }}>
+      <RadioGroup<string | null> {...single} className={root} />
+    </Context>
+  )
+}
+
+export interface ToggleGroupItemProps {
+  value: string
+  color?: ToggleColor
+  disabled?: boolean
+  'aria-label'?: string
+  className?: string
+  children?: ReactNode
+}
+
+export function ToggleGroupItem({ color, className, ...rest }: ToggleGroupItemProps) {
+  const { size, shape, surface, multiple } = use(Context)
+  const look = toggle({ size, shape, color, surface, className })
+
+  if (multiple) return <TogglePrimitive {...rest} className={look} />
+
+  return <Radio.Root {...rest} nativeButton render={<button type="button" />} className={look} />
+}

package/tokens.css

@@ -17,6 +17,7 @@
   --pds-bg-neutral-knob:                      #ffffff;
   --pds-bg-neutral-knob-off:                  #ffffff;
   --pds-bg-neutral-thumb:                     #ffffff;
+  --pds-bg-neutral-toast:                     rgba(25,31,40,0.94);
   --pds-bg-neutral-track:                     var(--pds-gray-300);
   --pds-bg-neutral-selected:                  rgba(2,32,71,0.05);
   --pds-bg-neutral-selected-hover:            rgba(0,27,55,0.1);
@@ -30,6 +31,7 @@
 
   --pds-fg-brand-contrast:                    var(--pds-brand-700);
   --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-neutral-toast-contrast:            var(--pds-white);
   --pds-fg-danger:                            var(--pds-red-500);
   --pds-fg-danger-contrast:                   var(--pds-red-700);
   --pds-fg-info:                              var(--pds-blue-500);
@@ -48,6 +50,7 @@
   --pds-line-info:                            var(--pds-blue-500);
   --pds-line-info-weak:                       var(--pds-blue-200);
   --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-neutral-toast:                   transparent;
   --pds-line-strong:                          var(--pds-gray-300);
   --pds-line-success:                         var(--pds-green-500);
   --pds-line-success-weak:                    var(--pds-green-200);
@@ -83,6 +86,7 @@
   --pds-bg-neutral-knob:                      #2c2c35;
   --pds-bg-neutral-knob-off:                  var(--pds-gray-800);
   --pds-bg-neutral-thumb:                     #3c3c47;
+  --pds-bg-neutral-toast:                     rgba(0,0,0,0.92);
   --pds-bg-neutral-track:                     var(--pds-gray-300);
   --pds-bg-neutral-selected:                  rgba(217,217,255,0.11);
   --pds-bg-neutral-selected-hover:            rgba(222,222,255,0.19);
@@ -96,6 +100,7 @@
 
   --pds-fg-brand-contrast:                    var(--pds-brand-700);
   --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-neutral-toast-contrast:            var(--pds-white);
   --pds-fg-danger:                            var(--pds-red-500);
   --pds-fg-danger-contrast:                   var(--pds-red-700);
   --pds-fg-info:                              var(--pds-blue-500);
@@ -114,6 +119,7 @@
   --pds-line-info:                            var(--pds-blue-500);
   --pds-line-info-weak:                       var(--pds-blue-200);
   --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-neutral-toast:                   rgba(255,255,255,0.1);
   --pds-line-strong:                          var(--pds-gray-300);
   --pds-line-success:                         var(--pds-green-500);
   --pds-line-success-weak:                    var(--pds-green-200);
@@ -148,6 +154,7 @@
   --color-bg-neutral-knob:                    var(--pds-bg-neutral-knob);
   --color-bg-neutral-knob-off:                var(--pds-bg-neutral-knob-off);
   --color-bg-neutral-thumb:                   var(--pds-bg-neutral-thumb);
+  --color-bg-neutral-toast:                   var(--pds-bg-neutral-toast);
   --color-bg-neutral-track:                   var(--pds-bg-neutral-track);
   --color-bg-neutral-selected:                var(--pds-bg-neutral-selected);
   --color-bg-neutral-selected-hover:          var(--pds-bg-neutral-selected-hover);
@@ -160,6 +167,7 @@
   --color-bg-warning-weak:                    var(--pds-bg-warning-weak);
   --color-fg-brand-contrast:                  var(--pds-fg-brand-contrast);
   --color-fg-brand-solid-contrast:            var(--pds-fg-brand-solid-contrast);
+  --color-fg-neutral-toast-contrast:          var(--pds-fg-neutral-toast-contrast);
   --color-fg-danger:                          var(--pds-fg-danger);
   --color-fg-danger-contrast:                 var(--pds-fg-danger-contrast);
   --color-fg-info:                            var(--pds-fg-info);
@@ -177,6 +185,7 @@
   --color-line-info:                          var(--pds-line-info);
   --color-line-info-weak:                     var(--pds-line-info-weak);
   --color-line-neutral-solid:                 var(--pds-line-neutral-solid);
+  --color-line-neutral-toast:                 var(--pds-line-neutral-toast);
   --color-line-strong:                        var(--pds-line-strong);
   --color-line-success:                       var(--pds-line-success);
   --color-line-success-weak:                  var(--pds-line-success-weak);

package/tooltip/index.tsx

@@ -46,7 +46,9 @@ export function TooltipTrigger(props: TooltipTriggerProps) {
   return <TooltipPrimitive.Trigger delay={inProvider ? undefined : 100} {...props} aria-describedby={open ? id : undefined} />
 }
 
-export type TooltipContentProps = Omit<ComponentProps<typeof TooltipPrimitive.Popup>, 'className'> & {
+type TooltipPlacement = Pick<ComponentProps<typeof TooltipPrimitive.Positioner>, 'sideOffset' | 'alignOffset' | 'collisionAvoidance'>
+
+export type TooltipContentProps = Omit<ComponentProps<typeof TooltipPrimitive.Popup>, 'className'> & TooltipPlacement & {
   side?: 'top' | 'right' | 'bottom' | 'left'
   arrow?: boolean
   className?: string
@@ -69,6 +71,9 @@ const tooltipArrow = tv({
 export function TooltipContent({
   side = 'top',
   arrow = true,
+  sideOffset,
+  alignOffset,
+  collisionAvoidance,
   className,
   children,
   ...rest
@@ -79,7 +84,9 @@ export function TooltipContent({
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Positioner
         side={side}
-        sideOffset={arrow ? 11 : 6}
+        sideOffset={sideOffset ?? (arrow ? 11 : 6)}
+        alignOffset={alignOffset}
+        collisionAvoidance={collisionAvoidance}
         className="z-overlay min-w-max will-change-transform"
       >
         <TooltipPrimitive.Popup {...rest} id={id} role="tooltip" className={tooltipContent({ className })}>

package/utilities.css

@@ -13,7 +13,7 @@
 @custom-variant checked (&:where([data-checked], [data-indeterminate]));
 @custom-variant open    (&[data-open]);
 @custom-variant closed  (&[data-closed]);
-@custom-variant on      (&[aria-pressed="true"]);
+@custom-variant on      (&:is([aria-pressed="true"], [aria-checked="true"]));
 @custom-variant side-top    (&[data-side="top"]);
 @custom-variant side-right  (&[data-side="right"]);
 @custom-variant side-bottom (&[data-side="bottom"]);