@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/checkbox.mjs

@@ -0,0 +1,296 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId
+} from "react";
+const checkboxVariants = cva(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "inline-flex shrink-0 items-center justify-center",
+    // Shape
+    "rounded-sm",
+    // Border
+    "border",
+    // Colors — unchecked state
+    "border-input bg-background",
+    // Transition
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Focus ring — WCAG AA compliant
+    focusRingClasses,
+    // Hover
+    "hover:border-border-strong",
+    // Checked state
+    "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
+    "data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover",
+    // Indeterminate state
+    "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground",
+    "data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-primary-hover",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+    // Cursor
+    "cursor-pointer disabled:cursor-not-allowed",
+    // Peer for label styling
+    "peer"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — compact for dense UIs, tables, settings panels.
+         * Box: 16px (size-4)
+         */
+        sm: "size-4",
+        /**
+         * Medium — default size for most forms.
+         * Box: 18px (size-[18px])
+         */
+        md: "size-[18px]"
+      },
+      // -----------------------------------------------------------------
+      // Error Variant
+      // -----------------------------------------------------------------
+      error: {
+        true: [
+          "border-danger",
+          "data-[state=unchecked]:border-danger",
+          "focus-visible:border-danger"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  }
+);
+const iconSizeMap = {
+  sm: "size-3",
+  md: "size-3.5"
+};
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function IndeterminateIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+    }
+  );
+}
+const Checkbox = forwardRef(function Checkbox2({
+  size = "md",
+  error = false,
+  label,
+  description,
+  wrapperClassName,
+  labelClassName,
+  className,
+  id: idProp,
+  disabled,
+  checked,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const resolvedAriaInvalid = ariaInvalid !== void 0 ? ariaInvalid : error ? true : void 0;
+  const labelTextClass = size === "sm" ? "text-xs" : "text-sm";
+  const descriptionTextClass = "text-xs";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-2",
+        disabled && "cursor-not-allowed opacity-50",
+        wrapperClassName
+      ),
+      "data-ds": "",
+      "data-ds-component": "checkbox",
+      "data-ds-size": size,
+      children: [
+        /* @__PURE__ */ jsx(
+          CheckboxPrimitive.Root,
+          {
+            ref,
+            id,
+            checked,
+            disabled,
+            "aria-invalid": resolvedAriaInvalid,
+            "aria-describedby": descriptionId,
+            className: cn(
+              checkboxVariants({ size, error }),
+              // Slight top offset to align with label text baseline
+              label && "mt-0.5",
+              className
+            ),
+            ...rest,
+            children: /* @__PURE__ */ jsx(
+              CheckboxPrimitive.Indicator,
+              {
+                className: cn(
+                  "flex items-center justify-center",
+                  // Animate the indicator
+                  "data-[state=checked]:animate-in data-[state=checked]:zoom-in-75",
+                  "data-[state=unchecked]:animate-out data-[state=unchecked]:zoom-out-75"
+                ),
+                children: checked === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: iconSizeMap[size] }) : /* @__PURE__ */ jsx(CheckIcon, { className: iconSizeMap[size] })
+              }
+            )
+          }
+        ),
+        (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              className: cn(
+                labelTextClass,
+                "leading-5 font-medium",
+                "text-foreground",
+                "cursor-pointer select-none",
+                "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                error && "text-danger",
+                labelClassName
+              ),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: descriptionId,
+              className: cn(
+                descriptionTextClass,
+                "leading-4 text-muted-foreground"
+              ),
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
+const CheckboxGroupContext = createContext({});
+function useCheckboxGroupContext() {
+  return useContext(CheckboxGroupContext);
+}
+function CheckboxGroup({
+  label,
+  description,
+  orientation = "vertical",
+  size,
+  disabled = false,
+  error = false,
+  errorMessage,
+  children,
+  className
+}) {
+  const groupId = useId();
+  const labelId = label ? `${groupId}-label` : void 0;
+  const descriptionId = description ? `${groupId}-description` : void 0;
+  const errorId = errorMessage ? `${groupId}-error` : void 0;
+  const contextValue = {
+    size,
+    disabled,
+    error
+  };
+  return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "aria-labelledby": labelId,
+      "aria-describedby": cn(descriptionId ?? "", errorId ?? "").trim() || void 0,
+      "aria-invalid": error || void 0,
+      disabled,
+      className: cn("flex flex-col gap-2", className),
+      "data-ds": "",
+      "data-ds-component": "checkbox-group",
+      children: [
+        label && /* @__PURE__ */ jsx(
+          "legend",
+          {
+            id: labelId,
+            className: cn(
+              "text-sm font-medium leading-5 text-foreground",
+              error && "text-danger"
+            ),
+            children: label
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: descriptionId,
+            className: "text-xs leading-4 text-muted-foreground",
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex",
+              orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-4"
+            ),
+            children
+          }
+        ),
+        error && errorMessage && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: errorId,
+            className: "text-xs leading-4 text-danger",
+            role: "alert",
+            children: errorMessage
+          }
+        )
+      ]
+    }
+  ) });
+}
+CheckboxGroup.displayName = "CheckboxGroup";
+export {
+  Checkbox,
+  CheckboxGroup,
+  checkboxVariants,
+  useCheckboxGroupContext
+};

