@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260305.083323Z

package/src/core/components/shadcn/selectBox.tsx

@@ -301,7 +301,7 @@ export function SelectBox<T = any>({ options, optionLabel, value, onChange, addN
                                 className={clsx(
                                     "flex flex-col w-full rounded-md text-sm min-h-6 items-center justify-center truncate",
                                     !disabled && "",
-                                    isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
+                                    isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-2"
                                 )}
                             >
                                 {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}

package/src/core/components/shadcn/theme/ThemeSwitcher.tsx

@@ -18,17 +18,22 @@ export function ModeOption({ option, current, setTheme, icon }: ModeOptionProps)
   );
 }
 
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-  const theme = useTheme().theme
+interface ModeToggleProps {
+  /** Label shown to the left of the buttons. Defaults to "Theme". Pass `false` to hide. */
+  label?: string | false;
+  className?: string;
+}
+
+export function ModeToggle({ label = "Theme", className }: ModeToggleProps = {}) {
+  const { setTheme, theme } = useTheme()
 
   return (
-    <div className="flex justify-between px-2 items-center">
-      <p className="text-sm font-semibold">Theme</p>
+    <div className={className ?? (label ? "flex justify-between px-2 items-center" : "flex items-center gap-1")}>
+      {label && <p className="text-sm font-semibold">{label}</p>}
       <div className="flex gap-2">
-        <ModeOption current={theme} option="system" setTheme={setTheme} icon={<Computer className="text-muted" />} />
-        <ModeOption current={theme} option="light" setTheme={setTheme} icon={<Sun className="text-muted" />} />
-        <ModeOption current={theme} option="dark" setTheme={setTheme} icon={<Moon className="text-muted" />} />
+        <ModeOption current={theme} option="system" setTheme={setTheme} icon={<Computer />} />
+        <ModeOption current={theme} option="light" setTheme={setTheme} icon={<Sun />} />
+        <ModeOption current={theme} option="dark" setTheme={setTheme} icon={<Moon />} />
       </div>
     </div>
   )

package/src/core/components/shadcn/tooltip.tsx

@@ -30,7 +30,7 @@ const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & Reac
         style={{ zIndex: 100 }}
         className={cn(
           "max-w-[90vw]",
-          "z-50 overflow-hidden rounded-md bg-tooltips border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 overflow-hidden rounded-md bg-tooltips border border-border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}

package/src/css/base.css

@@ -0,0 +1,31 @@
+@layer base {
+  * {
+    @apply border-border;
+    box-sizing: border-box;
+  }
+
+  html {
+    height: 100%;
+  }
+
+  body {
+    @apply bg-background text-foreground selection:bg-blue-300 selection:text-blue-900;
+    min-height: 100%;
+    margin: 0;
+    padding: 0;
+    scrollbar-color: var(--color-muted) var(--color-background);
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;   /* IE and Edge */
+    scrollbar-width: none;      /* Firefox */
+  }
+}

package/src/css/color.css

@@ -0,0 +1,136 @@
+:root {
+  --background: oklch(1 0 0); /* White */
+  --foreground: oklch(0.145 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --tooltips: oklch(97% 0.014 254.604); /* Light Blue */
+
+  --primary: oklch(44.72% 0.193316 261.0044); /* Dark Blue */
+  --primary-background: oklch(99.26% 0.0105 196.99); /* Light Blue */
+
+  --secondary: oklch(0.205 0 0);
+  --secondary-background: oklch(0.97 0 0);
+
+  --muted: oklch(0.556 0 0);
+  --muted-background: oklch(0.97 0 0);
+
+  --destructive: oklch(50.5% 0.213 27.518); /* Dark Red */
+  --destructive-background: oklch(97.1% 0.013 17.38); /* Light Red */
+
+  --success: oklch(52.7% 0.154 150.069); /* Dark Green */
+  --success-background: oklch(98.2% 0.018 155.826); /* Light Green */
+
+  --attention: oklch(55.48% 0.12708 62.5245); /* Dark Yellow */
+  --attention-background: oklch(98.7% 0.026 102.212); /* Light Yellow */
+
+  --done: oklch(49.6% 0.265 301.924); /* Dark Purple */
+  --done-background: oklch(97.7% 0.014 308.299); /* Light Purple */
+
+  --info: oklch(48.8% 0.243 264.376); /* Dark Blue */
+  --info-background: oklch(97% 0.014 254.604); /* Light Blue */
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  --topnav-background: oklch(0.985 0 0);
+  --topnav-foreground: oklch(0.145 0 0);
+  --topnav-primary: oklch(0.205 0 0);
+  --topnav-primary-foreground: oklch(0.985 0 0);
+  --topnav-accent: oklch(0.97 0 0);
+  --topnav-accent-foreground: oklch(0.205 0 0);
+  --topnav-border: oklch(0.922 0 0);
+  --topnav-ring: oklch(0.708 0 0);
+
+  --preview: oklch(46.95% 0.233 303.17);
+  --staging: oklch(63.89% 0.103 201.59);
+  --development: oklch(44.30% 0.193 261.11);
+
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  --tooltips: oklch(70.7% 0.165 254.624); /* Mid Blue */
+
+  --primary: oklch(60.05% 0.1735 260.17); /* Mid Blue */
+  --primary-background: oklch(1 0 0); /* White */
+
+  --secondary: oklch(0.985 0 0);
+  --secondary-background: oklch(0.269 0 0);
+
+  --muted: oklch(0.708 0 0);
+  --muted-background: oklch(0.269 0 0); /* Dark Gray */
+
+  --destructive: oklch(70.4% 0.191 22.216); /* Mid Red */
+  --destructive-background: oklch(70.4% 0.191 22.216 / 0.2); /* Mid Red */
+
+  --success: oklch(79.2% 0.209 151.711); /* Mid Green */
+  --success-background: oklch(79.2% 0.209 151.711 / 0.2); /* Mid Green */
+
+  --attention: oklch(85.2% 0.199 91.936); /* Mid Yellow */
+  --attention-background: oklch(85.2% 0.199 91.936 / 0.2); /* Mid Yellow */
+
+  --done: oklch(71.4% 0.203 305.504); /* Mid Purple */
+  --done-background: oklch(71.4% 0.203 305.504 / 0.2); /* Mid Purple */
+
+  --info: oklch(70.7% 0.165 254.624); /* Mid Blue */
+  --info-background: oklch(70.7% 0.165 254.624 / 0.2); /* Mid Blue */
+
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  --topnav-background: oklch(0.205 0 0);
+  --topnav-foreground: oklch(0.985 0 0);
+  --topnav-primary: oklch(0.488 0.243 264.376);
+  --topnav-primary-foreground: oklch(0.985 0 0);
+  --topnav-accent: oklch(0.269 0 0);
+  --topnav-accent-foreground: oklch(0.985 0 0);
+  --topnav-border: oklch(0.269 0 0);
+  --topnav-ring: oklch(0.439 0 0);
+
+  --preview: oklch(46.95% 0.233 303.17);
+  --staging: oklch(63.89% 0.103 201.59);
+  --development: oklch(44.30% 0.193 261.11);
+
+}

package/src/css/custom-tooltips.css

@@ -0,0 +1,64 @@
+/* Custom styling for title attribute tooltips */
+button[title], a[title] {
+  position: relative !important;
+}
+
+button[title]::before, a[title]::before {
+  content: "";
+  display: none;
+}
+
+button[title]:hover::before, a[title]:hover::before {
+  content: attr(title);
+  display: block;
+  position: absolute;
+  top: -42px; /* Position tooltip above the element */
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 80px;
+  max-width: 200px;
+  padding: 6px 8px;
+  background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(100, 116, 139, 0.2); /* slate-400 with opacity */
+}
+
+/* Arrow for the tooltip */
+button[title]:hover::after, a[title]:hover::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -6px; /* Position arrow at the bottom of tooltip */
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent transparent rgba(15, 23, 42, 0.95) transparent; /* Arrow pointing down */
+  z-index: 1000;
+}
+
+/* Light mode specific styles */
+button[title]:hover::before, a[title]:hover::before {
+  background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
+  color: rgba(248, 250, 252, 1); /* slate-50 */
+}
+
+/* Dark mode adjustment */
+.dark button[title]:hover::before, .dark a[title]:hover::before {
+  background-color: rgba(30, 41, 59, 0.95); /* slate-800 with opacity */
+  color: rgba(248, 250, 252, 1); /* slate-50 */
+  border: 1px solid rgba(71, 85, 105, 0.4); /* slate-600 */
+}
+
+.dark button[title]:hover::after, .dark a[title]:hover::after {
+  border-color: transparent transparent rgba(30, 41, 59, 0.95) transparent;
+}

package/src/css/index.css

@@ -0,0 +1,27 @@
+/**
+ * Vertesia shared styles
+ *
+ * Import this file to get the full set of design tokens, theme bindings,
+ * utility overrides, tooltips, and base layer rules.
+ *
+ * Usage (apps with Vite alias @vertesia/ui → src/):
+ *   @import "@vertesia/ui/css/index.css";
+ *
+ * Usage (packages via exports):
+ *   @import "@vertesia/ui/styles.css";
+ *
+ * Granular imports:
+ *   @import "@vertesia/ui/css/color.css";
+ *   @import "@vertesia/ui/css/theme.css";
+ *
+ * Typography (.vprose) is opt-in since it requires @tailwindcss/typography:
+ *   @import "@vertesia/ui/css/typography.css" layer(base);
+ */
+
+@import "./color.css" layer(base);
+@import "./theme.css" layer(theme);
+@import "./custom-tooltips.css" layer(utilities);
+@import "./utilities.css";
+@import "./base.css";
+
+@custom-variant dark (&:is(.dark *));

package/src/css/theme.css

@@ -0,0 +1,86 @@
+@theme static {
+
+  --radius: 0.625rem;
+  --radius-xs: calc(var(--radius) - 8px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-tooltips: var(--tooltips);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-link: var(--primary);
+  --color-link-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-background: var(--secondary-background);
+
+  --color-muted: var(--muted);
+  --color-muted-background: var(--muted-background);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-background: var(--destructive-background);
+
+  --color-success: var(--success);
+  --color-success-background: var(--success-background);
+
+  --color-attention: var(--attention);
+  --color-attention-background: var(--attention-background);
+
+  --color-done: var(--done);
+  --color-done-background: var(--done-background);
+
+  --color-info: var(--info);
+  --color-info-background: var(--info-background);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-topnav: var(--topnav-background);
+  --color-topnav-foreground: var(--topnav-foreground);
+  --color-topnav-primary: var(--topnav-primary);
+  --color-topnav-primary-foreground: var(--topnav-primary-foreground);
+  --color-topnav-accent: var(--topnav-accent);
+  --color-topnav-accent-foreground: var(--topnav-accent-foreground);
+  --color-topnav-border: var(--topnav-border);
+  --color-topnav-ring: var(--topnav-ring);
+
+  --color-preview: var(--preview);
+  --color-staging: var(--staging);
+  --color-development: var(--development);
+
+  --font-sans:
+    Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    Fira mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+}

package/src/css/typography.css

@@ -0,0 +1,88 @@
+.vprose {
+    @apply prose text-foreground max-w-none;
+}
+
+.vprose p {
+    @apply bg-transparent my-2;
+}
+
+.vprose a {
+    @apply text-info hover:text-info/80;
+}
+
+.vprose pre, .vprose code {
+    @apply !bg-muted text-muted my-2;
+}
+
+.vprose h1,
+.vprose h2,
+.vprose h3,
+.vprose h4,
+.vprose h5,
+.vprose h6 {
+    @apply text-foreground;
+}
+
+.vprose strong {
+    @apply text-foreground font-bold;
+}
+
+.vprose em {
+    @apply italic;
+}
+
+.vprose ul {
+    @apply my-3 pl-6 list-disc space-y-1;
+}
+
+.vprose ol {
+    @apply my-3 pl-6 list-decimal space-y-1;
+}
+
+.vprose li {
+    @apply text-mixer-foreground/50 my-2 pl-1;
+}
+
+.vprose blockquote {
+    @apply border-l-4 border-muted/30 dark:border-muted pl-4 italic text-muted my-3;
+}
+
+.vprose hr {
+    @apply border-muted/30 dark:border-muted my-4;
+}
+
+.vprose h1 {
+    @apply font-bold text-2xl my-2;
+}
+
+.vprose h2 {
+    @apply font-bold text-xl my-2;
+}
+
+.vprose h3 {
+    @apply font-bold text-lg my-2;
+}
+
+.vprose table {
+    @apply min-w-full border-collapse border border-muted/30 my-4;
+}
+
+.vprose th {
+    @apply border border-muted/30 bg-mixer-muted/50 px-4 py-2 text-left text-muted font-bold;
+}
+
+.vprose td {
+    @apply border border-muted/30 px-4 py-2 text-muted;
+}
+
+.vprose code {
+    @apply font-mono text-sm;
+}
+
+.vprose :not(pre) > code {
+    @apply px-1.5 py-0.5 rounded text-muted bg-muted/20 dark:bg-muted/30;
+}
+
+.vprose .code-language-indicator {
+    @apply text-xs px-3 py-1 rounded-t-md font-mono border-t border-l border-r -mb-2;
+}

package/src/css/utilities.css

@@ -0,0 +1,72 @@
+:root {
+    --mixer: oklch(1 0 0);
+  }
+  .dark {
+    --mixer: oklch(0 0 0);
+  }
+  @utility text-mixer-* {
+    color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 0.7%));
+  }
+
+  @utility text-disabled-* {
+    color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(50 * 0.7%));
+  }
+
+  @utility bg-* {
+    background-color: --value(--color-*-background, [*])
+  }
+
+  @utility bg-mixer-* {
+    background-color: color-mix(in oklab, --value(--color-*-background, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility border-* {
+    border-color: --value(--color-*, [*])
+  }
+
+  @utility border-mixer-* {
+    border-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+  @utility border-disabled-* {
+    border-color: color-mix(in oklab, --value(--color-*-background, [*]), var(--mixer) calc(50 * 0.7%));
+  }
+
+  @utility decoration-mixer-* {
+    text-decoration-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility outline-mixer-* {
+    outline-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility shadow-mixer-* {
+    --tw-shadow-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility inset-shadow-mixer-* {
+    --tw-inset-shadow-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility ring-mixer-* {
+    --tw-ring-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility inset-ring-mixer-* {
+    --tw-inset-ring-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility accent-mixer-* {
+    accent-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility caret-mixer-* {
+    caret-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility fill-mixer-* {
+    fill: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility stroke-mixer-* {
+    stroke: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }