@vllnt/ui 0.4.0-canary.56bbaf0 → 0.4.0-canary.d173470

package/dist/components/display/display.js

@@ -0,0 +1,22 @@
+import { createElement } from "react";
+import { cn } from "../../lib/utils";
+const displayBase = "font-[family-name:var(--font-display)] [font-weight:var(--font-weight-display)] text-[length:var(--font-size-display)] leading-[var(--line-height-display)] text-balance tracking-tight text-foreground";
+const Display = ({
+  animated = false,
+  as = "div",
+  className,
+  ref,
+  ...props
+}) => createElement(as, {
+  className: cn(
+    displayBase,
+    animated && "motion-safe:animate-[vllnt-animated-text-reveal_0.6s_ease-out_both]",
+    className
+  ),
+  ref,
+  ...props
+});
+Display.displayName = "Display";
+export {
+  Display
+};

package/dist/components/display/index.js

@@ -0,0 +1,4 @@
+import { Display } from "./display";
+export {
+  Display
+};

package/dist/components/heading/heading.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const headingTag = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+const headingSize = {
+  1: "text-[length:var(--font-size-h1)] leading-[var(--line-height-h1)]",
+  2: "text-[length:var(--font-size-h2)] leading-[var(--line-height-h2)]",
+  3: "text-[length:var(--font-size-h3)] leading-[var(--line-height-h3)]",
+  4: "text-[length:var(--font-size-h4)] leading-[var(--line-height-h4)]",
+  5: "text-[length:var(--font-size-h5)] leading-[var(--line-height-h5)]",
+  6: "text-[length:var(--font-size-h6)] leading-[var(--line-height-h6)]"
+};
+const headingBase = "font-[family-name:var(--font-display)] [font-weight:var(--font-weight-heading)] text-balance tracking-tight text-foreground";
+const Heading = ({
+  className,
+  level = 2,
+  ref,
+  size,
+  ...props
+}) => {
+  const Tag = headingTag[level];
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn(headingBase, headingSize[size ?? level], className),
+      ref,
+      ...props
+    }
+  );
+};
+Heading.displayName = "Heading";
+export {
+  Heading
+};

package/dist/components/heading/index.js

@@ -0,0 +1,4 @@
+import { Heading } from "./heading";
+export {
+  Heading
+};

package/dist/components/index.js

@@ -999,6 +999,10 @@ import {
   PanelHeader,
   PanelTitle
 } from "./panel";
+import { Heading } from "./heading";
+import { Text, textVariants } from "./text";
+import { Display } from "./display";
+import { Prose } from "./prose";
 export {
   AIArtifact,
   AIArtifactContent,
@@ -1186,6 +1190,7 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  Display,
   Dock,
   DockIcon,
   DocumentSiblingNav,
@@ -1273,6 +1278,7 @@ export {
   H3,
   H4,
   HandoffBeacon,
+  Heading,
   HeatMapOverlay,
   HeatOverlay,
   Highlight,
@@ -1441,6 +1447,7 @@ export {
   PromptInput,
   PromptTemplates,
   PropertySection,
+  Prose,
   QrCode,
   Quiz,
   RadarChart,
@@ -1549,6 +1556,7 @@ export {
   TagGroupItem,
   TagsInput,
   Terminal,
+  Text,
   TextAnimate,
   TextField,
   TextReveal,
@@ -1637,6 +1645,7 @@ export {
   severityBadgeVariants,
   statCardVariants,
   statusIndicatorVariants,
+  textVariants,
   timelineVariants,
   toast,
   toggleVariants,

package/dist/components/prose/index.js

@@ -0,0 +1,4 @@
+import { Prose } from "./prose";
+export {
+  Prose
+};

package/dist/components/prose/prose.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const proseStyles = cn(
+  "font-[family-name:var(--font-sans)] text-[length:var(--font-size-body)] leading-[var(--line-height-body)] text-foreground",
+  "[&>*+*]:mt-4",
+  "[&_h1]:mt-8 [&_h1]:font-[family-name:var(--font-display)] [&_h1]:[font-weight:var(--font-weight-heading)] [&_h1]:text-[length:var(--font-size-h1)] [&_h1]:leading-[var(--line-height-h1)] [&_h1]:tracking-tight",
+  "[&_h2]:mt-8 [&_h2]:font-[family-name:var(--font-display)] [&_h2]:[font-weight:var(--font-weight-heading)] [&_h2]:text-[length:var(--font-size-h2)] [&_h2]:leading-[var(--line-height-h2)] [&_h2]:tracking-tight",
+  "[&_h3]:mt-6 [&_h3]:font-[family-name:var(--font-display)] [&_h3]:[font-weight:var(--font-weight-heading)] [&_h3]:text-[length:var(--font-size-h3)] [&_h3]:leading-[var(--line-height-h3)] [&_h3]:tracking-tight",
+  "[&_h4]:mt-6 [&_h4]:font-[family-name:var(--font-display)] [&_h4]:[font-weight:var(--font-weight-heading)] [&_h4]:text-[length:var(--font-size-h4)] [&_h4]:leading-[var(--line-height-h4)] [&_h4]:tracking-tight",
+  "[&_p]:text-[length:var(--font-size-body)] [&_p]:leading-[var(--line-height-body)]",
+  "[&_ul]:my-4 [&_ul]:ml-6 [&_ul]:list-disc [&_ol]:my-4 [&_ol]:ml-6 [&_ol]:list-decimal [&_li]:mt-2",
+  "[&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4",
+  "[&_blockquote]:mt-6 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-6 [&_blockquote]:italic",
+  "[&_code]:rounded [&_code]:bg-muted [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-mono [&_code]:text-[0.9em]",
+  "[&_strong]:font-semibold"
+);
+const Prose = ({ className, ref, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(proseStyles, className), ref, ...props });
+Prose.displayName = "Prose";
+export {
+  Prose
+};

package/dist/components/text/index.js

@@ -0,0 +1,5 @@
+import { Text, textVariants } from "./text";
+export {
+  Text,
+  textVariants
+};

package/dist/components/text/text.js

@@ -0,0 +1,48 @@
+import { createElement } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const textVariants = cva(
+  "font-[family-name:var(--font-sans)] text-foreground",
+  {
+    defaultVariants: {
+      size: "base",
+      tone: "default",
+      weight: "normal"
+    },
+    variants: {
+      size: {
+        base: "text-[length:var(--font-size-body)] leading-[var(--line-height-body)]",
+        caption: "text-[length:var(--font-size-caption)] leading-[var(--line-height-caption)]",
+        lead: "text-[length:var(--font-size-body-lg)] leading-[var(--line-height-body-lg)]",
+        small: "text-[length:var(--font-size-body-sm)] leading-[var(--line-height-body-sm)]"
+      },
+      tone: {
+        default: "",
+        muted: "text-muted-foreground"
+      },
+      weight: {
+        medium: "font-medium",
+        normal: "font-normal",
+        semibold: "font-semibold"
+      }
+    }
+  }
+);
+const Text = ({
+  as = "p",
+  className,
+  ref,
+  size,
+  tone,
+  weight,
+  ...props
+}) => createElement(as, {
+  className: cn(textVariants({ size, tone, weight }), className),
+  ref,
+  ...props
+});
+Text.displayName = "Text";
+export {
+  Text,
+  textVariants
+};