fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/dialog/dialog-title.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h2">
+
+const { class: className, ...props } = Astro.props
+---
+
+<h2
+  data-slot="dialog-title"
+  class={cn("leading-none font-medium", className)}
+  {...props}
+>
+  <slot />
+</h2>

package/src/components/ui/dialog/dialog-trigger.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { ...props } = Astro.props
+---
+
+<Button data-slot="dialog-trigger" {...props}>
+  <slot />
+</Button>

package/src/components/ui/dialog/dialog.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="dialog" class={className} {...props}>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/dialog"
+
+  create()
+</script>

package/src/components/ui/dialog/index.ts

@@ -1,9 +1,10 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as Dialog } from "./dialog.astro"
+export { default as DialogPortal } from "./dialog-portal.astro"
+export { default as DialogOverlay } from "./dialog-overlay.astro"
+export { default as DialogContent } from "./dialog-content.astro"
+export { default as DialogTrigger } from "./dialog-trigger.astro"
+export { default as DialogHeader } from "./dialog-header.astro"
+export { default as DialogTitle } from "./dialog-title.astro"
+export { default as DialogDescription } from "./dialog-description.astro"
+export { default as DialogFooter } from "./dialog-footer.astro"
+export { default as DialogClose } from "./dialog-close.astro"

