fulldev-ui 0.7.0 → 0.9.0

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/price-unit.astro

@@ -3,20 +3,14 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"span"> {}
+type Props = HTMLAttributes<"span">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <span
-      class={cn("text-muted-foreground text-sm leading-tight", className)}
-      {...props}
-    >
-      / <Fragment set:html={slot} />
-    </span>
-  )
-}
+<span
+  class={cn("text-muted-foreground text-sm leading-tight", className)}
+  {...props}
+>
+  / <slot />
+</span>

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

@@ -4,12 +4,23 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends VariantProps<typeof variants>, HTMLAttributes<"span"> {
-  price?: number | string
-  currency?: string
-  locale?: string
-  variant?: "default" | "sale"
-}
+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: {
@@ -23,26 +34,48 @@ const variants = cva("leading-tight", {
 const {
   class: className,
   price,
+  compareAt,
   currency = "USD",
   locale = "en-US",
   variant = "default",
+  discountFormat = "percentage",
+  showDiscount = true,
   ...props
 } = Astro.props
 
-// Format price with currency only if it's a number
-const formattedPrice =
-  typeof price === "number"
-    ? new Intl.NumberFormat(locale, {
-        style: "currency",
-        currency: currency,
-      }).format(price)
-    : price
+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)
 ---
 
 {
-  price && (
-    <span class={cn(variants({ variant }), className)} {...props}>
-      {formattedPrice}
+  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

@@ -3,20 +3,11 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      class={cn("flex flex-wrap items-center gap-x-2", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div class={cn("flex flex-wrap items-center gap-x-2", className)} {...props}>
+  <slot />
+</div>

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

@@ -3,18 +3,41 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
+type Props = HTMLAttributes<"span"> & {
+  value: string
+  disabled?: boolean
+  indicatorClass?: string
+}
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  value,
+  disabled,
+  indicatorClass,
+  ...props
+} = Astro.props
 ---
 
-<input
-  type="radio"
+<span
   data-slot="radio-group-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
   class={cn(
-    "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-    "accent-primary",
+    "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

@@ -3,16 +3,40 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: string
+  name?: string
+  disabled?: boolean
+  readOnly?: boolean
+  required?: boolean
+}
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  defaultValue,
+  name,
+  disabled,
+  readOnly,
+  required,
+  ...props
+} = Astro.props
 ---
 
 <div
-  role="radiogroup"
   data-slot="radio-group"
-  class={cn("grid gap-3", className)}
+  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/rating.astro

@@ -1,36 +1,39 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import Star from "lucide-static/icons/star.svg"
 
 import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
 
-interface Props extends HTMLAttributes<"div"> {
-  rating?: number
+type Props = HTMLAttributes<"div"> & {
+  value?: number
 }
 
-const { rating, class: className, ...props } = Astro.props
+const { value = 5, class: className, ...props } = Astro.props
 ---
 
-{
-  rating && (
-    <div class={cn("flex gap-1 text-base", className)} {...props}>
-      {Array.from({ length: 5 }).map((_, index) => {
-        const fillPercentage =
-          index < Math.floor(rating)
-            ? 100
-            : index === Math.floor(rating)
-              ? (rating % 1) * 100
-              : 0
-        return (
-          <Star
-            class="!text-primary size-[1em]"
-            fill="currentColor"
-            style={{
-              maskImage: `linear-gradient(to right, black ${fillPercentage}%, rgba(0,0,0,0.15) ${fillPercentage}%)`,
-            }}
-          />
-        )
-      })}
-    </div>
-  )
-}
+<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

@@ -1,10 +1,2 @@
 export { default as Section } from "./section.astro"
-export { default as SectionActions } from "./section-actions.astro"
-export { default as SectionContent } from "./section-content.astro"
-export { default as SectionGrid } from "./section-grid.astro"
-export { default as SectionMasonry } from "./section-masonry.astro"
-export { default as SectionMedia } from "./section-media.astro"
-export { default as SectionProse } from "./section-prose.astro"
-export { default as SectionProvider } from "./section-provider.astro"
-export { default as SectionSplit } from "./section-split.astro"
-export { default as SectionSpread } from "./section-spread.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

@@ -4,87 +4,29 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-interface Props
-  extends HTMLAttributes<"section">,
-    VariantProps<typeof variants> {
-  size?: "sm" | "default" | "lg"
-}
-
-const variants = cva(
-  "relative mx-auto flex scroll-m-(--section-py) flex-col gap-16 px-(--section-px) py-(--section-py)",
-  {
-    variants: {
-      variant: {
-        default: "bg-background w-full",
-        floating: [
-          "bg-background rounded-lg border shadow-md",
-          "w-[calc(100%-2*var(--gutter,24px))] max-w-(--section-width)",
-          "my-(--section-py) overflow-hidden rounded-xl",
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: "default",
+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",
     },
-  }
-)
-
-const { class: className, variant, size, ...props } = Astro.props
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
 
-const slot = await Astro.slots.render("default")
+const { class: className, variant, ...props } = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <section
-      class={cn(variants({ variant }), className)}
-      data-slot="section"
-      data-variant={variant}
-      data-size={size}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </section>
-  )
-}
-
-<style is:global>
-  [data-slot="section"] {
-    --section-width: var(--container, var(--breakpoint-xl));
-    --section-py: calc(var(--spacing) * 12);
-    --section-px: max(
-      var(--gutter, 24px),
-      calc((100cqw - var(--section-width)) / 2)
-    );
-  }
-
-  [data-slot="section"][data-variant="floating"] {
-    --section-px: calc(var(--spacing) * 6);
-  }
-
-  [data-slot="section"][data-size="sm"] {
-    --section-py: calc(var(--spacing) * 8);
-  }
-
-  [data-slot="section"][data-size="lg"] {
-    --section-py: calc(var(--spacing) * 24);
-  }
-
-  @media (min-width: 1024px) {
-    [data-slot="section"] {
-      --section-py: calc(var(--spacing) * 16);
-    }
-
-    [data-slot="section"][data-variant="floating"] {
-      --section-px: calc(var(--spacing) * 16);
-    }
-
-    [data-slot="section"][data-size="sm"] {
-      --section-py: calc(var(--spacing) * 12);
-    }
-
-    [data-slot="section"][data-size="lg"] {
-      --section-py: calc(var(--spacing) * 32);
-    }
-  }
-</style>
+<section
+  class={cn(variants({ variant }), className)}
+  data-slot="section"
+  data-variant={variant}
+  {...props}
+>
+  <slot />
+</section>

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

@@ -0,0 +1,8 @@
+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>