@maizzle/framework 6.0.0-rc.6 → 6.0.0-rc.7

package/dist/server/ui/components/ui/sidebar/SidebarProvider.vue

@@ -73,7 +73,7 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh w-full', props.class)"
       v-bind="$attrs"
     >
       <slot />

package/dist/server/ui/components/ui/sidebar/SidebarTrigger.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
   class?: HTMLAttributes["class"]
 }>()
 
-const { open, toggleSidebar } = useSidebar()
+const { isMobile, open, toggleSidebar } = useSidebar()
 </script>
 
 <template>
@@ -18,11 +18,12 @@ const { open, toggleSidebar } = useSidebar()
     data-slot="sidebar-trigger"
     variant="ghost"
     size="icon"
-    :class="cn('h-7 w-7', props.class)"
+    :class="cn('h-7 w-7 hover:bg-transparent', props.class)"
     @click="toggleSidebar"
   >
-    <PanelRightOpen v-if="open" />
-    <PanelRightClose v-else />
+    <svg v-if="isMobile" class="size-4 dark:text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="15" y2="12" /><line x1="3" y1="17" x2="18" y2="17" /></svg>
+    <PanelRightOpen v-else-if="open" class="dark:text-gray-400" :stroke-width="1" />
+    <PanelRightClose v-else class="dark:text-gray-400" :stroke-width="1" />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
 </template>

package/dist/server/ui/components/ui/tags-input/TagsInput.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="slotProps" v-bind="forwarded" :class="cn(
+      'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>

package/dist/server/ui/components/ui/tags-input/TagsInputInput.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>

package/dist/server/ui/components/ui/tags-input/TagsInputItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>

package/dist/server/ui/components/ui/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItemDelete, useForwardProps } from "reka-ui"
+import { X } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="size-3" />
+    </slot>
+  </TagsInputItemDelete>
+</template>

package/dist/server/ui/components/ui/tags-input/TagsInputItemText.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItemText, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>

package/dist/server/ui/components/ui/tags-input/index.ts

@@ -0,0 +1,5 @@
+export { default as TagsInput } from "./TagsInput.vue"
+export { default as TagsInputInput } from "./TagsInputInput.vue"
+export { default as TagsInputItem } from "./TagsInputItem.vue"
+export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
+export { default as TagsInputItemText } from "./TagsInputItemText.vue"

package/dist/server/ui/components/ui/toggle/index.ts

@@ -4,17 +4,17 @@ import { cva } from "class-variance-authority"
 export { default as Toggle } from "./Toggle.vue"
 
 export const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium  disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-white data-[state=on]:text-foreground data-[state=on]:shadow-sm data-[state=on]:dark:bg-gray-700 data-[state=on]:dark:text-gray-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+          "bg-transparent",
       },
       size: {
         default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
+        sm: "h-6 px-1.5 min-w-6",
         lg: "h-10 px-2.5 min-w-10",
       },
     },

package/dist/server/ui/components/ui/toggle-group/ToggleGroup.vue

@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       '--gap': spacing,
     }"
     v-bind="forwarded"
-    :class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
+    :class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md bg-gray-50 p-1 dark:bg-gray-800/50 data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
   >
     <slot v-bind="slotProps" />
   </ToggleGroupRoot>

package/dist/server/ui/components/ui/toggle-group/ToggleGroupItem.vue

@@ -37,8 +37,8 @@ const forwardedProps = useForwardProps(delegatedProps)
         variant: context?.variant || variant,
         size: context?.size || size,
       }),
-      'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
-      'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+      'w-auto min-w-0 shrink-0 px-1.5 focus:z-10 focus-visible:z-10',
+      'data-[spacing=0]:rounded-md data-[spacing=0]:shadow-none',
       props.class)"
   >
     <slot v-bind="slotProps" />

package/dist/server/ui/main.css

@@ -27,7 +27,7 @@
   --sidebar-foreground: #030712;
   --sidebar-primary: #111827;
   --sidebar-primary-foreground: #f9fafb;
