fulldev-ui 0.9.3 → 0.10.1

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

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"code">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"code"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<code data-slot="typography-inline-code" class={cn(className)} {...props}>
+<code
+  data-slot="typography-inline-code"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </code>
 
@@ -16,16 +24,24 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-inline-code"],
-  [data-slot="typography"]
-    :not(pre)
-    > code:not(.no-typography):not(.no-typography *) {
-    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm;
+  [data-slot="typography"] :not(pre) > code {
+    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono font-semibold;
   }
 
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    :not(pre)
-    > code:not(.no-typography):not(.no-typography *) {
-    @apply rounded-md text-sm leading-5;
+  [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

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"p">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"p"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<p data-slot="typography-lead" class={cn(className)} {...props}>
+<p
+  data-slot="typography-lead"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </p>
 
@@ -16,6 +24,23 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-lead"] {
-    @apply text-muted-foreground text-lg;
+    @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

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"li">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"li"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<li data-slot="typography-list-item" class={cn(className)} {...props}>
+<li
+  data-slot="typography-list-item"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </li>
 
@@ -17,12 +25,20 @@ const { class: className, ...props } = Astro.props
 
   [data-slot="typography-list-item"],
   [data-slot="typography-list"] > li,
-  [data-slot="typography"]
-    ul:not(.no-typography):not(.no-typography *)
-    > li:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"]
-    ol:not(.no-typography):not(.no-typography *)
-    > li:not(.no-typography):not(.no-typography *) {
+  [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,18 +1,22 @@
 ---
-import type { HTMLAttributes } from "astro/types"
+import type { HTMLTag, Polymorphic } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"ul"> &
-  HTMLAttributes<"ol"> & {
-    as?: "ul" | "ol"
-  }
+type Size = "sm" | "default" | "lg"
+type Props<Tag extends "ul" | "ol"> = Polymorphic<{ as: Tag; size?: Size }>
 
-const { as: Tag = "ul", class: className, ...props } = Astro.props
+const {
+  as: Tag = "ul",
+  class: className,
+  size = "default",
+  ...props
+} = Astro.props
 ---
 
 <Tag
   data-slot="typography-list"
+  data-size={size}
   data-ordered={Tag === "ol" ? "" : undefined}
   class={cn(className)}
   {...props}
@@ -24,18 +28,32 @@ const { as: Tag = "ul", class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-list"],
-  [data-slot="typography"] ul:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"] ol:not(.no-typography):not(.no-typography *) {
-    @apply ml-6 text-base;
+  [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:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > ul {
     @apply list-disc;
   }
 
   [data-slot="typography-list"][data-ordered],
-  [data-slot="typography"] ol:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > ol {
     @apply list-decimal;
   }
 

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

@@ -3,12 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"p">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"p"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<p data-slot="typography-p" class={cn(className)} {...props}>
+<p data-slot="typography-p" data-size={size} class={cn(className)} {...props}>
   <slot />
 </p>
 
@@ -16,8 +19,25 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-p"],
-  [data-slot="typography"]
-    p:not([data-slot]):not(.no-typography):not(.no-typography *) {
-    @apply text-base leading-7;
+  [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

@@ -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>