package/dist/components/code-highlight.cjs

@@ -0,0 +1,335 @@
+"use client";
+"use strict";
+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 code_highlight_exports = {};
+__export(code_highlight_exports, {
+  TOKEN_COLORS: () => TOKEN_COLORS,
+  isJsxLang: () => isJsxLang,
+  isShellLang: () => isShellLang,
+  tokenizeLine: () => tokenizeLine
+});
+module.exports = __toCommonJS(code_highlight_exports);
+const TOKEN_COLORS = {
+  keyword: "var(--code-keyword)",
+  string: "var(--code-string)",
+  comment: "var(--code-comment)",
+  number: "var(--code-number)",
+  operator: "var(--code-operator)",
+  punctuation: "var(--code-punctuation)",
+  function: "var(--code-function)",
+  type: "var(--code-type)",
+  tag: "var(--code-tag)",
+  "attr-name": "var(--code-attr-name)",
+  "attr-value": "var(--code-string)",
+  // reuse string color
+  plain: "var(--code-foreground)",
+  component: "var(--code-component)"
+};
+const JS_KEYWORDS = /* @__PURE__ */ new Set([
+  "import",
+  "export",
+  "from",
+  "default",
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "new",
+  "this",
+  "class",
+  "extends",
+  "super",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "try",
+  "catch",
+  "finally",
+  "throw",
+  "async",
+  "await",
+  "yield",
+  "null",
+  "undefined",
+  "true",
+  "false",
+  "void",
+  "delete",
+  "as",
+  "type",
+  "interface",
+  "enum",
+  "implements",
+  "declare",
+  "readonly"
+]);
+const SHELL_KEYWORDS = /* @__PURE__ */ new Set([
+  "npm",
+  "npx",
+  "yarn",
+  "pnpm",
+  "bun",
+  "install",
+  "add",
+  "run",
+  "dev",
+  "build",
+  "start",
+  "test",
+  "init",
+  "create",
+  "exec",
+  "sudo",
+  "cd",
+  "ls",
+  "mkdir",
+  "rm",
+  "cp",
+  "mv",
+  "cat",
+  "echo",
+  "git",
+  "docker",
+  "curl",
+  "wget"
+]);
+function isShellLang(lang) {
+  if (!lang) return false;
+  const l = lang.toLowerCase();
+  return l === "sh" || l === "bash" || l === "zsh" || l === "shell" || l === "terminal";
+}
+function isJsxLang(lang) {
+  if (!lang) return true;
+  const l = lang.toLowerCase();
+  return l === "tsx" || l === "jsx" || l === "ts" || l === "typescript" || l === "js" || l === "javascript" || l === "react";
+}
+const RE_SINGLE_LINE_COMMENT = /^(\/\/.*)/;
+const RE_BLOCK_COMMENT = /^(\/\*[\s\S]*?\*\/)/;
+const RE_TEMPLATE_LITERAL = /^(`(?:[^`\\]|\\.)*`)/;
+const RE_DOUBLE_STRING = /^("(?:[^"\\]|\\.)*")/;
+const RE_SINGLE_STRING = /^('(?:[^'\\]|\\.)*')/;
+const RE_JSX_COMPONENT_WITH_SPACE = /^(<\/?)(\$?[A-Z][$\w.]*)(\s)/;
+const RE_JSX_COMPONENT_CLOSED = /^(<\/?)(\$?[A-Z][$\w.]*)(\/?>)/;
+const RE_HTML_TAG = /^(<\/?)([\w-]+)(\/?>|\s)/;
+const RE_ATTR_NAME = /^([\w-]+)(=)/;
+const RE_NUMBER = /^(\b\d+\.?\d*\b)/;
+const RE_WORD = /^(\b[\w$]+\b)/;
+const RE_OPERATOR = /^([=!<>+\-*/%&|^~?:]+)/;
+const RE_PUNCTUATION = /^([{}()[\];,.<>/])/;
+const RE_WHITESPACE = /^(\s+)/;
+const RE_FOLLOWED_BY_PAREN = /^\s*\(/;
+function tokenizeJsx(line) {
+  const tokens = [];
+  let remaining = line;
+  while (remaining.length > 0) {
+    const matched = false;
+    let m = remaining.match(RE_SINGLE_LINE_COMMENT);
+    if (m) {
+      tokens.push({ type: "comment", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_BLOCK_COMMENT);
+    if (m) {
+      tokens.push({ type: "comment", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_TEMPLATE_LITERAL);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_DOUBLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SINGLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_JSX_COMPONENT_WITH_SPACE);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      tokens.push({ type: "component", value: m[2] });
+      tokens.push({ type: "plain", value: m[3] });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_JSX_COMPONENT_CLOSED);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      tokens.push({ type: "component", value: m[2] });
+      tokens.push({ type: "punctuation", value: m[3] });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_HTML_TAG);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      tokens.push({ type: "tag", value: m[2] });
+      tokens.push({
+        type: m[3].trim() ? "punctuation" : "plain",
+        value: m[3]
+      });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_ATTR_NAME);
+    if (m) {
+      tokens.push({ type: "attr-name", value: m[1] });
+      tokens.push({ type: "operator", value: m[2] });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_NUMBER);
+    if (m) {
+      tokens.push({ type: "number", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_WORD);
+    if (m) {
+      const word = m[1];
+      if (JS_KEYWORDS.has(word)) {
+        tokens.push({ type: "keyword", value: word });
+      } else if (/^[A-Z]/.test(word)) {
+        tokens.push({ type: "type", value: word });
+      } else if (RE_FOLLOWED_BY_PAREN.test(remaining.slice(word.length))) {
+        tokens.push({ type: "function", value: word });
+      } else {
+        tokens.push({ type: "plain", value: word });
+      }
+      remaining = remaining.slice(word.length);
+      continue;
+    }
+    m = remaining.match(RE_OPERATOR);
+    if (m) {
+      tokens.push({ type: "operator", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_PUNCTUATION);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_WHITESPACE);
+    if (m) {
+      tokens.push({ type: "plain", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    if (!matched) {
+      tokens.push({ type: "plain", value: remaining[0] });
+      remaining = remaining.slice(1);
+    }
+  }
+  return tokens;
+}
+const RE_SHELL_COMMENT = /^(#.*)/;
+const RE_SHELL_FLAG = /^(--?[\w-]+)/;
+const RE_SHELL_WORD = /^([@\w./-]+)/;
+const RE_SHELL_OPERATOR = /^([|&;><]+)/;
+function tokenizeShell(line) {
+  const tokens = [];
+  let remaining = line;
+  while (remaining.length > 0) {
+    let m;
+    m = remaining.match(RE_SHELL_COMMENT);
+    if (m) {
+      tokens.push({ type: "comment", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_DOUBLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SINGLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SHELL_FLAG);
+    if (m) {
+      tokens.push({ type: "attr-name", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SHELL_WORD);
+    if (m) {
+      const word = m[1];
+      if (SHELL_KEYWORDS.has(word)) {
+        tokens.push({ type: "keyword", value: word });
+      } else {
+        tokens.push({ type: "plain", value: word });
+      }
+      remaining = remaining.slice(word.length);
+      continue;
+    }
+    m = remaining.match(RE_SHELL_OPERATOR);
+    if (m) {
+      tokens.push({ type: "operator", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_WHITESPACE);
+    if (m) {
+      tokens.push({ type: "plain", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    tokens.push({ type: "plain", value: remaining[0] });
+    remaining = remaining.slice(1);
+  }
+  return tokens;
+}
+function tokenizeLine(line, language) {
+  if (isShellLang(language)) return tokenizeShell(line);
+  if (isJsxLang(language)) return tokenizeJsx(line);
+  return tokenizeJsx(line);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TOKEN_COLORS,
+  isJsxLang,
+  isShellLang,
+  tokenizeLine
+});

package/dist/components/code-highlight.d.cts

@@ -0,0 +1,18 @@
+/** Token types for syntax highlighting */
+type TokenType = "keyword" | "string" | "comment" | "number" | "operator" | "punctuation" | "function" | "type" | "tag" | "attr-name" | "attr-value" | "plain" | "component";
+interface Token {
+    type: TokenType;
+    value: string;
+}
+/**
+ * CSS custom property references for each token type.
+ * These resolve to different oklch values in light vs dark mode
+ * via the `--code-*` custom properties defined in styles.css.
+ */
+declare const TOKEN_COLORS: Record<TokenType, string>;
+declare function isShellLang(lang?: string): boolean;
+declare function isJsxLang(lang?: string): boolean;
+/** Tokenize a single line of code based on the given language. */
+declare function tokenizeLine(line: string, language?: string): Token[];
+
+export { TOKEN_COLORS, type Token, type TokenType, isJsxLang, isShellLang, tokenizeLine };

package/dist/components/code-highlight.d.ts

@@ -0,0 +1,18 @@
+/** Token types for syntax highlighting */
+type TokenType = "keyword" | "string" | "comment" | "number" | "operator" | "punctuation" | "function" | "type" | "tag" | "attr-name" | "attr-value" | "plain" | "component";
+interface Token {
+    type: TokenType;
+    value: string;
+}
+/**
+ * CSS custom property references for each token type.
+ * These resolve to different oklch values in light vs dark mode
+ * via the `--code-*` custom properties defined in styles.css.
+ */
+declare const TOKEN_COLORS: Record<TokenType, string>;
+declare function isShellLang(lang?: string): boolean;
+declare function isJsxLang(lang?: string): boolean;
+/** Tokenize a single line of code based on the given language. */
+declare function tokenizeLine(line: string, language?: string): Token[];
+
+export { TOKEN_COLORS, type Token, type TokenType, isJsxLang, isShellLang, tokenizeLine };