Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .rnd
Binary file not shown.
8,221 changes: 8,221 additions & 0 deletions composer.lock

Large diffs are not rendered by default.

2,767 changes: 1,357 additions & 1,410 deletions package-lock.json

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,25 @@
"eslint-plugin-vue": "^9.32.0",
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.1.0",
"prettier-plugin-tailwindcss": "^0.6.9",
"prettier-plugin-tailwindcss": "^0.6.11",
"typescript-eslint": "^8.23.0",
"vue-tsc": "^2.2.4"
},
"dependencies": {
"@inertiajs/vue3": "^2.0.0-beta.3",
"@tailwindcss/vite": "^4.1.3",
"@vitejs/plugin-vue": "^5.2.1",
"@vueuse/core": "^12.0.0",
"@vueuse/core": "^12.8.2",
"autoprefixer": "^10.4.20",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.0",
"lucide": "^0.468.0",
"lucide-vue-next": "^0.468.0",
"reka-ui": "^2.0.0",
"tailwind-merge": "^2.5.5",
"tailwindcss": "^3.4.1",
"reka-ui": "^2.2.0",
"tailwind-merge": "^3.2",
"tailwindcss": "^4.1.3",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.2.2",
"vite": "^6.2.0",
Expand Down
161 changes: 158 additions & 3 deletions resources/css/app.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,79 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

@plugin 'tailwindcss-animate';

@custom-variant dark (&:is(.dark *));

@theme {
--font-sans:
Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);

--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));

--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));

--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));

--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));

--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));

--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));

--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));

--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));

--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));

--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));

--color-sidebar: hsl(var(--sidebar-background));
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
--color-sidebar-primary: hsl(var(--sidebar-primary));
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
--color-sidebar-accent: hsl(var(--sidebar-accent));
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
--color-sidebar-border: hsl(var(--sidebar-border));
--color-sidebar-ring: hsl(var(--sidebar-ring));
}

/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.

If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}

body,
html {
Expand Down Expand Up @@ -90,3 +163,85 @@ html {
@apply bg-background text-foreground;
}
}

/*
---break---
*/

:root {
--sidebar:
hsl(0 0% 98%);
--sidebar-foreground:
hsl(240 5.3% 26.1%);
--sidebar-primary:
hsl(240 5.9% 10%);
--sidebar-primary-foreground:
hsl(0 0% 98%);
--sidebar-accent:
hsl(240 4.8% 95.9%);
--sidebar-accent-foreground:
hsl(240 5.9% 10%);
--sidebar-border:
hsl(220 13% 91%);
--sidebar-ring:
hsl(217.2 91.2% 59.8%);
}

/*
---break---
*/

.dark {
--sidebar:
hsl(240 5.9% 10%);
--sidebar-foreground:
hsl(240 4.8% 95.9%);
--sidebar-primary:
hsl(224.3 76.3% 48%);
--sidebar-primary-foreground:
hsl(0 0% 100%);
--sidebar-accent:
hsl(240 3.7% 15.9%);
--sidebar-accent-foreground:
hsl(240 4.8% 95.9%);
--sidebar-border:
hsl(240 3.7% 15.9%);
--sidebar-ring:
hsl(217.2 91.2% 59.8%);
}

/*
---break---
*/

@theme inline {
--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);
}

/*
---break---
*/

@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
2 changes: 1 addition & 1 deletion resources/js/components/AppSidebarHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ defineProps<{

<template>
<header
class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:px-4"
class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
>
<div class="flex items-center gap-2">
<SidebarTrigger class="-ml-1" />
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/AppearanceTabs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const tabs = [
:class="[
'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
appearance === value
? 'bg-white shadow-sm dark:bg-neutral-700 dark:text-neutral-100'
? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
: 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
]"
>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/NavUser.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const { isMobile, state } = useSidebar();
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
align="end"
:side-offset="4"
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/TextLink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ defineProps<Props>();
:tabindex="tabindex"
:method="method"
:as="as"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:!decoration-current dark:decoration-neutral-500"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
>
<slot />
</Link>
Expand Down
30 changes: 12 additions & 18 deletions resources/js/components/ui/avatar/Avatar.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
<script setup lang="ts">
import { cn } from '@/lib/utils';
import { AvatarRoot } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { avatarVariant, type AvatarVariants } from '.';
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { AvatarRoot } from 'reka-ui'

const props = withDefaults(
defineProps<{
class?: HTMLAttributes['class'];
size?: AvatarVariants['size'];
shape?: AvatarVariants['shape'];
}>(),
{
size: 'sm',
shape: 'circle',
},
);
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
</script>

<template>
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
<slot />
</AvatarRoot>
<AvatarRoot
data-slot="avatar"
:class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
>
<slot />
</AvatarRoot>
</template>
22 changes: 17 additions & 5 deletions resources/js/components/ui/avatar/AvatarFallback.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
<script setup lang="ts">
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui';
import { cn } from '@/lib/utils'
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<AvatarFallbackProps>();
const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

return delegated
})
</script>

<template>
<AvatarFallback v-bind="props">
<slot />
</AvatarFallback>
<AvatarFallback
data-slot="avatar-fallback"
v-bind="delegatedProps"
:class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
>
<slot />
</AvatarFallback>
</template>
13 changes: 10 additions & 3 deletions resources/js/components/ui/avatar/AvatarImage.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
<script setup lang="ts">
import { AvatarImage, type AvatarImageProps } from 'reka-ui';
import type { AvatarImageProps } from 'reka-ui'
import { AvatarImage } from 'reka-ui'

const props = defineProps<AvatarImageProps>();
const props = defineProps<AvatarImageProps>()
</script>

<template>
<AvatarImage v-bind="props" class="h-full w-full object-cover" />
<AvatarImage
data-slot="avatar-image"
v-bind="props"
class="aspect-square size-full"
>
<slot />
</AvatarImage>
</template>
27 changes: 3 additions & 24 deletions resources/js/components/ui/avatar/index.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,3 @@
import { cva, type VariantProps } from 'class-variance-authority';

export { default as Avatar } from './Avatar.vue';
export { default as AvatarFallback } from './AvatarFallback.vue';
export { default as AvatarImage } from './AvatarImage.vue';

export const avatarVariant = cva(
'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
{
variants: {
size: {
sm: 'h-10 w-10 text-xs',
base: 'h-16 w-16 text-2xl',
lg: 'h-32 w-32 text-5xl',
},
shape: {
circle: 'rounded-full',
square: 'rounded-md',
},
},
},
);

export type AvatarVariants = VariantProps<typeof avatarVariant>;
export { default as Avatar } from './Avatar.vue'
export { default as AvatarFallback } from './AvatarFallback.vue'
export { default as AvatarImage } from './AvatarImage.vue'
16 changes: 10 additions & 6 deletions resources/js/components/ui/breadcrumb/Breadcrumb.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
import type { HTMLAttributes } from 'vue'

const props = defineProps<{
class?: HTMLAttributes['class'];
}>();
class?: HTMLAttributes['class']
}>()
</script>

<template>
<nav aria-label="breadcrumb" :class="props.class">
<slot />
</nav>
<nav
aria-label="breadcrumb"
data-slot="breadcrumb"
:class="props.class"
>
<slot />
</nav>
</template>
Loading