@waveso/ui 0.12.0 → 0.13.0

package/dist/badge.d.ts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "link" | "success" | "destructive" | "warning" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "outline" | "link" | "success" | "destructive" | "warning" | "secondary" | "ghost" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
 declare function Badge({

package/dist/badge.js

@@ -4,16 +4,16 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/badge.tsx
-const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5 [&>svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge", {
+const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:ps-1.5 has-data-[icon=inline-end]:pe-1.5 [&_svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/30 aria-invalid:border-destructive overflow-hidden group/badge", {
 	variants: { variant: {
 		default: "bg-primary text-white [a]:hover:bg-primary/80",
-		success: "bg-success/10 [a]:hover:bg-success/20 focus-visible:ring-success/50 text-success dark:bg-success/20",
-		destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20 focus-visible:ring-destructive/50 dark:bg-destructive/20",
-		warning: "bg-warning/10 text-warning [a]:hover:bg-warning/20 focus-visible:ring-warning/50 dark:bg-warning/20",
+		success: "bg-success text-contrast dark:text-foundation [a]:hover:bg-success/80",
+		destructive: "bg-destructive text-white [a]:hover:bg-destructive/80 [a]:focus-visible:ring-destructive/50",
+		warning: "bg-warning text-contrast dark:text-foundation [a]:hover:bg-warning/80",
 		secondary: "bg-secondary text-contrast [a]:hover:bg-secondary/80",
-		outline: "border-line text-contrast [a]:hover:bg-secondary [a]:hover:text-muted",
-		ghost: "hover:bg-secondary hover:text-muted dark:hover:bg-secondary/50",
-		link: "text-primary underline-offset-4 hover:underline"
+		outline: "border-edge bg-foundation [a]:hover:bg-secondary/80 [a]:hover:text-contrast dark:bg-edge/30",
+		ghost: "text-muted [a]:hover:bg-secondary/80",
+		link: "text-primary [a]:underline-offset-4 [a]:hover:underline"
 	} },
 	defaultVariants: { variant: "default" }
 });

package/dist/button.d.ts

@@ -6,8 +6,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
 declare function Button({

package/dist/input-group.d.ts

@@ -26,7 +26,7 @@ declare function InputGroupAddon({
   ...props
 }: InputGroupAddonProps): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+  size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupButton({
   className,

package/dist/item.d.ts

@@ -8,7 +8,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 //#region src/item.d.ts
 declare const itemVariants: (props?: ({
   variant?: "default" | "outline" | "muted" | null | undefined;
-  size?: "default" | "xs" | "sm" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const itemMediaVariants: (props?: ({
   variant?: "default" | "icon" | "image" | null | undefined;

package/dist/styles.css

@@ -36,6 +36,24 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * Squircle corners — progressive enhancement. `corner-shape` renders every
+ * `border-radius` as a continuous superellipse (iOS-style) instead of a plain
+ * circular arc: softer, friendlier. It composes with `border-radius` and
+ * respects borders / rings / shadows, and degrades to normal rounding where
+ * unsupported (Chrome 2025+ today; Safari/Firefox pending). Pills and circles
+ * opt back out — a squircled circle reads as an app icon, not an avatar. */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    corner-shape: squircle;
+  }
+  [class*="rounded-full"] {
+    corner-shape: round;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Themes — named by identity: Paper (light) · Graphite (dark) · Ink (dark)
  *
@@ -230,6 +248,16 @@
   --stagger-lg: 90ms;
 }
 
+/* A squircle reads tighter than a circular arc at the same radius, so where
+ * `corner-shape` is active we bump the radius to restore the intended roundness.
+ * Scoped via @supports — browsers without squircles keep the original values.
+ * Starting value; nudge by eye in Chrome. Feeds --radius-sm/md/lg (all calc off it). */
+@supports (corner-shape: squircle) {
+  :root {
+    --radius: 1rem;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Paper — the LIGHT theme, and the default. The single source for Paper's
  * per-theme tokens, shared by `:root` (the default) and `.paper` (explicit —

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [