asterui 0.12.18 → 0.12.20

package/dist/index53.js

@@ -1,15 +1,156 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-const b = ({
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import { useState as C, useCallback as M, createContext as V, useId as q, useContext as N } from "react";
+const y = V(null);
+function A() {
+  const e = N(y);
+  if (!e)
+    throw new Error("Menu components must be used within a Menu");
+  return e;
+}
+function j(e, n, s, a, o) {
+  return e.divider ? /* @__PURE__ */ l(S, {}, e.key) : e.title ? /* @__PURE__ */ l(K, { children: e.label }, e.key) : e.children && e.children.length > 0 ? /* @__PURE__ */ l(I, { itemKey: e.key, label: e.label, icon: e.icon, disabled: e.disabled, children: e.children.map((i) => j(i)) }, e.key) : /* @__PURE__ */ l(k, { itemKey: e.key, icon: e.icon, disabled: e.disabled, children: e.label }, e.key);
+}
+function F({
   children: e,
-  url: s = "https://example.com",
-  className: o = "",
-  contentClassName: a = "",
-  ...c
-}) => /* @__PURE__ */ d("div", { className: `mockup-browser border border-base-300 ${o}`, ...c, children: [
-  /* @__PURE__ */ r("div", { className: "mockup-browser-toolbar", children: /* @__PURE__ */ r("div", { className: "input", children: s }) }),
-  /* @__PURE__ */ r("div", { className: `border-t border-base-300 ${a}`, children: e })
-] });
+  items: n,
+  mode: s = "vertical",
+  size: a,
+  selectedKeys: o,
+  defaultSelectedKeys: i = [],
+  openKeys: d,
+  defaultOpenKeys: m = [],
+  onSelect: r,
+  onOpenChange: t,
+  className: c = "",
+  ...p
+}) {
+  const [x, v] = C(i), [f, T] = C(m), O = o ?? x, h = d ?? f, B = M(
+    (u) => {
+      o === void 0 && v([u]), r?.(u);
+    },
+    [o, r]
+  ), w = M(
+    (u) => {
+      const g = h.includes(u) ? h.filter((R) => R !== u) : [...h, u];
+      d === void 0 && T(g), t?.(g);
+    },
+    [h, d, t]
+  ), D = {
+    vertical: "menu-vertical",
+    horizontal: "menu-horizontal",
+    inline: "menu-vertical"
+  }, z = {
+    xs: "menu-xs",
+    sm: "menu-sm",
+    md: "menu-md",
+    lg: "menu-lg",
+    xl: "menu-xl"
+  }, E = ["menu", D[s], a && z[a], c].filter(Boolean).join(" "), L = {
+    mode: s,
+    selectedKeys: O,
+    openKeys: h,
+    onSelect: B,
+    onToggleOpen: w
+  }, P = n && n.length > 0 ? n.map((u) => j(u)) : e;
+  return /* @__PURE__ */ l(y.Provider, { value: L, children: /* @__PURE__ */ l("ul", { className: E, ...p, children: P }) });
+}
+function k({
+  children: e,
+  itemKey: n,
+  icon: s,
+  disabled: a = !1,
+  onClick: o,
+  active: i,
+  className: d = "",
+  ...m
+}) {
+  const r = N(y), t = n && r ? r.selectedKeys.includes(n) : i, c = () => {
+    a || (n && r && r.onSelect(n), o?.());
+  }, p = [
+    t && "active bg-primary text-primary-content",
+    a && "disabled",
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ b(
+    "a",
+    {
+      className: p,
+      onClick: c,
+      "aria-disabled": a,
+      role: "menuitem",
+      "data-state": t ? "active" : "inactive",
+      ...m,
+      children: [
+        s && /* @__PURE__ */ l("span", { className: "menu-icon", children: s }),
+        e
+      ]
+    }
+  ) });
+}
+function I({
+  children: e,
+  itemKey: n,
+  label: s,
+  title: a,
+  icon: o,
+  disabled: i = !1,
+  className: d = "",
+  ...m
+}) {
+  const r = A(), t = r.openKeys.includes(n), c = q(), p = s ?? a, x = () => {
+    i || r.onToggleOpen(n);
+  }, v = [i && "disabled", d].filter(Boolean).join(" ");
+  return r.mode === "inline" ? /* @__PURE__ */ l("li", { className: v, "data-state": t ? "open" : "closed", ...m, children: /* @__PURE__ */ b("details", { open: t, children: [
+    /* @__PURE__ */ b(
+      "summary",
+      {
+        onClick: (f) => {
+          f.preventDefault(), x();
+        },
+        "aria-expanded": t,
+        "aria-controls": c,
+        "aria-disabled": i,
+        children: [
+          o && /* @__PURE__ */ l("span", { className: "menu-icon", children: o }),
+          p
+        ]
+      }
+    ),
+    /* @__PURE__ */ l("ul", { id: c, role: "menu", children: e })
+  ] }) }) : /* @__PURE__ */ l("li", { className: v, "data-state": t ? "open" : "closed", ...m, children: /* @__PURE__ */ b("details", { open: t, children: [
+    /* @__PURE__ */ b(
+      "summary",
+      {
+        onClick: (f) => {
+          f.preventDefault(), x();
+        },
+        "aria-expanded": t,
+        "aria-controls": c,
+        "aria-disabled": i,
+        children: [
+          o && /* @__PURE__ */ l("span", { className: "menu-icon", children: o }),
+          p
+        ]
+      }
+    ),
+    /* @__PURE__ */ l("ul", { id: c, role: "menu", children: e })
+  ] }) });
+}
+function K({ children: e, className: n = "", ...s }) {
+  const a = ["menu-title", n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("li", { className: a, ...s, children: e });
+}
+function S({ className: e = "", ...n }) {
+  const s = ["border-t border-base-300 my-1", e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("li", { className: s, role: "separator", ...n });
+}
+const J = Object.assign(F, {
+  Item: k,
+  SubMenu: I,
+  Title: K,
+  Divider: S
+});
 export {
-  b as Browser
+  J as Menu
 };
 //# sourceMappingURL=index53.js.map

package/dist/index53.js.map

@@ -1 +1 @@
-{"version":3,"file":"index53.js","sources":["../src/components/Browser.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface BrowserProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  url?: string\n  contentClassName?: string\n}\n\nexport const Browser: React.FC<BrowserProps> = ({\n  children,\n  url = 'https://example.com',\n  className = '',\n  contentClassName = '',\n  ...rest\n}) => {\n  return (\n    <div className={`mockup-browser border border-base-300 ${className}`} {...rest}>\n      <div className=\"mockup-browser-toolbar\">\n        <div className=\"input\">{url}</div>\n      </div>\n      <div className={`border-t border-base-300 ${contentClassName}`}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Browser","children","url","className","contentClassName","rest","jsx"],"mappings":";AAQO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,kBAAAC,IAAmB;AAAA,EACnB,GAAGC;AACL,wBAEK,OAAA,EAAI,WAAW,yCAAyCF,CAAS,IAAK,GAAGE,GACxE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAA,EAAC,SAAI,WAAU,SAAS,aAAI,EAAA,CAC9B;AAAA,oBACC,OAAA,EAAI,WAAW,4BAA4BF,CAAgB,IACzD,UAAAH,EAAA,CACH;AAAA,GACF;"}
+{"version":3,"file":"index53.js","sources":["../src/components/Menu.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useCallback, useId } from 'react'\n\nexport type MenuMode = 'vertical' | 'horizontal' | 'inline'\nexport type MenuSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface MenuItem {\n  key: string\n  label: React.ReactNode\n  icon?: React.ReactNode\n  disabled?: boolean\n  children?: MenuItem[]\n  divider?: boolean\n  title?: boolean // For section titles\n}\n\nexport interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Menu items (compound pattern) */\n  children?: React.ReactNode\n  /** Menu items (data-driven pattern) */\n  items?: MenuItem[]\n  /** Menu display mode */\n  mode?: MenuMode\n  /** Menu size */\n  size?: MenuSize\n  /** Controlled selected keys */\n  selectedKeys?: string[]\n  /** Default selected keys (uncontrolled) */\n  defaultSelectedKeys?: string[]\n  /** Controlled open submenu keys */\n  openKeys?: string[]\n  /** Default open submenu keys (uncontrolled) */\n  defaultOpenKeys?: string[]\n  /** Callback when item is selected */\n  onSelect?: (key: string) => void\n  /** Callback when submenu open state changes */\n  onOpenChange?: (openKeys: string[]) => void\n}\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLAnchorElement>, 'onClick'> {\n  children: React.ReactNode\n  itemKey?: string\n  icon?: React.ReactNode\n  disabled?: boolean\n  onClick?: () => void\n  /** @deprecated Use itemKey and selectedKeys instead */\n  active?: boolean\n}\n\nexport interface MenuSubMenuProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'title'> {\n  children: React.ReactNode\n  itemKey: string\n  /** Submenu label */\n  label?: React.ReactNode\n  /** Submenu title (alias for label) */\n  title?: React.ReactNode\n  icon?: React.ReactNode\n  disabled?: boolean\n}\n\nexport interface MenuTitleProps extends React.HTMLAttributes<HTMLLIElement> {\n  children: React.ReactNode\n}\n\nexport interface MenuDividerProps extends React.HTMLAttributes<HTMLLIElement> {}\n\ninterface MenuContextValue {\n  mode: MenuMode\n  selectedKeys: string[]\n  openKeys: string[]\n  onSelect: (key: string) => void\n  onToggleOpen: (key: string) => void\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null)\n\nfunction useMenuContext() {\n  const context = useContext(MenuContext)\n  if (!context) {\n    throw new Error('Menu components must be used within a Menu')\n  }\n  return context\n}\n\n// Internal component for rendering data-driven menu items\nfunction renderMenuItem(item: MenuItem, onSelect: (key: string) => void, selectedKeys: string[], openKeys: string[], onToggleOpen: (key: string) => void): React.ReactNode {\n  if (item.divider) {\n    return <MenuDivider key={item.key} />\n  }\n\n  if (item.title) {\n    return <MenuTitle key={item.key}>{item.label}</MenuTitle>\n  }\n\n  if (item.children && item.children.length > 0) {\n    return (\n      <MenuSubMenu key={item.key} itemKey={item.key} label={item.label} icon={item.icon} disabled={item.disabled}>\n        {item.children.map((child) => renderMenuItem(child, onSelect, selectedKeys, openKeys, onToggleOpen))}\n      </MenuSubMenu>\n    )\n  }\n\n  return (\n    <MenuItem key={item.key} itemKey={item.key} icon={item.icon} disabled={item.disabled}>\n      {item.label}\n    </MenuItem>\n  )\n}\n\nfunction MenuRoot({\n  children,\n  items,\n  mode = 'vertical',\n  size,\n  selectedKeys: controlledSelectedKeys,\n  defaultSelectedKeys = [],\n  openKeys: controlledOpenKeys,\n  defaultOpenKeys = [],\n  onSelect,\n  onOpenChange,\n  className = '',\n  ...rest\n}: MenuProps) {\n  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(defaultSelectedKeys)\n  const [internalOpenKeys, setInternalOpenKeys] = useState<string[]>(defaultOpenKeys)\n\n  const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys\n  const openKeys = controlledOpenKeys ?? internalOpenKeys\n\n  const handleSelect = useCallback(\n    (key: string) => {\n      if (controlledSelectedKeys === undefined) {\n        setInternalSelectedKeys([key])\n      }\n      onSelect?.(key)\n    },\n    [controlledSelectedKeys, onSelect]\n  )\n\n  const handleToggleOpen = useCallback(\n    (key: string) => {\n      const newOpenKeys = openKeys.includes(key)\n        ? openKeys.filter((k) => k !== key)\n        : [...openKeys, key]\n\n      if (controlledOpenKeys === undefined) {\n        setInternalOpenKeys(newOpenKeys)\n      }\n      onOpenChange?.(newOpenKeys)\n    },\n    [openKeys, controlledOpenKeys, onOpenChange]\n  )\n\n  const modeClasses: Record<MenuMode, string> = {\n    vertical: 'menu-vertical',\n    horizontal: 'menu-horizontal',\n    inline: 'menu-vertical',\n  }\n\n  const sizeClasses: Record<MenuSize, string> = {\n    xs: 'menu-xs',\n    sm: 'menu-sm',\n    md: 'menu-md',\n    lg: 'menu-lg',\n    xl: 'menu-xl',\n  }\n\n  const menuClasses = ['menu', modeClasses[mode], size && sizeClasses[size], className].filter(Boolean).join(' ')\n\n  const contextValue = {\n    mode,\n    selectedKeys,\n    openKeys,\n    onSelect: handleSelect,\n    onToggleOpen: handleToggleOpen,\n  }\n\n  // Render data-driven items if provided\n  const content = items && items.length > 0\n    ? items.map((item) => renderMenuItem(item, handleSelect, selectedKeys, openKeys, handleToggleOpen))\n    : children\n\n  return (\n    <MenuContext.Provider value={contextValue}>\n      <ul className={menuClasses} {...rest}>{content}</ul>\n    </MenuContext.Provider>\n  )\n}\n\nfunction MenuItem({\n  children,\n  itemKey,\n  icon,\n  disabled = false,\n  onClick,\n  active,\n  className = '',\n  ...rest\n}: MenuItemProps) {\n  const context = useContext(MenuContext)\n\n  // Support both old active prop and new key-based selection\n  const isSelected = itemKey && context ? context.selectedKeys.includes(itemKey) : active\n\n  const handleClick = () => {\n    if (disabled) return\n    if (itemKey && context) {\n      context.onSelect(itemKey)\n    }\n    onClick?.()\n  }\n\n  const itemClasses = [\n    isSelected && 'active bg-primary text-primary-content',\n    disabled && 'disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <li>\n      <a\n        className={itemClasses}\n        onClick={handleClick}\n        aria-disabled={disabled}\n        role=\"menuitem\"\n        data-state={isSelected ? 'active' : 'inactive'}\n        {...rest}\n      >\n        {icon && <span className=\"menu-icon\">{icon}</span>}\n        {children}\n      </a>\n    </li>\n  )\n}\n\nfunction MenuSubMenu({\n  children,\n  itemKey,\n  label,\n  title,\n  icon,\n  disabled = false,\n  className = '',\n  ...rest\n}: MenuSubMenuProps) {\n  const context = useMenuContext()\n  const isOpen = context.openKeys.includes(itemKey)\n  const submenuId = useId()\n\n  // Support both label and title (title as alias for backwards compatibility)\n  const displayLabel = label ?? title\n\n  const handleToggle = () => {\n    if (disabled) return\n    context.onToggleOpen(itemKey)\n  }\n\n  const submenuClasses = [disabled && 'disabled', className].filter(Boolean).join(' ')\n\n  // For inline mode, use collapsible details/summary\n  if (context.mode === 'inline') {\n    return (\n      <li className={submenuClasses} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n        <details open={isOpen}>\n          <summary\n            onClick={(e) => {\n              e.preventDefault()\n              handleToggle()\n            }}\n            aria-expanded={isOpen}\n            aria-controls={submenuId}\n            aria-disabled={disabled}\n          >\n            {icon && <span className=\"menu-icon\">{icon}</span>}\n            {displayLabel}\n          </summary>\n          <ul id={submenuId} role=\"menu\">\n            {children}\n          </ul>\n        </details>\n      </li>\n    )\n  }\n\n  // For vertical/horizontal, use nested menu (dropdown style)\n  return (\n    <li className={submenuClasses} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n      <details open={isOpen}>\n        <summary\n          onClick={(e) => {\n            e.preventDefault()\n            handleToggle()\n          }}\n          aria-expanded={isOpen}\n          aria-controls={submenuId}\n          aria-disabled={disabled}\n        >\n          {icon && <span className=\"menu-icon\">{icon}</span>}\n          {displayLabel}\n        </summary>\n        <ul id={submenuId} role=\"menu\">\n          {children}\n        </ul>\n      </details>\n    </li>\n  )\n}\n\nfunction MenuTitle({ children, className = '', ...rest }: MenuTitleProps) {\n  const titleClasses = ['menu-title', className].filter(Boolean).join(' ')\n\n  return <li className={titleClasses} {...rest}>{children}</li>\n}\n\nfunction MenuDivider({ className = '', ...rest }: MenuDividerProps) {\n  const dividerClasses = ['border-t border-base-300 my-1', className].filter(Boolean).join(' ')\n\n  return <li className={dividerClasses} role=\"separator\" {...rest} />\n}\n\nexport const Menu = Object.assign(MenuRoot, {\n  Item: MenuItem,\n  SubMenu: MenuSubMenu,\n  Title: MenuTitle,\n  Divider: MenuDivider,\n})\n"],"names":["MenuContext","createContext","useMenuContext","context","useContext","renderMenuItem","item","onSelect","selectedKeys","openKeys","onToggleOpen","jsx","MenuDivider","MenuTitle","MenuSubMenu","child","MenuItem","MenuRoot","children","items","mode","size","controlledSelectedKeys","defaultSelectedKeys","controlledOpenKeys","defaultOpenKeys","onOpenChange","className","rest","internalSelectedKeys","setInternalSelectedKeys","useState","internalOpenKeys","setInternalOpenKeys","handleSelect","useCallback","key","handleToggleOpen","newOpenKeys","k","modeClasses","sizeClasses","menuClasses","contextValue","content","itemKey","icon","disabled","onClick","active","isSelected","handleClick","itemClasses","jsxs","label","title","isOpen","submenuId","useId","displayLabel","handleToggle","submenuClasses","e","titleClasses","dividerClasses","Menu"],"mappings":"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"}

package/dist/index54.js

@@ -1,25 +1,15 @@
-import { jsx as t } from "react/jsx-runtime";
-const c = ({
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+const b = ({
   children: e,
-  prefix: n = "$",
-  highlight: r = !1,
+  url: s = "https://example.com",
   className: o = "",
-  ...a
-}) => /* @__PURE__ */ t(
-  "pre",
-  {
-    "data-prefix": n,
-    className: `${r ? "bg-warning text-warning-content" : ""} ${o}`,
-    ...a,
-    children: /* @__PURE__ */ t("code", { children: e })
-  }
-), i = ({
-  children: e,
-  className: n = "",
-  ...r
-}) => /* @__PURE__ */ t("div", { className: `mockup-code ${n}`, ...r, children: e });
-i.Line = c;
+  contentClassName: a = "",
+  ...c
+}) => /* @__PURE__ */ d("div", { className: `mockup-browser border border-base-300 ${o}`, ...c, children: [
+  /* @__PURE__ */ r("div", { className: "mockup-browser-toolbar", children: /* @__PURE__ */ r("div", { className: "input", children: s }) }),
+  /* @__PURE__ */ r("div", { className: `border-t border-base-300 ${a}`, children: e })
+] });
 export {
-  i as Code
+  b as Browser
 };
 //# sourceMappingURL=index54.js.map

package/dist/index54.js.map

@@ -1 +1 @@
-{"version":3,"file":"index54.js","sources":["../src/components/Code.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface CodeLineProps extends React.HTMLAttributes<HTMLPreElement> {\n  children: React.ReactNode\n  prefix?: string\n  highlight?: boolean\n}\n\nconst Line: React.FC<CodeLineProps> = ({\n  children,\n  prefix = '$',\n  highlight = false,\n  className = '',\n  ...rest\n}) => {\n  return (\n    <pre\n      data-prefix={prefix}\n      className={`${highlight ? 'bg-warning text-warning-content' : ''} ${className}`}\n      {...rest}\n    >\n      <code>{children}</code>\n    </pre>\n  )\n}\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nexport const Code: React.FC<CodeProps> & { Line: typeof Line } = ({\n  children,\n  className = '',\n  ...rest\n}) => {\n  return (\n    <div className={`mockup-code ${className}`} {...rest}>\n      {children}\n    </div>\n  )\n}\n\nCode.Line = Line\n"],"names":["Line","children","prefix","highlight","className","rest","jsx","Code"],"mappings":";AAQA,MAAMA,IAAgC,CAAC;AAAA,EACrC,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAaJ;AAAA,IACb,WAAW,GAAGC,IAAY,oCAAoC,EAAE,IAAIC,CAAS;AAAA,IAC5E,GAAGC;AAAA,IAEJ,UAAA,gBAAAC,EAAC,UAAM,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA,GASTM,IAAoD,CAAC;AAAA,EAChE,UAAAN;AAAA,EACA,WAAAG,IAAY;AAAA,EACZ,GAAGC;AACL,MAEI,gBAAAC,EAAC,SAAI,WAAW,eAAeF,CAAS,IAAK,GAAGC,GAC7C,UAAAJ,GACH;AAIJM,EAAK,OAAOP;"}
+{"version":3,"file":"index54.js","sources":["../src/components/Browser.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface BrowserProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  url?: string\n  contentClassName?: string\n}\n\nexport const Browser: React.FC<BrowserProps> = ({\n  children,\n  url = 'https://example.com',\n  className = '',\n  contentClassName = '',\n  ...rest\n}) => {\n  return (\n    <div className={`mockup-browser border border-base-300 ${className}`} {...rest}>\n      <div className=\"mockup-browser-toolbar\">\n        <div className=\"input\">{url}</div>\n      </div>\n      <div className={`border-t border-base-300 ${contentClassName}`}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Browser","children","url","className","contentClassName","rest","jsx"],"mappings":";AAQO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,kBAAAC,IAAmB;AAAA,EACnB,GAAGC;AACL,wBAEK,OAAA,EAAI,WAAW,yCAAyCF,CAAS,IAAK,GAAGE,GACxE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAA,EAAC,SAAI,WAAU,SAAS,aAAI,EAAA,CAC9B;AAAA,oBACC,OAAA,EAAI,WAAW,4BAA4BF,CAAgB,IACzD,UAAAH,EAAA,CACH;AAAA,GACF;"}

package/dist/index55.js

@@ -1,17 +1,60 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-const n = ({
-  children: s,
-  color: e,
-  className: a = "",
-  displayClassName: c = ""
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import p from "react";
+import { CopyButton as c } from "./index10.js";
+const a = ({
+  children: e,
+  prefix: o = "$",
+  highlight: t = !1,
+  className: n = "",
+  ...i
+}) => /* @__PURE__ */ r(
+  "pre",
+  {
+    "data-prefix": o,
+    className: `${t ? "bg-warning text-warning-content" : ""} ${n}`,
+    ...i,
+    children: /* @__PURE__ */ r("code", { children: e })
+  }
+), d = (e) => {
+  const o = [];
+  return p.Children.forEach(e, (t) => {
+    if (p.isValidElement(t) && t.props?.children) {
+      const n = typeof t.props.children == "string" ? t.props.children : "";
+      n && o.push(n);
+    }
+  }), o.join(`
+`);
+}, f = ({
+  children: e,
+  className: o = "",
+  copyable: t,
+  style: n,
+  ...i
 }) => {
-  const m = e ? { borderColor: e } : {};
-  return /* @__PURE__ */ p("div", { className: `mockup-phone ${a}`, style: m, children: [
-    /* @__PURE__ */ o("div", { className: "mockup-phone-camera" }),
-    /* @__PURE__ */ o("div", { className: `mockup-phone-display ${c}`, children: s })
-  ] });
+  const s = typeof t == "string" ? t : t ? d(e) : null;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `mockup-code ${o}`,
+      style: { position: "relative", overflow: "hidden", ...n },
+      ...i,
+      children: [
+        e,
+        s !== null && /* @__PURE__ */ r("div", { style: { position: "absolute", top: 8, right: 8 }, children: /* @__PURE__ */ r(
+          c,
+          {
+            text: s,
+            size: "xs",
+            variant: "ghost",
+            showTooltip: !0
+          }
+        ) })
+      ]
+    }
+  );
 };
+f.Line = a;
 export {
-  n as Phone
+  f as Code
 };
 //# sourceMappingURL=index55.js.map

package/dist/index55.js.map

@@ -1 +1 @@
-{"version":3,"file":"index55.js","sources":["../src/components/Phone.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface PhoneProps {\n  children: React.ReactNode\n  color?: string\n  className?: string\n  displayClassName?: string\n}\n\nexport const Phone: React.FC<PhoneProps> = ({\n  children,\n  color,\n  className = '',\n  displayClassName = '',\n}) => {\n  const style: React.CSSProperties = color ? { borderColor: color } : {}\n\n  return (\n    <div className={`mockup-phone ${className}`} style={style}>\n      <div className=\"mockup-phone-camera\"></div>\n      <div className={`mockup-phone-display ${displayClassName}`}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Phone","children","color","className","displayClassName","style","jsx"],"mappings":";AASO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,kBAAAC,IAAmB;AACrB,MAAM;AACJ,QAAMC,IAA6BH,IAAQ,EAAE,aAAaA,EAAA,IAAU,CAAA;AAEpE,2BACG,OAAA,EAAI,WAAW,gBAAgBC,CAAS,IAAI,OAAAE,GAC3C,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,sBAAA,CAAsB;AAAA,sBACpC,OAAA,EAAI,WAAW,wBAAwBF,CAAgB,IACrD,UAAAH,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index55.js","sources":["../src/components/Code.tsx"],"sourcesContent":["import React from 'react'\nimport { CopyButton } from './CopyButton'\n\nexport interface CodeLineProps extends React.HTMLAttributes<HTMLPreElement> {\n  children: React.ReactNode\n  prefix?: string\n  highlight?: boolean\n}\n\nconst Line: React.FC<CodeLineProps> = ({\n  children,\n  prefix = '$',\n  highlight = false,\n  className = '',\n  ...rest\n}) => {\n  return (\n    <pre\n      data-prefix={prefix}\n      className={`${highlight ? 'bg-warning text-warning-content' : ''} ${className}`}\n      {...rest}\n    >\n      <code>{children}</code>\n    </pre>\n  )\n}\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /** Show copy button. Pass true to auto-extract text, or a string to specify custom copy text */\n  copyable?: boolean | string\n}\n\nconst extractTextFromChildren = (children: React.ReactNode): string => {\n  const lines: string[] = []\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.props?.children) {\n      const text = typeof child.props.children === 'string'\n        ? child.props.children\n        : ''\n      if (text) lines.push(text)\n    }\n  })\n  return lines.join('\\n')\n}\n\nexport const Code: React.FC<CodeProps> & { Line: typeof Line } = ({\n  children,\n  className = '',\n  copyable,\n  style,\n  ...rest\n}) => {\n  const copyText = typeof copyable === 'string'\n    ? copyable\n    : copyable\n      ? extractTextFromChildren(children)\n      : null\n\n  return (\n    <div\n      className={`mockup-code ${className}`}\n      style={{ position: 'relative', overflow: 'hidden', ...style }}\n      {...rest}\n    >\n      {children}\n      {copyText !== null && (\n        <div style={{ position: 'absolute', top: 8, right: 8 }}>\n          <CopyButton\n            text={copyText}\n            size=\"xs\"\n            variant=\"ghost\"\n            showTooltip\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n\nCode.Line = Line\n"],"names":["Line","children","prefix","highlight","className","rest","jsx","extractTextFromChildren","lines","React","child","text","Code","copyable","style","copyText","jsxs","CopyButton"],"mappings":";;;AASA,MAAMA,IAAgC,CAAC;AAAA,EACrC,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAaJ;AAAA,IACb,WAAW,GAAGC,IAAY,oCAAoC,EAAE,IAAIC,CAAS;AAAA,IAC5E,GAAGC;AAAA,IAEJ,UAAA,gBAAAC,EAAC,UAAM,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA,GAWhBM,IAA0B,CAACN,MAAsC;AACrE,QAAMO,IAAkB,CAAA;AACxB,SAAAC,EAAM,SAAS,QAAQR,GAAU,CAACS,MAAU;AAC1C,QAAID,EAAM,eAAeC,CAAK,KAAKA,EAAM,OAAO,UAAU;AACxD,YAAMC,IAAO,OAAOD,EAAM,MAAM,YAAa,WACzCA,EAAM,MAAM,WACZ;AACJ,MAAIC,KAAMH,EAAM,KAAKG,CAAI;AAAA,IAC3B;AAAA,EACF,CAAC,GACMH,EAAM,KAAK;AAAA,CAAI;AACxB,GAEaI,IAAoD,CAAC;AAAA,EAChE,UAAAX;AAAA,EACA,WAAAG,IAAY;AAAA,EACZ,UAAAS;AAAA,EACA,OAAAC;AAAA,EACA,GAAGT;AACL,MAAM;AACJ,QAAMU,IAAW,OAAOF,KAAa,WACjCA,IACAA,IACEN,EAAwBN,CAAQ,IAChC;AAEN,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAeZ,CAAS;AAAA,MACnC,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,GAAGU,EAAA;AAAA,MACrD,GAAGT;AAAA,MAEH,UAAA;AAAA,QAAAJ;AAAA,QACAc,MAAa,QACZ,gBAAAT,EAAC,OAAA,EAAI,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,OAAO,EAAA,GACjD,UAAA,gBAAAA;AAAA,UAACW;AAAA,UAAA;AAAA,YACC,MAAMF;AAAA,YACN,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,aAAW;AAAA,UAAA;AAAA,QAAA,EACb,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAH,EAAK,OAAOZ;"}

package/dist/index56.js

@@ -1,10 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-const a = ({
-  children: e,
-  className: o = "",
-  contentClassName: d = ""
-}) => /* @__PURE__ */ r("div", { className: `mockup-window border border-base-300 ${o}`, children: /* @__PURE__ */ r("div", { className: `border-t border-base-300 ${d}`, children: e }) });
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+const n = ({
+  children: s,
+  color: e,
+  className: a = "",
+  displayClassName: c = ""
+}) => {
+  const m = e ? { borderColor: e } : {};
+  return /* @__PURE__ */ p("div", { className: `mockup-phone ${a}`, style: m, children: [
+    /* @__PURE__ */ o("div", { className: "mockup-phone-camera" }),
+    /* @__PURE__ */ o("div", { className: `mockup-phone-display ${c}`, children: s })
+  ] });
+};
 export {
-  a as Window
+  n as Phone
 };
 //# sourceMappingURL=index56.js.map

package/dist/index56.js.map

@@ -1 +1 @@
-{"version":3,"file":"index56.js","sources":["../src/components/Window.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface WindowProps {\n  children: React.ReactNode\n  className?: string\n  contentClassName?: string\n}\n\nexport const Window: React.FC<WindowProps> = ({\n  children,\n  className = '',\n  contentClassName = '',\n}) => {\n  return (\n    <div className={`mockup-window border border-base-300 ${className}`}>\n      <div className={`border-t border-base-300 ${contentClassName}`}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Window","children","className","contentClassName","jsx"],"mappings":";AAQO,MAAMA,IAAgC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,kBAAAC,IAAmB;AACrB,MAEI,gBAAAC,EAAC,OAAA,EAAI,WAAW,wCAAwCF,CAAS,IAC/D,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAW,4BAA4BD,CAAgB,IACzD,UAAAF,GACH,GACF;"}
+{"version":3,"file":"index56.js","sources":["../src/components/Phone.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface PhoneProps {\n  children: React.ReactNode\n  color?: string\n  className?: string\n  displayClassName?: string\n}\n\nexport const Phone: React.FC<PhoneProps> = ({\n  children,\n  color,\n  className = '',\n  displayClassName = '',\n}) => {\n  const style: React.CSSProperties = color ? { borderColor: color } : {}\n\n  return (\n    <div className={`mockup-phone ${className}`} style={style}>\n      <div className=\"mockup-phone-camera\"></div>\n      <div className={`mockup-phone-display ${displayClassName}`}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Phone","children","color","className","displayClassName","style","jsx"],"mappings":";AASO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,kBAAAC,IAAmB;AACrB,MAAM;AACJ,QAAMC,IAA6BH,IAAQ,EAAE,aAAaA,EAAA,IAAU,CAAA;AAEpE,2BACG,OAAA,EAAI,WAAW,gBAAgBC,CAAS,IAAI,OAAAE,GAC3C,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,sBAAA,CAAsB;AAAA,sBACpC,OAAA,EAAI,WAAW,wBAAwBF,CAAgB,IACrD,UAAAH,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}