@revojs/ui 0.3.5 → 0.3.7

package/dist/components/badge.d.ts

@@ -1,5 +1,5 @@
 import type { IconComponent } from "./icon";
-export type BadgeVariant = "outline" | "secondary" | "primary" | "attention" | "success" | "destructive";
+export type BadgeVariant = "outline" | "secondary" | "primary" | "attention" | "success" | "info" | "destructive";
 export interface BadgeProps {
     label?: string;
     href?: string;

package/dist/components/link.d.ts

@@ -1,4 +1,4 @@
-export type LinkVariant = "primary" | "muted";
+export type LinkVariant = "primary" | "muted" | "attention" | "success" | "info" | "destructive";
 export interface LinkProps {
     href?: string;
     label?: string;

package/dist/module/index.d.ts

@@ -38,6 +38,10 @@ export interface UiTheme {
     successHover: TailwindColor;
     successActive: TailwindColor;
     successForeground: TailwindColor;
+    info: TailwindColor;
+    infoHover: TailwindColor;
+    infoActive: TailwindColor;
+    infoForeground: TailwindColor;
     border: TailwindColor;
     input: TailwindColor;
     ring: TailwindColor;

package/dist/module/index.js

@@ -62,6 +62,10 @@ var module_default = defineModule({
 			successHover: "green-800",
 			successActive: "green-900",
 			successForeground: "white",
+			info: "blue-700",
+			infoHover: "blue-800",
+			infoActive: "blue-900",
+			infoForeground: "white",
 			border: "zinc-200",
 			input: "zinc-200",
 			ring: "zinc-400"
@@ -99,6 +103,10 @@ var module_default = defineModule({
 			successHover: "green-500",
 			successActive: "green-600",
 			successForeground: "zinc-950",
+			info: "blue-400",
+			infoHover: "blue-500",
+			infoActive: "blue-600",
+			infoForeground: "zinc-950",
 			border: "zinc-700",
 			input: "zinc-700",
 			ring: "zinc-700"

package/dist/style.css

@@ -35,6 +35,10 @@
     --color-success-hover: var(--ui-success-hover);
     --color-success-active: var(--ui-success-active);
     --color-success-foreground: var(--ui-success-foreground);
+    --color-info: var(--ui-info);
+    --color-info-hover: var(--ui-info-hover);
+    --color-info-active: var(--ui-info-active);
+    --color-info-foreground: var(--ui-info-foreground);
     --color-border: var(--ui-border);
     --color-input: var(--ui-input);
     --color-ring: var(--ui-ring);

package/dist/vue/components/badge.vue

@@ -43,6 +43,7 @@ const variants: Record<BadgeVariant, string> = {
     primary: "bg-primary text-primary-foreground",
     attention: "text-attention ring-1 ring-attention/30 ring-inset",
     success: "text-success ring-1 ring-success/30 ring-inset",
+    info: "text-info ring-1 ring-info/30 ring-inset",
     destructive: "text-destructive ring-1 ring-destructive/30 ring-inset",
 };
 
@@ -52,6 +53,7 @@ const hovers: Record<BadgeVariant, string> = {
     primary: "hover:bg-primary-hover active:bg-primary-active",
     attention: "hover:bg-ghost-hover active:bg-ghost-active",
     success: "hover:bg-ghost-hover active:bg-ghost-active",
+    info: "hover:bg-ghost-hover active:bg-ghost-active",
     destructive: "hover:bg-ghost-hover active:bg-ghost-active",
 };
 </script>

package/dist/vue/components/card.vue

@@ -6,10 +6,11 @@
             direction="horizontal"
             align="center"
             justify="between"
+            padding="1"
             class="shrink-0 border-b border-border"
         >
             <slot name="header">
-                <span v-if="label" :id="labelId" class="min-w-0 flex-1 truncate px-5 py-3 text-sm/5 font-normal">
+                <span v-if="label" :id="labelId" class="min-w-0 flex-1 truncate px-4 py-3 text-sm/5 font-normal">
                     {{ label }}
                 </span>
             </slot>

package/dist/vue/components/checkbox.vue

@@ -3,7 +3,7 @@
         is="label"
         direction="horizontal"
         align="start"
-        gap="3"
+        gap="2"
         class="group select-none"
         :class="interactionVariants[interaction]"
     >
@@ -21,7 +21,7 @@
 
         <span
             aria-hidden="true"
-            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
+            class="flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
             :class="[
                 modelValue || indeterminate ? 'border-transparent bg-primary' : 'border-input bg-background',
                 disabled

package/dist/vue/components/entry.vue

@@ -21,7 +21,7 @@
             <slot name="prefix" />
         </Stack>
 
-        <Stack gap="0" class="min-w-0 flex-1">
+        <Stack gap="0" class="min-w-0 flex-1 px-1">
             <slot
                 ><span class="truncate">{{ label }}</span></slot
             >
@@ -42,8 +42,8 @@ const {
     href,
     label,
     active = false,
-    padding = "3",
-    gap = "3",
+    padding = "4",
+    gap = "1",
     direction = "horizontal",
     align = "center",
     justify = "between",

package/dist/vue/components/input.vue

@@ -5,7 +5,7 @@
         :for="controlAttributes.id ?? controlId"
         direction="horizontal"
         align="center"
-        gap="0"
+        gap="1"
         class="w-full cursor-text rounded-ui bg-secondary p-3 ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
         :class="[
             texts[text],

package/dist/vue/components/link.vue

@@ -27,5 +27,9 @@ const {
 const variants: Record<LinkVariant, string> = {
     primary: "text-foreground",
     muted: "text-muted-foreground",
+    attention: "text-attention",
+    success: "text-success",
+    info: "text-info",
+    destructive: "text-destructive",
 };
 </script>

package/dist/vue/components/markdown.vue

@@ -110,7 +110,7 @@ const elements = computed(() => ({
     a: ((_, { attrs, slots }) =>
         h(
             "a",
-            { ...attrs, ...external(attrs.href), class: "underline underline-offset-3" },
+            { ...attrs, ...external(attrs.href), class: "text-info underline-offset-3 hover:underline" },
             slots.default?.(),
         )) satisfies FunctionalComponent,
     img: ((_, { attrs }) =>
@@ -118,7 +118,7 @@ const elements = computed(() => ({
             ? h("img", { ...attrs, loading: "lazy", class: "inline max-w-full rounded-ui" })
             : h(
                   "a",
-                  { href: attrs.src, ...external(attrs.src), class: "underline underline-offset-3" },
+                  { href: attrs.src, ...external(attrs.src), class: "text-info underline-offset-3 hover:underline" },
                   String(attrs.alt || attrs.src),
               )) satisfies FunctionalComponent,
     ...components,

package/dist/vue/components/notification.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         :role="announce ? (variant === 'error' ? 'alert' : 'status') : undefined"
-        class="grid items-start gap-x-3 gap-y-3 rounded-ui border p-3 text-sm"
+        class="grid items-start gap-x-1 gap-y-3 rounded-ui border p-4 text-sm"
         :class="[
             variants[variant],
             icon === null ? 'grid-cols-[minmax(0,1fr)]' : 'grid-cols-[auto_minmax(0,1fr)]',
@@ -15,7 +15,7 @@
             </slot>
         </Stack>
 
-        <Stack gap="1" class="min-w-0">
+        <Stack gap="1" class="min-w-0 px-1">
             <p v-if="label" class="text-sm/5 font-medium">{{ label }}</p>
 
             <div v-if="subtext || $slots.default" class="text-sm/5 text-muted-foreground">
@@ -29,7 +29,7 @@
             align="center"
             gap="1"
             wrap
-            class="self-center"
+            class="self-center px-1"
             :class="icon === null ? '' : 'col-start-2 sm:col-start-auto'"
         >
             <slot name="actions" />
@@ -59,6 +59,6 @@ const variants: Record<NotificationVariant, string> = {
     error: "border-destructive/30 bg-destructive/5 text-destructive",
     attention: "border-attention/30 bg-attention/5 text-attention",
     success: "border-success/30 bg-success/5 text-success",
-    info: "border-border bg-muted/50 text-foreground",
+    info: "border-info/30 bg-info/5 text-info",
 };
 </script>

package/dist/vue/components/radio-group.vue

@@ -1,6 +1,6 @@
 <template>
     <fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0" :disabled="disabled">
-        <legend v-if="label" class="p-0 text-sm font-normal">
+        <legend v-if="label" class="mb-1 p-0 text-sm font-normal">
             {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
         </legend>
 

package/dist/vue/components/radio.vue

@@ -3,7 +3,7 @@
         is="label"
         direction="horizontal"
         align="start"
-        gap="3"
+        gap="2"
         class="group select-none"
         :class="interactionVariants[interaction]"
     >
@@ -20,7 +20,7 @@
 
         <span
             aria-hidden="true"
-            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
+            class="flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
             :class="[
                 modelValue === value ? 'border-primary bg-background' : 'border-input bg-background',
                 disabled ? '' : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',

package/dist/vue/components/select.vue

@@ -140,9 +140,10 @@
                         <span
                             v-if="section.group"
                             :id="`${listboxId}-group-${section.start}`"
-                            class="p-2 text-xs font-medium text-muted-foreground"
+                            class="text-xs font-medium text-muted-foreground"
+                            :class="groupSizes[size]"
                         >
-                            <span class="block truncate px-1">{{ section.group }}</span>
+                            <span class="block truncate" :class="groupInsets[size]">{{ section.group }}</span>
                         </span>
 
                         <Button
@@ -279,6 +280,18 @@ const sizes: Record<SelectSize, string> = {
     xs: "p-1",
 };
 
+const groupSizes: Record<SelectSize, string> = {
+    md: "p-2",
+    sm: "p-1",
+    xs: "p-1",
+};
+
+const groupInsets: Record<SelectSize, string> = {
+    md: "px-2",
+    sm: "px-2",
+    xs: "px-1",
+};
+
 const controlVariants: Record<SelectVariant, string> = {
     default: "bg-secondary ring-1 ring-input focus-within:ring-2 focus-within:ring-ring",
     ghost: "bg-transparent hover:bg-ghost-hover focus-within:bg-ghost-hover",

package/dist/vue/components/shell.vue

@@ -3,7 +3,7 @@
         <Stack direction="horizontal" align="center" gap="1" padding="1">
             <slot name="prefix" />
 
-            <h1 v-if="label || $slots.heading" class="min-w-0 flex-1 truncate p-3 text-sm font-semibold">
+            <h1 v-if="label || $slots.heading" class="min-w-0 flex-1 truncate px-4 py-3 text-sm font-semibold">
                 <slot name="heading">{{ label }}</slot>
             </h1>
             <template v-else-if="headingLabel">

package/dist/vue/components/stepper.vue

@@ -18,7 +18,7 @@
                     @click="select(item.value)"
                 >
                     <span
-                        class="shrink-0 rounded-ui p-1 text-xs/4 font-medium tabular-nums"
+                        class="flex min-w-5 shrink-0 items-center justify-center rounded-ui text-xs/5 font-medium tabular-nums"
                         :class="markers[state(index)]"
                     >
                         <Icon v-if="state(index) === 'complete'" :is="TickIcon" :size="16" />

package/dist/vue/components/switch.vue

@@ -2,15 +2,15 @@
     <Stack
         is="label"
         direction="horizontal"
-        align="center"
-        gap="3"
+        align="start"
+        gap="2"
         class="group select-none"
         :class="interactionVariants[interaction]"
     >
         <input v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
 
         <button
-            class="relative flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ui p-0.5 outline-ring focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
+            class="relative flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-ui p-0.5 outline-ring focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
             :class="[
                 variants[state],
                 disabled
@@ -25,7 +25,7 @@
             :disabled="disabled"
             @click="$emit('update:modelValue', !modelValue)"
         >
-            <span class="block size-5 rounded-ui shadow" :class="thumbVariants[state]" />
+            <span class="block size-4 rounded-ui shadow" :class="thumbVariants[state]" />
         </button>
 
         <Stack is="span" v-if="label || description || $slots.default" gap="0">
@@ -60,7 +60,7 @@ const interactionVariants: Record<ControlInteraction, string> = {
 };
 
 const thumbVariants: Record<SwitchState, string> = {
-    checked: "translate-x-5 bg-primary-foreground",
+    checked: "translate-x-4 bg-primary-foreground",
     unchecked: "translate-x-0 bg-foreground",
 };
 

package/dist/vue/components/tags-input.vue

@@ -30,7 +30,7 @@
                 v-model="draft"
                 type="text"
                 autocomplete="off"
-                class="min-w-24 flex-1 bg-transparent p-1 outline-none placeholder:opacity-50 pointer-coarse:text-[16px]/5"
+                class="min-w-24 flex-1 bg-transparent px-2 py-1 outline-none placeholder:opacity-50 pointer-coarse:text-[16px]/5"
                 :placeholder="modelValue.length === 0 ? placeholder : undefined"
                 :required="required && modelValue.length === 0"
                 :disabled="disabled"

package/dist/vue/components/textarea.vue

@@ -43,7 +43,7 @@ const resizes: Record<TextareaResize, string> = {
 };
 
 const variants: Record<TextareaVariant, string> = {
-    default: "bg-secondary p-3 ring-1 ring-input ring-inset focus-visible:outline-offset-[-2px]",
+    default: "bg-secondary px-4 py-3 ring-1 ring-input ring-inset focus-visible:outline-offset-[-2px]",
     plain: "bg-transparent p-0",
 };
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.3.5",
+    "version": "0.3.7",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -35,14 +35,14 @@
     },
     "dependencies": {
         "@iconify-json/hugeicons": "^1.2.35",
-        "@revojs/client": "0.3.5",
+        "@revojs/client": "0.3.7",
         "@tailwindcss/vite": "^4.3.3",
-        "revojs": "0.3.5",
+        "revojs": "0.3.7",
         "tailwindcss": "^4.3.3",
         "unplugin-icons": "^24.0.0"
     },
     "devDependencies": {
-        "@revojs/tsconfig": "0.3.5",
+        "@revojs/tsconfig": "0.3.7",
         "@vitejs/plugin-vue": "^6.0.9"
     },
     "optionalDependencies": {