-  --sidebar-accent: #f3f4f6;
+  --sidebar-accent: #f9fafb;
   --sidebar-accent-foreground: #111827;
   --sidebar-border: #e5e7eb;
   --sidebar-ring: #9ca3af;
@@ -37,31 +37,31 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #030712;        /* gray-950 */
-    --foreground: #f9fafb;        /* gray-50 */
+    --foreground: #e5e7eb;        /* gray-200 */
     --card: #030712;
-    --card-foreground: #f9fafb;
+    --card-foreground: #e5e7eb;
     --popover: #030712;
-    --popover-foreground: #f9fafb;
-    --primary: #f9fafb;
+    --popover-foreground: #e5e7eb;
+    --primary: #e5e7eb;
     --primary-foreground: #030712;
-    --secondary: #1f2937;         /* gray-800 */
-    --secondary-foreground: #f9fafb;
-    --muted: #1f2937;
+    --secondary: #111827;         /* gray-900 */
+    --secondary-foreground: #e5e7eb;
+    --muted: #111827;
     --muted-foreground: #9ca3af;  /* gray-400 */
-    --accent: #1f2937;
-    --accent-foreground: #f9fafb;
+    --accent: #111827;
+    --accent-foreground: #e5e7eb;
     --destructive: #ef4444;
-    --border: #374151;            /* gray-700 */
-    --input: #374151;
-    --ring: #6b7280;              /* gray-500 */
-    --sidebar-background: #111827; /* gray-900 */
-    --sidebar-foreground: #f9fafb;
-    --sidebar-primary: #f9fafb;
-    --sidebar-primary-foreground: #111827;
+    --border: #1f2937;            /* gray-800 */
+    --input: #1f2937;
+    --ring: #4b5563;              /* gray-600 */
+    --sidebar-background: #030712; /* gray-950 */
+    --sidebar-foreground: #e5e7eb;
+    --sidebar-primary: #e5e7eb;
+    --sidebar-primary-foreground: #030712;
     --sidebar-accent: rgb(255 255 255 / 0.06);
-    --sidebar-accent-foreground: #f9fafb;
-    --sidebar-border: #374151;
-    --sidebar-ring: #6b7280;
+    --sidebar-accent-foreground: #e5e7eb;
+    --sidebar-border: #1f2937;
+    --sidebar-ring: #4b5563;
   }
 }
 

package/dist/server/ui/pages/Home.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Terminal } from 'lucide-vue-next'
 import { Kbd } from '@/components/ui/kbd'
 import {
   Empty,
@@ -14,6 +15,10 @@ import markUrl from '@/mark.svg'
 import markGradientUrl from '@/mark-gradient.svg'
 
 const isMac = computed(() => navigator.platform.includes('Mac'))
+
+function openCommandPalette() {
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }))
+}
 </script>
 
 <template>
@@ -25,14 +30,16 @@ const isMac = computed(() => navigator.platform.includes('Mac'))
       </EmptyMedia>
       <EmptyTitle>Select an email to preview</EmptyTitle>
       <EmptyDescription>
-        Choose an email from the sidebar to see a live preview.
+        Choose an email from the <span class="md:hidden">menu</span><span class="hidden md:inline">sidebar</span> to see a live preview.
       </EmptyDescription>
     </EmptyHeader>
     <EmptyContent>
-      <p class="text-gray-500 dark:text-gray-400 text-sm">
-        Press
-        <Kbd>{{ isMac ? '⌘' : 'Ctrl' }}</Kbd> + <Kbd>K</Kbd>
-        to open the command palette
+      <p
+        class="text-gray-500 dark:text-gray-400 text-sm cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+        @click="openCommandPalette"
+      >
+        <span class="md:hidden inline-flex items-center gap-1.5 rounded-md bg-gray-100 dark:bg-gray-800 px-3 py-1.5"><Terminal class="size-3.5" /> Quick search</span>
+        <span class="hidden md:inline">Press <Kbd>{{ isMac ? '⌘' : 'Ctrl' }}</Kbd> + <Kbd>K</Kbd> to open the command palette</span>
       </p>
     </EmptyContent>
   </Empty>