@neynar/ui 1.0.6 → 1.1.0

package/dist/components/ui/resizable.js

@@ -32,11 +32,11 @@ function ResizableHandle({
     {
       "data-slot": "resizable-handle",
       className: cn(
-        "group bg-border focus-visible:ring-primary relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary data-[resize-handle-state=drag]:bg-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "group bg-border focus-visible:ring-primary/50 focus-visible:bg-primary/50 relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary/50 data-[resize-handle-state=drag]:bg-primary/50 data-[resize-handle-state=active]:bg-primary/50 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx("div", { className: "bg-border group-data-[resize-handle-state=hover]:bg-primary group-data-[resize-handle-state=drag]:bg-primary h-6 w-1 rounded-lg z-10 flex shrink-0" })
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "bg-border group-focus-visible:bg-primary/50 group-data-[resize-handle-state=hover]:bg-primary/50 group-data-[resize-handle-state=drag]:bg-primary/50 group-data-[resize-handle-state=active]:bg-primary/50 h-6 w-1 rounded-lg z-10 flex shrink-0" })
     }
   );
 }

package/dist/components/ui/resizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Group as PanelGroup,\n  Panel,\n  Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;\n\n/**\n * Container for resizable panels. Manages layout orientation and panel resizing behavior.\n * Supports both horizontal and vertical layouts with optional persistence via `id` prop.\n */\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype ResizablePanelProps = React.ComponentProps<typeof Panel>;\n\n/**\n * Individual resizable panel within a ResizablePanelGroup.\n * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.\n */\nfunction ResizablePanel({ ...props }: ResizablePanelProps) {\n  return <Panel data-slot=\"resizable-panel\" {...props} />;\n}\n\ntype ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {\n  /** Display a visible grip indicator on the resize handle. @default false */\n  withHandle?: boolean;\n};\n\n/**\n * Resize handle between panels. Appears as a thin line with optional visible grip indicator.\n * Supports keyboard navigation and focus states.\n */\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizableHandleProps) {\n  return (\n    <PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"group bg-border focus-visible:ring-primary relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary data-[resize-handle-state=drag]:bg-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border group-data-[resize-handle-state=hover]:bg-primary group-data-[resize-handle-state=drag]:bg-primary h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </PanelResizeHandle>\n  );\n}\n\nexport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelGroupProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n};\n"],"names":["PanelGroup","PanelResizeHandle"],"mappings":";;;;;AAiBA;AAA6B;AAC3B;AAEF;AACE;AACE;AAACA;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACF;AAWA;AAAyB;AACvB;AACA;AAEF;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAGkK;AAAA;AAI5K;;;;;;"}
+{"version":3,"file":"resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Group as PanelGroup,\n  Panel,\n  Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;\n\n/**\n * Container for resizable panels. Manages layout orientation and panel resizing behavior.\n * Supports both horizontal and vertical layouts with optional persistence via `id` prop.\n */\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype ResizablePanelProps = React.ComponentProps<typeof Panel>;\n\n/**\n * Individual resizable panel within a ResizablePanelGroup.\n * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.\n */\nfunction ResizablePanel({ ...props }: ResizablePanelProps) {\n  return <Panel data-slot=\"resizable-panel\" {...props} />;\n}\n\ntype ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {\n  /** Display a visible grip indicator on the resize handle. @default false */\n  withHandle?: boolean;\n};\n\n/**\n * Resize handle between panels. Appears as a thin line with optional visible grip indicator.\n * Supports keyboard navigation and focus states.\n */\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizableHandleProps) {\n  return (\n    <PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"group bg-border focus-visible:ring-primary/50 focus-visible:bg-primary/50 relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary/50 data-[resize-handle-state=drag]:bg-primary/50 data-[resize-handle-state=active]:bg-primary/50 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border group-focus-visible:bg-primary/50 group-data-[resize-handle-state=hover]:bg-primary/50 group-data-[resize-handle-state=drag]:bg-primary/50 group-data-[resize-handle-state=active]:bg-primary/50 h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </PanelResizeHandle>\n  );\n}\n\nexport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelGroupProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n};\n"],"names":["PanelGroup","PanelResizeHandle"],"mappings":";;;;;AAiBA;AAA6B;AAC3B;AAEF;AACE;AACE;AAACA;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACF;AAWA;AAAyB;AACvB;AACA;AAEF;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAGgQ;AAAA;AAI1Q;;;;;;"}

package/dist/lib/variants.js

@@ -75,8 +75,8 @@ const titleVariants = cva("", {
       "2xl": "text-2xl leading-8 tracking-tight",
       "3xl": "text-3xl leading-9 tracking-tight",
       "4xl": "text-4xl leading-10 tracking-tighter",
-      "5xl": "text-5xl leading-none tracking-tighter",
-      "6xl": "text-6xl leading-none tracking-tighter"
+      "5xl": "text-5xl leading-[1.1] tracking-tighter",
+      "6xl": "text-6xl leading-[1.1] tracking-tighter"
     },
     weight: {
       normal: "font-normal",

package/dist/lib/variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"variants.js","sources":["../../src/lib/variants.ts"],"sourcesContent":["/**\n * @internal\n * Shared CVA variants used by menu and typography components.\n * Not exported publicly - use component props instead:\n *   - Menu styling: <DropdownMenuItem variant=\"destructive\">\n *   - Typography: <Text color=\"muted\" size=\"sm\">\n */\n\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Shared menu item variants for DropdownMenuItem, ContextMenuItem, and MenubarItem.\n * Provides consistent styling across all menu-style components.\n */\nexport const menuItemVariants = cva(\n  \"gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground\",\n        destructive:\n          \"text-destructive focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive *:[svg]:text-destructive\",\n        success:\n          \"text-success focus:bg-success/10 dark:focus:bg-success/20 focus:text-success *:[svg]:text-success\",\n        warning:\n          \"text-warning focus:bg-warning/10 dark:focus:bg-warning/20 focus:text-warning *:[svg]:text-warning\",\n        info: \"text-info focus:bg-info/10 dark:focus:bg-info/20 focus:text-info *:[svg]:text-info\",\n      },\n      inset: {\n        true: \"pl-8\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      inset: false,\n    },\n  },\n);\n\n/** Variant options for menu items: default, destructive, success, warning, info */\nexport type MenuItemVariant =\n  | \"default\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\n/**\n * Typography color variants shared across Title, Text, Code, and Blockquote components.\n * Provides semantic color options for consistent text styling.\n *\n * @example\n * ```tsx\n * import { typographyColorVariants } from \"@neynar/ui/lib/variants\"\n * import { cn } from \"@neynar/ui/lib/utils\"\n *\n * <span className={cn(typographyColorVariants({ color: \"muted\" }))}>\n *   Secondary text\n * </span>\n * ```\n */\nexport const typographyColorVariants = cva(\"\", {\n  variants: {\n    color: {\n      default: \"text-foreground\",\n      muted: \"text-muted-foreground\",\n      subtle: \"text-subtle-foreground\",\n      destructive: \"text-destructive\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      info: \"text-info\",\n    },\n  },\n  defaultVariants: {\n    color: \"default\",\n  },\n});\n\n/** Semantic color options for typography: default, muted, subtle, destructive, success, warning, info */\nexport type TypographyColor =\n  | \"default\"\n  | \"muted\"\n  | \"subtle\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\n/**\n * Title order-based size defaults (only used when size prop is not specified).\n * Maps heading levels (h1-h6) to responsive font sizes.\n *\n * @example\n * ```tsx\n * // order: 1 → \"text-3xl md:text-4xl lg:text-5xl\"\n * // order: 6 → \"text-sm md:text-base lg:text-lg\"\n * ```\n */\nexport const titleOrderSizeVariants = cva(\"\", {\n  variants: {\n    order: {\n      1: \"text-3xl md:text-4xl lg:text-5xl\",\n      2: \"text-2xl md:text-3xl lg:text-4xl\",\n      3: \"text-xl md:text-2xl lg:text-3xl\",\n      4: \"text-lg md:text-xl lg:text-2xl\",\n      5: \"text-base md:text-lg lg:text-xl\",\n      6: \"text-sm md:text-base lg:text-lg\",\n    },\n  },\n});\n\n/**\n * Title order-based style defaults (weight, tracking, leading).\n * Provides appropriate font-weight and line-height for each heading level.\n *\n * @example\n * ```tsx\n * // order: 1 → \"font-bold tracking-tight leading-[1.1]\"\n * // order: 6 → \"font-medium leading-normal\"\n * ```\n */\nexport const titleOrderStyleVariants = cva(\"\", {\n  variants: {\n    order: {\n      1: \"font-bold tracking-tight leading-[1.1]\",\n      2: \"font-semibold tracking-tight leading-[1.2]\",\n      3: \"font-semibold tracking-tight leading-[1.25]\",\n      4: \"font-semibold leading-[1.3]\",\n      5: \"font-medium leading-[1.4]\",\n      6: \"font-medium leading-normal\",\n    },\n  },\n  defaultVariants: {\n    order: 2,\n  },\n});\n\n/**\n * Title component variants for explicit size and weight overrides.\n * Use when you need to override the order-based defaults.\n *\n * @example\n * ```tsx\n * import { titleVariants } from \"@neynar/ui/lib/variants\"\n * import { cn } from \"@neynar/ui/lib/utils\"\n *\n * <h2 className={cn(titleVariants({ size: \"4xl\", weight: \"bold\" }))}>\n *   Large Bold Title\n * </h2>\n * ```\n */\nexport const titleVariants = cva(\"\", {\n  variants: {\n    size: {\n      xs: \"text-xs leading-4\",\n      sm: \"text-sm leading-5\",\n      base: \"text-base leading-6\",\n      lg: \"text-lg leading-7\",\n      xl: \"text-xl leading-7 tracking-tight\",\n      \"2xl\": \"text-2xl leading-8 tracking-tight\",\n      \"3xl\": \"text-3xl leading-9 tracking-tight\",\n      \"4xl\": \"text-4xl leading-10 tracking-tighter\",\n      \"5xl\": \"text-5xl leading-none tracking-tighter\",\n      \"6xl\": \"text-6xl leading-none tracking-tighter\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n      bold: \"font-bold\",\n    },\n  },\n});\n\n/** Heading level 1-6, maps to h1-h6 elements */\nexport type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Font size options from xs to 6xl */\nexport type TitleSize =\n  | \"xs\"\n  | \"sm\"\n  | \"base\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"5xl\"\n  | \"6xl\";\n\n/** Font weight options: normal, medium, semibold, bold */\nexport type TitleWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n\n/**\n * Text component variants with auto-scaling line-height and letter-spacing.\n * Provides consistent paragraph and body text styling.\n *\n * @example\n * ```tsx\n * import { textVariants } from \"@neynar/ui/lib/variants\"\n * import { cn } from \"@neynar/ui/lib/utils\"\n *\n * <p className={cn(textVariants({ size: \"lg\", weight: \"medium\", align: \"center\" }))}>\n *   Centered large text\n * </p>\n * ```\n */\nexport const textVariants = cva(\"\", {\n  variants: {\n    size: {\n      xs: \"text-xs leading-4\",\n      sm: \"text-sm leading-5\",\n      base: \"text-base leading-6\",\n      lg: \"text-lg leading-7\",\n      xl: \"text-xl leading-7 tracking-tight\",\n      \"2xl\": \"text-2xl leading-8 tracking-tighter\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n      bold: \"font-bold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    transform: {\n      uppercase: \"uppercase tracking-wider\",\n      lowercase: \"lowercase\",\n      capitalize: \"capitalize\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n});\n"],"names":[],"mappings":";AAcO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,SACE;AAAA,QACF,MAAM;AAAA,MAAA;AAAA,MAER,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAwBO,MAAM,0BAA0B,IAAI,IAAI;AAAA,EAC7C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAsBM,MAAM,yBAAyB,IAAI,IAAI;AAAA,EAC5C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;AAYM,MAAM,0BAA0B,IAAI,IAAI;AAAA,EAC7C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAgBM,MAAM,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;AAmCM,MAAM,eAAe,IAAI,IAAI;AAAA,EAClC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,IAET,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,IAET,WAAW;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;"}
+{"version":3,"file":"variants.js","sources":["../../src/lib/variants.ts"],"sourcesContent":["/**\n * @internal\n * Shared CVA variants used by menu and typography components.\n * Not exported publicly - use component props instead:\n *   - Menu styling: <DropdownMenuItem variant=\"destructive\">\n *   - Typography: <Text color=\"muted\" size=\"sm\">\n */\n\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Shared menu item variants for DropdownMenuItem, ContextMenuItem, and MenubarItem.\n * Provides consistent styling across all menu-style components.\n */\nexport const menuItemVariants = cva(\n  \"gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground\",\n        destructive:\n          \"text-destructive focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive *:[svg]:text-destructive\",\n        success:\n          \"text-success focus:bg-success/10 dark:focus:bg-success/20 focus:text-success *:[svg]:text-success\",\n        warning:\n          \"text-warning focus:bg-warning/10 dark:focus:bg-warning/20 focus:text-warning *:[svg]:text-warning\",\n        info: \"text-info focus:bg-info/10 dark:focus:bg-info/20 focus:text-info *:[svg]:text-info\",\n      },\n      inset: {\n        true: \"pl-8\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      inset: false,\n    },\n  },\n);\n\n/** Variant options for menu items: default, destructive, success, warning, info */\nexport type MenuItemVariant =\n  | \"default\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\n/**\n * Typography color variants shared across Title, Text, Code, and Blockquote components.\n * Provides semantic color options for consistent text styling.\n *\n * @example\n * ```tsx\n * import { typographyColorVariants } from \"@neynar/ui/lib/variants\"\n * import { cn } from \"@neynar/ui/lib/utils\"\n *\n * <span className={cn(typographyColorVariants({ color: \"muted\" }))}>\n *   Secondary text\n * </span>\n * ```\n */\nexport const typographyColorVariants = cva(\"\", {\n  variants: {\n    color: {\n      default: \"text-foreground\",\n      muted: \"text-muted-foreground\",\n      subtle: \"text-subtle-foreground\",\n      destructive: \"text-destructive\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      info: \"text-info\",\n    },\n  },\n  defaultVariants: {\n    color: \"default\",\n  },\n});\n\n/** Semantic color options for typography: default, muted, subtle, destructive, success, warning, info */\nexport type TypographyColor =\n  | \"default\"\n  | \"muted\"\n  | \"subtle\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\n/**\n * Title order-based size defaults (only used when size prop is not specified).\n * Maps heading levels (h1-h6) to responsive font sizes.\n *\n * @example\n * ```tsx\n * // order: 1 → \"text-3xl md:text-4xl lg:text-5xl\"\n * // order: 6 → \"text-sm md:text-base lg:text-lg\"\n * ```\n */\nexport const titleOrderSizeVariants = cva(\"\", {\n  variants: {\n    order: {\n      1: \"text-3xl md:text-4xl lg:text-5xl\",\n      2: \"text-2xl md:text-3xl lg:text-4xl\",\n      3: \"text-xl md:text-2xl lg:text-3xl\",\n      4: \"text-lg md:text-xl lg:text-2xl\",\n      5: \"text-base md:text-lg lg:text-xl\",\n      6: \"text-sm md:text-base lg:text-lg\",\n    },\n  },\n});\n\n/**\n * Title order-based style defaults (weight, tracking, leading).\n * Provides appropriate font-weight and line-height for each heading level.\n *\n * @example\n * ```tsx\n * // order: 1 → \"font-bold tracking-tight leading-[1.1]\"\n * // order: 6 → \"font-medium leading-normal\"\n * ```\n */\nexport const titleOrderStyleVariants = cva(\"\", {\n  variants: {\n    order: {\n      1: \"font-bold tracking-tight leading-[1.1]\",\n      2: \"font-semibold tracking-tight leading-[1.2]\",\n      3: \"font-semibold tracking-tight leading-[1.25]\",\n      4: \"font-semibold leading-[1.3]\",\n      5: \"font-medium leading-[1.4]\",\n      6: \"font-medium leading-normal\",\n    },\n  },\n  defaultVariants: {\n    order: 2,\n  },\n});\n\n/**\n * Title component variants for explicit size and weight overrides.\n * Use when you need to override the order-based defaults.\n *\n * @example\n * ```tsx\n * import { titleVariants } from \"@neynar/ui/lib/variants\"\n * import { cn } from \"@neynar/ui/lib/utils\"\n *\n * <h2 className={cn(titleVariants({ size: \"4xl\", weight: \"bold\" }))}>\n *   Large Bold Title\n * </h2>\n * ```\n */\nexport const titleVariants = cva(\"\", {\n  variants: {\n    size: {\n      xs: \"text-xs leading-4\",\n      sm: \"text-sm leading-5\",\n      base: \"text-base leading-6\",\n      lg: \"text-lg leading-7\",\n      xl: \"text-xl leading-7 tracking-tight\",\n      \"2xl\": \"text-2xl leading-8 tracking-tight\",\n      \"3xl\": \"text-3xl leading-9 tracking-tight\",\n      \"4xl\": \"text-4xl leading-10 tracking-tighter\",\n      \"5xl\": \"text-5xl leading-[1.1] tracking-tighter\",\n      \"6xl\": \"text-6xl leading-[1.1] tracking-tighter\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n      bold: \"font-bold\",\n    },\n  },\n});\n\n/** Heading level 1-6, maps to h1-h6 elements */\nexport type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Font size options from xs to 6xl */\nexport type TitleSize =\n  | \"xs\"\n  | \"sm\"\n  | \"base\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"5xl\"\n  | \"6xl\";\n\n/** Font weight options: normal, medium, semibold, bold */\nexport type TitleWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n\n/**\n * Text component variants with auto-scaling line-height and letter-spacing.\n * Provides consistent paragraph and body text styling.\n *\n * @example\n * ```tsx\n * import { textVariants } from \"@neynar/ui/lib/variants\"\n * import { cn } from \"@neynar/ui/lib/utils\"\n *\n * <p className={cn(textVariants({ size: \"lg\", weight: \"medium\", align: \"center\" }))}>\n *   Centered large text\n * </p>\n * ```\n */\nexport const textVariants = cva(\"\", {\n  variants: {\n    size: {\n      xs: \"text-xs leading-4\",\n      sm: \"text-sm leading-5\",\n      base: \"text-base leading-6\",\n      lg: \"text-lg leading-7\",\n      xl: \"text-xl leading-7 tracking-tight\",\n      \"2xl\": \"text-2xl leading-8 tracking-tighter\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n      bold: \"font-bold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    transform: {\n      uppercase: \"uppercase tracking-wider\",\n      lowercase: \"lowercase\",\n      capitalize: \"capitalize\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n});\n"],"names":[],"mappings":";AAcO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,SACE;AAAA,QACF,MAAM;AAAA,MAAA;AAAA,MAER,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAwBO,MAAM,0BAA0B,IAAI,IAAI;AAAA,EAC7C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAsBM,MAAM,yBAAyB,IAAI,IAAI;AAAA,EAC5C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;AAYM,MAAM,0BAA0B,IAAI,IAAI;AAAA,EAC7C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAgBM,MAAM,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;AAmCM,MAAM,eAAe,IAAI,IAAI;AAAA,EAClC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,IAET,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,IAET,WAAW;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/ui",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "Neynar Inc.",
   "description": "AI-first React component library for coding agents. LLM-optimized docs, sensible defaults, zero config. Built on shadcn patterns, Base UI, and Tailwind CSS v4.",
@@ -272,7 +272,7 @@
     "clean": "rm -rf dist",
     "docs:generate": "tsx scripts/llm-tsdoc-generator/index.ts llm-tsdoc-generator.config.json",
     "storybook": "storybook dev --no-open -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "STORYBOOK_BASE_PATH=/ui/ storybook build"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

package/src/components/neynar/typography/stories/title.stories.tsx

@@ -331,6 +331,39 @@ export const Variants: Story = {
   ),
 };
 
+/**
+ * Large multi-line titles demonstrating proper line-height for 5xl and 6xl sizes.
+ * These sizes use leading-[1.1] to prevent text overlap on wrapped lines.
+ */
+export const LargeMultiLine: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => (
+    <div className="w-full max-w-2xl space-y-8">
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Large Sizes with Multi-line Text</h3>
+          <p className="text-muted-foreground text-sm">
+            5xl and 6xl sizes with proper line-height to prevent text overlap.
+          </p>
+        </div>
+        <div className="space-y-6 border rounded-lg p-6">
+          <Title order={1} size="6xl">
+            Building the Future of Social Networks Together
+          </Title>
+          <Title order={1} size="5xl">
+            Decentralized Identity for the Next Generation of Apps
+          </Title>
+          <Title order={1} size="4xl">
+            Create, Connect, and Collaborate on Farcaster
+          </Title>
+        </div>
+      </section>
+    </div>
+  ),
+};
+
 /**
  * Interactive playground for testing Title props.
  */

package/src/components/ui/resizable.tsx

@@ -59,13 +59,13 @@ function ResizableHandle({
     <PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "group bg-border focus-visible:ring-primary relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary data-[resize-handle-state=drag]:bg-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "group bg-border focus-visible:ring-primary/50 focus-visible:bg-primary/50 relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary/50 data-[resize-handle-state=drag]:bg-primary/50 data-[resize-handle-state=active]:bg-primary/50 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className,
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border group-data-[resize-handle-state=hover]:bg-primary group-data-[resize-handle-state=drag]:bg-primary h-6 w-1 rounded-lg z-10 flex shrink-0" />
+        <div className="bg-border group-focus-visible:bg-primary/50 group-data-[resize-handle-state=hover]:bg-primary/50 group-data-[resize-handle-state=drag]:bg-primary/50 group-data-[resize-handle-state=active]:bg-primary/50 h-6 w-1 rounded-lg z-10 flex shrink-0" />
       )}
     </PanelResizeHandle>
   );

package/src/lib/variants.ts

@@ -162,8 +162,8 @@ export const titleVariants = cva("", {
       "2xl": "text-2xl leading-8 tracking-tight",
       "3xl": "text-3xl leading-9 tracking-tight",
       "4xl": "text-4xl leading-10 tracking-tighter",
-      "5xl": "text-5xl leading-none tracking-tighter",
-      "6xl": "text-6xl leading-none tracking-tighter",
+      "5xl": "text-5xl leading-[1.1] tracking-tighter",
+      "6xl": "text-6xl leading-[1.1] tracking-tighter",
     },
     weight: {
       normal: "font-normal",