@olwiba/ui 0.0.41 → 0.0.43

package/dist/mdx/index.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MdxContentProps {
+    code: string;
+}
+declare function MdxContent({ code }: MdxContentProps): react_jsx_runtime.JSX.Element;
+
+export { MdxContent, type MdxContentProps };

package/dist/mdx/index.js

@@ -0,0 +1,32 @@
+import { cn } from '../chunk-SUKTBILF.js';
+import { useMDXComponent } from '@content-collections/mdx/react';
+import { jsx } from 'react/jsx-runtime';
+
+var components = {
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx("h1", { className: cn("mt-8 scroll-m-20 text-3xl font-bold tracking-tight text-foreground first:mt-0", className), ...props }),
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx("h2", { className: cn("mt-10 scroll-m-20 text-2xl font-semibold tracking-tight text-foreground first:mt-0", className), ...props }),
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx("h3", { className: cn("mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-foreground", className), ...props }),
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx("h4", { className: cn("mt-6 scroll-m-20 text-lg font-semibold tracking-tight text-foreground", className), ...props }),
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: cn("leading-7 text-muted-foreground [&:not(:first-child)]:mt-6", className), ...props }),
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx("ul", { className: cn("my-6 ml-6 list-disc text-muted-foreground", className), ...props }),
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx("ol", { className: cn("my-6 ml-6 list-decimal text-muted-foreground", className), ...props }),
+  li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("mt-2", className), ...props }),
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx("blockquote", { className: cn("mt-6 rounded-r-lg border-l-4 border-primary bg-muted py-4 pl-6 pr-4 italic text-muted-foreground", className), ...props }),
+  hr: (props) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
+  img: ({ className, alt, ...props }) => /* @__PURE__ */ jsx("img", { className: cn("rounded-lg border shadow-sm", className), alt, ...props }),
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsx("pre", { className: cn("mt-6 mb-4 overflow-x-auto rounded-lg bg-muted p-4 text-sm", className), ...props }),
+  code: ({ className, ...props }) => /* @__PURE__ */ jsx("code", { className: cn("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm text-foreground", className), ...props }),
+  table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-6 w-full overflow-y-auto rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: cn("w-full", className), ...props }) }),
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx("tr", { className: cn("m-0 border-t border-border p-0 even:bg-muted", className), ...props }),
+  th: ({ className, ...props }) => /* @__PURE__ */ jsx("th", { className: cn("border border-border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right", className), ...props }),
+  td: ({ className, ...props }) => /* @__PURE__ */ jsx("td", { className: cn("border border-border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right", className), ...props }),
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx("a", { className: cn("font-medium text-primary underline underline-offset-4 hover:text-primary/80", className), ...props })
+};
+function MdxContent({ code }) {
+  const MDXComponent = useMDXComponent(code);
+  return /* @__PURE__ */ jsx(MDXComponent, { components });
+}
+
+export { MdxContent };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/mdx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/blog/MdxContent.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from 'react';\nimport { useMDXComponent } from '@content-collections/mdx/react';\nimport { cn } from '../lib/utils';\n\nconst components = {\n  h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (\n    <h1 className={cn('mt-8 scroll-m-20 text-3xl font-bold tracking-tight text-foreground first:mt-0', className)} {...props} />\n  ),\n  h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (\n    <h2 className={cn('mt-10 scroll-m-20 text-2xl font-semibold tracking-tight text-foreground first:mt-0', className)} {...props} />\n  ),\n  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (\n    <h3 className={cn('mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-foreground', className)} {...props} />\n  ),\n  h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (\n    <h4 className={cn('mt-6 scroll-m-20 text-lg font-semibold tracking-tight text-foreground', className)} {...props} />\n  ),\n  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (\n    <p className={cn('leading-7 text-muted-foreground [&:not(:first-child)]:mt-6', className)} {...props} />\n  ),\n  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (\n    <ul className={cn('my-6 ml-6 list-disc text-muted-foreground', className)} {...props} />\n  ),\n  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (\n    <ol className={cn('my-6 ml-6 list-decimal text-muted-foreground', className)} {...props} />\n  ),\n  li: ({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) => (\n    <li className={cn('mt-2', className)} {...props} />\n  ),\n  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLQuoteElement>) => (\n    <blockquote className={cn('mt-6 rounded-r-lg border-l-4 border-primary bg-muted py-4 pl-6 pr-4 italic text-muted-foreground', className)} {...props} />\n  ),\n  hr: (props: React.HTMLAttributes<HTMLHRElement>) => (\n    <hr className=\"my-8 border-border\" {...props} />\n  ),\n  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (\n    <img className={cn('rounded-lg border shadow-sm', className)} alt={alt} {...props} />\n  ),\n  pre: ({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) => (\n    <pre className={cn('mt-6 mb-4 overflow-x-auto rounded-lg bg-muted p-4 text-sm', className)} {...props} />\n  ),\n  code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (\n    <code className={cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm text-foreground', className)} {...props} />\n  ),\n  table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (\n    <div className=\"my-6 w-full overflow-y-auto rounded-lg border border-border\">\n      <table className={cn('w-full', className)} {...props} />\n    </div>\n  ),\n  tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (\n    <tr className={cn('m-0 border-t border-border p-0 even:bg-muted', className)} {...props} />\n  ),\n  th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (\n    <th className={cn('border border-border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right', className)} {...props} />\n  ),\n  td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (\n    <td className={cn('border border-border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right', className)} {...props} />\n  ),\n  a: ({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (\n    <a className={cn('font-medium text-primary underline underline-offset-4 hover:text-primary/80', className)} {...props} />\n  ),\n};\n\nexport interface MdxContentProps {\n  code: string;\n}\n\nexport function MdxContent({ code }: MdxContentProps) {\n  const MDXComponent = useMDXComponent(code);\n  return <MDXComponent components={components} />;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -15,6 +15,10 @@
     "./email": {
       "import": "./dist/email/index.js",
       "types": "./dist/email/index.d.ts"
+    },
+    "./mdx": {
+      "import": "./dist/mdx/index.js",
+      "types": "./dist/mdx/index.d.ts"
     }
   },
   "files": [

package/src/index.ts

@@ -14,6 +14,9 @@ export {
 // ─── Primitives — mode-aware re-exports of @olwiba/cn components ─────────────
 export * from './primitives';
 
+// ─── Layout — grid, stack, section primitives ────────────────────────────────
+export * from './layout';
+
 // ─── App — shells, auth, feedback ────────────────────────────────────────────
 export {
   AppShell,
@@ -109,7 +112,9 @@ export { PostCard, type PostCardProps } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
 export { ChangelogList, type ChangelogListProps } from './blog/ChangelogList';
 export { ChangelogCard, type ChangelogCardProps } from './blog/ChangelogCard';
-export { MdxContent, type MdxContentProps } from './blog/MdxContent';
+
+// ─── MDX — import from @olwiba/ui/mdx (requires @content-collections/mdx peer) ─
+// MdxContent is not exported here to avoid forcing @content-collections/mdx on all consumers.
 
 // ─── Hooks ────────────────────────────────────────────────────────────────────
 export { useMounted } from './hooks/use-mounted';

package/src/layout/Grid.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const colsMap: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  12: 'grid-cols-12',
+}
+
+const gapMap = {
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-3',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const spanMap: Record<number, string> = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+  5: 'col-span-5',
+  6: 'col-span-6',
+  7: 'col-span-7',
+  8: 'col-span-8',
+  9: 'col-span-9',
+  10: 'col-span-10',
+  11: 'col-span-11',
+  12: 'col-span-12',
+}
+
+const rowSpanMap: Record<number, string> = {
+  1: 'row-span-1',
+  2: 'row-span-2',
+  3: 'row-span-3',
+  4: 'row-span-4',
+}
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+  gap?: keyof typeof gapMap
+}
+
+export function Grid({ columns = 3, gap = 'md', className, children, ...props }: GridProps) {
+  return (
+    <div className={cn('grid', colsMap[columns], gapMap[gap], className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  rowSpan?: 1 | 2 | 3 | 4
+}
+
+export function GridItem({ span = 1, rowSpan, className, children, ...props }: GridItemProps) {
+  return (
+    <div
+      className={cn(spanMap[span], rowSpan != null && rowSpanMap[rowSpan], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/Section.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const paddingMap = {
+  none: '',
+  sm: 'py-4',
+  md: 'py-8',
+  lg: 'py-16',
+}
+
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string
+  description?: string
+  padding?: keyof typeof paddingMap
+}
+
+export function Section({ title, description, padding = 'md', className, children, ...props }: SectionProps) {
+  return (
+    <section className={cn('w-full', paddingMap[padding], className)} {...props}>
+      {(title || description) && (
+        <div className="mb-6">
+          {title && <h2 className="text-xl font-semibold text-foreground">{title}</h2>}
+          {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      {children}
+    </section>
+  )
+}

package/src/layout/Stack.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const gapMap = {
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-3',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const alignMap = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+}
+
+const justifyMap = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+}
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: 'col' | 'row'
+  gap?: keyof typeof gapMap
+  align?: keyof typeof alignMap
+  justify?: keyof typeof justifyMap
+  wrap?: boolean
+}
+
+export function Stack({
+  direction = 'col',
+  gap = 'md',
+  align = 'stretch',
+  justify = 'start',
+  wrap = false,
+  className,
+  children,
+  ...props
+}: StackProps) {
+  return (
+    <div
+      className={cn(
+        'flex',
+        direction === 'col' ? 'flex-col' : 'flex-row',
+        gapMap[gap],
+        alignMap[align],
+        justifyMap[justify],
+        wrap && 'flex-wrap',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/index.ts

@@ -0,0 +1,6 @@
+export { Grid, GridItem } from './Grid'
+export type { GridProps, GridItemProps } from './Grid'
+export { Stack } from './Stack'
+export type { StackProps } from './Stack'
+export { Section } from './Section'
+export type { SectionProps } from './Section'

package/src/mdx/index.ts

@@ -0,0 +1 @@
+export { MdxContent, type MdxContentProps } from '../blog/MdxContent';