@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/label.d.ts

@@ -0,0 +1,91 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Label as Label$1 } from 'radix-ui';
+
+declare const labelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type LabelSize = "sm" | "md" | "lg";
+interface LabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Label$1.Root>, "asChild">, VariantProps<typeof labelVariants> {
+    /**
+     * Size of the label text.
+     * @default "md"
+     */
+    size?: LabelSize;
+    /**
+     * Whether the associated field is required.
+     * When true, a red asterisk (*) is displayed after the label text.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the associated field is disabled.
+     * Applies reduced opacity and not-allowed cursor.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional description or helper text displayed below the label.
+     * Useful for providing additional context about the field.
+     */
+    description?: ReactNode;
+    /**
+     * Additional CSS classes for the description text.
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the outer wrapper element.
+     * Only applied when `description` is provided (wrapper is needed
+     * to stack label + description).
+     */
+    wrapperClassName?: string;
+    /** Content to render inside the label. */
+    children?: ReactNode;
+    /** Additional CSS classes to merge on the label element. */
+    className?: string;
+}
+/**
+ * Label — an accessible label for form controls.
+ *
+ * Built on Radix UI's Label primitive for proper accessibility semantics
+ * and the design system's token layer for consistent styling. When used
+ * with Radix form controls, clicking the label will focus the associated
+ * input automatically.
+ *
+ * Accessibility:
+ *   - Renders as a native `<label>` element for proper semantics
+ *   - Use `htmlFor` to associate with the corresponding input's `id`
+ *   - Required indicator is decorative (`aria-hidden`) — use `aria-required`
+ *     on the input itself for screen reader support
+ *   - Disabled state is visual only — disable the input for functional disabling
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Label htmlFor="email">Email address</Label>
+ * <Input id="email" type="email" />
+ *
+ * // Required field
+ * <Label htmlFor="name" required>Full name</Label>
+ * <Input id="name" aria-required="true" />
+ *
+ * // With description
+ * <Label htmlFor="bio" description="Keep it under 200 characters.">
+ *   Bio
+ * </Label>
+ * <Textarea id="bio" />
+ *
+ * // Small size for dense UIs
+ * <Label htmlFor="code" size="sm">Verification code</Label>
+ * <Input id="code" size="sm" />
+ *
+ * // Disabled
+ * <Label htmlFor="locked" disabled>Locked field</Label>
+ * <Input id="locked" disabled />
+ * ```
+ */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+export { Label, type LabelProps, type LabelSize, labelVariants };

package/dist/components/label.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { cva } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui";
+import { forwardRef } from "react";
+const labelVariants = cva(
+  // Base styles — shared across all sizes
+  [
+    // Typography
+    "font-medium leading-none text-foreground",
+    // Prevent text selection on double-click
+    "select-none",
+    // Peer-disabled styling (when used with peer inputs)
+    "peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — for compact forms and dense UIs.
+         * Font: 12px
+         */
+        sm: "text-xs leading-4",
+        /**
+         * Medium — default size for most labels.
+         * Font: 14px
+         */
+        md: "text-sm leading-5",
+        /**
+         * Large — for prominent form fields.
+         * Font: 14px with slightly more weight
+         */
+        lg: "text-sm leading-5 font-semibold"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function RequiredIndicator({ className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-danger ml-0.5", className), "aria-hidden": "true", children: "*" });
+}
+const Label = forwardRef(function Label2({
+  size = "md",
+  required = false,
+  disabled = false,
+  description,
+  descriptionClassName,
+  wrapperClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const descriptionSizeClass = size === "sm" ? "text-[11px] leading-4" : "text-xs leading-4";
+  const labelElement = /* @__PURE__ */ jsxs(
+    LabelPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        labelVariants({ size }),
+        disabled && "opacity-50 cursor-not-allowed",
+        !disabled && "cursor-pointer",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "label",
+      "data-ds-size": size,
+      ...disabled ? { "data-ds-disabled": "" } : {},
+      ...required ? { "data-ds-required": "" } : {},
+      ...rest,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx(RequiredIndicator, {})
+      ]
+    }
+  );
+  if (!description) {
+    return labelElement;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-1", wrapperClassName),
+      "data-ds": "",
+      "data-ds-component": "label-group",
+      children: [
+        labelElement,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              descriptionSizeClass,
+              "text-muted-foreground",
+              disabled && "opacity-50",
+              descriptionClassName
+            ),
+            children: description
+          }
+        )
+      ]
+    }
+  );
+});
+Label.displayName = "Label";
+export {
+  Label,
+  labelVariants
+};

