@proteos/ui 0.56.0 → 0.57.0

package/src/components/select/select.tsx

@@ -116,8 +116,8 @@ export function Select<T extends Key>({
           'z-[1300]',
           'rounded-md border border-rule bg-surface p-1',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
           popoverClassName,
         )}
       >

package/src/components/time-field/time-field.tsx

@@ -78,7 +78,7 @@ export function TimeField<T extends TimeValue = TimeValue>({
               'data-[placeholder]:text-ink-4',
               'data-[type=literal]:text-ink-4',
               // segment focus treatment: indigo fill, paper text
-              'data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]',
+              'data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]',
               'data-[disabled]:cursor-not-allowed',
             )}
           />

package/src/components/toast/toast.tsx

@@ -45,8 +45,8 @@ export const toastStyles = tv({
       'rounded-lg border border-rule bg-surface shadow-float',
       'px-3.5 py-3 outline-none',
       'focus-visible:shadow-focus',
-      'entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-2 entering:duration-200',
-      'exiting:animate-out exiting:fade-out-0 exiting:duration-150',
+      'entering:animate-enter-slide-up',
+      'exiting:animate-exit-fade',
     ],
     icon: 'size-4 shrink-0 mt-0.5',
     title: 'font-sans text-[13px] font-medium leading-[1.4] text-ink',

package/src/components/tooltip/tooltip.tsx

@@ -46,8 +46,8 @@ export function Tooltip({ className, offset = 6, ...props }: TooltipProps) {
           'rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]',
           'px-2.5 py-1.5',
           'font-mono text-[11.5px] text-ink-2',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1 entering:duration-150',
-          'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-fade',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/styles.css

@@ -14,6 +14,18 @@
    to *this* file. */
 @source "./components/**/*.{ts,tsx}";
 
+/* React Aria state variants. RAC exposes interaction state as data-* attributes
+   (pointer-correct: no sticky :hover on touch; press follows usePress). Same names
+   as tailwindcss-react-aria-components, without the dependency. `focus-visible:`
+   and `disabled:` stay core. Order matters: `selected` is declared after `hovered`
+   so a selected segment's fill wins over its hover fill at equal specificity. */
+@custom-variant hovered (&[data-hovered]);
+@custom-variant pressed (&[data-pressed]);
+@custom-variant selected (&[data-selected]);
+@custom-variant focused (&[data-focused]);
+@custom-variant entering (&[data-entering]);
+@custom-variant exiting (&[data-exiting]);
+
 /* ==========================================================
    PROTEOS · INDIGO — design tokens
    Mirrors Proteos Design System v0.1 (spec: revision 2026.04.24).
@@ -37,6 +49,8 @@
   --color-surface: #ffffff;
   --color-surface-2: #f0f0f2;
   --color-surface-3: #e5e5e9;
+  /* Deepest recessed step — hover on gray fills (muted buttons). */
+  --color-surface-4: #d9d9df;
 
   /* Ink — indigo-tinted slate */
   --color-ink: #1a1d2b;
@@ -124,6 +138,17 @@
      status icons. Soft ease, no overshoot (nothing bounces). */
   --animate-status-pop: status-pop var(--duration-slow) var(--ease-out-soft) both;
 
+  /* Overlay motion — own keyframes. tw-animate-css was never installed, so the
+     `animate-in fade-in-0 …` strings compiled to nothing. `both` holds the end
+     frame while RAC keeps the element in data-exiting until unmount. */
+  --animate-enter-fade: enter-fade var(--duration-fast) ease both;
+  --animate-enter-slide-down: enter-slide-down var(--duration-fast) ease both;
+  --animate-enter-slide-up: enter-slide-up var(--duration-base) ease both;
+  --animate-enter-zoom: enter-zoom var(--duration-fast) ease both;
+  --animate-exit-fade: exit-fade 100ms ease both;
+  --animate-exit-slide-up: exit-slide-up 100ms ease both;
+  --animate-exit-zoom: exit-zoom 100ms ease both;
+
 }
 
 @keyframes indeterminate-progress {
@@ -149,6 +174,37 @@
   }
 }
 
