fulldev-ui 0.12.0 → 0.13.0

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

@@ -9,29 +9,20 @@ type Props = HTMLAttributes<"a"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
-<a data-slot="typography-a" data-size={size} class={cn(className)} {...props}>
+<a
+  data-slot="typography-a"
+  data-size={size}
+  class={cn(
+    "text-primary font-medium underline underline-offset-4",
+    sizeClass,
+    className
+  )}
+  {...props}
+>
   <slot />
 </a>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-a"],
-  [data-slot="typography"] > a:not([data-slot]) {
-    @apply text-primary font-medium underline underline-offset-4;
-  }
-
-  [data-slot="typography-a"][data-size="sm"] {
-    @apply text-sm;
-  }
-
-  [data-slot="typography-a"][data-size="default"] {
-    @apply text-base;
-  }
-
-  [data-slot="typography-a"][data-size="lg"] {
-    @apply text-lg;
-  }
-</style>

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

@@ -9,35 +9,16 @@ type Props = HTMLAttributes<"blockquote"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
 <blockquote
   data-slot="typography-blockquote"
   data-size={size}
-  class={cn(className)}
+  class={cn("mt-6 border-l-2 pl-6 italic", sizeClass, className)}
   {...props}
 >
   <slot />
 </blockquote>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-blockquote"],
-  [data-slot="typography"] > blockquote {
-    @apply mt-6 border-l-2 pl-6 italic;
-  }
-
-  [data-slot="typography-blockquote"][data-size="sm"] {
-    @apply text-sm;
-  }
-
-  [data-slot="typography-blockquote"][data-size="default"],
-  [data-slot="typography"] > blockquote {
-    @apply text-base;
-  }
-
-  [data-slot="typography-blockquote"][data-size="lg"] {
-    @apply text-lg;
-  }
-</style>

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

@@ -9,33 +9,20 @@ type Props = HTMLAttributes<"h1"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-3xl" : size === "lg" ? "text-5xl" : "text-4xl"
 ---
 
-<h1 data-slot="typography-h1" data-size={size} class={cn(className)} {...props}>
+<h1
+  data-slot="typography-h1"
+  data-size={size}
+  class={cn(
+    "scroll-m-20 font-semibold tracking-tight text-balance",
+    sizeClass,
+    className
+  )}
+  {...props}
+>
   <slot />
 </h1>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-h1"],
-  [data-slot="typography"] > h1 {
-    @apply scroll-m-20 font-semibold tracking-tight text-balance;
-  }
-
-  [data-slot="typography-h1"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"] > h1 {
-    @apply text-3xl;
-  }
-
-  [data-slot="typography-h1"][data-size="default"],
-  [data-slot="typography"] > h1,
-  [data-slot="typography"][data-size="default"] > h1 {
-    @apply text-4xl;
-  }
-
-  [data-slot="typography-h1"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"] > h1 {
-    @apply text-5xl;
-  }
-</style>

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

@@ -9,38 +9,20 @@ type Props = HTMLAttributes<"h2"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-2xl" : size === "lg" ? "text-4xl" : "text-3xl"
 ---
 
-<h2 data-slot="typography-h2" data-size={size} class={cn(className)} {...props}>
+<h2
+  data-slot="typography-h2"
+  data-size={size}
+  class={cn(
+    "scroll-m-20 font-semibold tracking-tight first:mt-0",
+    sizeClass,
+    className
+  )}
+  {...props}
+>
   <slot />
 </h2>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-h2"],
-  [data-slot="typography"] > h2 {
-    @apply scroll-m-20 font-semibold tracking-tight;
-  }
-
-  [data-slot="typography-h2"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"] > h2 {
-    @apply text-2xl;
-  }
-
-  [data-slot="typography-h2"][data-size="default"],
-  [data-slot="typography"] > h2,
-  [data-slot="typography"][data-size="default"] > h2 {
-    @apply text-3xl;
-  }
-
-  [data-slot="typography-h2"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"] > h2 {
-    @apply text-4xl;
-  }
-
-  [data-slot="typography-h2"]:first-child,
-  [data-slot="typography"] > h2:first-child {
-    @apply mt-0;
-  }
-</style>

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

@@ -9,33 +9,16 @@ type Props = HTMLAttributes<"h3"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-xl" : size === "lg" ? "text-3xl" : "text-2xl"
 ---
 
-<h3 data-slot="typography-h3" data-size={size} class={cn(className)} {...props}>
+<h3
+  data-slot="typography-h3"
+  data-size={size}
+  class={cn("scroll-m-20 font-semibold tracking-tight", sizeClass, className)}
+  {...props}
+>
   <slot />
 </h3>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-h3"],
