@viliha/vui-ui 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/src/button.tsx

@@ -23,7 +23,7 @@ const NEUTRAL =
 const VARIANTS: Record<ButtonVariant, string> = {
   default: NEUTRAL,
   primary:
-    "border border-transparent bg-[var(--button-primary)] text-[var(--button-primary-foreground)] shadow-[var(--button-shadow)] hover:bg-[var(--button-primary-hover)] [&_svg]:border-white/30",
+    "border border-transparent bg-[var(--button-primary)] text-[var(--button-primary-foreground)] shadow-[var(--button-shadow)] hover:bg-[var(--button-primary-hover)] [&_svg]:border-[var(--button-primary-hover)]",
   secondary: NEUTRAL,
   outline: NEUTRAL,
   ghost: "hover:bg-accent hover:text-accent-foreground",

package/src/dropdown-menu.tsx

@@ -14,6 +14,9 @@ interface DropdownProps {
   ariaLabel?: string;
   /** Render the trigger as a compact toolbar button (default) or a plain one. */
   active?: boolean;
+  /** Extra classes on the label text — e.g. `hidden sm:inline` to hide it on
+   *  mobile so the trigger collapses to an icon-only button. */
+  labelClassName?: string;
 }
 
 /** Minimal click-to-open menu with outside-click + Escape to close. */
@@ -24,6 +27,7 @@ export function Dropdown({
   children,
   ariaLabel,
   active,
+  labelClassName,
 }: DropdownProps) {
   const [open, setOpen] = React.useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
@@ -62,7 +66,7 @@ export function Dropdown({
         )}
       >
         {icon}
-        {label}
+        {label && <span className={cn("truncate", labelClassName)}>{label}</span>}
       </button>
       {open && (
         <div

package/src/record-view.tsx

@@ -708,16 +708,6 @@ export function RecordView<T extends { id: RowId }>({
       <div className="flex h-12 items-center justify-between border-b border-border px-4">
         <div className="flex items-center gap-2">{titleLeading}</div>
         <div className="flex items-center gap-1.5">
-          <Button
-            variant="link"
-            size="sm"
-            onClick={addRow}
-            className="px-1 no-underline hover:no-underline"
-          >
-            <Plus className="size-4 text-emerald-500" />
-            <span>{singular}</span>
-          </Button>
-
           <input
             ref={importRef}
             type="file"
@@ -728,6 +718,7 @@ export function RecordView<T extends { id: RowId }>({
           />
           <Dropdown
             label="Import"
+            labelClassName="hidden sm:inline"
             icon={<Upload className="size-3.5 text-sky-500" />}
             align="end"
           >
@@ -751,6 +742,7 @@ export function RecordView<T extends { id: RowId }>({
 
           <Dropdown
             label="Export"
+            labelClassName="hidden sm:inline"
             icon={<Download className="size-3.5 text-violet-500" />}
             align="end"
           >
@@ -790,6 +782,11 @@ export function RecordView<T extends { id: RowId }>({
               Show all columns
             </DropdownItem>
           </Dropdown>
+
+          <Button variant="primary" size="sm" onClick={addRow} className="ml-1">
+            <Plus className="size-4" />
+            <span className="hidden sm:inline">{singular}</span>
+          </Button>
         </div>
       </div>