package/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button"> & {
+  value: string
+  defaultChecked?: boolean
+  disabled?: boolean
+  variant?: "default" | "destructive"
+  inset?: boolean
+}
+
+const {
+  class: className,
+  type = "button",
+  value,
+  defaultChecked,
+  disabled,
+  variant,
+  inset,
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="dropdown-menu-checkbox-item"
+  data-value={value}
+  data-default-checked={defaultChecked}
+  data-disabled={disabled}
+  data-variant={variant}
+  data-inset={inset}
+  disabled={disabled ? true : undefined}
+  type={type}
+  class={cn(
+    "group/dropdown-menu-checkbox-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <span
+    data-slot="dropdown-menu-checkbox-item-indicator"
+    class="pointer-events-none absolute right-2 flex items-center justify-center"
+  >
+    <Icon
+      name="check"
+      class="size-4 opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100"
+    />
+  </span>
+  <slot />
+</button>

package/src/components/ui/dropdown-menu/dropdown-menu-content.astro

@@ -0,0 +1,58 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { Align, Side } from "@data-slot/dropdown-menu"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: Side
+  align?: Align
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  hidden = true,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="dropdown-menu-portal">
+  <div
+    data-slot="dropdown-menu-positioner"
+    data-side={side}
+    data-align={align}
+    data-side-offset={sideOffset}
+    data-align-offset={alignOffset}
+    data-avoid-collisions={avoidCollisions}
+    data-collision-padding={collisionPadding}
+    class="isolate z-50 outline-none"
+  >
+    <div
+      data-slot="dropdown-menu-content"
+      data-side={side}
+      data-align={align}
+      data-side-offset={sideOffset}
+      data-align-offset={alignOffset}
+      data-avoid-collisions={avoidCollisions}
+      data-collision-padding={collisionPadding}
+      hidden={hidden}
+      class={cn(
+        "bg-popover text-popover-foreground ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/ui/dropdown-menu/dropdown-menu-group.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="dropdown-menu-group" class={cn(className)} {...props}>
+  <slot />
+</div>

package/src/components/ui/dropdown-menu/dropdown-menu-item.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button"> & {
+  disabled?: boolean
+  variant?: "default" | "destructive"
+  inset?: boolean
+}
+
+const {
+  class: className,
+  type = "button",
+  disabled,
+  variant,
+  inset,
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="dropdown-menu-item"
+  data-disabled={disabled}
+  data-variant={variant}
+  data-inset={inset}
+  disabled={disabled ? true : undefined}
+  type={type}
+  class={cn(
+    "group/dropdown-menu-item data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</button>

package/src/components/ui/dropdown-menu/dropdown-menu-label.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  inset?: boolean
+}
+
+const { class: className, inset, ...props } = Astro.props
+---
+
+<div
+  data-slot="dropdown-menu-label"
+  data-inset={inset}
+  class={cn(
+    "text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/dropdown-menu/dropdown-menu-portal.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="dropdown-menu-portal" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button"> & {
+  value: string
+  defaultChecked?: boolean
+  disabled?: boolean
+  variant?: "default" | "destructive"
+  inset?: boolean
+}
+
+const {
+  class: className,
+  type = "button",
+  value,
+  defaultChecked,
+  disabled,
+  variant,
+  inset,
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="dropdown-menu-radio-item"
+  data-value={value}
+  data-default-checked={defaultChecked}
+  data-disabled={disabled}
+  data-variant={variant}
+  data-inset={inset}
+  disabled={disabled ? true : undefined}
+  type={type}
+  class={cn(
+    "group/dropdown-menu-radio-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <span
+    data-slot="dropdown-menu-radio-item-indicator"
+    class="pointer-events-none absolute right-2 flex items-center justify-center"
+  >
+    <Icon
+      name="check"
+      class="size-4 opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100"
+    />
+  </span>
+  <slot />
+</button>

package/src/components/ui/dropdown-menu/dropdown-menu-separator.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="dropdown-menu-separator"
+  class={cn("bg-border -mx-1 my-1 h-px", className)}
+  {...props}
+>
+</div>

package/src/components/ui/dropdown-menu/dropdown-menu-shortcut.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="dropdown-menu-shortcut"
+  class={cn(
+    "text-muted-foreground group-data-highlighted/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

package/src/components/ui/dropdown-menu/dropdown-menu-trigger.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"button">
+
+const { class: className, type = "button", ...props } = Astro.props
+---
+
+<button
+  data-slot="dropdown-menu-trigger"
+  type={type}
+  class={className}
+  {...props}
+>
+  <slot />
+</button>

package/src/components/ui/dropdown-menu/dropdown-menu.astro

@@ -0,0 +1,68 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { Align, Side } from "@data-slot/dropdown-menu"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  defaultValue?: string | null
+  defaultValues?: string[]
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+  closeOnSelect?: boolean
+  highlightItemOnHover?: boolean
+  side?: Side
+  align?: Align
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  defaultOpen,
+  defaultValue,
+  defaultValues,
+  closeOnClickOutside,
+  closeOnEscape,
+  closeOnSelect,
+  highlightItemOnHover,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+
+const defaultValuesAttr =
+  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)
+---
+
+<div
+  data-slot="dropdown-menu"
+  data-default-open={defaultOpen}
+  data-default-value={defaultValue}
+  data-default-values={defaultValuesAttr}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  data-close-on-select={closeOnSelect}
+  data-highlight-item-on-hover={highlightItemOnHover}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/dropdown-menu"
+
+  create()
+</script>

package/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,11 @@
+export { default as DropdownMenu } from "./dropdown-menu.astro"
+export { default as DropdownMenuCheckboxItem } from "./dropdown-menu-checkbox-item.astro"
+export { default as DropdownMenuContent } from "./dropdown-menu-content.astro"
+export { default as DropdownMenuGroup } from "./dropdown-menu-group.astro"
+export { default as DropdownMenuItem } from "./dropdown-menu-item.astro"
+export { default as DropdownMenuLabel } from "./dropdown-menu-label.astro"
+export { default as DropdownMenuPortal } from "./dropdown-menu-portal.astro"
+export { default as DropdownMenuRadioItem } from "./dropdown-menu-radio-item.astro"
+export { default as DropdownMenuSeparator } from "./dropdown-menu-separator.astro"
+export { default as DropdownMenuShortcut } from "./dropdown-menu-shortcut.astro"
+export { default as DropdownMenuTrigger } from "./dropdown-menu-trigger.astro"

package/src/components/ui/empty/empty-content.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="empty-content"
+  class={cn(
+    "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/empty/empty-description.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="empty-description"
+  class={cn(
+    "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/empty/empty-header.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="empty-header"
+  class={cn("flex max-w-sm flex-col items-center gap-2", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/empty/empty-media.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = VariantProps<typeof variants> & HTMLAttributes<"div">
+
+const variants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const { class: className, variant = "default", ...props } = Astro.props
+---
+
+<div
+  data-slot="empty-icon"
+  data-variant={variant}
+  class={cn(variants({ variant }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/empty/empty-title.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="empty-title"
+  class={cn("text-lg font-medium tracking-tight", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/empty/empty.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="empty"
+  class={cn(
+    "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/empty/index.ts

@@ -0,0 +1,6 @@
+export { default as Empty } from "./empty.astro"
+export { default as EmptyContent } from "./empty-content.astro"
+export { default as EmptyDescription } from "./empty-description.astro"
+export { default as EmptyMedia } from "./empty-media.astro"
+export { default as EmptyTitle } from "./empty-title.astro"
+export { default as EmptyHeader } from "./empty-header.astro"

package/src/components/ui/field/field-content.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="field-content"
+  class={cn(
+    "group/field-content flex flex-1 flex-col gap-1 leading-snug",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/field/field-description.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p
+  data-slot="field-description"
+  class={cn(
+    "text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+    "last:mt-0 nth-last-2:-mt-1",
+    "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</p>