package/dist/components/markdown.cjs

@@ -0,0 +1,179 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var markdown_exports = {};
+__export(markdown_exports, {
+  Markdown: () => Markdown
+});
+module.exports = __toCommonJS(markdown_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_react = require("react");
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function parseInline(text) {
+  return text.replace(
+    /!\[([^\]]*)\]\(([^)]+)\)/g,
+    '<img src="$2" alt="$1" class="rounded-md max-w-full" loading="lazy" />'
+  ).replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2" class="text-primary underline underline-offset-2 hover:text-primary-hover" target="_blank" rel="noopener noreferrer">$1</a>'
+  ).replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/__(.+?)__/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/_(.+?)_/g, "<em>$1</em>").replace(/~~(.+?)~~/g, "<del>$1</del>").replace(
+    /`([^`]+)`/g,
+    '<code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em]">$1</code>'
+  );
+}
+function parseMarkdown(input, allowHtml) {
+  const lines = input.split("\n");
+  const output = [];
+  let inCodeBlock = false;
+  let _codeBlockLang = "";
+  let codeBuffer = [];
+  let inList = false;
+  let listType = "ul";
+  function closeList() {
+    if (inList) {
+      output.push(`</${listType}>`);
+      inList = false;
+    }
+  }
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("```")) {
+      if (inCodeBlock) {
+        output.push(
+          `<pre class="rounded-lg bg-muted p-4 overflow-x-auto text-sm font-mono"><code>${escapeHtml(codeBuffer.join("\n"))}</code></pre>`
+        );
+        codeBuffer = [];
+        inCodeBlock = false;
+        continue;
+      }
+      closeList();
+      inCodeBlock = true;
+      _codeBlockLang = line.slice(3).trim();
+      continue;
+    }
+    if (inCodeBlock) {
+      codeBuffer.push(line);
+      continue;
+    }
+    const safeLine = allowHtml ? line : escapeHtml(line);
+    const trimmed = safeLine.trim();
+    if (trimmed === "") {
+      closeList();
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+      closeList();
+      output.push('<hr class="border-border my-4" />');
+      continue;
+    }
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      closeList();
+      const level = headingMatch[1].length;
+      const text = parseInline(headingMatch[2]);
+      const hClasses = {
+        1: "text-2xl font-bold mt-6 mb-3",
+        2: "text-xl font-semibold mt-5 mb-2",
+        3: "text-lg font-semibold mt-4 mb-2",
+        4: "text-base font-semibold mt-3 mb-1",
+        5: "text-sm font-semibold mt-3 mb-1",
+        6: "text-sm font-medium mt-3 mb-1 text-muted-foreground"
+      };
+      output.push(
+        `<h${level} class="${hClasses[level] || ""}">${text}</h${level}>`
+      );
+      continue;
+    }
+    if (trimmed.startsWith("&gt; ") || trimmed.startsWith("> ")) {
+      closeList();
+      const quoteText = trimmed.replace(/^(&gt;\s?|>\s?)/, "");
+      output.push(
+        `<blockquote class="border-l-2 border-border pl-4 text-muted-foreground italic my-3">${parseInline(quoteText)}</blockquote>`
+      );
+      continue;
+    }
+    const ulMatch = trimmed.match(/^[-*+]\s+(.+)$/);
+    if (ulMatch) {
+      if (!inList || listType !== "ul") {
+        closeList();
+        output.push('<ul class="list-disc pl-6 my-2 space-y-1">');
+        inList = true;
+        listType = "ul";
+      }
+      output.push(`<li>${parseInline(ulMatch[1])}</li>`);
+      continue;
+    }
+    const olMatch = trimmed.match(/^\d+\.\s+(.+)$/);
+    if (olMatch) {
+      if (!inList || listType !== "ol") {
+        closeList();
+        output.push('<ol class="list-decimal pl-6 my-2 space-y-1">');
+        inList = true;
+        listType = "ol";
+      }
+      output.push(`<li>${parseInline(olMatch[1])}</li>`);
+      continue;
+    }
+    closeList();
+    output.push(`<p class="my-2 leading-relaxed">${parseInline(trimmed)}</p>`);
+  }
+  closeList();
+  if (inCodeBlock) {
+    output.push(
+      `<pre class="rounded-lg bg-muted p-4 overflow-x-auto text-sm font-mono"><code>${escapeHtml(codeBuffer.join("\n"))}</code></pre>`
+    );
+  }
+  return output.join("\n");
+}
+const sizeClasses = {
+  sm: "text-sm [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base",
+  base: "text-base",
+  lg: "text-lg [&_h1]:text-3xl [&_h2]:text-2xl [&_h3]:text-xl"
+};
+const Markdown = (0, import_react.forwardRef)(
+  function Markdown2({ content, size = "base", fluid = false, className, allowHtml = false }, ref) {
+    const html = (0, import_react.useMemo)(
+      () => parseMarkdown(content, allowHtml),
+      [content, allowHtml]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_cn.cn)(
+          "text-foreground",
+          sizeClasses[size],
+          !fluid && "max-w-prose",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "markdown",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  }
+);
+Markdown.displayName = "Markdown";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Markdown
+});

package/dist/components/markdown.d.cts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+
+interface MarkdownProps {
+    /** Markdown string to render. */
+    content: string;
+    /** Text size variant. @default "base" */
+    size?: "sm" | "base" | "lg";
+    /** Whether to remove max-width constraint. @default false */
+    fluid?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Whether to allow raw HTML in the markdown. @default false */
+    allowHtml?: boolean;
+}
+/**
+ * `Markdown` — renders a markdown string with design system prose styles.
+ *
+ * For simple markdown display use cases. For full MDX support, use
+ * Fumadocs or a dedicated MDX processor.
+ *
+ * @example
+ * ```tsx
+ * <Markdown content={`
+ * # Hello World
+ *
+ * Some **bold** and *italic* text with \`inline code\`.
+ *
+ * - Item one
+ * - Item two
+ *
+ * > A blockquote
+ *
+ * \`\`\`tsx
+ * const x = 42;
+ * \`\`\`
+ * `} />
+ * ```
+ */
+declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Markdown, type MarkdownProps };

package/dist/components/markdown.d.ts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+
+interface MarkdownProps {
+    /** Markdown string to render. */
+    content: string;
+    /** Text size variant. @default "base" */
+    size?: "sm" | "base" | "lg";
+    /** Whether to remove max-width constraint. @default false */
+    fluid?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Whether to allow raw HTML in the markdown. @default false */
+    allowHtml?: boolean;
+}
+/**
+ * `Markdown` — renders a markdown string with design system prose styles.
+ *
+ * For simple markdown display use cases. For full MDX support, use
+ * Fumadocs or a dedicated MDX processor.
+ *
+ * @example
+ * ```tsx
+ * <Markdown content={`
+ * # Hello World
+ *
+ * Some **bold** and *italic* text with \`inline code\`.
+ *
+ * - Item one
+ * - Item two
+ *
+ * > A blockquote
+ *
+ * \`\`\`tsx
+ * const x = 42;
+ * \`\`\`
+ * `} />
+ * ```
+ */
+declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Markdown, type MarkdownProps };

