fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/tooltip/tooltip.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { TooltipAlign, TooltipSide } from "@data-slot/tooltip"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  delay?: number
+  skipDelayDuration?: number
+  side?: TooltipSide
+  align?: TooltipAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  portal?: boolean
+}
+
+const {
+  class: className,
+  delay = 300,
+  skipDelayDuration = 300,
+  side = "top",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  portal = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="tooltip"
+  data-delay={delay}
+  data-skip-delay-duration={skipDelayDuration}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  data-portal={portal}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/tooltip"
+
+  create()
+</script>

package/src/components/ui/typography/index.ts

@@ -0,0 +1,16 @@
+export { default as Typography } from "./typography.astro"
+export { default as TypographyA } from "./typography-a.astro"
+export { default as TypographyBlockquote } from "./typography-blockquote.astro"
+export { default as TypographyH1 } from "./typography-h1.astro"
+export { default as TypographyH2 } from "./typography-h2.astro"
+export { default as TypographyH3 } from "./typography-h3.astro"
+export { default as TypographyH4 } from "./typography-h4.astro"
+export { default as TypographyInlineCode } from "./typography-inline-code.astro"
+export { default as TypographyLead } from "./typography-lead.astro"
+export { default as TypographyList } from "./typography-list.astro"
+export { default as TypographyListItem } from "./typography-list-item.astro"
+export { default as TypographyP } from "./typography-p.astro"
+export { default as TypographyTable } from "./typography-table.astro"
+export { default as TypographyTableCell } from "./typography-table-cell.astro"
+export { default as TypographyTableHead } from "./typography-table-head.astro"
+export { default as TypographyTableRow } from "./typography-table-row.astro"

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>