@voila.dev/ui 1.1.9 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@voila.dev/ui",
-	"version": "1.1.9",
+	"version": "1.1.10",
 	"type": "module",
 	"description": "85 components, one convention. The floor everything else stands on.",
 	"license": "MIT",

package/src/components/ui/badge-variants.ts

@@ -16,9 +16,9 @@ export const badgeVariants = cva({
 			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 			secondary:
 				"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-			provider: "bg-provider text-provider-foreground [a]:hover:bg-provider/90",
-			organization:
-				"bg-organization text-organization-foreground [a]:hover:bg-organization/90",
+			brand: "bg-brand text-brand-foreground [a]:hover:bg-brand/90",
+			highlight:
+				"bg-highlight text-highlight-foreground [a]:hover:bg-highlight/90",
 			destructive:
 				"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
 			outline:
@@ -155,8 +155,8 @@ export const badgeColorForegroundClass: Record<BadgeColor, string> = {
 export const badgeVariantOptions = [
 	"default",
 	"secondary",
-	"provider",
-	"organization",
+	"brand",
+	"highlight",
 	"destructive",
 	"outline",
 	"ghost",

package/src/components/ui/button-variants.ts

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "#/lib/cva.ts";
  * tailwind-merge-configured `cva` (see `#/lib/cva.ts`).
  *
  * Variant colors map to the design tokens: `default` (primary, black),
- * `provider` (blue), `organization` (orange), plus the neutral/utility roles.
+ * `brand` (violet), `highlight` (teal), plus the neutral/utility roles.
  * `primary` is an alias of `default` for the marketing site, whose buttons
  * default to the `primary` variant name.
  *
@@ -18,7 +18,7 @@ import { cva, type VariantProps } from "#/lib/cva.ts";
 export const buttonVariants = cva({
 	base: "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 	variants: {
-		// Solid variants (default/primary/provider/organization) only hover when
+		// Solid variants (default/primary/brand/highlight) only hover when
 		// rendered as an anchor ([a]:hover) - a plain <button> is usually the
 		// page's primary action and gets its feedback from active:translate-y-px
 		// instead, so it stays inert under the cursor. The neutral/utility roles
@@ -29,9 +29,9 @@ export const buttonVariants = cva({
 			primary: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 			secondary:
 				"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-			provider: "bg-provider text-provider-foreground [a]:hover:bg-provider/90",
-			organization:
-				"bg-organization text-organization-foreground [a]:hover:bg-organization/90",
+			brand: "bg-brand text-brand-foreground [a]:hover:bg-brand/90",
+			highlight:
+				"bg-highlight text-highlight-foreground [a]:hover:bg-highlight/90",
 			outline:
 				"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
 			ghost:
@@ -79,8 +79,8 @@ export const buttonVariantOptions = [
 	"default",
 	"primary",
 	"secondary",
-	"provider",
-	"organization",
+	"brand",
+	"highlight",
 	"outline",
 	"ghost",
 	"destructive",

package/src/components/ui/formatted-input.tsx

@@ -3,12 +3,12 @@ import * as React from "react";
 import { Input } from "#/components/ui/input.tsx";
 
 /**
- * Digit masks for the French identifiers the apps collect. `#` is a digit
+ * Ready-made digit masks for common identifier fields. `#` is a digit
  * slot; any other character is a literal separator inserted while typing.
  */
-const rppsMask = "###########";
-const siretMask = "### ### ### #####";
-const frenchPhoneMask = "## ## ## ## ##";
+const idNumberMask = "###########";
+const businessIdMask = "### ### ### #####";
+const phoneMask = "## ## ## ## ##";
 
 function countDigitSlots(mask: string): number {
 	let count = 0;
@@ -128,7 +128,7 @@ type FormattedInputProps = Omit<
 	React.ComponentProps<typeof Input>,
 	"value" | "defaultValue" | "onValueChange" | "type"
 > & {
-	/** Digit mask, e.g. `"### ### ### #####"` for SIRET. `#` marks a digit slot. */
+	/** Digit mask, e.g. `"### ### ### #####"` for a business id. `#` marks a digit slot. */
 	mask: string;
 	/** Raw digits (unformatted). */
 	value?: string;
@@ -211,9 +211,9 @@ function FormattedInput({
 
 export {
 	applyMask,
+	businessIdMask,
 	FormattedInput,
 	type FormattedInputProps,
-	frenchPhoneMask,
-	rppsMask,
-	siretMask,
+	idNumberMask,
+	phoneMask,
 };

package/src/components/ui/profile-header.tsx

@@ -8,18 +8,18 @@ import {
 import { getInitials } from "#/components/ui/user-avatar.tsx";
 import { cn } from "#/lib/utils.ts";
 
-type ProfileTheme = "provider" | "organization";
+type ProfileTheme = "brand" | "highlight";
 
 // `theme` coordinates the themed children (cover gradient, avatar ring) off
 // the `data-theme` attribute their group root emits.
 
 /** Themed cover gradient used when no `coverImage` is supplied. */
 const coverGradientClasses =
-	"bg-gradient-to-br group-data-[theme=organization]/profile-header-cover:from-organization group-data-[theme=organization]/profile-header-cover:via-organization/80 group-data-[theme=organization]/profile-header-cover:to-organization/40 group-data-[theme=provider]/profile-header-cover:from-provider group-data-[theme=provider]/profile-header-cover:via-provider/80 group-data-[theme=provider]/profile-header-cover:to-provider/40";
+	"bg-gradient-to-br group-data-[theme=highlight]/profile-header-cover:from-highlight group-data-[theme=highlight]/profile-header-cover:via-highlight/80 group-data-[theme=highlight]/profile-header-cover:to-highlight/40 group-data-[theme=brand]/profile-header-cover:from-brand group-data-[theme=brand]/profile-header-cover:via-brand/80 group-data-[theme=brand]/profile-header-cover:to-brand/40";
 
 /** Ring color that frames the overlapping avatar, matched to the theme. */
 const avatarRingClasses =
-	"group-data-[theme=organization]/profile-header:ring-organization/20 group-data-[theme=provider]/profile-header:ring-provider/20";
+	"group-data-[theme=highlight]/profile-header:ring-highlight/20 group-data-[theme=brand]/profile-header:ring-brand/20";
 
 type ProfileHeaderAvatar = { src?: string; name?: string };
 
@@ -36,7 +36,7 @@ function isAvatarDescriptor(
 /** Cover band — renders a `coverImage` (node or src) or a themed gradient. */
 function ProfileHeaderCover({
 	coverImage,
-	theme = "provider",
+	theme = "brand",
 	className,
 	children,
 	...props
@@ -78,7 +78,7 @@ function ProfileHeaderCover({
 }
 
 /**
- * Hero band for a provider or organization profile: a themed cover, an
+ * Hero band for a freelancer or client profile: a themed cover, an
  * overlapping circular avatar, name + optional headline, a trust-badge row
  * and a right-aligned actions slot. Composable — the cover/body sub-parts are
  * exported so consumers can rebuild a custom hero when needed.
@@ -88,7 +88,7 @@ function ProfileHeader({
 	headline,
 	coverImage,
 	avatar,
-	theme = "provider",
+	theme = "brand",
 	badges,
 	actions,
 	className,