fix(shadcn): isolate Nexus CSS vars with --nx- prefix + admin password reset endpoint

2026-06-11 10:06:53 +02:00
parent a538025049
commit b7b44494f0
59 changed files with 3267 additions and 1153 deletions
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+interface Props {
+  variant?: NonNullable<VariantProps<typeof badgeVariants>['variant']>
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+})
+</script>
+
+<template>
+  <span :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </span>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('rounded-xl border bg-card text-card-foreground shadow', props.class)">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  open?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const visible = ref(props.open)
+
+watch(
+  () => props.open,
+  (val) => {
+    visible.value = val
+  },
+)
+
+function close() {
+  emit('update:open', false)
+}
+
+function onOverlayClick() {
+  close()
+}
+
+defineExpose({ close })
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="fixed inset-0 z-50 flex items-center justify-center"
+      @click.self="onOverlayClick"
+    >
+      <!-- Overlay -->
+      <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" />
+
+      <!-- Content -->
+      <div
+        :class="
+          cn(
+            'relative z-50 w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
+            props.class,
+          )
+        "
+      >
+        <slot :close="close" />
+      </div>
+    </div>
+  </Teleport>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h2 :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h2>
+</template>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <input
+    :class="
+      cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  />
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  modelValue?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <select
+    :value="modelValue"
+    :disabled="disabled"
+    :class="
+      cn(
+        'flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+    @change="emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+  >
+    <slot />
+  </select>
+</template>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <textarea
+    :class="
+      cn(
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  />
+</template>
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { CheckCircle, XCircle, Info, X } from '@lucide/vue'
+import { useToast } from '../../composables/useToast'
+
+const { toasts, remove } = useToast()
+
+const typeConfig: Record<string, { icon: any; color: string; bg: string }> = {
+  success: {
+    icon: CheckCircle,
+    color: '#22c55e',
+    bg: 'rgba(34, 197, 94, 0.10)',
+  },
+  error: {
+    icon: XCircle,
+    color: '#ef4444',
+    bg: 'rgba(239, 68, 68, 0.10)',
+  },
+  info: {
+    icon: Info,
+    color: '#3b82f6',
+    bg: 'rgba(59, 130, 246, 0.10)',
+  },
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="toast-container" role="status" aria-live="polite">
+      <TransitionGroup name="toast">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          class="toast-item"
+          :style="{
+            '--toast-color': typeConfig[toast.type].color,
+            '--toast-bg': typeConfig[toast.type].bg,
+          }"
+        >
+          <div class="toast-icon-wrap">
+            <component :is="typeConfig[toast.type].icon" :size="18" />
+          </div>
+          <span class="toast-message">{{ toast.message }}</span>
+          <button class="toast-close" @click="remove(toast.id)" aria-label="Dismiss">
+            <X :size="14" />
+          </button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 400px;
+  pointer-events: none;
+}
+
+.toast-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px 12px 12px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--toast-color) 25%, transparent);
+  background: rgba(17, 20, 27, 0.92);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 color-mix(in srgb, var(--toast-color) 12%, transparent);
+  pointer-events: auto;
+  color: #e8eaf0;
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+
+.toast-icon-wrap {
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--toast-bg);
+  color: var(--toast-color);
+}
+
+.toast-message {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-close {
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #6b7385;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: all 0.15s;
+}
+.toast-close:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.06);
+  color: #e8eaf0;
+}
+
+/* Transition animations */
+.toast-enter-active {
+  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toast-leave-active {
+  transition: all 0.25s ease-in;
+}
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(60px) scale(0.92);
+}
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(60px) scale(0.92);
+}
+.toast-move {
+  transition: transform 0.3s ease;
+}
+</style>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
+import type { ButtonProps } from '.'
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'default',
+  size: 'default',
+  disabled: false,
+  type: 'button',
+})
+
+const classes = computed(() =>
+  cn(buttonVariants({ variant: props.variant, size: props.size }), props.class),
+)
+</script>
+
+<template>
+  <button :type="type" :disabled="disabled" :class="classes">
+    <slot />
+  </button>
+</template>
@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from 'vue'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+export interface ButtonProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}