+@keyframes enter-fade {
+  from { opacity: 0; }
+}
+@keyframes enter-slide-down {
+  from { opacity: 0; transform: translateY(-4px); }
+}
+@keyframes enter-slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+}
+@keyframes enter-zoom {
+  from { opacity: 0; transform: scale(0.95); }
+}
+@keyframes exit-fade {
+  to { opacity: 0; }
+}
+@keyframes exit-slide-up {
+  to { opacity: 0; transform: translateY(-4px); }
+}
+@keyframes exit-zoom {
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-entering],
+  [data-exiting],
+  [class*="animate-enter-"],
+  [class*="animate-exit-"] {
+    animation: none;
+  }
+}
+
 /* Raw variables (non-color) for direct component consumption.
    Tailwind v4 mirrors @theme into :root for colors/radii/shadows, but we
    also expose spacing tokens here for components that need raw var() access. */
@@ -201,6 +257,7 @@
   --color-surface: #f2f0ea;
   --color-surface-2: #e7e4db;
   --color-surface-3: #dcd8cc;
+  --color-surface-4: #d0ccbf;
 
   --color-ink: #1a1d2b;
   --color-ink-2: #353a4b;
@@ -240,6 +297,7 @@
   --color-surface: #191c24;
   --color-surface-2: #222633;
   --color-surface-3: #2c3140;
+  --color-surface-4: #363b4c;
 
   --color-ink: #e9eaf0;
   --color-ink-2: #c5c8d4;

package/dist/chunk-IKAX76MB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["AriaButton","tv","jsx"],"mappings":"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","file":"chunk-IKAX76MB.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    'font-mono tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      primary: ['bg-ink text-surface border-ink', 'hover:bg-accent-ink hover:border-accent-ink'],\n      // Hover uses accent-2 — the token DESIGN.md reserves for \"hover on\n      // accent\". accent-ink is a text-on-tinted-surface color and flips\n      // light in dark mode, so it can't double as a hover fill here.\n      accent: [\n        'bg-accent text-[#f0efe8] border-accent',\n        'hover:bg-accent-2 hover:border-accent-2',\n      ],\n      secondary: ['bg-transparent text-ink border-ink', 'hover:bg-ink hover:text-surface'],\n      ghost: [\n        'bg-bg text-ink-2 border-rule-strong',\n        'hover:bg-surface-2 hover:text-ink hover:border-ink-4',\n      ],\n      // Transparent at rest, paper-fill on hover. The toolbar / sidebar\n      // register — pairs with `size=\"icon-md\"` for top-bar icon buttons.\n      subtle: ['bg-transparent text-ink-3 border-transparent', 'hover:bg-surface-2 hover:text-ink'],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hover:text-ink hover:border-b-ink',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded legacy treatment.\n    // The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}

package/dist/chunk-MWAXK66H.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["twMerge","clsx","tv","jsx","AriaButton"],"mappings":"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","file":"chunk-MWAXK66H.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    'font-mono tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      primary: ['bg-ink text-surface border-ink', 'hover:bg-accent-ink hover:border-accent-ink'],\n      // Hover uses accent-2 — the token DESIGN.md reserves for \"hover on\n      // accent\". accent-ink is a text-on-tinted-surface color and flips\n      // light in dark mode, so it can't double as a hover fill here.\n      accent: [\n        'bg-accent text-[#f0efe8] border-accent',\n        'hover:bg-accent-2 hover:border-accent-2',\n      ],\n      secondary: ['bg-transparent text-ink border-ink', 'hover:bg-ink hover:text-surface'],\n      ghost: [\n        'bg-bg text-ink-2 border-rule-strong',\n        'hover:bg-surface-2 hover:text-ink hover:border-ink-4',\n      ],\n      // Transparent at rest, paper-fill on hover. The toolbar / sidebar\n      // register — pairs with `size=\"icon-md\"` for top-bar icon buttons.\n      subtle: ['bg-transparent text-ink-3 border-transparent', 'hover:bg-surface-2 hover:text-ink'],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hover:text-ink hover:border-b-ink',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded legacy treatment.\n    // The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}