@viliha/vui-ui 1.0.3 → 1.0.4

package/README.md

@@ -61,8 +61,8 @@ export function Example() {
 
 `avatar` · `badge` · `button` · `card` · `chart` (themed Recharts wrapper) ·
 `checkbox` · `dialog` · `confirm-dialog` · `dropdown-menu` · `input` · `menu` ·
-`select` · `table` · `record-view` (the full datatable) · plus the `utils`
-(`cn`) helper and the `theme.css` design tokens.
+`required-mark` · `select` · `table` · `record-view` (the full datatable) · plus
+the `utils` (`cn`) helper and the `theme.css` design tokens.
 
 ## Theming
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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",
@@ -42,6 +42,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run"
+  },
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
@@ -53,6 +59,8 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
@@ -60,14 +68,6 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "5.9.2",
-    "vitest": "^4.1.10",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
-  },
-  "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit",
-    "test": "vitest run"
+    "vitest": "^4.1.10"
   }
-}
+}

package/src/dialog.tsx

@@ -76,7 +76,9 @@ export function DialogHeader({
   children: React.ReactNode;
 }) {
   return (
-    <div className={cn("border-b border-border px-5 py-3", className)}>
+    <div
+      className={cn("border-b border-border bg-muted/40 px-5 py-3", className)}
+    >
       {children}
     </div>
   );
@@ -127,7 +129,7 @@ export function DialogFooter({
   return (
     <div
       className={cn(
-        "flex items-center justify-end gap-2 border-t border-border px-5 py-3",
+        "flex items-center justify-end gap-2 border-t border-border bg-muted/40 px-5 py-3",
         className,
       )}
     >

package/src/record-view.tsx

@@ -45,6 +45,7 @@ import {
 } from "./table";
 import { Dropdown, DropdownItem, DropdownLabel } from "./dropdown-menu";
 import { ConfirmDialog } from "./confirm-dialog";
+import { RequiredMark } from "./required-mark";
 import {
   downloadFile,
   parseCSV,
@@ -123,26 +124,6 @@ function fieldDefaultWidth<T>(field: RecordField<T>): number {
 /** Shared icon component type (all Radix icons share this shape). */
 export type IconType = typeof Circle;
 
-/** Mandatory-field marker — an asterisk icon (Radix has no asterisk glyph, so
-    it's an inline SVG) sized to the label text; no border chip (no width="15"). */
-function RequiredMark() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2.5}
-      strokeLinecap="round"
-      className="size-3.5 shrink-0 self-center text-destructive"
-      aria-label="required"
-    >
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5.5" y1="8.5" x2="18.5" y2="15.5" />
-      <line x1="18.5" y1="8.5" x2="5.5" y2="15.5" />
-    </svg>
-  );
-}
-
 export type PageMeta = { title: string; icon?: IconType };
 
 const PageChromeContext = React.createContext<{

package/src/required-mark.tsx

@@ -0,0 +1,22 @@
+/**
+ * Required-field marker — a small asterisk drawn as an inline SVG (viewBox, not
+ * width=15) so it isn't wrapped by the global icon-chip rule. Use next to a
+ * label to mark a mandatory field, consistently across tables and forms.
+ */
+export function RequiredMark() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      className="size-3.5 shrink-0 self-center text-destructive"
+      aria-label="required"
+    >
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5.5" y1="8.5" x2="18.5" y2="15.5" />
+      <line x1="18.5" y1="8.5" x2="5.5" y2="15.5" />
+    </svg>
+  );
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 VILIHA PTE. LTD.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.