@maestro-js/components 1.0.0-alpha.19 → 1.0.0-alpha.2

package/scripts/build.ts

@@ -9,7 +9,6 @@ interface RegistryFile {
 
 interface RegistryEntry {
   name: string
-  dependencies?: string[]
   files: RegistryFile[]
 }
 
@@ -20,7 +19,6 @@ interface OutputFile {
 
 interface OutputEntry {
   name: string
-  dependencies?: string[]
   files: OutputFile[]
 }
 
@@ -31,19 +29,14 @@ const registry: RegistryEntry[] = JSON.parse(await readFile(resolve(packageRoot,
 const output: OutputEntry[] = await Promise.all(
   registry.map(async (entry) => {
     const files = await Promise.all(
-      entry.files.map(async (file) => {
-        const content = await readFile(resolve(packageRoot, file.path), 'utf-8')
-        const header = `// From @maestro-js/components\n// Install with: pnpm maestro components:add ${entry.name} --directory app\n\n`
-        return {
-          name: `${file.type}/${basename(file.path)}`,
-          content: header + content
-        }
-      })
+      entry.files.map(async (file) => ({
+        name: `${file.type}/${basename(file.path)}`,
+        content: await readFile(resolve(packageRoot, file.path), 'utf-8')
+      }))
     )
 
     return {
       name: entry.name,
-      ...(entry.dependencies?.length && { dependencies: entry.dependencies }),
       files
     }
   })

package/src/components/alert-dialog.tsx

@@ -86,7 +86,7 @@ function AlertDialog_({
       isDismissable={isDismissable}
       isKeyboardDismissDisabled={!isDismissable}
       className={tw(
-        'fixed inset-0 z-[4000] flex items-center justify-center bg-black/25 backdrop-blur-sm',
+        'fixed inset-0 z-[4000] flex items-center justify-center  bg-black/70 backdrop-blur-lg',
         'transition-opacity duration-200 ease-out',
         'data-[entering]:opacity-0',
         'data-[exiting]:opacity-0'
@@ -100,14 +100,14 @@ function AlertDialog_({
           'data-[exiting]:scale-95 data-[exiting]:opacity-0 data-[exiting]:translate-y-2'
         )}
       >
-        <Dialog className={tw('outline-none bg-white rounded-xl shadow-xl ring-1 ring-black/5 w-full', className)} role="alertdialog">
+        <Dialog className={tw('outline-none bg-white rounded-lg shadow-2xl w-full', className)} role="alertdialog">
           {({ close }) => (
             <AlertDialogContext.Provider value={{ close }}>
               <ButtonGroupContext.Provider
                 value={{ orientation: 'horizontal', alignment: 'center', fullWidth: true, className: 'flex-nowrap' }}
               >
                 <ButtonContext.Provider value={{ shape: 'rectangle', variant: 'soft', fullWidth: true }}>
-                  <div className={tw('border rounded-xl p-6', styles.container)}>
+                  <div className={tw('border rounded-lg p-6', styles.container)}>
                     <div className="flex flex-col items-center text-center">
                       {displayIcon && (
                         <div className={tw('w-12 h-12 rounded-xl flex items-center justify-center mb-4', styles.iconBg)}>

package/src/components/avatar.tsx

@@ -22,7 +22,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       <div
         ref={ref}
         className={tw(
-          'size-10 relative inline-flex items-center justify-center overflow-hidden font-medium text-white select-none ring-1 ring-black/5',
+          'size-10 relative inline-flex items-center justify-center overflow-hidden font-medium text-white select-none',
           !showImage && 'bg-neutral-300',
           shape === 'circle' && 'rounded-full',
           shape === 'rounded' && 'rounded',

package/src/components/button-link.tsx

@@ -56,9 +56,6 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           className: tw(fullWidth && 'w-full', className)
         })}
       >
-        {(size === 'xs' || size === 'sm' || shape === 'circle') && (
-          <span className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2" aria-hidden="true" />
-        )}
         <span className={tw('inline-flex items-center gap-2', showSpinner && 'opacity-0')}>{children}</span>
         <span
           aria-hidden={!showSpinner ? true : undefined}

package/src/components/button.tsx

@@ -74,7 +74,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         data-pending={isPending}
         onClick={onClick}
-        {...(isToggled != null ? { 'aria-pressed': isToggled } : {})}
         className={composeTailwindRenderProps(
           props.className,
           tw(getButtonClasses({ variant, color, size, shape, isToggled }), fullWidth && 'w-full')
@@ -82,9 +81,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {composeRenderProps(props.children, (children) => (
           <>
-            {(size === 'xs' || size === 'sm' || shape === 'circle') && (
-              <span className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2" aria-hidden="true" />
-            )}
             <span className={tw('inline-flex items-center gap-2', showSpinner && 'opacity-0')}>{children}</span>
             <span
               aria-hidden={!showSpinner ? true : undefined}

package/src/components/checkbox.tsx

@@ -78,7 +78,7 @@ export function PlainCheckbox(props: PlainCheckboxProps) {
       isDisabled={props.isDisabled}
       isInvalid={props.isInvalid || validationInvalid}
       aria-label={props['aria-label']}
-      className="group inline-flex items-center focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+      className="group inline-flex items-center focus:outline-none [&>div]:focus-visible:ring-2 [&>div]:focus-visible:ring-primary-500/20 [&>div]:focus-visible:ring-offset-2"
     >
       {({ isSelected, isIndeterminate, isDisabled }) => (
         <>
@@ -139,7 +139,7 @@ export function LabeledCheckbox(props: LabeledCheckboxProps) {
       isDisabled={props.isDisabled}
       isInvalid={isInvalid}
       aria-describedby={helpTextId}
-      className="group relative flex items-start gap-3 select-none focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+      className="group relative flex items-start gap-3 select-none focus:outline-none [&>div:first-child>div]:focus-visible:ring-2 [&>div:first-child>div]:focus-visible:ring-primary-500/20 [&>div:first-child>div]:focus-visible:ring-offset-2"
     >
       {({ isSelected, isIndeterminate, isDisabled }) => (
         <>
@@ -191,16 +191,16 @@ function CheckboxBox({
   return (
     <div
       className={tw(
-        'relative size-5 rounded border transition-colors duration-200',
-        isSelected || isIndeterminate ? 'bg-primary-600 border-primary-600' : 'bg-white border-neutral-300',
+        'relative h-5 w-5 rounded border transition-all duration-50',
+        isSelected || isIndeterminate ? 'bg-primary-500 border-primary-500' : 'bg-white border-neutral-300',
         !isDisabled && !(isSelected || isIndeterminate) && 'group-hovered:border-neutral-400',
-        isDisabled && 'cursor-not-allowed border-neutral-300 bg-neutral-100'
+        isDisabled && 'opacity-50 cursor-not-allowed'
       )}
     >
       {isIndeterminate ? (
-        <Icon name="minus" className="h-5/6 absolute inset-0 m-auto aspect-square stroke-white text-white" />
+        <Icon name="minus" className="h-5/6 absolute inset-0 m-auto aspect-square text-white" />
       ) : (
-        <Icon name="check" className="h-5/6 absolute inset-0 m-auto aspect-square stroke-white text-white" />
+        <Icon name="check" className="h-5/6 absolute inset-0 m-auto aspect-square text-white" />
       )}
     </div>
   )

package/src/components/chip.tsx

@@ -60,7 +60,7 @@ export function Chip(props: ChipProps) {
           className={tw(
             'inline-flex items-center justify-center rounded-full transition-colors translate-x-1',
             removeBtnSizeClasses[size],
-            !isDisabled && 'hover:bg-neutral-950/10',
+            !isDisabled && 'hover:bg-black/10',
             isDisabled && 'cursor-not-allowed'
           )}
           aria-label="Remove"
@@ -146,13 +146,13 @@ const darkHoverColorClasses = {
 }
 
 const removeBtnSizeClasses = {
-  sm: 'size-4 -m-0.5 p-0.5',
-  md: 'size-5 -m-1 p-1',
-  lg: 'size-6 -m-1.5 p-1.5'
+  sm: 'h-4 w-4 -m-0.5 p-0.5',
+  md: 'h-5 w-5 -m-1 p-1',
+  lg: 'h-6 w-6 -m-1.5 p-1.5'
 }
 
 const removeIconSizeClasses = {
-  sm: 'size-2',
-  md: 'size-3',
-  lg: 'size-4'
+  sm: 'h-2 w-2',
+  md: 'h-3 w-3',
+  lg: 'h-4 w-4'
 }

package/src/components/container.tsx

@@ -71,9 +71,9 @@ const sizeClasses: Record<ContainerSize, string> = {
 }
 
 const elevationClasses: Record<string, string> = {
-  '0': 'bg-white ring-1 ring-neutral-950/5',
-  '-1': 'bg-neutral-50 ring-1 ring-neutral-950/5',
-  '-2': 'bg-neutral-100 ring-1 ring-neutral-950/10',
+  '0': 'bg-white border border-neutral-200',
+  '-1': 'bg-neutral-50 border border-neutral-200',
+  '-2': 'bg-neutral-100 border border-neutral-300',
   inherit: ''
 }
 

package/src/components/dialog.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import type { To, RelativeRoutingType } from 'react-router'
-import { useNavigate } from 'react-router'
 import { Modal, ModalOverlay, Dialog as AriaDialog, Heading } from 'react-aria-components'
 import { tw } from '../utils/tw'
 import { Button } from './button'
@@ -9,10 +7,8 @@ export type DialogProps = {
   children?: React.ReactNode
   title?: React.ReactNode
   isOpen?: boolean
-  close?:
-    | ((isOpen: boolean) => void)
-    | { to: To; replace?: boolean; relative?: RelativeRoutingType; reloadDocument?: boolean }
-  size?: 'xs' | 'sm' | 'lg'
+  onOpenChange?: (isOpen: boolean) => void
+  size?: 'sm' | 'lg'
   className?: string
   isDismissable?: boolean
   actions?: React.ReactNode
@@ -28,22 +24,12 @@ function Dialog_({
   children,
   title,
   isOpen = false,
-  close,
+  onOpenChange,
   size = 'sm',
   className,
   isDismissable = false,
   actions
 }: DialogProps) {
-  const navigate = useNavigate()
-
-  const onOpenChange = close
-    ? typeof close === 'function'
-      ? close
-      : (open: boolean) => {
-          if (!open) navigate(close.to, { replace: close.replace, relative: close.relative })
-        }
-    : undefined
-
   return (
     <ModalOverlay
       isOpen={isOpen}
@@ -51,7 +37,7 @@ function Dialog_({
       isDismissable={isDismissable}
       isKeyboardDismissDisabled={!isDismissable}
       className={tw(
-        'fixed inset-0 z-[2000] flex items-center justify-center bg-black/25 backdrop-blur-sm',
+        'fixed inset-0 z-[2000] flex items-center justify-center bg-black/70 backdrop-blur-lg',
         'transition-opacity duration-300 ease-in-out',
         'data-[entering]:opacity-0',
         'data-[exiting]:opacity-0'
@@ -60,7 +46,7 @@ function Dialog_({
       <Modal
         className={tw(
           'w-[calc(100%-4rem)] m-auto',
-          size === 'lg' ? 'max-w-[1080px]' : size === 'xs' ? 'max-w-[400px]' : 'max-w-[640px]',
+          size === 'lg' ? 'max-w-[1080px]' : 'max-w-[640px]',
           'transition-all duration-300 ease-in-out',
           'data-[entering]:scale-95 data-[entering]:opacity-0',
           'data-[exiting]:scale-95 data-[exiting]:opacity-0'
@@ -68,7 +54,7 @@ function Dialog_({
       >
         <AriaDialog
           className={tw(
-            'w-full max-h-[calc(100vh-6rem)] bg-white shadow-xl ring-1 ring-black/5 outline-none rounded-xl',
+            'w-full max-h-[calc(100vh-6rem)] bg-white shadow-xl outline-none rounded-lg',
             'flex flex-col overflow-x-hidden overflow-y-auto',
             className
           )}
@@ -77,7 +63,7 @@ function Dialog_({
             <DialogContext.Provider value={{ close }}>
               <div className="flex items-start justify-between gap-4 pt-6 px-6">
                 {title ? (
-                  <Heading slot="title" className="flex-1 text-lg font-semibold text-neutral-900">
+                  <Heading slot="title" className="flex-1 text-xl font-semibold text-neutral-900">
                     {title}
                   </Heading>
                 ) : (

package/src/components/disclosure.tsx

@@ -85,7 +85,7 @@ function DisclosureHeader({
           name="chevron-right"
           className={tw(
             'shrink-0 transition-transform duration-200 ease-in-out',
-            size === 'md' || size === 'lg' ? 'size-4' : 'size-3',
+            size === 'md' || size === 'lg' ? 'w-4 h-4' : 'w-3 h-3',
             isExpanded && 'rotate-90',
             isDisabled ? 'text-neutral-300' : 'text-neutral-500'
           )}

package/src/components/drawer.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import type { To, RelativeRoutingType } from 'react-router'
-import { useNavigate } from 'react-router'
 import { Drawer as VaulDrawer } from 'vaul'
 import { tw } from '../utils/tw'
 
@@ -8,9 +6,7 @@ export type DrawerProps = {
   children?: React.ReactNode
   title?: React.ReactNode
   isOpen?: boolean
-  close?:
-    | ((isOpen: boolean) => void)
-    | { to: To; replace?: boolean; relative?: RelativeRoutingType; reloadDocument?: boolean }
+  onOpenChange?: (isOpen: boolean) => void
   size?: 'sm' | 'md' | 'lg'
   className?: string
   isDismissable?: boolean
@@ -23,7 +19,7 @@ export function Drawer({
   children,
   title,
   isOpen = false,
-  close,
+  onOpenChange,
   size = 'md',
   className,
   isDismissable = true,
@@ -31,20 +27,10 @@ export function Drawer({
   actions,
   contentsContainerClassName
 }: DrawerProps) {
-  const navigate = useNavigate()
-
-  const onOpenChange = close
-    ? typeof close === 'function'
-      ? close
-      : (open: boolean) => {
-          if (!open) navigate(close.to, { replace: close.replace, relative: close.relative })
-        }
-    : undefined
-
   return (
     <VaulDrawer.Root open={isOpen} onOpenChange={onOpenChange} direction={position} dismissible={isDismissable}>
       <VaulDrawer.Portal>
-        <VaulDrawer.Overlay className="fixed inset-0 z-49 bg-black/25 backdrop-blur-sm" />
+        <VaulDrawer.Overlay className="fixed inset-0 z-49 bg-black/70 backdrop-blur-lg" />
         <VaulDrawer.Content
           className={tw(
             'flex h-auto flex-col text-sm group/drawer-content fixed z-50',
@@ -64,7 +50,7 @@ export function Drawer({
           {isDismissable ? (
             <div
               className={tw(
-                'absolute bg-neutral-300 rounded-full shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block',
+                'absolute bg-neutral-200 rounded-full shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block',
                 'group-data-[vaul-drawer-direction=left]/drawer-content:h-25 group-data-[vaul-drawer-direction=left]/drawer-content:w-1 group-data-[vaul-drawer-direction=left]/drawer-content:right-2 group-data-[vaul-drawer-direction=left]/drawer-content:top-[calc(50%-50px)]',
                 'group-data-[vaul-drawer-direction=right]/drawer-content:h-25 group-data-[vaul-drawer-direction=right]/drawer-content:w-1 group-data-[vaul-drawer-direction=right]/drawer-content:left-2 group-data-[vaul-drawer-direction=right]/drawer-content:top-[calc(50%-50px)]',
                 'group-data-[vaul-drawer-direction=top]/drawer-content:w-25 group-data-[vaul-drawer-direction=top]/drawer-content:h-1 group-data-[vaul-drawer-direction=top]/drawer-content:bottom-2 group-data-[vaul-drawer-direction=top]/drawer-content:left-[calc(50%-50px)]',
@@ -73,7 +59,7 @@ export function Drawer({
             />
           ) : null}
 
-          <div className="bg-white size-full pt-6 px-6 pb-6 rounded-xl shadow-xl ring-1 ring-black/5">
+          <div className="bg-white size-full pt-6 px-6 pb-6 rounded-md shadow-xl">
             <div className="flex items-start justify-between gap-4 pb-5">
               {title ? (
                 <VaulDrawer.Title className="flex-1 text-xl font-semibold text-neutral-900">{title}</VaulDrawer.Title>

package/src/components/form.tsx

@@ -1,20 +1,19 @@
-import { forwardRef } from 'react'
 import {
   type FormProps as ReactRouterFormProps,
   Form as ReactRouterForm,
   data,
   type ClientActionFunctionArgs
 } from 'react-router'
-import { HeadlessForm, type StandardSchema, type ParseFormDataOptions, type ParseFormDataResult } from '@maestro-js/form'
+import { HeadlessForm } from '@maestro-js/form'
 import { serverOnly$ } from 'vite-env-only/macros'
 
-const _Form = forwardRef<HTMLFormElement, ReactRouterFormProps>(function Form({ children, ...props }, ref) {
+function _Form({ children, ...props }: ReactRouterFormProps) {
   return (
-    <HeadlessForm as={ReactRouterForm} ref={ref} {...props}>
+    <HeadlessForm as={ReactRouterForm} {...props}>
       {children}
     </HeadlessForm>
   )
-})
+}
 
 export const Form = Object.assign(_Form, {
   HiddenInput: HeadlessForm.HiddenInput,
@@ -24,28 +23,7 @@ export const Form = Object.assign(_Form, {
   useTopLevelFormValidation: HeadlessForm.useTopLevelFormValidation,
   useReset: HeadlessForm.useReset,
   clientSafeParse: HeadlessForm.parseFormDataClientSide,
-  serverSafeParse<T>(
-    schema: StandardSchema<T, T>,
-    formData: FormData | Promise<FormData>,
-    options?: {
-      handleFile: ParseFormDataOptions<T>['handleFile']
-    }
-  ): Promise<ParseFormDataResult<T>> {
-    return HeadlessForm.parseFormData(schema, formData, {
-      ...options,
-      jsonSchemaLibraryOptions: {
-        unrepresentable: 'any',
-        override: (ctx) => {
-          const meta = ctx.zodSchema.meta()
-          const custom = meta?.jsonSchema
-
-          if (custom && typeof custom === 'object') {
-            Object.assign(ctx.jsonSchema, custom)
-          }
-        }
-      }
-    })
-  },
+  serverSafeParse: HeadlessForm.parseFormData,
   validationError: serverOnly$(validationError) as typeof validationError,
   customValidationError: serverOnly$(customValidationError) as typeof customValidationError,
   composeValidators: HeadlessForm.composeValidators,

package/src/components/helpers/form-field.tsx

@@ -85,16 +85,17 @@ const FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(
       <Group
         ref={ref}
         className={tw(
-          'relative overflow-hidden ring-1 shadow-sm transition-all duration-200 max-w-96',
-          'focus-within:outline-2 focus-within:-outline-offset-1',
+          'relative overflow-hidden border transition-all duration-200 max-w-96',
+          'focus-within:ring-1',
           shape,
-          disabled && 'ring-neutral-200 bg-neutral-50 text-neutral-400 shadow-none cursor-not-allowed',
-          opts.isInvalid && 'ring-negative-300 bg-negative-50 focus-within:outline-negative-500',
-          opts.hasWarning && 'ring-notice-300 bg-notice-50 focus-within:outline-notice-500',
+          disabled && 'border-neutral-100 bg-neutral-50 text-neutral-400 cursor-not-allowed',
+          opts.isInvalid && 'border-negative-200 bg-negative-50 focus-within:border-negative-500 focus-within:ring-negative-500/20',
+          opts.hasWarning &&
+            'border-notice-200 bg-notice-50 focus-within:border-notice-500 focus-within:ring-notice-500/20',
           !opts.isInvalid &&
             !opts.hasWarning &&
             !disabled &&
-            'ring-black/10 hover:ring-black/20 focus-within:outline-primary-500',
+            'border-neutral-200 hover:border-neutral-300 focus-within:border-primary-500 focus-within:ring-primary-500/20',
           className
         )}
         onClick={onClick}
@@ -113,7 +114,7 @@ const FieldInput = React.forwardRef<HTMLInputElement, InputProps>((props, ref) =
       className={composeTailwindRenderProps(
         props.className,
         tw(
-          'flex-1 bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm max-sm:text-base text-neutral-900 placeholder:text-neutral-400',
+          'flex-1 bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm text-neutral-900 placeholder:text-neutral-400',
           (props.disabled || props.readOnly) && 'cursor-not-allowed'
         )
       )}

package/src/components/helpers/get-button-classes.ts

@@ -6,19 +6,19 @@ export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type ButtonShape = 'rectangle' | 'circle' | 'oval'
 
 const base =
-  'relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-150 cursor-default select-none [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 data-[disabled]:cursor-not-allowed'
+  'relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-all cursor-default select-none [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 data-[disabled]:cursor-not-allowed'
 
 const sizeClasses: Record<ButtonSize, string> = {
-  xs: 'h-7 min-w-14 px-2 text-xs',
-  sm: 'h-8 min-w-16 px-2.5 text-sm',
-  md: 'h-9 min-w-20 px-3 text-sm',
-  lg: 'h-10 min-w-24 px-4 text-base',
-  xl: 'h-12 min-w-28 px-5 text-base'
+  xs: 'h-7 min-w-14 px-2.5 text-xs',
+  sm: 'h-8 min-w-16 px-3 text-sm',
+  md: 'h-9 min-w-20 px-4 text-sm',
+  lg: 'h-10 min-w-24 px-5 text-base',
+  xl: 'h-12 min-w-28 px-6 text-base'
 }
 
 const shapeClasses: Record<ButtonShape, string> = {
   rectangle: 'rounded',
-  circle: 'rounded-full aspect-square px-0 min-w-0',
+  circle: 'rounded-full aspect-square px-0',
   oval: 'rounded-full'
 }
 
@@ -37,39 +37,39 @@ const variantColorClasses: Record<ButtonVariant, Record<ButtonColor, string>> =
   },
   outlined: {
     primary:
-      'bg-white ring-1 ring-inset ring-primary-300 text-primary-700 data-[hovered]:bg-primary-50 data-[hovered]:ring-primary-400 data-[pressed]:bg-primary-100 data-[pressed]:ring-primary-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
+      'bg-white ring-1 ring-inset ring-primary-300 text-primary-700 data-[hovered]:bg-primary-50 data-[hovered]:ring-primary-400 data-[pressed]:bg-primary-100 data-[pressed]:ring-primary-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
     negative:
-      'bg-white ring-1 ring-inset ring-negative-300 text-negative-700 data-[hovered]:bg-negative-50 data-[hovered]:ring-negative-400 data-[pressed]:bg-negative-100 data-[pressed]:ring-negative-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
+      'bg-white ring-1 ring-inset ring-negative-300 text-negative-700 data-[hovered]:bg-negative-50 data-[hovered]:ring-negative-400 data-[pressed]:bg-negative-100 data-[pressed]:ring-negative-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
     positive:
-      'bg-white ring-1 ring-inset ring-positive-300 text-positive-700 data-[hovered]:bg-positive-50 data-[hovered]:ring-positive-400 data-[pressed]:bg-positive-100 data-[pressed]:ring-positive-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
+      'bg-white ring-1 ring-inset ring-positive-300 text-positive-700 data-[hovered]:bg-positive-50 data-[hovered]:ring-positive-400 data-[pressed]:bg-positive-100 data-[pressed]:ring-positive-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
     notice:
-      'bg-white ring-1 ring-inset ring-notice-300 text-notice-700 data-[hovered]:bg-notice-50 data-[hovered]:ring-notice-400 data-[pressed]:bg-notice-100 data-[pressed]:ring-notice-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
+      'bg-white ring-1 ring-inset ring-notice-300 text-notice-700 data-[hovered]:bg-notice-50 data-[hovered]:ring-notice-400 data-[pressed]:bg-notice-100 data-[pressed]:ring-notice-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
     neutral:
-      'bg-white ring-1 ring-inset ring-neutral-300 text-neutral-700 data-[hovered]:bg-neutral-50 data-[hovered]:ring-neutral-400 data-[pressed]:bg-neutral-100 data-[pressed]:ring-neutral-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent'
+      'bg-white ring-1 ring-inset ring-neutral-300 text-neutral-700 data-[hovered]:bg-neutral-50 data-[hovered]:ring-neutral-400 data-[pressed]:bg-neutral-100 data-[pressed]:ring-neutral-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none'
   },
   soft: {
     primary:
-      'bg-primary-100 text-primary-800 data-[hovered]:bg-primary-200 data-[pressed]:bg-primary-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-primary-100 text-primary-800 data-[hovered]:bg-primary-200 data-[pressed]:bg-primary-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
     negative:
-      'bg-negative-100 text-negative-800 data-[hovered]:bg-negative-200 data-[pressed]:bg-negative-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-negative-100 text-negative-800 data-[hovered]:bg-negative-200 data-[pressed]:bg-negative-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
     positive:
-      'bg-positive-100 text-positive-800 data-[hovered]:bg-positive-200 data-[pressed]:bg-positive-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-positive-100 text-positive-800 data-[hovered]:bg-positive-200 data-[pressed]:bg-positive-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
     notice:
-      'bg-notice-100 text-notice-800 data-[hovered]:bg-notice-200 data-[pressed]:bg-notice-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-notice-100 text-notice-800 data-[hovered]:bg-notice-200 data-[pressed]:bg-notice-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
     neutral:
-      'bg-neutral-200 text-neutral-800 data-[hovered]:bg-neutral-300 data-[pressed]:bg-neutral-400 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400'
+      'bg-neutral-200 text-neutral-800 data-[hovered]:bg-neutral-300 data-[pressed]:bg-neutral-400 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400'
   },
   plain: {
     primary:
-      'bg-transparent text-primary-700 data-[hovered]:bg-primary-50 data-[pressed]:bg-primary-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-transparent text-primary-700 data-[hovered]:bg-primary-50 data-[pressed]:bg-primary-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
     negative:
-      'bg-transparent text-negative-700 data-[hovered]:bg-negative-50 data-[pressed]:bg-negative-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-transparent text-negative-700 data-[hovered]:bg-negative-50 data-[pressed]:bg-negative-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
     positive:
-      'bg-transparent text-positive-700 data-[hovered]:bg-positive-50 data-[pressed]:bg-positive-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-transparent text-positive-700 data-[hovered]:bg-positive-50 data-[pressed]:bg-positive-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
     notice:
-      'bg-transparent text-notice-700 data-[hovered]:bg-notice-50 data-[pressed]:bg-notice-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
+      'bg-transparent text-notice-700 data-[hovered]:bg-notice-50 data-[pressed]:bg-notice-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
     neutral:
-      'bg-transparent text-neutral-700 data-[hovered]:bg-neutral-50 data-[pressed]:bg-neutral-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400'
+      'bg-transparent text-neutral-700 data-[hovered]:bg-neutral-50 data-[pressed]:bg-neutral-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400'
   }
 }
 
@@ -105,7 +105,7 @@ const toggledVariantColorClasses: Record<ButtonVariant, Record<ButtonColor, stri
 }
 
 const focusClasses =
-  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-primary-600'
+  'data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-primary-600'
 
 export function getButtonClasses({
   variant = 'contained',

package/src/components/helpers/headless-button.tsx

@@ -27,7 +27,7 @@ export const HeadlessButton = React.forwardRef<
       {...props}
       {...(props.disabled || props['data-disabled'] ? { ['data-disabled']: true } : {})}
       {...((isPressed && !props.disabled) || props['data-pressed'] ? { ['data-pressed']: true } : {})}
-      aria-pressed={props['aria-pressed'] ?? (isPressed && !props.disabled)}
+      aria-pressed={isPressed && !props.disabled}
       ref={ref}
     />
   )

package/src/components/inline-alert.tsx

@@ -13,11 +13,11 @@ export type InlineAlertProps = {
 }
 
 const variantClasses = {
-  info: 'bg-info-50 text-info-800 border-info-200',
+  info: 'bg-info-500/10 text-info-500 border-info-500/20',
   positive: 'bg-positive-50 text-positive-800 border-positive-200',
   notice: 'bg-notice-50 text-notice-800 border-notice-200',
   negative: 'bg-negative-50 text-negative-800 border-negative-200',
-  neutral: 'bg-neutral-50 text-neutral-700 border-neutral-200'
+  neutral: 'bg-neutral-100 text-neutral-700 border-neutral-200'
 }
 
 const defaultIconNames = {
@@ -34,7 +34,7 @@ export function InlineAlert({ children, actions, variant, icon, className, title
   return (
     <div
       className={tw(
-        'rounded-lg border px-4 py-3 flex gap-3 items-start justify-between text-left',
+        'rounded-md border px-4 py-3 flex gap-3 items-start justify-between text-left',
         variantClasses[variant],
         className
       )}

package/src/components/labeled-value.tsx

@@ -158,7 +158,7 @@ export const LabeledValue = React.forwardRef<HTMLDivElement, LabeledValueProps>(
         <LabeledValueLabel
           id={actualLabelId}
           className={tw(
-            orientation === 'horizontal' ? 'shrink-0' : 'mb-1',
+            orientation === 'horizontal' ? 'flex-shrink-0' : 'mb-1',
             labelAlign === 'end' && 'text-right',
             labelClassName
           )}
@@ -474,7 +474,7 @@ export function LabeledValueLabel(props: React.ComponentProps<'label'>) {
   return (
     <label
       {...props}
-      className={tw('block uppercase text-xs tracking-wider font-medium text-neutral-500', props.className)}
+      className={tw('block uppercase text-xs tracking-widest font-normal text-neutral-400', props.className)}
     />
   )
 }