fulldev-ui 0.7.0-beta.9 → 0.9.0

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

@@ -0,0 +1,62 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { PopoverAlign, PopoverSide } from "@data-slot/popover"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: PopoverSide
+  align?: PopoverAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  position?: PopoverSide
+}
+
+const {
+  class: className,
+  hidden = true,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  position,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="popover-portal">
+  <div
+    data-slot="popover-positioner"
+    data-side={side}
+    data-align={align}
+    data-side-offset={sideOffset}
+    data-align-offset={alignOffset}
+    data-avoid-collisions={avoidCollisions}
+    data-collision-padding={collisionPadding}
+    data-position={position}
+    class="isolate z-50"
+  >
+    <div
+      data-slot="popover-content"
+      data-side={side}
+      data-align={align}
+      data-side-offset={sideOffset}
+      data-align-offset={alignOffset}
+      data-avoid-collisions={avoidCollisions}
+      data-collision-padding={collisionPadding}
+      data-position={position}
+      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 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 outline-none",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p
+  data-slot="popover-description"
+  class={cn("text-muted-foreground", className)}
+  {...props}
+>
+  <slot />
+</p>

package/src/components/ui/popover/popover-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="popover-header"
+  class={cn("flex flex-col gap-1 text-sm", className)}
+  {...props}
+>
+  <slot />
+</div>

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

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

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

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

package/src/components/ui/popover/popover.astro

@@ -0,0 +1,59 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { PopoverAlign, PopoverSide } from "@data-slot/popover"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  side?: PopoverSide
+  align?: PopoverAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  portal?: boolean
+  position?: PopoverSide
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+}
+
+const {
+  class: className,
+  defaultOpen,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  portal,
+  position,
+  closeOnClickOutside,
+  closeOnEscape,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="popover"
+  data-default-open={defaultOpen}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  data-portal={portal}
+  data-position={position}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/popover"
+
+  create()
+</script>

package/src/components/ui/price/format-price-value.ts

@@ -0,0 +1,91 @@
+export interface FormatPriceValueOptions {
+  currency: string
+  locale: string
+}
+
+export type PriceValue = number | string | [number, number]
+export type DiscountFormat = "percentage" | "amount"
+
+function formatCurrency(value: number, options: FormatPriceValueOptions) {
+  return new Intl.NumberFormat(options.locale, {
+    style: "currency",
+    currency: options.currency,
+  }).format(value)
+}
+
+export function parseSinglePriceValue(price: PriceValue | null | undefined) {
+  if (price === null || price === undefined || price === "") {
+    return null
+  }
+
+  if (typeof price === "number") {
+    return Number.isFinite(price) ? price : null
+  }
+
+  if (Array.isArray(price)) {
+    return null
+  }
+
+  const numericValue = Number(price)
+
+  if (!Number.isNaN(numericValue) && Number.isFinite(numericValue)) {
+    return numericValue
+  }
+
+  return null
+}
+
+export function formatPriceDiscount(
+  price: PriceValue | null | undefined,
+  compareAt: PriceValue | null | undefined,
+  options: FormatPriceValueOptions & {
+    format?: DiscountFormat
+  }
+) {
+  const currentPrice = parseSinglePriceValue(price)
+  const originalPrice = parseSinglePriceValue(compareAt)
+
+  if (
+    currentPrice === null ||
+    originalPrice === null ||
+    originalPrice <= currentPrice ||
+    originalPrice <= 0
+  ) {
+    return null
+  }
+
+  if (options.format === "amount") {
+    return formatCurrency(originalPrice - currentPrice, options)
+  }
+
+  return `${Math.round(((originalPrice - currentPrice) / originalPrice) * 100)}%`
+}
+
+export function formatPriceValue(
+  price: PriceValue | null | undefined,
+  options: FormatPriceValueOptions
+) {
+  if (price === null || price === undefined || price === "") {
+    return null
+  }
+
+  if (typeof price === "number") {
+    return formatCurrency(price, options)
+  }
+
+  if (Array.isArray(price)) {
+    const [minimum, maximum] = price
+    return `${formatCurrency(minimum, options)} - ${formatCurrency(maximum, options)}`
+  }
+
+  const rangeMatch = price.match(
+    /^\s*(-?\d+(?:\.\d+)?)\s*-\s*(-?\d+(?:\.\d+)?)\s*$/
+  )
+
+  if (!rangeMatch) {
+    return price
+  }
+
+  const [, minimum, maximum] = rangeMatch
+  return `${formatCurrency(Number(minimum), options)} - ${formatCurrency(Number(maximum), options)}`
+}

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

@@ -0,0 +1,3 @@
+export { default as Price } from "./price.astro"
+export { default as PriceUnit } from "./price-unit.astro"
+export { default as PriceValue } from "./price-value.astro"

package/src/components/ui/price/price-unit.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  class={cn("text-muted-foreground text-sm leading-tight", className)}
+  {...props}
+>
+  / <slot />
+</span>

package/src/components/ui/price/price-value.astro

@@ -0,0 +1,81 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+import {
+  formatPriceDiscount,
+  formatPriceValue,
+  type DiscountFormat,
+  type PriceValue,
+} from "./format-price-value"
+
+type Props = VariantProps<typeof variants> &
+  HTMLAttributes<"span"> & {
+    price?: PriceValue
+    compareAt?: PriceValue
+    currency?: string
+    locale?: string
+    variant?: "default" | "sale"
+    discountFormat?: DiscountFormat
+    showDiscount?: boolean
+  }
+
+const variants = cva("leading-tight", {
+  variants: {
+    variant: {
+      default: "text-foreground",
+      sale: "text-muted-foreground line-through",
+    },
+  },
+})
+
+const {
+  class: className,
+  price,
+  compareAt,
+  currency = "USD",
+  locale = "en-US",
+  variant = "default",
+  discountFormat = "percentage",
+  showDiscount = true,
+  ...props
+} = Astro.props
+
+const formattedPrice = formatPriceValue(price, { currency, locale })
+const formattedCompareAt = formatPriceValue(compareAt, { currency, locale })
+const formattedDiscount =
+  showDiscount && compareAt
+    ? formatPriceDiscount(price, compareAt, {
+        currency,
+        locale,
+        format: discountFormat,
+      })
+    : null
+const hasDiscount = Boolean(formattedCompareAt && formattedDiscount)
+---
+
+{
+  formattedPrice && (
+    <span
+      class={cn(
+        "inline-flex flex-wrap items-center gap-x-2 gap-y-1",
+        className
+      )}
+      {...props}
+    >
+      <span class={cn(variants({ variant }))}>{formattedPrice}</span>
+      {formattedCompareAt && (
+        <span class="text-muted-foreground text-sm leading-tight line-through">
+          {formattedCompareAt}
+        </span>
+      )}
+      {hasDiscount && (
+        <span class="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium">
+          Save {formattedDiscount}
+        </span>
+      )}
+    </span>
+  )
+}

package/src/components/ui/price/price.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 class={cn("flex flex-wrap items-center gap-x-2", className)} {...props}>
+  <slot />
+</div>

package/src/components/ui/radio-group/index.ts

@@ -1,2 +1,2 @@
-export { default as RadioGroup } from './RadioGroup.vue'
-export { default as RadioGroupItem } from './RadioGroupItem.vue'
+export { default as RadioGroup } from "./radio-group.astro"
+export { default as RadioGroupItem } from "./radio-group-item.astro"

package/src/components/ui/radio-group/radio-group-item.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span"> & {
+  value: string
+  disabled?: boolean
+  indicatorClass?: string
+}
+
+const {
+  class: className,
+  value,
+  disabled,
+  indicatorClass,
+  ...props
+} = Astro.props
+---
+
+<span
+  data-slot="radio-group-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  class={cn(
+    "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+    className
+  )}
+  {...props}
+>
+  <span
+    aria-hidden="true"
+    data-slot="radio-group-indicator"
+    class={cn(
+      "flex size-4 items-center justify-center opacity-0 group-data-checked/radio-group-item:opacity-100",
+      indicatorClass
+    )}
+  >
+    <span
+      class="bg-background absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+    ></span>
+  </span>
+</span>

package/src/components/ui/radio-group/radio-group.astro

@@ -0,0 +1,42 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: string
+  name?: string
+  disabled?: boolean
+  readOnly?: boolean
+  required?: boolean
+}
+
+const {
+  class: className,
+  defaultValue,
+  name,
+  disabled,
+  readOnly,
+  required,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="radio-group"
+  data-default-value={defaultValue}
+  data-name={name}
+  data-disabled={disabled}
+  data-read-only={readOnly}
+  data-required={required}
+  class={cn("grid w-full gap-3", className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/radio-group"
+
+  create()
+</script>

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

@@ -0,0 +1 @@
+export { default as Rating } from "./rating.astro"

package/src/components/ui/rating/rating.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"div"> & {
+  value?: number
+}
+
+const { value = 5, class: className, ...props } = Astro.props
+---
+
+<div class={cn("flex items-center gap-1 text-base", className)} {...props}>
+  {
+    Array.from({ length: 5 }).map((_, index) => {
+      const fillPercentage =
+        index < Math.floor(value)
+          ? 100
+          : index === Math.floor(value)
+            ? (value % 1) * 100
+            : 0
+
+      return (
+        <span class="text-muted-foreground/25 relative inline-flex size-[1em]">
+          <Icon name="star" class="size-[1em] fill-current" />
+          {fillPercentage > 0 && (
+            <span
+              class="text-primary absolute inset-0 overflow-hidden"
+              style={{ width: `${fillPercentage}%` }}
+            >
+              <Icon name="star" class="size-[1em] fill-current" />
+            </span>
+          )}
+        </span>
+      )
+    })
+  }
+</div>

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

@@ -0,0 +1,2 @@
+export { default as Section } from "./section.astro"
+export { default as SectionContainer } from "./section-container.astro"

package/src/components/ui/section/section-container.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class={cn(
+    "relative mx-auto flex w-full max-w-7xl flex-col gap-8 px-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/section/section.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"section"> & VariantProps<typeof variants>
+
+const variants = cva("relative flex scroll-mt-12 flex-col gap-16 py-16", {
+  variants: {
+    variant: {
+      default: "bg-background w-full",
+      floating:
+        "bg-background mx-auto my-16 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-xl border shadow-md",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+const { class: className, variant, ...props } = Astro.props
+---
+
+<section
+  class={cn(variants({ variant }), className)}
+  data-slot="section"
+  data-variant={variant}
+  {...props}
+>
+  <slot />
+</section>

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

@@ -1,11 +1,8 @@
-export { default as Select } from './Select.vue'
-export { default as SelectContent } from './SelectContent.vue'
-export { default as SelectGroup } from './SelectGroup.vue'
-export { default as SelectItem } from './SelectItem.vue'
-export { default as SelectItemText } from './SelectItemText.vue'
-export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
-export { default as SelectValue } from './SelectValue.vue'
+export { default as Select } from "./select.astro"
+export { default as SelectContent } from "./select-content.astro"
+export { default as SelectGroup } from "./select-group.astro"
+export { default as SelectItem } from "./select-item.astro"
+export { default as SelectLabel } from "./select-label.astro"
+export { default as SelectSeparator } from "./select-separator.astro"
+export { default as SelectTrigger } from "./select-trigger.astro"
+export { default as SelectValue } from "./select-value.astro"

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

@@ -0,0 +1,69 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { Align, Position, Side } from "@data-slot/select"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  position?: Position
+  side?: Side
+  align?: Align
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  hidden = true,
+  position,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="select-portal">
+  <div
+    data-slot="select-positioner"
+    data-position={position}
+    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"
+  >
+    <div
+      data-slot="select-content"
+      data-position={position}
+      data-align-trigger={position === "item-aligned" ? "true" : undefined}
+      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-[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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 outline-none data-[align-trigger=true]:animate-none",
+        className
+      )}
+      {...props}
+    >
+      <div
+        data-slot="select-viewport"
+        data-position={position}
+        class="p-1 data-[position=item-aligned]:w-full data-[position=popper]:min-w-36"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>