@uniweb/kit 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.1.14"
+    "@uniweb/core": "0.1.15"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/styled/Article/index.jsx

@@ -0,0 +1,79 @@
+/**
+ * Article Component
+ *
+ * Semantic article wrapper with prose typography.
+ * Use for blog posts, news articles, documentation pages, etc.
+ *
+ * @module @uniweb/kit/styled/Article
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+import { Render } from '../Section/Render.jsx'
+
+/**
+ * Prose sizes
+ */
+const SIZE_CLASSES = {
+  sm: 'prose-sm',
+  base: 'prose-base',
+  lg: 'prose-lg',
+  xl: 'prose-xl',
+  '2xl': 'prose-2xl'
+}
+
+/**
+ * Article - Semantic article with prose typography
+ *
+ * Renders content inside a semantic <article> tag with prose styling.
+ * Can accept either children or a content prop (ProseMirror JSON).
+ *
+ * @param {Object} props
+ * @param {Object|Array} [props.content] - ProseMirror content to render
+ * @param {string} [props.size='lg'] - Text size: sm, base, lg, xl, 2xl
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.children] - Content to render (alternative to content prop)
+ *
+ * @example
+ * // With ProseMirror content
+ * <Article content={articleData.content} />
+ *
+ * @example
+ * // With children
+ * <Article>
+ *   <h1>My Article</h1>
+ *   <p>Article content...</p>
+ * </Article>
+ *
+ * @example
+ * // Composing with Render
+ * <Article size="base" className="dark:prose-invert">
+ *   <Render content={proseMirrorContent} />
+ * </Article>
+ */
+export function Article({
+  content,
+  size = 'lg',
+  className,
+  children,
+  ...props
+}) {
+  const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.lg
+
+  // Resolve content - if it's a ProseMirror doc, get the content array
+  let resolvedContent = content
+  if (resolvedContent?.type === 'doc') {
+    resolvedContent = resolvedContent.content
+  }
+
+  return (
+    <article
+      className={cn('prose', sizeClass, 'max-w-none', className)}
+      {...props}
+    >
+      {children || (resolvedContent && <Render content={resolvedContent} />)}
+    </article>
+  )
+}
+
+export default Article

package/src/styled/Prose/index.jsx

@@ -0,0 +1,66 @@
+/**
+ * Prose Component
+ *
+ * Typography wrapper for long-form content.
+ * Applies prose styling for readable text.
+ *
+ * @module @uniweb/kit/styled/Prose
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+
+/**
+ * Prose sizes
+ */
+const SIZE_CLASSES = {
+  sm: 'prose-sm',
+  base: 'prose-base',
+  lg: 'prose-lg',
+  xl: 'prose-xl',
+  '2xl': 'prose-2xl'
+}
+
+/**
+ * Prose - Typography wrapper for long-form content
+ *
+ * Applies Tailwind Typography (prose) classes for readable text styling.
+ * Use for article bodies, documentation, or any long-form content.
+ *
+ * @param {Object} props
+ * @param {string} [props.size='lg'] - Text size: sm, base, lg, xl, 2xl
+ * @param {string} [props.as='div'] - HTML element to render as
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} props.children - Content to render
+ *
+ * @example
+ * <Prose>
+ *   <h2>Article Title</h2>
+ *   <p>Article content...</p>
+ * </Prose>
+ *
+ * @example
+ * <Prose size="base" className="dark:prose-invert">
+ *   <Render content={proseMirrorContent} />
+ * </Prose>
+ */
+export function Prose({
+  size = 'lg',
+  as: Component = 'div',
+  className,
+  children,
+  ...props
+}) {
+  const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.lg
+
+  return (
+    <Component
+      className={cn('prose', sizeClass, 'max-w-none', className)}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export default Prose

package/src/styled/index.js

@@ -20,9 +20,15 @@ export { SidebarLayout } from './SidebarLayout/index.js'
 // Content Rendering
 // ============================================================================
 
-// Section - Rich content section renderer
+// Section - Rich content section layout container
 export { Section, Render } from './Section/index.js'
 
+// Prose - Typography wrapper for long-form content
+export { Prose } from './Prose/index.jsx'
+
+// Article - Semantic article with prose typography
+export { Article } from './Article/index.jsx'
+
 // Renderers - Individual content type renderers
 export { Code, Alert, Warning, Table, Details, Divider } from './Section/renderers/index.js'