@neynar/ui 0.4.0 → 0.5.0

package/dist/components/neynar/typography/blockquote.d.ts

@@ -0,0 +1,13 @@
+import { TypographyColor } from '../../../lib/variants';
+import * as React from "react";
+type BlockquoteColor = Extract<TypographyColor, "default" | "muted" | "subtle">;
+interface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement> {
+    /** Text color (limited to neutral colors for semantic appropriateness) */
+    color?: BlockquoteColor;
+}
+/**
+ * Blockquote component for quoted content with a left border accent.
+ */
+declare function Blockquote({ color, className, children, ...props }: BlockquoteProps): import("react/jsx-runtime").JSX.Element;
+export { Blockquote, type BlockquoteProps, type BlockquoteColor };
+//# sourceMappingURL=blockquote.d.ts.map

package/dist/components/neynar/typography/blockquote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blockquote.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/typography/blockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA2B,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE/E,KAAK,eAAe,GAAG,OAAO,CAAC,eAAe,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAEhF,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACtE,0EAA0E;IAC1E,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAc5E;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,CAAC"}

package/dist/components/neynar/typography/blockquote.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants } from "../../../lib/variants.js";
+function Blockquote({ color, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      "data-slot": "blockquote",
+      className: cn(
+        "border-l-4 border-border pl-4 italic",
+        typographyColorVariants({ color }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Blockquote
+};
+//# sourceMappingURL=blockquote.js.map

package/dist/components/neynar/typography/blockquote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blockquote.js","sources":["../../../../src/components/neynar/typography/blockquote.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { typographyColorVariants, type TypographyColor } from \"@/lib/variants\";\n\ntype BlockquoteColor = Extract<TypographyColor, \"default\" | \"muted\" | \"subtle\">;\n\ninterface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement> {\n  /** Text color (limited to neutral colors for semantic appropriateness) */\n  color?: BlockquoteColor;\n}\n\n/**\n * Blockquote component for quoted content with a left border accent.\n */\nfunction Blockquote({ color, className, children, ...props }: BlockquoteProps) {\n  return (\n    <blockquote\n      data-slot=\"blockquote\"\n      className={cn(\n        \"border-l-4 border-border pl-4 italic\",\n        typographyColorVariants({ color }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </blockquote>\n  );\n}\n\nexport { Blockquote, type BlockquoteProps, type BlockquoteColor };\n"],"names":[],"mappings":";;;;AAeA,SAAS,WAAW,EAAE,OAAO,WAAW,UAAU,GAAG,SAA0B;AAC7E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,wBAAwB,EAAE,OAAO;AAAA,QACjC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/neynar/typography/code.d.ts

@@ -0,0 +1,13 @@
+import { TypographyColor } from '../../../lib/variants';
+import * as React from "react";
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+    /** Text color */
+    color?: TypographyColor;
+}
+/**
+ * Inline code component with monospace font and subtle background.
+ * For code blocks, use a dedicated syntax highlighting solution.
+ */
+declare function Code({ color, className, children, ...props }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export { Code, type CodeProps };
+//# sourceMappingURL=code.d.ts.map

package/dist/components/neynar/typography/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/typography/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA2B,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE/E,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3D,iBAAiB;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED;;;GAGG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAchE;AAED,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}

package/dist/components/neynar/typography/code.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants } from "../../../lib/variants.js";
+function Code({ color, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      "data-slot": "code",
+      className: cn(
+        "font-mono text-sm bg-muted px-1.5 py-0.5 rounded",
+        typographyColorVariants({ color }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Code
+};
+//# sourceMappingURL=code.js.map

package/dist/components/neynar/typography/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sources":["../../../../src/components/neynar/typography/code.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { typographyColorVariants, type TypographyColor } from \"@/lib/variants\";\n\ninterface CodeProps extends React.HTMLAttributes<HTMLElement> {\n  /** Text color */\n  color?: TypographyColor;\n}\n\n/**\n * Inline code component with monospace font and subtle background.\n * For code blocks, use a dedicated syntax highlighting solution.\n */\nfunction Code({ color, className, children, ...props }: CodeProps) {\n  return (\n    <code\n      data-slot=\"code\"\n      className={cn(\n        \"font-mono text-sm bg-muted px-1.5 py-0.5 rounded\",\n        typographyColorVariants({ color }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </code>\n  );\n}\n\nexport { Code, type CodeProps };\n"],"names":[],"mappings":";;;;AAcA,SAAS,KAAK,EAAE,OAAO,WAAW,UAAU,GAAG,SAAoB;AACjE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,wBAAwB,EAAE,OAAO;AAAA,QACjC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/neynar/typography/index.d.ts

@@ -0,0 +1,5 @@
+export { Title, type TitleProps } from './title';
+export { Text, Caption, Overline, type TextProps, type TextSize, type TextWeight, type TextAlign, type TextTransform, type TextWrap, type LineClamp, } from './text';
+export { Code, type CodeProps } from './code';
+export { Blockquote, type BlockquoteProps, type BlockquoteColor, } from './blockquote';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/neynar/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,GACf,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC"}

package/dist/components/neynar/typography/index.js

@@ -0,0 +1,13 @@
+import { Title } from "./title.js";
+import { Caption, Overline, Text } from "./text.js";
+import { Code } from "./code.js";
+import { Blockquote } from "./blockquote.js";
+export {
+  Blockquote,
+  Caption,
+  Code,
+  Overline,
+  Text,
+  Title
+};
+//# sourceMappingURL=index.js.map

package/dist/components/neynar/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/neynar/typography/text.d.ts

@@ -0,0 +1,44 @@
+import { TypographyColor } from '../../../lib/variants';
+import * as React from "react";
+type TextSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
+type TextWeight = "normal" | "medium" | "semibold" | "bold";
+type TextAlign = "left" | "center" | "right";
+type TextTransform = "uppercase" | "lowercase" | "capitalize";
+type TextWrap = "pretty" | "balance";
+type LineClamp = 1 | 2 | 3 | 4 | 5 | 6;
+type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    /** Text size - uses Tailwind scale. Default: "base" */
+    size?: TextSize;
+    /** Font weight */
+    weight?: TextWeight;
+    /** Text color */
+    color?: TypographyColor;
+    /** Text alignment */
+    align?: TextAlign;
+    /** Text transform */
+    transform?: TextTransform;
+    /** Text wrapping: "pretty" avoids orphans, "balance" equalizes line lengths */
+    wrap?: TextWrap;
+    /** Truncate text after N lines with ellipsis (uses Tailwind line-clamp-*) */
+    lineClamp?: LineClamp;
+    /** Change rendered element (simple polymorphism) */
+    as?: React.ElementType;
+    /** Change rendered element (advanced - takes precedence over `as`) */
+    render?: React.ReactElement<{
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+};
+declare function Text({ size, weight, color, align, transform, wrap, lineClamp, as, render, className, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Caption - convenience alias for small, muted text.
+ * Ideal for metadata, timestamps, and secondary information.
+ */
+declare function Caption(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Overline - convenience alias for uppercase label text.
+ * Ideal for category labels and section headers.
+ */
+declare function Overline(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export { Text, Caption, Overline, type TextProps, type TextSize, type TextWeight, type TextAlign, type TextTransform, type TextWrap, type LineClamp, };
+//# sourceMappingURL=text.d.ts.map

package/dist/components/neynar/typography/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/typography/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAExB,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAC3D,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC5D,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC7C,KAAK,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;AAC9D,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AACrC,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEvC,KAAK,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC5D,uDAAuD;IACvD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,qBAAqB;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,oDAAoD;IACpD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC5B,CAAC,CAAC;CACJ,CAAC;AAgBF,iBAAS,IAAI,CAAC,EACZ,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,EAAE,EACF,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,2CA0BX;AAED;;;GAGG;AACH,iBAAS,OAAO,CAAC,KAAK,EAAE,SAAS,2CAEhC;AAED;;;GAGG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,SAAS,2CAEjC;AAED,OAAO,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,GACf,CAAC"}

package/dist/components/neynar/typography/text.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants, textVariants } from "../../../lib/variants.js";
+const lineClampClasses = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+const wrapClasses = {
+  pretty: "text-pretty",
+  balance: "text-balance"
+};
+function Text({
+  size,
+  weight,
+  color,
+  align,
+  transform,
+  wrap,
+  lineClamp,
+  as,
+  render,
+  className,
+  children,
+  ...props
+}) {
+  const classes = cn(
+    textVariants({ size, weight, align, transform }),
+    typographyColorVariants({ color }),
+    wrap && wrapClasses[wrap],
+    lineClamp && lineClampClasses[lineClamp],
+    className
+  );
+  if (render) {
+    return React.cloneElement(render, {
+      className: cn(classes, render.props.className),
+      children,
+      ...props
+    });
+  }
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsx(Component, { "data-slot": "text", className: classes, ...props, children });
+}
+function Caption(props) {
+  return /* @__PURE__ */ jsx(Text, { size: "xs", color: "muted", ...props });
+}
+function Overline(props) {
+  return /* @__PURE__ */ jsx(Text, { size: "xs", transform: "uppercase", ...props });
+}
+export {
+  Caption,
+  Overline,
+  Text
+};
+//# sourceMappingURL=text.js.map

package/dist/components/neynar/typography/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../../../src/components/neynar/typography/text.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  textVariants,\n  typographyColorVariants,\n  type TypographyColor,\n} from \"@/lib/variants\";\n\ntype TextSize = \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\";\ntype TextWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\ntype TextAlign = \"left\" | \"center\" | \"right\";\ntype TextTransform = \"uppercase\" | \"lowercase\" | \"capitalize\";\ntype TextWrap = \"pretty\" | \"balance\";\ntype LineClamp = 1 | 2 | 3 | 4 | 5 | 6;\n\ntype TextProps = React.HTMLAttributes<HTMLParagraphElement> & {\n  /** Text size - uses Tailwind scale. Default: \"base\" */\n  size?: TextSize;\n  /** Font weight */\n  weight?: TextWeight;\n  /** Text color */\n  color?: TypographyColor;\n  /** Text alignment */\n  align?: TextAlign;\n  /** Text transform */\n  transform?: TextTransform;\n  /** Text wrapping: \"pretty\" avoids orphans, \"balance\" equalizes line lengths */\n  wrap?: TextWrap;\n  /** Truncate text after N lines with ellipsis (uses Tailwind line-clamp-*) */\n  lineClamp?: LineClamp;\n  /** Change rendered element (simple polymorphism) */\n  as?: React.ElementType;\n  /** Change rendered element (advanced - takes precedence over `as`) */\n  render?: React.ReactElement<{\n    className?: string;\n    children?: React.ReactNode;\n  }>;\n};\n\nconst lineClampClasses: Record<LineClamp, string> = {\n  1: \"line-clamp-1\",\n  2: \"line-clamp-2\",\n  3: \"line-clamp-3\",\n  4: \"line-clamp-4\",\n  5: \"line-clamp-5\",\n  6: \"line-clamp-6\",\n};\n\nconst wrapClasses: Record<TextWrap, string> = {\n  pretty: \"text-pretty\",\n  balance: \"text-balance\",\n};\n\nfunction Text({\n  size,\n  weight,\n  color,\n  align,\n  transform,\n  wrap,\n  lineClamp,\n  as,\n  render,\n  className,\n  children,\n  ...props\n}: TextProps) {\n  const classes = cn(\n    textVariants({ size, weight, align, transform }),\n    typographyColorVariants({ color }),\n    wrap && wrapClasses[wrap],\n    lineClamp && lineClampClasses[lineClamp],\n    className,\n  );\n\n  // render prop takes precedence\n  if (render) {\n    return React.cloneElement(render, {\n      className: cn(classes, render.props.className),\n      children,\n      ...props,\n    });\n  }\n\n  // as prop for simple element swap\n  const Component = as ?? \"p\";\n\n  return (\n    <Component data-slot=\"text\" className={classes} {...props}>\n      {children}\n    </Component>\n  );\n}\n\n/**\n * Caption - convenience alias for small, muted text.\n * Ideal for metadata, timestamps, and secondary information.\n */\nfunction Caption(props: TextProps) {\n  return <Text size=\"xs\" color=\"muted\" {...props} />;\n}\n\n/**\n * Overline - convenience alias for uppercase label text.\n * Ideal for category labels and section headers.\n */\nfunction Overline(props: TextProps) {\n  return <Text size=\"xs\" transform=\"uppercase\" {...props} />;\n}\n\nexport {\n  Text,\n  Caption,\n  Overline,\n  type TextProps,\n  type TextSize,\n  type TextWeight,\n  type TextAlign,\n  type TextTransform,\n  type TextWrap,\n  type LineClamp,\n};\n"],"names":[],"mappings":";;;;AAwCA,MAAM,mBAA8C;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,cAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU;AAAA,IACd,aAAa,EAAE,MAAM,QAAQ,OAAO,WAAW;AAAA,IAC/C,wBAAwB,EAAE,OAAO;AAAA,IACjC,QAAQ,YAAY,IAAI;AAAA,IACxB,aAAa,iBAAiB,SAAS;AAAA,IACvC;AAAA,EAAA;AAIF,MAAI,QAAQ;AACV,WAAO,MAAM,aAAa,QAAQ;AAAA,MAChC,WAAW,GAAG,SAAS,OAAO,MAAM,SAAS;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AAGA,QAAM,YAAY,MAAM;AAExB,SACE,oBAAC,aAAU,aAAU,QAAO,WAAW,SAAU,GAAG,OACjD,UACH;AAEJ;AAMA,SAAS,QAAQ,OAAkB;AACjC,6BAAQ,MAAA,EAAK,MAAK,MAAK,OAAM,SAAS,GAAG,OAAO;AAClD;AAMA,SAAS,SAAS,OAAkB;AAClC,6BAAQ,MAAA,EAAK,MAAK,MAAK,WAAU,aAAa,GAAG,OAAO;AAC1D;"}

package/dist/components/neynar/typography/title.d.ts

@@ -0,0 +1,22 @@
+import { TitleOrder, TitleSize, TitleWeight, TypographyColor } from '../../../lib/variants';
+import * as React from "react";
+type TitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    /** Semantic heading level - renders h1-h6. Default: 2 */
+    order?: TitleOrder;
+    /** Visual size override - independent of order. If not set, uses order's default sizing. */
+    size?: TitleSize;
+    /** Font weight override */
+    weight?: TitleWeight;
+    /** Text color */
+    color?: TypographyColor;
+    /** Change rendered element (simple polymorphism) */
+    as?: React.ElementType;
+    /** Change rendered element (advanced - takes precedence over `as`) */
+    render?: React.ReactElement<{
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+};
+declare function Title({ order, size, weight, color, as, render, className, children, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+export { Title, type TitleProps };
+//# sourceMappingURL=title.d.ts.map

package/dist/components/neynar/typography/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/typography/title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAExB,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAC3D,yDAAyD;IACzD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,oDAAoD;IACpD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC5B,CAAC,CAAC;CACJ,CAAC;AAcF,iBAAS,KAAK,CAAC,EACb,KAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,EAAE,EACF,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,2CA6BZ;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}

package/dist/components/neynar/typography/title.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants, titleVariants, titleOrderSizeVariants, titleOrderStyleVariants } from "../../../lib/variants.js";
+const orderToElement = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+function Title({
+  order = 2,
+  size,
+  weight,
+  color,
+  as,
+  render,
+  className,
+  children,
+  ...props
+}) {
+  const classes = cn(
+    // Order-based style defaults (weight, tracking, leading) - always applied
+    titleOrderStyleVariants({ order }),
+    // Size: use explicit size if provided, otherwise use order-based default
+    size ? titleVariants({ size }) : titleOrderSizeVariants({ order }),
+    // Weight override if provided (overrides order-based weight)
+    weight && titleVariants({ weight }),
+    typographyColorVariants({ color }),
+    className
+  );
+  if (render) {
+    return React.cloneElement(render, {
+      className: cn(classes, render.props.className),
+      children,
+      ...props
+    });
+  }
+  const Component = as ?? orderToElement[order];
+  return /* @__PURE__ */ jsx(Component, { "data-slot": "title", className: classes, ...props, children });
+}
+export {
+  Title
+};
+//# sourceMappingURL=title.js.map

package/dist/components/neynar/typography/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sources":["../../../../src/components/neynar/typography/title.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  titleVariants,\n  titleOrderSizeVariants,\n  titleOrderStyleVariants,\n  typographyColorVariants,\n  type TitleOrder,\n  type TitleSize,\n  type TitleWeight,\n  type TypographyColor,\n} from \"@/lib/variants\";\n\ntype TitleProps = React.HTMLAttributes<HTMLHeadingElement> & {\n  /** Semantic heading level - renders h1-h6. Default: 2 */\n  order?: TitleOrder;\n  /** Visual size override - independent of order. If not set, uses order's default sizing. */\n  size?: TitleSize;\n  /** Font weight override */\n  weight?: TitleWeight;\n  /** Text color */\n  color?: TypographyColor;\n  /** Change rendered element (simple polymorphism) */\n  as?: React.ElementType;\n  /** Change rendered element (advanced - takes precedence over `as`) */\n  render?: React.ReactElement<{\n    className?: string;\n    children?: React.ReactNode;\n  }>;\n};\n\nconst orderToElement: Record<\n  TitleOrder,\n  \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"\n> = {\n  1: \"h1\",\n  2: \"h2\",\n  3: \"h3\",\n  4: \"h4\",\n  5: \"h5\",\n  6: \"h6\",\n};\n\nfunction Title({\n  order = 2,\n  size,\n  weight,\n  color,\n  as,\n  render,\n  className,\n  children,\n  ...props\n}: TitleProps) {\n  const classes = cn(\n    // Order-based style defaults (weight, tracking, leading) - always applied\n    titleOrderStyleVariants({ order }),\n    // Size: use explicit size if provided, otherwise use order-based default\n    size ? titleVariants({ size }) : titleOrderSizeVariants({ order }),\n    // Weight override if provided (overrides order-based weight)\n    weight && titleVariants({ weight }),\n    typographyColorVariants({ color }),\n    className,\n  );\n\n  // render prop takes precedence\n  if (render) {\n    return React.cloneElement(render, {\n      className: cn(classes, render.props.className),\n      children,\n      ...props,\n    });\n  }\n\n  // as prop for simple element swap\n  const Component = as ?? orderToElement[order];\n\n  return (\n    <Component data-slot=\"title\" className={classes} {...props}>\n      {children}\n    </Component>\n  );\n}\n\nexport { Title, type TitleProps };\n"],"names":[],"mappings":";;;;AAgCA,MAAM,iBAGF;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,SAAS,MAAM;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,UAAU;AAAA;AAAA,IAEd,wBAAwB,EAAE,OAAO;AAAA;AAAA,IAEjC,OAAO,cAAc,EAAE,KAAA,CAAM,IAAI,uBAAuB,EAAE,OAAO;AAAA;AAAA,IAEjE,UAAU,cAAc,EAAE,QAAQ;AAAA,IAClC,wBAAwB,EAAE,OAAO;AAAA,IACjC;AAAA,EAAA;AAIF,MAAI,QAAQ;AACV,WAAO,MAAM,aAAa,QAAQ;AAAA,MAChC,WAAW,GAAG,SAAS,OAAO,MAAM,SAAS;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AAGA,QAAM,YAAY,MAAM,eAAe,KAAK;AAE5C,SACE,oBAAC,aAAU,aAAU,SAAQ,WAAW,SAAU,GAAG,OAClD,UACH;AAEJ;"}

package/dist/components/ui/accordion.d.ts

@@ -1,205 +1,27 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 /**
- * Accordion - Collapsible content panels for organizing information
- *
- * A vertically stacked set of interactive headings that each reveal a section of content.
- * Built on Radix UI Accordion primitives with optimized animations and accessibility.
- * Supports both single and multiple expanded items simultaneously based on the type prop.
- *
- * @example
- * ```tsx
- * // Basic single accordion (only one item can be open)
- * <Accordion type="single" collapsible>
- *   <AccordionItem value="item-1">
- *     <AccordionTrigger>Is it accessible?</AccordionTrigger>
- *     <AccordionContent>
- *       Yes. It adheres to the WAI-ARIA design pattern.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple accordion (multiple items can be open)
- * <Accordion type="multiple">
- *   <AccordionItem value="item-1">
- *     <AccordionTrigger>Section 1</AccordionTrigger>
- *     <AccordionContent>Content for section 1</AccordionContent>
- *   </AccordionItem>
- *   <AccordionItem value="item-2">
- *     <AccordionTrigger>Section 2</AccordionTrigger>
- *     <AccordionContent>Content for section 2</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- *
- * @example
- * ```tsx
- * // FAQ-style accordion with default open state
- * <Accordion type="single" collapsible defaultValue="faq-1">
- *   <AccordionItem value="faq-1">
- *     <AccordionTrigger>How do I get started?</AccordionTrigger>
- *     <AccordionContent>
- *       Follow our quick start guide to set up your first project.
- *     </AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- *
- * @accessibility
- * - Full keyboard navigation support (Arrow keys, Space, Enter, Home, End)
- * - ARIA expanded/collapsed states automatically managed
- * - Screen reader announcements for state changes
- * - Focus management with visible focus indicators
- * - Properly labeled regions with aria-labelledby
- * - Meets WCAG 2.1 AA standards for interactive elements
- *
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/accordion/} WAI-ARIA Accordion Pattern
- * @see {@link https://ui.shadcn.com/docs/components/accordion} shadcn/ui Accordion Documentation
- * @see {@link AccordionItem} Individual accordion panel container
- * @see {@link AccordionTrigger} Clickable header to expand/collapse content
- * @see {@link AccordionContent} Collapsible content area with smooth animations
- * @since 1.0.0
+ * Root container for accordion items. Manages expand/collapse state and keyboard navigation.
+ * Supports single or multiple open items simultaneously.
  */
-declare function Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ className, ...props }: AccordionPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
 /**
- * AccordionItem - Individual collapsible panel within an accordion
- *
- * A container component that wraps a single accordion section consisting of a trigger
- * and collapsible content. Each item requires a unique value prop for identification
- * and state management. Provides consistent spacing and border styling.
- *
- * @example
- * ```tsx
- * <AccordionItem value="settings">
- *   <AccordionTrigger>Account Settings</AccordionTrigger>
- *   <AccordionContent>
- *     <p>Manage your account preferences and security settings.</p>
- *   </AccordionContent>
- * </AccordionItem>
- * ```
- *
- * @example
- * ```tsx
- * // With custom styling
- * <AccordionItem value="custom" className="border-l-4 border-blue-500">
- *   <AccordionTrigger>Custom Styled Item</AccordionTrigger>
- *   <AccordionContent>Content with custom left border</AccordionContent>
- * </AccordionItem>
- * ```
- *
- * @accessibility
- * - Manages expanded/collapsed state via ARIA attributes
- * - Associates trigger with content using aria-controls and aria-labelledby
- * - Provides proper focus management between items
- * - Supports keyboard navigation within the accordion group
- *
- * @see {@link AccordionTrigger} The clickable header for this item
- * @see {@link AccordionContent} The collapsible content for this item
+ * Container for a single accordion item. Groups trigger and content panel.
+ * Each item must have a unique `value` prop.
  */
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
 /**
- * AccordionTrigger - Clickable header that toggles accordion content visibility
- *
- * An interactive button element that users click or activate via keyboard to expand
- * or collapse the associated accordion content. Features a rotating chevron icon
- * for visual state indication and supports both text and custom content.
- *
- * @example
- * ```tsx
- * // Simple text trigger
- * <AccordionTrigger>
- *   Click to expand this section
- * </AccordionTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // With icon and custom styling
- * <AccordionTrigger className="text-lg font-semibold">
- *   <User className="mr-2 h-4 w-4" />
- *   User Profile Settings
- * </AccordionTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // With complex content
- * <AccordionTrigger>
- *   <div className="flex items-center justify-between w-full">
- *     <span>Section Title</span>
- *     <Badge variant="secondary">5 items</Badge>
- *   </div>
- * </AccordionTrigger>
- * ```
- *
- * @accessibility
- * - Keyboard activated with Space, Enter, or Arrow keys
- * - aria-expanded automatically indicates current expanded/collapsed state
- * - Focus visible ring for keyboard navigation with proper contrast
- * - Chevron icon rotation provides visual state feedback
- * - Screen reader support with proper labeling and state announcements
- * - Meets WCAG 2.1 AA interactive element requirements
- *
- * @see {@link AccordionContent} The content area controlled by this trigger
+ * Button that toggles the accordion item open/closed.
+ * Automatically includes chevron icons that flip based on open state.
  */
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
 /**
- * AccordionContent - Collapsible content area of an accordion item
- *
- * The expandable content section that is revealed or hidden when the associated
- * AccordionTrigger is activated. Features smooth height-based animations using
- * Tailwind CSS keyframes and supports any React content including complex layouts.
- *
- * @example
- * ```tsx
- * // Simple text content
- * <AccordionContent>
- *   <p>This content is revealed when the accordion is expanded.</p>
- *   <p>It can contain any React components or HTML elements.</p>
- * </AccordionContent>
- * ```
- *
- * @example
- * ```tsx
- * // Rich content with components
- * <AccordionContent>
- *   <div className="space-y-4">
- *     <Alert>
- *       <InfoIcon className="h-4 w-4" />
- *       <AlertTitle>Important Note</AlertTitle>
- *       <AlertDescription>This is highlighted information.</AlertDescription>
- *     </Alert>
- *     <Button variant="outline">Take Action</Button>
- *   </div>
- * </AccordionContent>
- * ```
- *
- * @example
- * ```tsx
- * // Content with custom padding
- * <AccordionContent className="pt-6 pb-6">
- *   Content with extra vertical padding for better spacing.
- * </AccordionContent>
- * ```
- *
- * @accessibility
- * - Hidden content is not focusable or accessible when collapsed
- * - Smooth height animations enhance user experience without motion issues
- * - Properly associated with trigger via ARIA attributes (aria-controls, aria-labelledby)
- * - Content respects prefers-reduced-motion user preference
- * - Focus moves naturally to content when expanded via keyboard
- *
- * @animation
- * - Uses data-[state=open]:animate-accordion-down for expand animation
- * - Uses data-[state=closed]:animate-accordion-up for collapse animation
- * - Animations respect user's motion preferences
- * - Smooth height transitions using Radix UI's --radix-accordion-content-height variable
- *
- * @see {@link AccordionTrigger} The trigger that controls this content's visibility
+ * Collapsible panel containing the accordion item's content.
+ * Automatically animates height on open/close with slide animation.
  */
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+type AccordionProps = AccordionPrimitive.Root.Props;
+type AccordionItemProps = AccordionPrimitive.Item.Props;
+type AccordionTriggerProps = AccordionPrimitive.Trigger.Props;
+type AccordionContentProps = AccordionPrimitive.Panel.Props;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, };
 //# sourceMappingURL=accordion.d.ts.map

package/dist/components/ui/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAkHhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,iBAAS,SAAS,CAChB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAG5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAQtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAgBzD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAUzD;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK3E;;;GAGG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,2CAQxE;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,2CAQ5E;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,2CAuBlC;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,KAAK,2CAiBhC;AAED,KAAK,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;AACpD,KAAK,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;AACxD,KAAK,qBAAqB,GAAG,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC;AAC9D,KAAK,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC;AAE5D,OAAO,EACL,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,CAAC"}