@waveso/ui 0.12.0 → 0.14.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" | "link" | "outline" | "success" | "warning" | "secondary" | "ghost" | "destructive" | 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" | "link" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xs" | "icon" | "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

@@ -1,4 +1,5 @@
 import { Button } from "./button.js";
+import { Input } from "./input.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
@@ -11,7 +12,7 @@ type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size" |
   type?: "button" | "submit" | "reset";
 };
 type InputGroupTextProps = React.ComponentProps<"span">;
-type InputGroupInputProps = React.ComponentProps<"input">;
+type InputGroupInputProps = React.ComponentProps<typeof Input>;
 type InputGroupTextareaProps = React.ComponentProps<"textarea">;
 declare function InputGroup({
   className,
@@ -26,7 +27,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/input.d.ts

@@ -1,13 +1,19 @@
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/input.d.ts
-type InputProps = React.ComponentProps<typeof Input$1>;
+declare const inputVariants: (props?: ({
+  size?: "default" | "sm" | "lg" | "xs" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+type InputProps = Omit<React.ComponentProps<typeof Input$1>, "size"> & VariantProps<typeof inputVariants>;
 declare function Input({
   className,
   type,
+  size,
   ...props
 }: InputProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Input, type InputProps };
+export { Input, type InputProps, inputVariants };

package/dist/input.js

@@ -1,14 +1,25 @@
 import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-function Input({ className, type, ...props }) {
+const inputVariants = cva("dark:bg-edge/30 hover:bg-edge/50 dark:hover:bg-edge/50 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive disabled:bg-edge/50 dark:disabled:bg-edge/80 placeholder:text-soft flex w-full min-w-0 items-center overflow-hidden rounded-md border bg-transparent motion-color outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3", {
+	variants: { size: {
+		xs: "h-6 rounded-sm px-2 text-xs file:-ms-[5px] file:h-4",
+		sm: "h-8 px-2.5 text-base file:-ms-[7px] file:h-6 md:text-sm",
+		default: "h-9 px-3 text-base file:-ms-[9px] file:h-7 md:text-sm",
+		lg: "h-10 px-3.5 text-base file:-ms-[11px] file:h-8"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Input({ className, type, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		type,
 		"data-slot": "input",
-		className: cn("dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive disabled:bg-edge/50 dark:disabled:bg-edge/80 file:text-contrast placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-hidden file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		"data-size": size,
+		className: cn(inputVariants({ size }), className),
 		...props
 	});
 }
 //#endregion
-export { Input };
+export { Input, inputVariants };

package/dist/item.d.ts

@@ -8,10 +8,10 @@ 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;
+  variant?: "default" | "image" | "icon" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ItemGroupProps = React.ComponentProps<"div">;
 type ItemSeparatorProps = React.ComponentProps<typeof Separator>;

package/dist/styles.css

@@ -36,6 +36,27 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * 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.
+ * `::file-selector-button` is listed too — `*` doesn't match pseudo-elements,
+ * so the file-input button would otherwise stay round at the squircle radius. */
+@layer base {
+  *,
+  ::before,
+  ::after,
+  ::file-selector-button {
+    corner-shape: squircle;
+  }
+  [class*="rounded-full"] {
+    corner-shape: round;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Themes — named by identity: Paper (light) · Graphite (dark) · Ink (dark)
  *
@@ -230,6 +251,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/dist/toast.d.ts

@@ -7,7 +7,7 @@ import * as _$_base_ui_react0 from "@base-ui/react";
 //#region src/toast.d.ts
 declare const toastRootClass = "bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden";
 declare const toastIconVariants: (props?: ({
-  type?: "success" | "warning" | "loading" | "info" | "error" | null | undefined;
+  type?: "loading" | "success" | "info" | "warning" | "error" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: ({
   position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;

package/package.json

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