-  [data-slot="typography"] > h3 {
-    @apply scroll-m-20 font-semibold tracking-tight;
-  }
-
-  [data-slot="typography-h3"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"] > h3 {
-    @apply text-xl;
-  }
-
-  [data-slot="typography-h3"][data-size="default"],
-  [data-slot="typography"] > h3,
-  [data-slot="typography"][data-size="default"] > h3 {
-    @apply text-2xl;
-  }
-
-  [data-slot="typography-h3"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"] > h3 {
-    @apply text-3xl;
-  }
-</style>

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

@@ -9,33 +9,16 @@ type Props = HTMLAttributes<"h4"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-lg" : size === "lg" ? "text-2xl" : "text-xl"
 ---
 
-<h4 data-slot="typography-h4" data-size={size} class={cn(className)} {...props}>
+<h4
+  data-slot="typography-h4"
+  data-size={size}
+  class={cn("scroll-m-20 font-semibold tracking-tight", sizeClass, className)}
+  {...props}
+>
   <slot />
 </h4>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-h4"],
-  [data-slot="typography"] > h4 {
-    @apply scroll-m-20 font-semibold tracking-tight;
-  }
-
-  [data-slot="typography-h4"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"] > h4 {
-    @apply text-lg;
-  }
-
-  [data-slot="typography-h4"][data-size="default"],
-  [data-slot="typography"] > h4,
-  [data-slot="typography"][data-size="default"] > h4 {
-    @apply text-xl;
-  }
-
-  [data-slot="typography-h4"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"] > h4 {
-    @apply text-2xl;
-  }
-</style>

package/src/components/ui/typography/typography-inline-code.astro

@@ -9,39 +9,20 @@ type Props = HTMLAttributes<"code"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm"
 ---
 
 <code
   data-slot="typography-inline-code"
   data-size={size}
-  class={cn(className)}
+  class={cn(
+    "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono font-semibold",
+    sizeClass,
+    className
+  )}
   {...props}
 >
   <slot />
 </code>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-inline-code"],
-  [data-slot="typography"] :not(pre) > code {
-    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono font-semibold;
-  }
-
-  [data-slot="typography-inline-code"][data-size="sm"] {
-    @apply text-xs;
-  }
-
-  [data-slot="typography-inline-code"][data-size="default"],
-  [data-slot="typography"] :not(pre) > code {
-    @apply text-sm;
-  }
-
-  [data-slot="typography-inline-code"][data-size="lg"] {
-    @apply text-base;
-  }
-
-  [data-slot="typography"] > table :not(pre) > code {
-    @apply rounded-md text-sm leading-5 font-normal;
-  }
-</style>

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

@@ -9,38 +9,16 @@ type Props = HTMLAttributes<"p"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-base" : size === "lg" ? "text-xl" : "text-lg"
 ---
 
 <p
   data-slot="typography-lead"
   data-size={size}
-  class={cn(className)}
+  class={cn("text-muted-foreground", sizeClass, className)}
   {...props}
 >
   <slot />
 </p>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-lead"] {
-    @apply text-muted-foreground;
-  }
-
-  [data-slot="typography-lead"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"] > [data-slot="typography-lead"] {
-    @apply text-base;
-  }
-
-  [data-slot="typography-lead"][data-size="default"],
-  [data-slot="typography"] > [data-slot="typography-lead"],
-  [data-slot="typography"][data-size="default"]
-    > [data-slot="typography-lead"] {
-    @apply text-lg;
-  }
-
-  [data-slot="typography-lead"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"] > [data-slot="typography-lead"] {
-    @apply text-xl;
-  }
-</style>

package/src/components/ui/typography/typography-list-item.astro

@@ -9,36 +9,16 @@ type Props = HTMLAttributes<"li"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
 <li
   data-slot="typography-list-item"
   data-size={size}
-  class={cn(className)}
+  class={cn("mt-2", sizeClass, className)}
   {...props}
 >
   <slot />
 </li>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-list-item"],
-  [data-slot="typography-list"] > li,
-  [data-slot="typography"] > ul > li,
-  [data-slot="typography"] > ol > li {
-    @apply mt-2;
-  }
-
-  [data-slot="typography-list-item"][data-size="sm"] {
-    @apply text-sm;
-  }
-
-  [data-slot="typography-list-item"][data-size="default"] {
-    @apply text-base;
-  }
-
-  [data-slot="typography-list-item"][data-size="lg"] {
-    @apply text-lg;
-  }
-</style>

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

@@ -1,5 +1,5 @@
 ---
