fulldev-ui 0.7.0 → 0.9.0

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

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"a">
+
+const { class: className, ...props } = Astro.props
+---
+
+<a data-slot="typography-a" class={cn(className)} {...props}>
+  <slot />
+</a>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-a"],
+  [data-slot="typography"] a:not(.no-typography):not(.no-typography *) {
+    @apply text-primary font-medium underline underline-offset-4;
+  }
+</style>

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

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"blockquote">
+
+const { class: className, ...props } = Astro.props
+---
+
+<blockquote data-slot="typography-blockquote" class={cn(className)} {...props}>
+  <slot />
+</blockquote>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-blockquote"],
+  [data-slot="typography"]
+    blockquote:not(.no-typography):not(.no-typography *) {
+    @apply border-l-2 pl-6 text-base italic;
+  }
+</style>

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

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h1"> & {
+  size?: "sm" | "default" | "lg"
+}
+
+const { class: className, size = "default", ...props } = Astro.props
+---
+
+<h1 data-slot="typography-h1" data-size={size} class={cn(className)} {...props}>
+  <slot />
+</h1>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-h1"],
+  [data-slot="typography"] h1:not(.no-typography):not(.no-typography *) {
+    @apply scroll-m-20 font-semibold tracking-tight text-balance;
+  }
+
+  [data-slot="typography-h1"][data-size="sm"],
+  [data-slot="typography"][data-size="sm"]
+    h1:not(.no-typography):not(.no-typography *) {
+    @apply text-3xl;
+  }
+
+  [data-slot="typography-h1"][data-size="default"],
+  [data-slot="typography"] h1:not(.no-typography):not(.no-typography *),
+  [data-slot="typography"][data-size="default"]
+    h1:not(.no-typography):not(.no-typography *) {
+    @apply text-4xl;
+  }
+
+  [data-slot="typography-h1"][data-size="lg"],
+  [data-slot="typography"][data-size="lg"]
+    h1:not(.no-typography):not(.no-typography *) {
+    @apply text-5xl;
+  }
+</style>

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

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h2"> & {
+  size?: "sm" | "default" | "lg"
+}
+
+const { class: className, size = "default", ...props } = Astro.props
+---
+
+<h2 data-slot="typography-h2" data-size={size} class={cn(className)} {...props}>
+  <slot />
+</h2>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-h2"],
+  [data-slot="typography"] h2:not(.no-typography):not(.no-typography *) {
+    @apply scroll-m-20 font-semibold tracking-tight;
+  }
+
+  [data-slot="typography-h2"][data-size="sm"],
+  [data-slot="typography"][data-size="sm"]
+    h2:not(.no-typography):not(.no-typography *) {
+    @apply text-2xl;
+  }
+
+  [data-slot="typography-h2"][data-size="default"],
+  [data-slot="typography"] h2:not(.no-typography):not(.no-typography *),
+  [data-slot="typography"][data-size="default"]
+    h2:not(.no-typography):not(.no-typography *) {
+    @apply text-3xl;
+  }
+
+  [data-slot="typography-h2"][data-size="lg"],
+  [data-slot="typography"][data-size="lg"]
+    h2:not(.no-typography):not(.no-typography *) {
+    @apply text-4xl;
+  }
+</style>

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

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h3"> & {
+  size?: "sm" | "default" | "lg"
+}
+
+const { class: className, size = "default", ...props } = Astro.props
+---
+
+<h3 data-slot="typography-h3" data-size={size} class={cn(className)} {...props}>
+  <slot />
+</h3>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-h3"],
+  [data-slot="typography"] h3:not(.no-typography):not(.no-typography *) {
+    @apply scroll-m-20 font-semibold tracking-tight;
+  }
+
+  [data-slot="typography-h3"][data-size="sm"],
+  [data-slot="typography"][data-size="sm"]
+    h3:not(.no-typography):not(.no-typography *) {
+    @apply text-xl;
+  }
+
+  [data-slot="typography-h3"][data-size="default"],
+  [data-slot="typography"] h3:not(.no-typography):not(.no-typography *),
+  [data-slot="typography"][data-size="default"]
+    h3:not(.no-typography):not(.no-typography *) {
+    @apply text-2xl;
+  }
+
+  [data-slot="typography-h3"][data-size="lg"],
+  [data-slot="typography"][data-size="lg"]
+    h3:not(.no-typography):not(.no-typography *) {
+    @apply text-3xl;
+  }
+</style>

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

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h4"> & {
+  size?: "sm" | "default" | "lg"
+}
+
+const { class: className, size = "default", ...props } = Astro.props
+---
+
+<h4 data-slot="typography-h4" data-size={size} class={cn(className)} {...props}>
+  <slot />
+</h4>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-h4"],
+  [data-slot="typography"] h4:not(.no-typography):not(.no-typography *) {
+    @apply scroll-m-20 font-semibold tracking-tight;
+  }
+
+  [data-slot="typography-h4"][data-size="sm"],
+  [data-slot="typography"][data-size="sm"]
+    h4:not(.no-typography):not(.no-typography *) {
+    @apply text-lg;
+  }
+
+  [data-slot="typography-h4"][data-size="default"],
+  [data-slot="typography"] h4:not(.no-typography):not(.no-typography *),
+  [data-slot="typography"][data-size="default"]
+    h4:not(.no-typography):not(.no-typography *) {
+    @apply text-xl;
+  }
+
+  [data-slot="typography-h4"][data-size="lg"],
+  [data-slot="typography"][data-size="lg"]
+    h4:not(.no-typography):not(.no-typography *) {
+    @apply text-2xl;
+  }
+</style>

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

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"code">
+
+const { class: className, ...props } = Astro.props
+---
+
+<code data-slot="typography-inline-code" class={cn(className)} {...props}>
+  <slot />
+</code>
+
+<style is:global>
+  @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"]
+    table:not(.no-typography):not(.no-typography *)
+    :not(pre)
+    > code:not(.no-typography):not(.no-typography *) {
+    @apply rounded-md text-sm leading-5;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p data-slot="typography-lead" class={cn(className)} {...props}>
+  <slot />
+</p>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-lead"] {
+    @apply text-muted-foreground text-lg;
+  }
+</style>

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

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"li">
+
+const { class: className, ...props } = Astro.props
+---
+
+<li data-slot="typography-list-item" class={cn(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: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 *) {
+    @apply mt-2;
+  }
+</style>

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

@@ -0,0 +1,45 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"ul"> &
+  HTMLAttributes<"ol"> & {
+    as?: "ul" | "ol"
+  }
+
+const { as: Tag = "ul", class: className, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="typography-list"
+  data-ordered={Tag === "ol" ? "" : undefined}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</Tag>
+
+<style is:global>
+  @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-list"]:not([data-ordered]),
+  [data-slot="typography"] ul:not(.no-typography):not(.no-typography *) {
+    @apply list-disc;
+  }
+
+  [data-slot="typography-list"][data-ordered],
+  [data-slot="typography"] ol:not(.no-typography):not(.no-typography *) {
+    @apply list-decimal;
+  }
+
+  [data-slot="typography-list"] > li {
+    @apply mt-2;
+  }
+</style>

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

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p data-slot="typography-p" class={cn(className)} {...props}>
+  <slot />
+</p>
+
+<style is:global>
+  @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;
+  }
+</style>

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

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"td">
+
+const { class: className, ...props } = Astro.props
+---
+
+<td data-slot="typography-table-cell" class={cn(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: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-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"] {
+    @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"] {
+    @apply text-right;
+  }
+</style>

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

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"th">
+
+const { class: className, ...props } = Astro.props
+---
+
+<th data-slot="typography-table-head" class={cn(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: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-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"] {
+    @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"] {
+    @apply text-right;
+  }
+</style>

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

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"tr">
+
+const { class: className, ...props } = Astro.props
+---
+
+<tr data-slot="typography-table-row" class={cn(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:not(.no-typography):not(.no-typography *)
+    tr:not(.no-typography):not(.no-typography *) {
+    @apply border-b transition-colors;
+  }
+
+  [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;
+  }
+</style>

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

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"table"> & {
+  containerClass?: string
+}
+
+const { class: className, containerClass, ...props } = Astro.props
+---
+
+<div data-slot="typography-table-container" class={cn(containerClass)}>
+  <table data-slot="typography-table" class={cn(className)} {...props}>
+    <slot />
+  </table>
+</div>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography-table-container"] {
+    @apply border-border w-full overflow-x-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:not(.no-typography):not(.no-typography *) {
+    @apply border-border overflow-x-auto rounded-xl border;
+    border-spacing: 0;
+  }
+
+  [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-slot="typography"] table:not(.no-typography):not(.no-typography *) {
+    @apply text-sm;
+  }
+</style>