diff --git a/apps/showcase/src/App.tsx b/apps/showcase/src/App.tsx
index 16142d1..4fef95e 100644
--- a/apps/showcase/src/App.tsx
+++ b/apps/showcase/src/App.tsx
@@ -2,8 +2,19 @@ import { useState } from "react";
import { Blocks, Home, Palette, Settings } from "lucide-react";
import {
Button,
+ Card,
+ CardContent,
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuTrigger,
LoadingScreen,
OnboardingFlow,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
Sidebar,
SidebarContent,
SidebarGroup,
@@ -143,6 +154,37 @@ export default function App() {
+
+
+
+
+
+ Right Click Me
+
+ item 1
+
+ item 2
+
+
+
+
+
+
+
+ Cool card
+
+
diff --git a/package.json b/package.json
index 213338c..d8a3dc1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@methanium/ui",
- "version": "0.0.19",
+ "version": "0.0.20",
"type": "module",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
diff --git a/src/theme/presets.ts b/src/theme/presets.ts
index 90ba68f..97d20c2 100644
--- a/src/theme/presets.ts
+++ b/src/theme/presets.ts
@@ -126,7 +126,7 @@ export const BUILT_IN_THEMES = defineThemes([
background-color: color-mix(in oklch, var(--secondary) 86%, var(--secondary-foreground));
}
:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"],
-:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"] {
+:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"]):not([data-slot="context-menu-item"])[data-variant="destructive"] {
background-clip: border-box;
border-color: transparent;
box-shadow: var(--tensamin-outline-shadow);
@@ -135,7 +135,7 @@ export const BUILT_IN_THEMES = defineThemes([
background-color: color-mix(in oklch, var(--primary) 10%, transparent);
box-shadow: var(--tensamin-subtle-shadow);
}
-:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"] {
+:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"]):not([data-slot="context-menu-item"])[data-variant="destructive"] {
background-color: color-mix(in oklch, var(--background) 86%, var(--destructive));
box-shadow: var(--tensamin-destructive-shadow);
color: var(--destructive);
@@ -168,6 +168,9 @@ export const BUILT_IN_THEMES = defineThemes([
border-color: transparent;
box-shadow: var(--tensamin-outline-shadow);
}
+:root[data-theme="tensamin"] [data-slot="card"] {
+ background-color: var(--card);
+}
:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"] {
background-clip: border-box;
}
@@ -600,7 +603,7 @@ export const BUILT_IN_THEMES = defineThemes([
:root.dark[data-theme="secret"] [data-slot="select-content"] {
border-color: var(--secret-border);
}
-:root[data-theme="secret"] [data-slot="select-item"]:is(:hover, :focus, [data-highlighted], [data-selected]) {
+:root[data-theme="secret"] :where([data-slot="select-item"], [data-slot="context-menu-item"]):is(:hover, :focus, [data-highlighted], [data-selected]) {
background-color: color-mix(in srgb, var(--popover) 72%, #0a0a0a 28%);
color: #ffe8b4;
}