-import type { HTMLTag, Polymorphic } from "astro/types"
+import type { Polymorphic } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
@@ -12,52 +12,22 @@ const {
   size = "default",
   ...props
 } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
 <Tag
   data-slot="typography-list"
   data-size={size}
   data-ordered={Tag === "ol" ? "" : undefined}
-  class={cn(className)}
+  class={cn(
+    "my-6 ml-6",
+    Tag === "ol" ? "list-decimal" : "list-disc",
+    sizeClass,
+    className
+  )}
   {...props}
 >
   <slot />
 </Tag>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-list"],
-  [data-slot="typography"] > ul,
-  [data-slot="typography"] > ol {
-    @apply my-6 ml-6;
-  }
-
-  [data-slot="typography-list"][data-size="sm"] {
-    @apply text-sm;
-  }
-
-  [data-slot="typography-list"][data-size="default"],
-  [data-slot="typography"] > ul,
-  [data-slot="typography"] > ol {
-    @apply text-base;
-  }
-
-  [data-slot="typography-list"][data-size="lg"] {
-    @apply text-lg;
-  }
-
-  [data-slot="typography-list"]:not([data-ordered]),
-  [data-slot="typography"] > ul {
-    @apply list-disc;
-  }
-
-  [data-slot="typography-list"][data-ordered],
-  [data-slot="typography"] > ol {
-    @apply list-decimal;
-  }
-
-  [data-slot="typography-list"] > li {
-    @apply mt-2;
-  }
-</style>

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

@@ -9,35 +9,16 @@ type Props = HTMLAttributes<"p"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
-<p data-slot="typography-p" data-size={size} class={cn(className)} {...props}>
+<p
+  data-slot="typography-p"
+  data-size={size}
+  class={cn("leading-7 [&:not(:first-child)]:mt-6", sizeClass, className)}
+  {...props}
+>
   <slot />
 </p>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-p"],
-  [data-slot="typography"] > p {
-    @apply leading-7;
-  }
-
-  [data-slot="typography-p"][data-size="sm"] {
-    @apply text-sm;
-  }
-
-  [data-slot="typography-p"][data-size="default"],
-  [data-slot="typography"] > p {
-    @apply text-base;
-  }
-
-  [data-slot="typography-p"][data-size="lg"] {
-    @apply text-lg;
-  }
-
-  [data-slot="typography-p"]:not(:first-child),
-  [data-slot="typography"] > p:not(:first-child) {
-    @apply mt-6;
-  }
-</style>

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

@@ -9,52 +9,21 @@ type Props = HTMLAttributes<"td"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
 <td
   data-slot="typography-table-cell"
   data-size={size}
-  class={cn(className)}
+  class={cn(
+    "border-border border-t px-4 py-3 text-left align-middle",
+    "[&[align=center]]:text-center [&[align=right]]:text-right",
+    sizeClass,
+    className
+  )}
   {...props}
 >
   <slot />
 </td>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-table-cell"],
-  [data-slot="typography-table"] td,
-  [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 td[align="center"] {
-    @apply text-center;
-  }
-
-  [data-slot="typography-table-cell"][align="right"],
-  [data-slot="typography-table"] td[align="right"],
-  [data-slot="typography"] > table td[align="right"] {
-    @apply text-right;
-  }
-</style>

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

@@ -9,47 +9,21 @@ type Props = HTMLAttributes<"th"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
 <th
   data-slot="typography-table-head"
   data-size={size}
-  class={cn(className)}
+  class={cn(
+    "border-border border-b px-4 py-3 text-left font-semibold",
+    "[&[align=center]]:text-center [&[align=right]]:text-right",
+    sizeClass,
+    className
+  )}
   {...props}
 >
   <slot />
 </th>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-table-head"],
-  [data-slot="typography-table"] th,
-  [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 th[align="center"] {
-    @apply text-center;
-  }
-
-  [data-slot="typography-table-head"][align="right"],
-  [data-slot="typography-table"] th[align="right"],
-  [data-slot="typography"] > table th[align="right"] {
-    @apply text-right;
-  }
-</style>

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

@@ -9,35 +9,16 @@ type Props = HTMLAttributes<"tr"> & {
 }
 
 const { class: className, size = "default", ...props } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
 <tr
   data-slot="typography-table-row"
   data-size={size}
-  class={cn(className)}
+  class={cn("even:bg-muted m-0 border-t p-0", sizeClass, className)}
   {...props}
 >
   <slot />
 </tr>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-table-row"],
-  [data-slot="typography-table"] tr,
-  [data-slot="typography"] > table tr {
-    @apply even:bg-muted m-0 border-t p-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>