package/dist/components/markdown.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { forwardRef, useMemo } from "react";
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function parseInline(text) {
+  return text.replace(
+    /!\[([^\]]*)\]\(([^)]+)\)/g,
+    '<img src="$2" alt="$1" class="rounded-md max-w-full" loading="lazy" />'
+  ).replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2" class="text-primary underline underline-offset-2 hover:text-primary-hover" target="_blank" rel="noopener noreferrer">$1</a>'
+  ).replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/__(.+?)__/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/_(.+?)_/g, "<em>$1</em>").replace(/~~(.+?)~~/g, "<del>$1</del>").replace(
+    /`([^`]+)`/g,
+    '<code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em]">$1</code>'
+  );
+}
+function parseMarkdown(input, allowHtml) {
+  const lines = input.split("\n");
+  const output = [];
+  let inCodeBlock = false;
+  let _codeBlockLang = "";
+  let codeBuffer = [];
+  let inList = false;
+  let listType = "ul";
+  function closeList() {
+    if (inList) {
+      output.push(`</${listType}>`);
+      inList = false;
+    }
+  }
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("```")) {
+      if (inCodeBlock) {
+        output.push(
+          `<pre class="rounded-lg bg-muted p-4 overflow-x-auto text-sm font-mono"><code>${escapeHtml(codeBuffer.join("\n"))}</code></pre>`
+        );
+        codeBuffer = [];
+        inCodeBlock = false;
+        continue;
+      }
+      closeList();
+      inCodeBlock = true;
+      _codeBlockLang = line.slice(3).trim();
+      continue;
+    }
+    if (inCodeBlock) {
+      codeBuffer.push(line);
+      continue;
+    }
+    const safeLine = allowHtml ? line : escapeHtml(line);
+    const trimmed = safeLine.trim();
+    if (trimmed === "") {
+      closeList();
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+      closeList();
+      output.push('<hr class="border-border my-4" />');
+      continue;
+    }
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      closeList();
+      const level = headingMatch[1].length;
+      const text = parseInline(headingMatch[2]);
+      const hClasses = {
+        1: "text-2xl font-bold mt-6 mb-3",
+        2: "text-xl font-semibold mt-5 mb-2",
+        3: "text-lg font-semibold mt-4 mb-2",
+        4: "text-base font-semibold mt-3 mb-1",
+        5: "text-sm font-semibold mt-3 mb-1",
+        6: "text-sm font-medium mt-3 mb-1 text-muted-foreground"
+      };
+      output.push(
+        `<h${level} class="${hClasses[level] || ""}">${text}</h${level}>`
+      );
+      continue;
+    }
+    if (trimmed.startsWith("&gt; ") || trimmed.startsWith("> ")) {
+      closeList();
+      const quoteText = trimmed.replace(/^(&gt;\s?|>\s?)/, "");
+      output.push(
+        `<blockquote class="border-l-2 border-border pl-4 text-muted-foreground italic my-3">${parseInline(quoteText)}</blockquote>`
+      );
+      continue;
+    }
+    const ulMatch = trimmed.match(/^[-*+]\s+(.+)$/);
+    if (ulMatch) {
+      if (!inList || listType !== "ul") {
+        closeList();
+        output.push('<ul class="list-disc pl-6 my-2 space-y-1">');
+        inList = true;
+        listType = "ul";
+      }
+      output.push(`<li>${parseInline(ulMatch[1])}</li>`);
+      continue;
+    }
+    const olMatch = trimmed.match(/^\d+\.\s+(.+)$/);
+    if (olMatch) {
+      if (!inList || listType !== "ol") {
+        closeList();
+        output.push('<ol class="list-decimal pl-6 my-2 space-y-1">');
+        inList = true;
+        listType = "ol";
+      }
+      output.push(`<li>${parseInline(olMatch[1])}</li>`);
+      continue;
+    }
+    closeList();
+    output.push(`<p class="my-2 leading-relaxed">${parseInline(trimmed)}</p>`);
+  }
+  closeList();
+  if (inCodeBlock) {
+    output.push(
+      `<pre class="rounded-lg bg-muted p-4 overflow-x-auto text-sm font-mono"><code>${escapeHtml(codeBuffer.join("\n"))}</code></pre>`
+    );
+  }
+  return output.join("\n");
+}
+const sizeClasses = {
+  sm: "text-sm [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base",
+  base: "text-base",
+  lg: "text-lg [&_h1]:text-3xl [&_h2]:text-2xl [&_h3]:text-xl"
+};
+const Markdown = forwardRef(
+  function Markdown2({ content, size = "base", fluid = false, className, allowHtml = false }, ref) {
+    const html = useMemo(
+      () => parseMarkdown(content, allowHtml),
+      [content, allowHtml]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "text-foreground",
+          sizeClasses[size],
+          !fluid && "max-w-prose",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "markdown",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  }
+);
+Markdown.displayName = "Markdown";
+export {
+  Markdown
+};