fulldev-ui 0.9.2 → 0.10.0

package/src/components/ui/typography/typography-table-cell.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"td">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"td"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<td data-slot="typography-table-cell" class={cn(className)} {...props}>
+<td
+  data-slot="typography-table-cell"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </td>
 
@@ -17,25 +25,36 @@ const { class: className, ...props } = Astro.props
 
   [data-slot="typography-table-cell"],
   [data-slot="typography-table"] td,
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    td:not(.no-typography):not(.no-typography *) {
-    @apply p-2 text-left align-middle text-sm whitespace-nowrap;
+  [data-slot="typography"] > table td {
+    @apply border-border border-t px-4 py-3 text-left align-middle;
+  }
+
+  [data-slot="typography-table-cell"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-table-cell"][data-size="default"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography-table-cell"][data-size="lg"] {
+    @apply text-lg;
+  }
+
+  [data-slot="typography-table"] tbody tr:last-child td,
+  [data-slot="typography"] > table tbody tr:last-child td {
+    @apply border-b-0;
   }
 
   [data-slot="typography-table-cell"][align="center"],
   [data-slot="typography-table"] td[align="center"],
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    td:not(.no-typography):not(.no-typography *)[align="center"] {
+  [data-slot="typography"] > table td[align="center"] {
     @apply text-center;
   }
 
   [data-slot="typography-table-cell"][align="right"],
   [data-slot="typography-table"] td[align="right"],
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    td:not(.no-typography):not(.no-typography *)[align="right"] {
+  [data-slot="typography"] > table td[align="right"] {
     @apply text-right;
   }
 </style>

package/src/components/ui/typography/typography-table-head.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"th">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"th"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<th data-slot="typography-table-head" class={cn(className)} {...props}>
+<th
+  data-slot="typography-table-head"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </th>
 
@@ -17,25 +25,31 @@ const { class: className, ...props } = Astro.props
 
   [data-slot="typography-table-head"],
   [data-slot="typography-table"] th,
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    th:not(.no-typography):not(.no-typography *) {
-    @apply text-foreground h-10 px-2 text-left align-middle text-sm font-medium whitespace-nowrap;
+  [data-slot="typography"] > table th {
+    @apply border-border border-b px-4 py-3 text-left font-semibold;
+  }
+
+  [data-slot="typography-table-head"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-table-head"][data-size="default"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography-table-head"][data-size="lg"] {
+    @apply text-lg;
   }
 
   [data-slot="typography-table-head"][align="center"],
   [data-slot="typography-table"] th[align="center"],
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    th:not(.no-typography):not(.no-typography *)[align="center"] {
+  [data-slot="typography"] > table th[align="center"] {
     @apply text-center;
   }
 
   [data-slot="typography-table-head"][align="right"],
   [data-slot="typography-table"] th[align="right"],
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    th:not(.no-typography):not(.no-typography *)[align="right"] {
+  [data-slot="typography"] > table th[align="right"] {
     @apply text-right;
   }
 </style>

package/src/components/ui/typography/typography-table-row.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"tr">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"tr"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<tr data-slot="typography-table-row" class={cn(className)} {...props}>
+<tr
+  data-slot="typography-table-row"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </tr>
 
@@ -17,17 +25,19 @@ const { class: className, ...props } = Astro.props
 
   [data-slot="typography-table-row"],
   [data-slot="typography-table"] tr,
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    tr:not(.no-typography):not(.no-typography *) {
-    @apply border-b transition-colors;
+  [data-slot="typography"] > table tr {
+    @apply even:bg-muted m-0 border-t p-0;
   }
 
-  [data-slot="typography-table"] tbody tr:last-child,
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    tbody
-    tr:not(.no-typography):not(.no-typography *):last-child {
-    @apply border-b-0;
+  [data-slot="typography-table-row"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-table-row"][data-size="default"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography-table-row"][data-size="lg"] {
+    @apply text-lg;
   }
 </style>

package/src/components/ui/typography/typography-table.astro

@@ -3,15 +3,31 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"table"> & {
   containerClass?: string
+  size?: Size
 }
 
-const { class: className, containerClass, ...props } = Astro.props
+const {
+  class: className,
+  containerClass,
+  size = "default",
+  ...props
+} = Astro.props
 ---
 
-<div data-slot="typography-table-container" class={cn(containerClass)}>
-  <table data-slot="typography-table" class={cn(className)} {...props}>
+<div
+  data-slot="typography-table-container"
+  data-size={size}
+  class={cn(containerClass)}
+>
+  <table
+    data-slot="typography-table"
+    data-size={size}
+    class={cn(className)}
+    {...props}
+  >
     <slot />
   </table>
 </div>
@@ -20,31 +36,24 @@ const { class: className, containerClass, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-table-container"] {
-    @apply border-border w-full overflow-x-auto rounded-xl border;
+    @apply border-border my-6 w-full overflow-y-auto rounded-xl border;
   }
 
   [data-slot="typography-table"],
-  [data-slot="typography"] table:not(.no-typography):not(.no-typography *) {
-    @apply w-full caption-bottom;
+  [data-slot="typography"] > table {
+    @apply w-full border-collapse;
   }
 
-  [data-slot="typography"] table:not(.no-typography):not(.no-typography *) {
-    @apply border-border overflow-x-auto rounded-xl border;
-    border-spacing: 0;
+  [data-slot="typography-table"][data-size="sm"] {
+    @apply text-sm;
   }
 
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    thead,
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    tbody,
-  [data-slot="typography"] table:not(.no-typography):not(.no-typography *) tr {
-    @apply w-full;
+  [data-slot="typography-table"][data-size="default"],
+  [data-slot="typography"] > table {
+    @apply text-base;
   }
 
-  [data-slot="typography-table"],
-  [data-slot="typography"] table:not(.no-typography):not(.no-typography *) {
-    @apply text-sm;
+  [data-slot="typography-table"][data-size="lg"] {
+    @apply text-lg;
   }
 </style>

package/src/components/ui/typography/typography.astro

@@ -3,10 +3,8 @@ import type { HTMLTag, Polymorphic } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props<Tag extends HTMLTag> = Polymorphic<{
-  as: Tag
-  size?: "sm" | "default" | "lg"
-}>
+type Size = "sm" | "default" | "lg"
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; size?: Size }>
 
 const {
   as: Tag = "div",
@@ -30,15 +28,7 @@ const {
 
   [data-slot="typography"]
     > :is(
-      p,
-      blockquote,
-      ul,
-      ol,
-      table,
       [data-slot="typography-lead"],
-      [data-slot="typography-p"],
-      [data-slot="typography-blockquote"],
-      [data-slot="typography-list"],
       [data-slot="typography-table-container"],
       div,
       section,
@@ -47,7 +37,6 @@ const {
       nav,
       figure,
       details,
-      .docs-code-block,
       pre,
       small,
       dl,
@@ -59,39 +48,42 @@ const {
     @apply mt-6;
   }
 
-  [data-slot="typography"]
-    > :is(h2, [data-slot="typography-h2"]):not(:first-child) {
+  [data-slot="typography"] > h1 {
+    @apply scroll-m-20 text-4xl font-semibold tracking-tight text-balance;
+  }
+
+  [data-slot="typography"] > h2 {
+    @apply scroll-m-20 text-3xl font-semibold tracking-tight;
+  }
+
+  [data-slot="typography"] > h2:first-child {
+    @apply mt-0;
+  }
+
+  [data-slot="typography"] > h2:not(:first-child) {
     @apply mt-10;
   }
 
-  [data-slot="typography"]
-    > :is(h3, h4, [data-slot="typography-h3"], [data-slot="typography-h4"]):not(
-      :first-child
-    ) {
+  [data-slot="typography"] > h3 {
+    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+  }
+
+  [data-slot="typography"] > h3:not(:first-child) {
+    @apply mt-8;
+  }
+
+  [data-slot="typography"] > h4 {
+    @apply scroll-m-20 text-xl font-semibold tracking-tight;
+  }
+
+  [data-slot="typography"] > h4:not(:first-child) {
     @apply mt-8;
   }
 
   [data-slot="typography"]
-    > :is(
-      h1,
-      h2,
-      h3,
-      h4,
-      [data-slot="typography-h1"],
-      [data-slot="typography-h2"],
-      [data-slot="typography-h3"],
-      [data-slot="typography-h4"]
-    )
+    > :is(h1, h2, h3, h4)
     + :is(
-      p,
-      blockquote,
-      ul,
-      ol,
-      table,
       [data-slot="typography-lead"],
-      [data-slot="typography-p"],
-      [data-slot="typography-blockquote"],
-      [data-slot="typography-list"],
       [data-slot="typography-table-container"],
       div,
       section,
@@ -100,8 +92,12 @@ const {
       nav,
       figure,
       details,
-      .docs-code-block,
+      p,
+      blockquote,
       pre,
+      ul,
+      ol,
+      table,
       small,
       dl,
       img,
@@ -112,6 +108,31 @@ const {
     @apply mt-4;
   }
 
+  [data-slot="typography"] > p {
+    @apply text-base leading-7;
+  }
+
+  [data-slot="typography"] > p:not(:first-child) {
+    @apply mt-6;
+  }
+
+  [data-slot="typography"]
+    > :is(h1, h2, h3, h4)
+    + :is(p, [data-slot="typography-lead"]):not(:first-child) {
+    @apply mt-4;
+  }
+
+  [data-slot="typography"] > a:not([data-slot]),
+  [data-slot="typography"]
+    > :is(p, blockquote, ul, ol, dl, table)
+    a:not([data-slot]) {
+    @apply text-primary font-medium underline underline-offset-4;
+  }
+
+  [data-slot="typography"] > blockquote {
+    @apply mt-6 border-l-2 pl-6 text-base italic;
+  }
+
   [data-slot="typography"] > hr {
     @apply border-border my-8;
   }
@@ -126,16 +147,16 @@ const {
 
   [data-slot="typography"] > .docs-code-block > pre,
   [data-slot="typography"] > .docs-code-block > pre.astro-code {
-    @apply m-0 rounded-none border-0 bg-transparent! p-4 pr-14 text-sm leading-(--text-sm--line-height);
+    @apply m-0 rounded-none border-0 !bg-transparent p-4 pr-14 text-sm leading-[var(--text-sm--line-height)];
     font-family: var(--font-mono);
   }
 
   [data-slot="typography"] > .docs-code-block > pre.astro-code code {
-    @apply text-sm leading-(--text-sm--line-height) text-(--shiki-light,var(--foreground))!;
+    @apply text-sm leading-[var(--text-sm--line-height)] !text-[var(--shiki-light,var(--foreground))];
   }
 
   .dark [data-slot="typography"] > .docs-code-block > pre.astro-code code {
-    @apply text-(--shiki-dark,var(--foreground))!;
+    @apply !text-[var(--shiki-dark,var(--foreground))];
   }
 
   .dark
@@ -143,7 +164,7 @@ const {
     > .docs-code-block
     > pre.astro-code
     span[style*="--shiki-dark"] {
-    @apply font-(--shiki-dark-font-weight,inherit)! text-(--shiki-dark)! [font-style:var(--shiki-dark-font-style,inherit)]! [text-decoration:var(--shiki-dark-text-decoration,inherit)]!;
+    @apply ![font-weight:var(--shiki-dark-font-weight,inherit)] !text-[var(--shiki-dark)] ![font-style:var(--shiki-dark-font-style,inherit)] ![text-decoration:var(--shiki-dark-text-decoration,inherit)];
   }
 
   [data-slot="typography"] > .docs-code-block > .docs-code-copy {
@@ -154,6 +175,42 @@ const {
     @apply size-4;
   }
 
+  [data-slot="typography"] > ul,
+  [data-slot="typography"] > ol {
+    @apply my-6 ml-6 text-base;
+  }
+
+  [data-slot="typography"] > ul {
+    @apply list-disc;
+  }
+
+  [data-slot="typography"] > ol {
+    @apply list-decimal;
+  }
+
+  [data-slot="typography"] > ul > li,
+  [data-slot="typography"] > ol > li {
+    @apply mt-2;
+  }
+
+  [data-slot="typography"] > [data-slot="typography-lead"] {
+    @apply text-muted-foreground;
+  }
+
+  [data-slot="typography"][data-size="sm"] > [data-slot="typography-lead"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography"] > [data-slot="typography-lead"],
+  [data-slot="typography"][data-size="default"]
+    > [data-slot="typography-lead"] {
+    @apply text-lg;
+  }
+
+  [data-slot="typography"][data-size="lg"] > [data-slot="typography-lead"] {
+    @apply text-xl;
+  }
+
   [data-slot="typography"] > small {
     @apply block leading-none font-medium;
   }
@@ -162,19 +219,88 @@ const {
     @apply text-sm;
   }
 
+  [data-slot="typography"] > table {
+    @apply border-border my-6 block w-full overflow-x-auto rounded-lg border;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  [data-slot="typography"] > table th,
+  [data-slot="typography"] > table td {
+    @apply border-border border-b px-4 py-2 text-left align-top whitespace-nowrap;
+  }
+
+  [data-slot="typography"] > table th {
+    @apply text-foreground bg-muted/40 font-medium;
+  }
+
+  [data-slot="typography"] > table tr:last-child td {
+    @apply border-b-0;
+  }
+
+  [data-slot="typography"] > table thead,
+  [data-slot="typography"] > table tbody,
+  [data-slot="typography"] > table tr {
+    @apply w-full;
+  }
+
+  [data-slot="typography"] > table tr {
+    @apply grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)];
+  }
+
+  [data-slot="typography"] > table tr {
+    @apply even:bg-muted/40 m-0 border-t p-0 first:border-t-0;
+  }
+
+  [data-slot="typography"] > table th {
+    @apply border-r px-4 py-2 text-left font-bold last:border-r-0;
+  }
+
+  [data-slot="typography"] > table th[align="center"] {
+    @apply text-center;
+  }
+
+  [data-slot="typography"] > table th[align="right"] {
+    @apply text-right;
+  }
+
+  [data-slot="typography"] > table td {
+    @apply border-r px-4 py-2 text-left last:border-r-0;
+  }
+
+  [data-slot="typography"] > table td[align="center"] {
+    @apply text-center;
+  }
+
+  [data-slot="typography"] > table td[align="right"] {
+    @apply text-right;
+  }
+
+  [data-slot="typography"] > table tbody tr:last-child td {
+    @apply border-b-0;
+  }
+
+  [data-slot="typography"] :not(pre) > code {
+    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+  }
+
+  [data-slot="typography"] > table :not(pre) > code {
+    @apply rounded-md text-sm leading-5 font-normal;
+  }
+
   [data-slot="typography"] > pre.astro-code {
-    @apply border-border bg-muted/60! rounded-xl border p-4 text-sm leading-(--text-sm--line-height);
+    @apply border-border !bg-muted/60 rounded-xl border p-4 text-sm leading-[var(--text-sm--line-height)];
   }
 
   [data-slot="typography"] > pre.astro-code code {
-    @apply text-inherit!;
+    @apply !text-inherit;
   }
 
   .dark [data-slot="typography"] > pre.astro-code {
-    @apply text-(--shiki-dark,var(--foreground))!;
+    @apply !text-[var(--shiki-dark,var(--foreground))];
   }
 
   .dark [data-slot="typography"] > pre.astro-code span[style*="--shiki-dark"] {
-    @apply font-(--shiki-dark-font-weight,inherit)! text-(--shiki-dark)! [font-style:var(--shiki-dark-font-style,inherit)]! [text-decoration:var(--shiki-dark-text-decoration,inherit)]!;
+    @apply ![font-weight:var(--shiki-dark-font-weight,inherit)] !text-[var(--shiki-dark)] ![font-style:var(--shiki-dark-font-style,inherit)] ![text-decoration:var(--shiki-dark-text-decoration,inherit)];
   }
 </style>

package/src/components/ui/video/video.astro

@@ -3,19 +3,13 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = Omit<HTMLAttributes<"iframe">, "src"> & {
+type Props = Omit<HTMLAttributes<"div">, "src"> & {
   src?: string
-  title?: string
 }
 
-const {
-  class: className,
-  src,
-  title = "Embedded video",
-  ...props
-} = Astro.props
+const { class: className, src, ...props } = Astro.props
 
-const getVideoId = (value?: string) => {
+const getEmbedSrc = (value?: string) => {
   if (!value) return undefined
 
   try {
@@ -23,32 +17,25 @@ const getVideoId = (value?: string) => {
     const host = url.hostname.replace(/^www\./, "")
 
     if (host === "youtube.com" && url.pathname === "/watch") {
-      return url.searchParams.get("v") ?? undefined
+      const id = url.searchParams.get("v")
+      return id ? `https://www.youtube.com/embed/${id}` : undefined
     }
 
     if (host === "youtube.com" && url.pathname.startsWith("/shorts/")) {
-      return url.pathname.split("/")[2]
+      const id = url.pathname.split("/")[2]
+      return id ? `https://www.youtube.com/embed/${id}` : undefined
     }
 
     if (host === "youtu.be") {
-      return url.pathname.slice(1)
+      const id = url.pathname.slice(1)
+      return id ? `https://www.youtube.com/embed/${id}` : undefined
     }
   } catch {
     return undefined
   }
 }
 
-const videoId = getVideoId(src)
-const embedSrc = videoId
-  ? `https://www.youtube-nocookie.com/embed/${videoId}`
-  : undefined
-const thumbnailSrc = videoId
-  ? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`
-  : undefined
-const srcdoc =
-  embedSrc && thumbnailSrc
-    ? `<style>*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;place-items:center;background:#000;font-family:system-ui,sans-serif}a{position:absolute;inset:0;display:grid;place-items:center;color:white;text-decoration:none}img{width:100%;height:100%;object-fit:cover}span{position:absolute;display:grid;place-items:center;width:4.5rem;height:3.25rem;border-radius:1rem;background:rgb(0 0 0 / .72);box-shadow:0 10px 30px rgb(0 0 0 / .25);transition:background .15s ease}span:before{content:"";margin-left:.25rem;border-top:.7rem solid transparent;border-bottom:.7rem solid transparent;border-left:1.1rem solid currentColor}a:hover span{background:#ff0033}</style><a href="${embedSrc}?autoplay=1" aria-label="Play video"><img src="${thumbnailSrc}" alt="" /><span></span></a>`
-    : undefined
+const embedSrc = getEmbedSrc(src)
 const isShort = src?.includes("/shorts/")
 ---
 
@@ -56,12 +43,9 @@ const isShort = src?.includes("/shorts/")
   embedSrc && (
     <iframe
       src={embedSrc}
-      srcdoc={srcdoc}
-      title={title}
+      title="Embedded video"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       allowfullscreen
-      loading="lazy"
-      referrerpolicy="strict-origin-when-cross-origin"
       class={cn(
         "bg-muted w-full rounded-lg border",
         isShort ? "aspect-9/16 max-w-xs" : "aspect-video",