fulldev-ui 0.12.0 → 0.13.0

package/src/components/ui/toast/toast-viewport.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"ol">
+
+const { class: className, ...props } = Astro.props
+---
+
+<ol
+  data-slot="toast-viewport"
+  class={cn(
+    "group/toast-viewport pointer-events-none fixed z-50 m-0 h-(--toast-stack-size,0px) w-[min(24rem,calc(100vw-2rem))] list-none p-0 outline-none [--toast-collapsed-peek:0.75rem] [--toast-gap:0.75rem] data-[position=bottom-center]:bottom-4 data-[position=bottom-center]:left-1/2 data-[position=bottom-center]:-translate-x-1/2 data-[position=bottom-left]:bottom-4 data-[position=bottom-left]:left-4 data-[position=bottom-right]:right-4 data-[position=bottom-right]:bottom-4 data-[position=top-center]:top-4 data-[position=top-center]:left-1/2 data-[position=top-center]:-translate-x-1/2 data-[position=top-left]:top-4 data-[position=top-left]:left-4 data-[position=top-right]:top-4 data-[position=top-right]:right-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</ol>

package/src/components/ui/toast/toast.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { ToastPosition } from "@data-slot/toast"
+
+type Props = HTMLAttributes<"div"> & {
+  limit?: number
+  duration?: number
+  position?: ToastPosition
+  pauseOnHover?: boolean
+  pauseOnFocus?: boolean
+  portal?: boolean
+}
+
+const {
+  class: className,
+  limit,
+  duration,
+  position,
+  pauseOnHover,
+  pauseOnFocus,
+  portal,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="toast"
+  data-limit={limit}
+  data-duration={duration}
+  data-position={position}
+  data-pause-on-hover={pauseOnHover}
+  data-pause-on-focus={pauseOnFocus}
+  data-portal={portal}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/toast"
+
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
+</script>

package/src/components/ui/toast/toaster.astro

@@ -0,0 +1,37 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import ToastAction from "./toast-action.astro"
+import ToastClose from "./toast-close.astro"
+import ToastContent from "./toast-content.astro"
+import ToastDescription from "./toast-description.astro"
+import ToastIcon from "./toast-icon.astro"
+import ToastItem from "./toast-item.astro"
+import ToastTemplate from "./toast-template.astro"
+import ToastTitle from "./toast-title.astro"
+import ToastViewport from "./toast-viewport.astro"
+import Toast from "./toast.astro"
+
+type Props = ComponentProps<typeof Toast> & {
+  viewportClass?: string
+}
+
+const { viewportClass, ...props } = Astro.props
+---
+
+<Toast {...props}>
+  <ToastTemplate>
+    <ToastItem>
+      <ToastContent>
+        <ToastIcon />
+        <div class="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </ToastItem>
+  </ToastTemplate>
+  <ToastViewport class={viewportClass} />
+</Toast>

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

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./toggle-group.astro"
+export { default as ToggleGroupItem } from "./toggle-group-item.astro"

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

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import {
+  toggleVariants,
+  type ToggleVariantProps,
+} from "@/components/ui/toggle/toggle-variants"
+
+type Props = HTMLAttributes<"button"> &
+  ToggleVariantProps & {
+    value: string
+    disabled?: boolean
+  }
+
+const {
+  class: className,
+  value,
+  disabled,
+  variant = "default",
+  size = "default",
+  type = "button",
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="toggle-group-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  type={type}
+  disabled={disabled}
+  aria-pressed="false"
+  class={cn(
+    "data-[state=on]:bg-muted shrink-0 group-aria-disabled/toggle-group:pointer-events-none group-aria-disabled/toggle-group:opacity-50 focus:z-10 focus-visible:z-10",
+    "group-data-[variant=outline]/toggle-group:border-input group-data-[variant=default]/toggle-group:border-0 group-data-[variant=default]/toggle-group:shadow-none group-data-[variant=outline]/toggle-group:border group-data-[variant=outline]/toggle-group:shadow-xs group-data-[variant=default]/toggle-group:data-[state=off]:bg-transparent group-data-[variant=outline]/toggle-group:data-[state=off]:bg-transparent",
+    "group-data-[size=default]/toggle-group:h-9 group-data-[size=default]/toggle-group:min-w-9 group-data-[size=default]/toggle-group:px-2.5 group-data-[size=lg]/toggle-group:h-10 group-data-[size=lg]/toggle-group:min-w-10 group-data-[size=lg]/toggle-group:px-2.5 group-data-[size=sm]/toggle-group:h-8 group-data-[size=sm]/toggle-group:min-w-8 group-data-[size=sm]/toggle-group:px-2.5 group-data-[size=default]/toggle-group:has-data-[icon=inline-end]:pr-2 group-data-[size=lg]/toggle-group:has-data-[icon=inline-end]:pr-2 group-data-[size=sm]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[size=default]/toggle-group:has-data-[icon=inline-start]:pl-2 group-data-[size=lg]/toggle-group:has-data-[icon=inline-start]:pl-2 group-data-[size=sm]/toggle-group:has-data-[icon=inline-start]:pl-1.5",
+    toggleVariants({ variant, size }),
+    className
+  )}
+  {...props}
+>
+  <slot />
+</button>

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

@@ -0,0 +1,74 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import type { ToggleVariantProps } from "@/components/ui/toggle/toggle-variants"
+
+type Props = HTMLAttributes<"div"> &
+  ToggleVariantProps & {
+    defaultValue?: string | string[]
+    multiple?: boolean
+    orientation?: "horizontal" | "vertical"
+    loop?: boolean
+    disabled?: boolean
+    spacing?: number
+  }
+
+const {
+  class: className,
+  style,
+  defaultValue,
+  multiple,
+  orientation = "horizontal",
+  loop,
+  disabled,
+  variant,
+  size,
+  spacing = 2,
+  ...props
+} = Astro.props
+
+const serializedDefaultValue = Array.isArray(defaultValue)
+  ? defaultValue.join(" ")
+  : defaultValue
+
+const resolvedStyle =
+  typeof style === "string"
+    ? `--gap: ${spacing}; ${style}`
+    : { "--gap": spacing, ...(style ?? {}) }
+---
+
+<div
+  data-slot="toggle-group"
+  data-default-value={serializedDefaultValue}
+  data-multiple={multiple ? "" : undefined}
+  data-orientation={orientation}
+  data-horizontal={orientation === "horizontal" ? "" : undefined}
+  data-vertical={orientation === "vertical" ? "" : undefined}
+  data-loop={loop}
+  data-disabled={disabled ? "" : undefined}
+  data-variant={variant}
+  data-size={size}
+  data-spacing={spacing}
+  style={resolvedStyle}
+  class={cn(
+    "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:shadow-xs [&[data-orientation=horizontal][data-spacing='0']>[data-slot=toggle-group-item]:first-child]:rounded-l-md [&[data-orientation=horizontal][data-spacing='0']>[data-slot=toggle-group-item]:last-child]:rounded-r-md [&[data-orientation=horizontal][data-spacing='0'][data-variant=outline]>[data-slot=toggle-group-item]:not(:first-child)]:border-l-0 [&[data-orientation=vertical][data-spacing='0']>[data-slot=toggle-group-item]:first-child]:rounded-t-md [&[data-orientation=vertical][data-spacing='0']>[data-slot=toggle-group-item]:last-child]:rounded-b-md [&[data-orientation=vertical][data-spacing='0'][data-variant=outline]>[data-slot=toggle-group-item]:not(:first-child)]:border-t-0 [&[data-spacing='0']>[data-slot=toggle-group-item]]:rounded-none [&[data-spacing='0']>[data-slot=toggle-group-item]]:px-2 [&[data-spacing='0']>[data-slot=toggle-group-item]]:shadow-none [&[data-spacing='0']>[data-slot=toggle-group-item]:has([data-icon=inline-end])]:pr-1.5 [&[data-spacing='0']>[data-slot=toggle-group-item]:has([data-icon=inline-start])]:pl-1.5",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/toggle-group"
+
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
+</script>

package/src/components/ui/typography/typeset.css

@@ -0,0 +1,441 @@
+/*
+ * shadcn/typeset
+ * https://ui.shadcn.com/docs/typeset.
+ */
+
+@layer components {
+  .typeset {
+    --typeset-font-body: inherit;
+    --typeset-font-heading: var(--font-heading);
+    --typeset-font-mono: var(--font-mono);
+    --typeset-size: 1em;
+    --typeset-leading: 1.75;
+    --typeset-flow: 1.25em;
+  }
+}
+
+@layer components {
+  .typeset {
+    font-family: var(--typeset-font-body);
+    font-size: calc(var(--typeset-size) * 1.125);
+    line-height: var(--typeset-leading);
+    color: var(--color-foreground, currentColor);
+    overflow-wrap: break-word;
+    margin-trim: block-start;
+
+    @media (min-width: 48rem), print {
+      font-size: var(--typeset-size);
+    }
+
+    --typeset-muted: var(
+      --color-muted-foreground,
+      color-mix(in oklab, currentColor 60%, transparent)
+    );
+    --typeset-rule: var(
+      --color-border,
+      color-mix(in oklab, currentColor 20%, transparent)
+    );
+  }
+
+  .typeset
+    *:not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ) {
+    &:where(p) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(h1, h2, h3, h4, h5, h6) {
+      color: var(--color-foreground, currentColor);
+      font-family: var(--typeset-font-heading);
+      font-weight: 600;
+      margin-block-end: 0;
+    }
+    &:where(h1) {
+      font-size: 1.75em;
+      line-height: 1.3;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h2) {
+      font-size: 1.25em;
+      line-height: 1.4;
+      margin-block-start: calc(var(--typeset-flow) * 1.4);
+    }
+    &:where(h3) {
+      font-size: 1.125em;
+      line-height: 1.45;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h4) {
+      font-size: 1em;
+      line-height: 1.5;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h5) {
+      font-size: 0.875em;
+      line-height: 1.5;
+      font-weight: 500;
+      color: var(--typeset-muted);
+      margin-block-start: calc(var(--typeset-flow) / 0.875);
+    }
+    &:where(h6) {
+      font-size: 0.8125em;
+      line-height: 1.5;
+      font-weight: 500;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--typeset-muted);
+      margin-block-start: calc(var(--typeset-flow) / 0.8125);
+    }
+    &:where([id]) {
+      scroll-margin-block-start: var(--typeset-flow);
+    }
+    &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+      margin-block-start: 1em;
+    }
+    &:where(:is(h1, h2, h3, h4) :is(code)) {
+      font-size: 0.9em;
+    }
+    &:where(a) {
+      color: inherit;
+      font-weight: 500;
+      text-decoration-line: underline;
+      text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+    &:where(a:hover) {
+      text-decoration-color: currentColor;
+    }
+    &:where(a:focus-visible) {
+      outline: 2px solid var(--color-ring, currentColor);
+      outline-offset: 2px;
+      border-radius: 0.125em;
+    }
+    &:where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
+      font-weight: inherit;
+    }
+    &:where(strong, b) {
+      font-weight: 600;
+    }
+    &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
+      font-weight: 600;
+    }
+    &:where(mark) {
+      background-color: color-mix(
+        in oklab,
+        oklch(0.86 0.17 95) 40%,
+        transparent
+      );
+      color: inherit;
+      padding: 0.05em 0.15em;
+      border-radius: 0.2em;
+    }
+    &:where(abbr[title]) {
+      text-decoration-line: underline;
+      text-decoration-style: dotted;
+      text-underline-offset: 0.2em;
+      cursor: help;
+    }
+    &:where(del, s) {
+      color: var(--typeset-muted);
+      text-decoration-line: line-through;
+    }
+    &:where(sup, sub) {
+      font-size: 0.75em;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+    }
+    &:where(sup) {
+      top: -0.5em;
+    }
+    &:where(sub) {
+      bottom: -0.25em;
+    }
+    &:where(sup a) {
+      text-decoration-line: none;
+      font-weight: 500;
+    }
+    &:where(ul) {
+      list-style-type: disc;
+    }
+    &:where(ol) {
+      list-style-type: decimal;
+    }
+    &:where(ul ul) {
+      list-style-type: circle;
+    }
+    &:where(ul ul ul) {
+      list-style-type: square;
+    }
+    &:where(ol[type="a" i]) {
+      list-style-type: lower-alpha;
+    }
+    &:where(ol[type="i" i]) {
+      list-style-type: lower-roman;
+    }
+    &:where(ol[type="A" s]) {
+      list-style-type: upper-alpha;
+    }
+    &:where(ol[type="I" s]) {
+      list-style-type: upper-roman;
+    }
+    &:where(ul, ol) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      padding-inline-start: 1.5em;
+    }
+    &:where(li) {
+      margin-block-start: 0.5em;
+      padding-inline-start: 0.4em;
+    }
+    &:where(li > p, li > ul, li > ol) {
+      margin-block-start: 0.5em;
+    }
+    &:where(ul > li)::marker,
+    &:where(ol > li)::marker {
+      color: var(--typeset-muted);
+    }
+    &:where(ul.contains-task-list) {
+      list-style-type: none;
+      padding-inline-start: 0.25em;
+    }
+    &:where(li.task-list-item > input[type="checkbox"]) {
+      margin-inline-end: 0.5em;
+      vertical-align: -0.1em;
+      accent-color: var(--color-primary, currentColor);
+    }
+    &:where(details) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(summary) {
+      cursor: pointer;
+      font-weight: 500;
+    }
+    &:where(summary)::marker {
+      color: var(--typeset-muted);
+    }
+    &:where(kbd) {
+      font-family: inherit;
+      font-size: 0.85em;
+      font-weight: 500;
+      border: 1px solid var(--typeset-rule);
+      border-block-end-width: 2px;
+      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
+      padding: 0.0625em 0.35em;
+    }
+    &:where(dl) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(dt) {
+      font-weight: 500;
+      margin-block-start: 1em;
+    }
+    &:where(dt + dt) {
+      margin-block-start: 0.25em;
+    }
+    &:where(dd) {
+      margin-block-start: 0.25em;
+      margin-inline-start: 0;
+      padding-inline-start: 1em;
+      color: var(--typeset-muted);
+    }
+    &:where(:not(pre) > code) {
+      background-color: var(
+        --color-muted,
+        color-mix(in oklab, currentColor 8%, transparent)
+      );
+      font-family: var(--typeset-font-mono);
+      font-size: 0.85em;
+      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
+      padding: 0.125em 0.3em;
+    }
+    &:where(pre) {
+      background-color: var(
+        --color-muted,
+        color-mix(in oklab, currentColor 8%, transparent)
+      );
+      font-family: var(--typeset-font-mono);
+      font-size: 0.875em;
+      line-height: 1.5;
+      tab-size: 2;
+      direction: ltr;
+      border-radius: var(--radius, 0.5em);
+      padding: 0.75em 1em;
+      overflow-x: auto;
+      margin-block-start: calc(var(--typeset-flow) / 0.875);
+      margin-block-end: 0;
+    }
+    &:where(pre code) {
+      background-color: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      padding: 0;
+      border-radius: 0;
+    }
+    &:where(blockquote) {
+      border-inline-start: 2px solid var(--typeset-rule);
+      padding-inline-start: 1em;
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+    &:where(hr) {
+      border: 0;
+      border-block-start: 1px solid var(--typeset-rule);
+      margin-block-start: calc(var(--typeset-flow) * 2.4);
+      margin-block-end: 0;
+    }
+    &:where(hr + h1, hr + h2, hr + h3, hr + h4) {
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(.footnotes, [data-footnotes]) {
+      margin-block-start: calc(var(--typeset-flow) * 2);
+      border-block-start: 1px solid var(--typeset-rule);
+      padding-block-start: var(--typeset-flow);
+      font-size: 0.875em;
+      color: var(--typeset-muted);
+    }
+    &:where(math[display="block"]) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-block: 0.25em;
+    }
+    &:where(img, video) {
+      border-radius: var(--radius, 0.5em);
+      max-width: 100%;
+      height: auto;
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(p img) {
+      margin-block-start: 0;
+    }
+    &:where(figure) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+    &:where(figcaption, caption) {
+      color: var(--typeset-muted);
+      font-size: 0.875em;
+      text-align: center;
+      margin-block-start: calc(0.75em / 0.875);
+    }
+    &:where(caption) {
+      caption-side: bottom;
+    }
+    &:where(table) {
+      max-width: 100%;
+      font-size: 1em;
+      line-height: 1.5;
+      font-variant-numeric: tabular-nums;
+      border-collapse: separate;
+      border-spacing: 0;
+      border-block-end: 1px solid var(--typeset-rule);
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(.typeset-scroll) {
+      overflow-x: auto;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(.typeset-scroll > *) {
+      margin-block-start: 0;
+    }
+    &:where(.typeset-scroll table) {
+      width: max-content;
+      max-width: none;
+    }
+    &:where(thead th) {
+      font-weight: 500;
+      text-align: start;
+      white-space: nowrap;
+      padding: 0.65em 1em;
+    }
+    &:where(:is(tbody, tfoot) :is(td, th)) {
+      padding: 0.75em 1em;
+      text-align: start;
+      vertical-align: top;
+      border-block-start: 1px solid var(--typeset-rule);
+    }
+    &:where(tbody th, tfoot th) {
+      font-weight: 500;
+    }
+    &:where(th:first-child, td:first-child) {
+      padding-inline-start: 0;
+    }
+    &:where(th[align="center"], td[align="center"]) {
+      text-align: center;
+    }
+    &:where(th[align="right"], td[align="right"]) {
+      text-align: end;
+    }
+    &:where(li > blockquote, li > table, li > figure) {
+      margin-block-start: 0.5em;
+    }
+    &:where(li > pre) {
+      margin-block-start: calc(0.5em / 0.875);
+    }
+    @media print {
+      &:where(pre, table, blockquote, figure) {
+        break-inside: avoid;
+      }
+      &:where(h1, h2, h3, h4) {
+        break-after: avoid;
+      }
+    }
+    @media (forced-colors: active) {
+      &:where(:not(pre) > code) {
+        border: 1px solid;
+      }
+    }
+  }
+
+  .typeset
+    > :where(:first-child):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ),
+  .typeset
+    > :where(:first-child)
+    > :where(:first-child):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ),
+  .typeset
+    :where(
+      li > :first-child,
+      blockquote > :first-child,
+      td > :first-child,
+      th > :first-child,
+      dd > :first-child,
+      figure > :first-child,
+      figure > picture > img
+    ):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ) {
+    margin-block-start: 0;
+  }
+}