fulldev-ui 0.11.1 → 0.13.0

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>

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

@@ -15,45 +15,25 @@ const {
   size = "default",
   ...props
 } = Astro.props
+
+const sizeClass =
+  size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base"
 ---
 
 <div
   data-slot="typography-table-container"
   data-size={size}
-  class={cn(containerClass)}
+  class={cn(
+    "border-border my-6 w-full overflow-x-auto rounded-xl border",
+    containerClass
+  )}
 >
   <table
     data-slot="typography-table"
     data-size={size}
-    class={cn(className)}
+    class={cn("w-full border-collapse", sizeClass, className)}
     {...props}
   >
     <slot />
   </table>
 </div>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography-table-container"] {
-    @apply border-border my-6 w-full overflow-y-auto rounded-xl border;
-  }
-
-  [data-slot="typography-table"],
-  [data-slot="typography"] > table {
-    @apply w-full border-collapse;
-  }
-
-  [data-slot="typography-table"][data-size="sm"] {
-    @apply text-sm;
-  }
-
-  [data-slot="typography-table"][data-size="default"],
-  [data-slot="typography"] > table {
-    @apply text-base;
-  }
-
-  [data-slot="typography-table"][data-size="lg"] {
-    @apply text-lg;
-  }
-</style>