@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","useRef","generatedId","useId","panelId","id","place","useCallback","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","availableHeight","top","preferredLeft","align","left","useEffect","isOpen","panelRef","update","className","createPortal"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":";;;;AAIA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAEA,IAAMC,IAAkB;AA6BxB,SAAgBC,EAAQ,EACtB,cACA,aACA,WACA,WAAQ,SACR,sBAAmB,IACnB,YAAS,GACT,cACA,aACA,SACA,OACA,aACA,GAAGC,KACY;CACf,IAAMC,IAAcC,EAA8B,IAAI,GAChDC,IAAcC,EAAM,GACpBC,IAAUC,KAAMH,GAEhBI,IAAQC,QAAkB;EAC9B,IAAMC,IAAYC,EAAU,YAAYC,IAAW,SAAS,eAAeA,CAAQ,IAAI,OACjFC,IAAWX,EAAY;EAC7B,IAAI,CAACQ,KAAa,CAACG,GAAU;EAE7B,IAAMC,IAASJ,EAAU,sBAAsB;EAC/C,AAAIK,MAAkB,EAAS,MAAM,QAAQ,GAAGD,EAAO,MAAM;EAC7D,IAAME,IAAQH,EAAS,sBAAsB,GACvCI,IAAgB,SAAS,gBAAgB,aACzCC,IAAiB,SAAS,gBAAgB,cAC1CC,IAAYD,IAAiBJ,EAAO,SAASM,IAASrB,GACtDsB,IAAYP,EAAO,MAAMM,IAASrB,GAClCuB,IAAaH,IAAYH,EAAM,UAAUK,IAAYF,GACrDI,IAAkB,KAAK,IAAI,KAAKD,IAAaD,IAAYF,CAAS,GAClEK,IAAMF,IACR,KAAK,IAAIvB,GAAiBe,EAAO,MAAMM,IAAS,KAAK,IAAIJ,EAAM,QAAQO,CAAe,CAAC,IACvF,KAAK,IAAIT,EAAO,SAASM,GAAQF,IAAiBnB,CAAe,GAC/D0B,IAAgBC,MAAU,QAAQZ,EAAO,QAAQE,EAAM,QAAQF,EAAO,MACtEa,IAAO,KAAK,IAChB5B,GACA,KAAK,IAAI0B,GAAeR,IAAgBD,EAAM,QAAQjB,CAAe,CACvE;EAKA,AAHA,EAAS,MAAM,OAAO,GAAG,KAAK,MAAM4B,CAAI,EAAE,KAC1C,EAAS,MAAM,MAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,KACxCX,EAAS,MAAM,YAAY,4BAA4B,GAAG,KAAK,MAAMU,CAAe,EAAE,GAAG,GACzF,EAAS,MAAM,aAAa;CAC9B,GAAG;EAACG;EAAOd;EAAUD;EAAWI;EAAkBK;CAAM,CAAC;CAqBzD,IAnBAQ,QAAgB;EACd,IAAI,CAACC,GAAQ;EACb,IAAMhB,IAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOT,CAAW,EAAE,GACrD;EAGA,AAFA,EAAY,UAAUS,GAClBiB,MAAU,EAAS,UAAUjB,IACjCL,EAAM;EACN,IAAMuB,UAAevB,EAAM;EAG3B,OAFA,OAAO,iBAAiB,UAAUuB,CAAM,GACxC,OAAO,iBAAiB,UAAUA,GAAQ,EAAI,SACjC;GAIX,AAHA,OAAO,oBAAoB,UAAUA,CAAM,GAC3C,OAAO,oBAAoB,UAAUA,GAAQ,EAAI,GACjD,EAAY,UAAU,MAClBD,MAAU,EAAS,UAAU;EACnC;CACF,GAAG;EAAC1B;EAAayB;EAAQvB;EAASwB;EAAUtB;CAAK,CAAC,GAE9C,CAACqB,KAAU,OAAO,WAAa,KAAa,OAAO;CAEvD,IAAMb,IACJ,kBAAC,OAAD;EACE,IAAIV;EACJ,yBAAuBF;EACjB;EACN,WAAWP,EAAG,cAAcmC,CAAS;EACrC,GAAI/B;EAEH;CACE,CAAA;CAGP,OAAOgC,EAAajB,GAAO,SAAS,IAAI;AAC1C"}

package/dist/components/Popover/style.css

@@ -0,0 +1,23 @@
+@layer components {
+  /* The one raised surface. Menus, listboxes and calendars all wear it, so a
+   * floating panel reads the same wherever it opens from. */
+  .ds-surface-raised {
+    --field-bg: var(--color-surface-raised);
+
+    background: var(--color-surface-raised);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .ds-popover {
+    position: fixed;
+    visibility: hidden;
+    z-index: 60;
+    inline-size: max-content;
+    max-inline-size: calc(100vw - var(--space-4));
+    max-block-size: var(--popover-max-block-size, none);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+}

package/dist/components/RichTextEditor/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));const c=require("../Button/index.cjs"),l=require("../ButtonGroup/index.cjs");;/* empty css                            */let u=require("react"),d=require("react/jsx-runtime"),f=require("@tiptap/react"),p=require("@tiptap/starter-kit");p=s(p,1);let m=require("@tiptap/extension-link");m=s(m,1);let h=require("@tiptap/extension-placeholder");h=s(h,1);var g=[[{id:`bold`,icon:`bold`,label:`Bold`,run:e=>e.chain().focus().toggleBold().run(),active:e=>e.isActive(`bold`)},{id:`italic`,icon:`italic`,label:`Italic`,run:e=>e.chain().focus().toggleItalic().run(),active:e=>e.isActive(`italic`)},{id:`strike`,icon:`strikethrough`,label:`Strikethrough`,run:e=>e.chain().focus().toggleStrike().run(),active:e=>e.isActive(`strike`)},{id:`code`,icon:`code`,label:`Inline code`,run:e=>e.chain().focus().toggleCode().run(),active:e=>e.isActive(`code`)}],[{id:`h2`,icon:`heading-2`,label:`Heading`,run:e=>e.chain().focus().toggleHeading({level:2}).run(),active:e=>e.isActive(`heading`,{level:2})},{id:`h3`,icon:`heading-3`,label:`Subheading`,run:e=>e.chain().focus().toggleHeading({level:3}).run(),active:e=>e.isActive(`heading`,{level:3})},{id:`quote`,icon:`quote`,label:`Quote`,run:e=>e.chain().focus().toggleBlockquote().run(),active:e=>e.isActive(`blockquote`)}],[{id:`ul`,icon:`list`,label:`Bulleted list`,run:e=>e.chain().focus().toggleBulletList().run(),active:e=>e.isActive(`bulletList`)},{id:`ol`,icon:`list-ordered`,label:`Numbered list`,run:e=>e.chain().focus().toggleOrderedList().run(),active:e=>e.isActive(`orderedList`)}],[{id:`undo`,icon:`undo`,label:`Undo`,run:e=>e.chain().focus().undo().run()},{id:`redo`,icon:`redo`,label:`Redo`,run:e=>e.chain().focus().redo().run()}]],_=(0,u.forwardRef)(function({defaultValue:e=``,onChange:t,placeholder:n=`Write something…`,size:r=`md`,isDisabled:i=!1,isInvalid:a=!1,label:o=`Rich text editor`,className:s,toolbarExtra:_},v){let[y,b]=(0,u.useState)(!1),x=(0,f.useEditor)({immediatelyRender:!1,editable:!i,content:e,extensions:[p.default.configure({link:!1}),m.default.configure({openOnClick:!1,autolink:!0}),h.default.configure({placeholder:n})],editorProps:{attributes:{role:`textbox`,"aria-label":o,"aria-multiline":`true`}},onFocus:()=>b(!0),onBlur:()=>b(!1),onUpdate:({editor:e})=>t?.(e.getHTML())}),S=(0,f.useEditorState)({editor:x,selector:({editor:e})=>e?{active:Object.fromEntries(g.flat().map(t=>[t.id,t.active?.(e)??!1])),linkActive:e.isActive(`link`)}:null}),C=(0,u.useCallback)(()=>{if(!x)return;if(x.isActive(`link`)){x.chain().focus().unsetLink().run();return}let e=window.prompt(`Link to`);e&&x.chain().focus().extendMarkRange(`link`).setLink({href:e}).run()},[x]);return(0,d.jsxs)(`div`,{ref:v,className:[`ds-rte`,s].filter(Boolean).join(` `),"data-focused":y||void 0,"data-disabled":i||void 0,"aria-invalid":a||void 0,children:[(0,d.jsxs)(`div`,{className:`ds-rte__toolbar`,role:`toolbar`,"aria-label":`${o} formatting`,children:[g.map((e,t)=>(0,d.jsx)(l.ButtonGroup,{"aria-label":`Formatting ${t+1}`,children:e.map(e=>(0,d.jsx)(c.Button,{size:`sm`,isIconOnly:!0,iconStart:e.icon,"aria-label":e.label,title:e.label,"aria-pressed":e.active?S?.active[e.id]:void 0,variant:S?.active[e.id]?`active`:`neutral`,isDisabled:i||!x,onClick:()=>x&&e.run(x)},e.id))},t)),(0,d.jsx)(l.ButtonGroup,{"aria-label":`Link`,children:(0,d.jsx)(c.Button,{size:`sm`,isIconOnly:!0,iconStart:S?.linkActive?`link-off`:`link`,"aria-label":S?.linkActive?`Remove link`:`Add link`,title:S?.linkActive?`Remove link`:`Add link`,variant:S?.linkActive?`active`:`neutral`,isDisabled:i||!x,onClick:C})}),_]}),(0,d.jsx)(`div`,{className:`ds-rte__content`,"data-size":r,children:(0,d.jsx)(f.EditorContent,{editor:x})})]})});exports.RichTextEditor=_;
+//# sourceMappingURL=index.cjs.map

package/dist/components/RichTextEditor/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useEditor","StarterKit","Link","Placeholder","useEditorState","useCallback","ButtonGroup","Button","EditorContent","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","__toESM","mod","isNodeMode","target","require_components_Button_index","require_components_ButtonGroup_index","react","react_jsx_runtime","_tiptap_react","_tiptap_starter_kit","_tiptap_extension_link","_tiptap_extension_placeholder","GROUPS","RichTextEditor","isFocused","setIsFocused","editor","isDisabled","defaultValue","label","onChange","state","toggleLink","href","className","isInvalid","group","tool","toolbarExtra","size"],"sources":["../../../src/components/RichTextEditor/index.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState, type ReactNode } from \"react\";\nimport { EditorContent, useEditor, useEditorState, type Editor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Link from \"@tiptap/extension-link\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport type RichTextEditorSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface RichTextEditorProps {\n  /** Initial HTML. The editor is uncontrolled: read changes from `onChange`. */\n  defaultValue?: string;\n  /** Fired with the document's HTML on every change. */\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  size?: RichTextEditorSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Accessible name for the editing surface. */\n  label?: string;\n  className?: string;\n  /** Extra controls appended to the toolbar, e.g. a word count. */\n  toolbarExtra?: ReactNode;\n}\n\ninterface ToolItem {\n  id: string;\n  icon: IconName;\n  label: string;\n  run: (editor: Editor) => void;\n  active?: (editor: Editor) => boolean;\n}\n\nconst GROUPS: ToolItem[][] = [\n  [\n    {\n      id: \"bold\",\n      icon: \"bold\",\n      label: \"Bold\",\n      run: (e) => e.chain().focus().toggleBold().run(),\n      active: (e) => e.isActive(\"bold\"),\n    },\n    {\n      id: \"italic\",\n      icon: \"italic\",\n      label: \"Italic\",\n      run: (e) => e.chain().focus().toggleItalic().run(),\n      active: (e) => e.isActive(\"italic\"),\n    },\n    {\n      id: \"strike\",\n      icon: \"strikethrough\",\n      label: \"Strikethrough\",\n      run: (e) => e.chain().focus().toggleStrike().run(),\n      active: (e) => e.isActive(\"strike\"),\n    },\n    {\n      id: \"code\",\n      icon: \"code\",\n      label: \"Inline code\",\n      run: (e) => e.chain().focus().toggleCode().run(),\n      active: (e) => e.isActive(\"code\"),\n    },\n  ],\n  [\n    {\n      id: \"h2\",\n      icon: \"heading-2\",\n      label: \"Heading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 2 }),\n    },\n    {\n      id: \"h3\",\n      icon: \"heading-3\",\n      label: \"Subheading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 3 }),\n    },\n    {\n      id: \"quote\",\n      icon: \"quote\",\n      label: \"Quote\",\n      run: (e) => e.chain().focus().toggleBlockquote().run(),\n      active: (e) => e.isActive(\"blockquote\"),\n    },\n  ],\n  [\n    {\n      id: \"ul\",\n      icon: \"list\",\n      label: \"Bulleted list\",\n      run: (e) => e.chain().focus().toggleBulletList().run(),\n      active: (e) => e.isActive(\"bulletList\"),\n    },\n    {\n      id: \"ol\",\n      icon: \"list-ordered\",\n      label: \"Numbered list\",\n      run: (e) => e.chain().focus().toggleOrderedList().run(),\n      active: (e) => e.isActive(\"orderedList\"),\n    },\n  ],\n  [\n    {\n      id: \"undo\",\n      icon: \"undo\",\n      label: \"Undo\",\n      run: (e) => e.chain().focus().undo().run(),\n    },\n    {\n      id: \"redo\",\n      icon: \"redo\",\n      label: \"Redo\",\n      run: (e) => e.chain().focus().redo().run(),\n    },\n  ],\n];\n\n/**\n * The editorial writing surface. Rich text plus links — the same field skin,\n * radius and states as `TextField`, with the toolbar inside the frame.\n */\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  function RichTextEditor(\n    {\n      defaultValue = \"\",\n      onChange,\n      placeholder = \"Write something…\",\n      size = \"md\",\n      isDisabled = false,\n      isInvalid = false,\n      label = \"Rich text editor\",\n      className,\n      toolbarExtra,\n    },\n    ref,\n  ) {\n    const [isFocused, setIsFocused] = useState(false);\n\n    const editor = useEditor({\n      immediatelyRender: false,\n      editable: !isDisabled,\n      content: defaultValue,\n      extensions: [\n        StarterKit.configure({ link: false }),\n        Link.configure({ openOnClick: false, autolink: true }),\n        Placeholder.configure({ placeholder }),\n      ],\n      editorProps: {\n        attributes: { role: \"textbox\", \"aria-label\": label, \"aria-multiline\": \"true\" },\n      },\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false),\n      onUpdate: ({ editor: e }) => onChange?.(e.getHTML()),\n    });\n\n    const state = useEditorState({\n      editor,\n      selector: ({ editor: e }) =>\n        e\n          ? {\n              active: Object.fromEntries(\n                GROUPS.flat().map((t) => [t.id, t.active?.(e) ?? false]),\n              ),\n              linkActive: e.isActive(\"link\"),\n            }\n          : null,\n    });\n\n    const toggleLink = useCallback(() => {\n      if (!editor) return;\n      if (editor.isActive(\"link\")) {\n        editor.chain().focus().unsetLink().run();\n        return;\n      }\n      const href = window.prompt(\"Link to\");\n      if (!href) return;\n      editor.chain().focus().extendMarkRange(\"link\").setLink({ href }).run();\n    }, [editor]);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-rte\", className].filter(Boolean).join(\" \")}\n        data-focused={isFocused || undefined}\n        data-disabled={isDisabled || undefined}\n        aria-invalid={isInvalid || undefined}\n      >\n        <div className=\"ds-rte__toolbar\" role=\"toolbar\" aria-label={`${label} formatting`}>\n          {GROUPS.map((group, i) => (\n            <ButtonGroup key={i} aria-label={`Formatting ${i + 1}`}>\n              {group.map((tool) => (\n                <Button\n                  key={tool.id}\n                  size=\"sm\"\n                  isIconOnly\n                  iconStart={tool.icon}\n                  aria-label={tool.label}\n                  title={tool.label}\n                  aria-pressed={tool.active ? state?.active[tool.id] : undefined}\n                  variant={state?.active[tool.id] ? \"active\" : \"neutral\"}\n                  isDisabled={isDisabled || !editor}\n                  onClick={() => editor && tool.run(editor)}\n                />\n              ))}\n            </ButtonGroup>\n          ))}\n          <ButtonGroup aria-label=\"Link\">\n            <Button\n              size=\"sm\"\n              isIconOnly\n              iconStart={state?.linkActive ? \"link-off\" : \"link\"}\n              aria-label={state?.linkActive ? \"Remove link\" : \"Add link\"}\n              title={state?.linkActive ? \"Remove link\" : \"Add link\"}\n              variant={state?.linkActive ? \"active\" : \"neutral\"}\n              isDisabled={isDisabled || !editor}\n              onClick={toggleLink}\n            />\n          </ButtonGroup>\n          {toolbarExtra}\n        </div>\n        <div className=\"ds-rte__content\" data-size={size}>\n          <EditorContent editor={editor} />\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/RichTextEditor/index.d.cts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export type RichTextEditorSize = "sm" | "md" | "lg";
+export interface RichTextEditorProps {
+    /** Initial HTML. The editor is uncontrolled: read changes from `onChange`. */
+    defaultValue?: string;
+    /** Fired with the document's HTML on every change. */
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    size?: RichTextEditorSize;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    /** Accessible name for the editing surface. */
+    label?: string;
+    className?: string;
+    /** Extra controls appended to the toolbar, e.g. a word count. */
+    toolbarExtra?: ReactNode;
+}
+/**
+ * The editorial writing surface. Rich text plus links — the same field skin,
+ * radius and states as `TextField`, with the toolbar inside the frame.
+ */
+export declare const RichTextEditor: import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/RichTextEditor/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAClC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAgGD;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAyG1B,CAAC"}

package/dist/components/RichTextEditor/index.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export type RichTextEditorSize = "sm" | "md" | "lg";
+export interface RichTextEditorProps {
+    /** Initial HTML. The editor is uncontrolled: read changes from `onChange`. */
+    defaultValue?: string;
+    /** Fired with the document's HTML on every change. */
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    size?: RichTextEditorSize;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    /** Accessible name for the editing surface. */
+    label?: string;
+    className?: string;
+    /** Extra controls appended to the toolbar, e.g. a word count. */
+    toolbarExtra?: ReactNode;
+}
+/**
+ * The editorial writing surface. Rich text plus links — the same field skin,
+ * radius and states as `TextField`, with the toolbar inside the frame.
+ */
+export declare const RichTextEditor: import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichTextEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAClC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAgGD;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAyG1B,CAAC"}

package/dist/components/RichTextEditor/index.js

@@ -0,0 +1,175 @@
+import { Button as e } from "../Button/index.js";
+import { ButtonGroup as t } from "../ButtonGroup/index.js";
+/* empty css                          */
+import { forwardRef as n, useCallback as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { EditorContent as s, useEditor as c, useEditorState as l } from "@tiptap/react";
+import u from "@tiptap/starter-kit";
+import d from "@tiptap/extension-link";
+import f from "@tiptap/extension-placeholder";
+//#region src/components/RichTextEditor/index.tsx
+var p = [
+	[
+		{
+			id: "bold",
+			icon: "bold",
+			label: "Bold",
+			run: (e) => e.chain().focus().toggleBold().run(),
+			active: (e) => e.isActive("bold")
+		},
+		{
+			id: "italic",
+			icon: "italic",
+			label: "Italic",
+			run: (e) => e.chain().focus().toggleItalic().run(),
+			active: (e) => e.isActive("italic")
+		},
+		{
+			id: "strike",
+			icon: "strikethrough",
+			label: "Strikethrough",
+			run: (e) => e.chain().focus().toggleStrike().run(),
+			active: (e) => e.isActive("strike")
+		},
+		{
+			id: "code",
+			icon: "code",
+			label: "Inline code",
+			run: (e) => e.chain().focus().toggleCode().run(),
+			active: (e) => e.isActive("code")
+		}
+	],
+	[
+		{
+			id: "h2",
+			icon: "heading-2",
+			label: "Heading",
+			run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),
+			active: (e) => e.isActive("heading", { level: 2 })
+		},
+		{
+			id: "h3",
+			icon: "heading-3",
+			label: "Subheading",
+			run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),
+			active: (e) => e.isActive("heading", { level: 3 })
+		},
+		{
+			id: "quote",
+			icon: "quote",
+			label: "Quote",
+			run: (e) => e.chain().focus().toggleBlockquote().run(),
+			active: (e) => e.isActive("blockquote")
+		}
+	],
+	[{
+		id: "ul",
+		icon: "list",
+		label: "Bulleted list",
+		run: (e) => e.chain().focus().toggleBulletList().run(),
+		active: (e) => e.isActive("bulletList")
+	}, {
+		id: "ol",
+		icon: "list-ordered",
+		label: "Numbered list",
+		run: (e) => e.chain().focus().toggleOrderedList().run(),
+		active: (e) => e.isActive("orderedList")
+	}],
+	[{
+		id: "undo",
+		icon: "undo",
+		label: "Undo",
+		run: (e) => e.chain().focus().undo().run()
+	}, {
+		id: "redo",
+		icon: "redo",
+		label: "Redo",
+		run: (e) => e.chain().focus().redo().run()
+	}]
+], m = n(function({ defaultValue: n = "", onChange: m, placeholder: h = "Write something…", size: g = "md", isDisabled: _ = !1, isInvalid: v = !1, label: y = "Rich text editor", className: b, toolbarExtra: x }, S) {
+	let [C, w] = i(!1), T = c({
+		immediatelyRender: !1,
+		editable: !_,
+		content: n,
+		extensions: [
+			u.configure({ link: !1 }),
+			d.configure({
+				openOnClick: !1,
+				autolink: !0
+			}),
+			f.configure({ placeholder: h })
+		],
+		editorProps: { attributes: {
+			role: "textbox",
+			"aria-label": y,
+			"aria-multiline": "true"
+		} },
+		onFocus: () => w(!0),
+		onBlur: () => w(!1),
+		onUpdate: ({ editor: e }) => m?.(e.getHTML())
+	}), E = l({
+		editor: T,
+		selector: ({ editor: e }) => e ? {
+			active: Object.fromEntries(p.flat().map((t) => [t.id, t.active?.(e) ?? !1])),
+			linkActive: e.isActive("link")
+		} : null
+	}), D = r(() => {
+		if (!T) return;
+		if (T.isActive("link")) {
+			T.chain().focus().unsetLink().run();
+			return;
+		}
+		let e = window.prompt("Link to");
+		e && T.chain().focus().extendMarkRange("link").setLink({ href: e }).run();
+	}, [T]);
+	return /* @__PURE__ */ o("div", {
+		ref: S,
+		className: ["ds-rte", b].filter(Boolean).join(" "),
+		"data-focused": C || void 0,
+		"data-disabled": _ || void 0,
+		"aria-invalid": v || void 0,
+		children: [/* @__PURE__ */ o("div", {
+			className: "ds-rte__toolbar",
+			role: "toolbar",
+			"aria-label": `${y} formatting`,
+			children: [
+				p.map((n, r) => /* @__PURE__ */ a(t, {
+					"aria-label": `Formatting ${r + 1}`,
+					children: n.map((t) => /* @__PURE__ */ a(e, {
+						size: "sm",
+						isIconOnly: !0,
+						iconStart: t.icon,
+						"aria-label": t.label,
+						title: t.label,
+						"aria-pressed": t.active ? E?.active[t.id] : void 0,
+						variant: E?.active[t.id] ? "active" : "neutral",
+						isDisabled: _ || !T,
+						onClick: () => T && t.run(T)
+					}, t.id))
+				}, r)),
+				/* @__PURE__ */ a(t, {
+					"aria-label": "Link",
+					children: /* @__PURE__ */ a(e, {
+						size: "sm",
+						isIconOnly: !0,
+						iconStart: E?.linkActive ? "link-off" : "link",
+						"aria-label": E?.linkActive ? "Remove link" : "Add link",
+						title: E?.linkActive ? "Remove link" : "Add link",
+						variant: E?.linkActive ? "active" : "neutral",
+						isDisabled: _ || !T,
+						onClick: D
+					})
+				}),
+				x
+			]
+		}), /* @__PURE__ */ a("div", {
+			className: "ds-rte__content",
+			"data-size": g,
+			children: /* @__PURE__ */ a(s, { editor: T })
+		})]
+	});
+});
+//#endregion
+export { m as RichTextEditor };
+
+//# sourceMappingURL=index.js.map

package/dist/components/RichTextEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["StarterKit","Link","Placeholder","GROUPS","RichTextEditor","forwardRef","isFocused","setIsFocused","useState","editor","useEditor","isDisabled","defaultValue","label","onChange","state","useEditorState","toggleLink","useCallback","href","className","isInvalid","ButtonGroup","i","group","Button","tool","toolbarExtra","size","EditorContent"],"sources":["../../../src/components/RichTextEditor/index.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState, type ReactNode } from \"react\";\nimport { EditorContent, useEditor, useEditorState, type Editor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Link from \"@tiptap/extension-link\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport type RichTextEditorSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface RichTextEditorProps {\n  /** Initial HTML. The editor is uncontrolled: read changes from `onChange`. */\n  defaultValue?: string;\n  /** Fired with the document's HTML on every change. */\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  size?: RichTextEditorSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Accessible name for the editing surface. */\n  label?: string;\n  className?: string;\n  /** Extra controls appended to the toolbar, e.g. a word count. */\n  toolbarExtra?: ReactNode;\n}\n\ninterface ToolItem {\n  id: string;\n  icon: IconName;\n  label: string;\n  run: (editor: Editor) => void;\n  active?: (editor: Editor) => boolean;\n}\n\nconst GROUPS: ToolItem[][] = [\n  [\n    {\n      id: \"bold\",\n      icon: \"bold\",\n      label: \"Bold\",\n      run: (e) => e.chain().focus().toggleBold().run(),\n      active: (e) => e.isActive(\"bold\"),\n    },\n    {\n      id: \"italic\",\n      icon: \"italic\",\n      label: \"Italic\",\n      run: (e) => e.chain().focus().toggleItalic().run(),\n      active: (e) => e.isActive(\"italic\"),\n    },\n    {\n      id: \"strike\",\n      icon: \"strikethrough\",\n      label: \"Strikethrough\",\n      run: (e) => e.chain().focus().toggleStrike().run(),\n      active: (e) => e.isActive(\"strike\"),\n    },\n    {\n      id: \"code\",\n      icon: \"code\",\n      label: \"Inline code\",\n      run: (e) => e.chain().focus().toggleCode().run(),\n      active: (e) => e.isActive(\"code\"),\n    },\n  ],\n  [\n    {\n      id: \"h2\",\n      icon: \"heading-2\",\n      label: \"Heading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 2 }),\n    },\n    {\n      id: \"h3\",\n      icon: \"heading-3\",\n      label: \"Subheading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 3 }),\n    },\n    {\n      id: \"quote\",\n      icon: \"quote\",\n      label: \"Quote\",\n      run: (e) => e.chain().focus().toggleBlockquote().run(),\n      active: (e) => e.isActive(\"blockquote\"),\n    },\n  ],\n  [\n    {\n      id: \"ul\",\n      icon: \"list\",\n      label: \"Bulleted list\",\n      run: (e) => e.chain().focus().toggleBulletList().run(),\n      active: (e) => e.isActive(\"bulletList\"),\n    },\n    {\n      id: \"ol\",\n      icon: \"list-ordered\",\n      label: \"Numbered list\",\n      run: (e) => e.chain().focus().toggleOrderedList().run(),\n      active: (e) => e.isActive(\"orderedList\"),\n    },\n  ],\n  [\n    {\n      id: \"undo\",\n      icon: \"undo\",\n      label: \"Undo\",\n      run: (e) => e.chain().focus().undo().run(),\n    },\n    {\n      id: \"redo\",\n      icon: \"redo\",\n      label: \"Redo\",\n      run: (e) => e.chain().focus().redo().run(),\n    },\n  ],\n];\n\n/**\n * The editorial writing surface. Rich text plus links — the same field skin,\n * radius and states as `TextField`, with the toolbar inside the frame.\n */\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  function RichTextEditor(\n    {\n      defaultValue = \"\",\n      onChange,\n      placeholder = \"Write something…\",\n      size = \"md\",\n      isDisabled = false,\n      isInvalid = false,\n      label = \"Rich text editor\",\n      className,\n      toolbarExtra,\n    },\n    ref,\n  ) {\n    const [isFocused, setIsFocused] = useState(false);\n\n    const editor = useEditor({\n      immediatelyRender: false,\n      editable: !isDisabled,\n      content: defaultValue,\n      extensions: [\n        StarterKit.configure({ link: false }),\n        Link.configure({ openOnClick: false, autolink: true }),\n        Placeholder.configure({ placeholder }),\n      ],\n      editorProps: {\n        attributes: { role: \"textbox\", \"aria-label\": label, \"aria-multiline\": \"true\" },\n      },\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false),\n      onUpdate: ({ editor: e }) => onChange?.(e.getHTML()),\n    });\n\n    const state = useEditorState({\n      editor,\n      selector: ({ editor: e }) =>\n        e\n          ? {\n              active: Object.fromEntries(\n                GROUPS.flat().map((t) => [t.id, t.active?.(e) ?? false]),\n              ),\n              linkActive: e.isActive(\"link\"),\n            }\n          : null,\n    });\n\n    const toggleLink = useCallback(() => {\n      if (!editor) return;\n      if (editor.isActive(\"link\")) {\n        editor.chain().focus().unsetLink().run();\n        return;\n      }\n      const href = window.prompt(\"Link to\");\n      if (!href) return;\n      editor.chain().focus().extendMarkRange(\"link\").setLink({ href }).run();\n    }, [editor]);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-rte\", className].filter(Boolean).join(\" \")}\n        data-focused={isFocused || undefined}\n        data-disabled={isDisabled || undefined}\n        aria-invalid={isInvalid || undefined}\n      >\n        <div className=\"ds-rte__toolbar\" role=\"toolbar\" aria-label={`${label} formatting`}>\n          {GROUPS.map((group, i) => (\n            <ButtonGroup key={i} aria-label={`Formatting ${i + 1}`}>\n              {group.map((tool) => (\n                <Button\n                  key={tool.id}\n                  size=\"sm\"\n                  isIconOnly\n                  iconStart={tool.icon}\n                  aria-label={tool.label}\n                  title={tool.label}\n                  aria-pressed={tool.active ? state?.active[tool.id] : undefined}\n                  variant={state?.active[tool.id] ? \"active\" : \"neutral\"}\n                  isDisabled={isDisabled || !editor}\n                  onClick={() => editor && tool.run(editor)}\n                />\n              ))}\n            </ButtonGroup>\n          ))}\n          <ButtonGroup aria-label=\"Link\">\n            <Button\n              size=\"sm\"\n              isIconOnly\n              iconStart={state?.linkActive ? \"link-off\" : \"link\"}\n              aria-label={state?.linkActive ? \"Remove link\" : \"Add link\"}\n              title={state?.linkActive ? \"Remove link\" : \"Add link\"}\n              variant={state?.linkActive ? \"active\" : \"neutral\"}\n              isDisabled={isDisabled || !editor}\n              onClick={toggleLink}\n            />\n          </ButtonGroup>\n          {toolbarExtra}\n        </div>\n        <div className=\"ds-rte__content\" data-size={size}>\n          <EditorContent editor={editor} />\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/RichTextEditor/style.css

@@ -0,0 +1,136 @@
+@layer components {
+  /* The editor is a field: field radius, control stroke, derived fill. The
+   * toolbar is inside the frame, separated by a hairline rule. */
+  .ds-rte {
+    display: flex;
+    flex-direction: column;
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--field-radius);
+    /* The writing surface stays on the light page surface — only the toolbar
+     * band carries the derived field fill. */
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    overflow: hidden;
+  }
+
+  .ds-rte[data-focused] {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-rte[aria-invalid="true"] {
+    border-color: var(--color-danger);
+  }
+
+  .ds-rte[aria-invalid="true"] .ds-rte__toolbar {
+    background: var(--field-invalid);
+  }
+
+  .ds-rte[data-disabled] {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-rte__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    background: var(--field-rest);
+    border-block-end: var(--rule-width) solid var(--rule-color);
+  }
+
+
+  .ds-rte__content[data-size="sm"] {
+    min-block-size: var(--editor-height-sm);
+  }
+
+  .ds-rte__content[data-size="md"] {
+    min-block-size: var(--editor-height-md);
+  }
+
+  .ds-rte__content[data-size="lg"] {
+    min-block-size: var(--editor-height-lg);
+  }
+
+  .ds-rte__content {
+    padding: var(--space-3);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-body);
+    overflow-y: auto;
+  }
+
+  .ds-rte__content .tiptap {
+    outline: none;
+    min-block-size: 100%;
+  }
+
+  .ds-rte__content .tiptap > * + * {
+    margin-block-start: var(--space-3);
+  }
+
+  .ds-rte__content h2 {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+  }
+
+  .ds-rte__content h3 {
+    font-size: var(--font-size-md-lg);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+  }
+
+  .ds-rte__content ul,
+  .ds-rte__content ol {
+    padding-inline-start: var(--space-5);
+  }
+
+  .ds-rte__content ul {
+    list-style: disc;
+  }
+
+  .ds-rte__content ol {
+    list-style: decimal;
+  }
+
+  .ds-rte__content li + li {
+    margin-block-start: var(--space-1);
+  }
+
+  .ds-rte__content blockquote {
+    padding-inline-start: var(--space-3);
+    border-inline-start: var(--rail-width) solid var(--color-border-strong);
+    color: var(--color-text-muted);
+  }
+
+  .ds-rte__content code {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+  }
+
+  .ds-rte__content pre {
+    padding: var(--space-3);
+    border-radius: var(--field-radius);
+    background: var(--color-surface-sunken, var(--field-hover));
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    overflow-x: auto;
+  }
+
+  .ds-rte__content a {
+    color: var(--color-primary-text);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .ds-rte__content p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--color-text-muted);
+    float: inline-start;
+    block-size: 0;
+    pointer-events: none;
+  }
+}

package/dist/components/SearchField/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */const t=require("../FieldAffix/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(function({size:i=`md`,isDisabled:a=!1,onClear:o,className:s,placeholder:c=`Search`,value:l,disabled:u,onKeyDown:d,...f},p){let m=(0,n.useRef)(null),h=l!==void 0&&String(l).length>0;return(0,r.jsx)(t.FieldAffix,{className:s,lead:(0,r.jsx)(e.t,{name:`search`,size:16}),isTrailInteractive:!0,trail:h&&o?(0,r.jsx)(`button`,{type:`button`,className:`ds-search__clear`,"aria-label":`Clear search`,disabled:a||u,onClick:()=>{o(),m.current?.focus()},children:(0,r.jsx)(e.t,{name:`x`,size:16})}):void 0,children:(0,r.jsx)(`input`,{ref:e=>{m.current=e,typeof p==`function`?p(e):p&&(p.current=e)},type:`search`,value:l,placeholder:c,disabled:a||u,"data-size":i,className:`ds-field-skin ds-search__input`,onKeyDown:e=>{e.key===`Escape`&&o&&o(),d?.(e)},...f})})});exports.SearchField=i;
+//# sourceMappingURL=index.cjs.map

package/dist/components/SearchField/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","FieldAffix","Icon","require_Icon","require_components_FieldAffix_index","react","react_jsx_runtime","SearchField","rest","inner","hasValue","value","onClear","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <button\n            type=\"button\"\n            className=\"ds-search__clear\"\n            aria-label=\"Clear search\"\n            disabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":"A,iQAgBA,IAAaQ,GAAA,EAAcR,EAAAA,WAAAA,CAA+C,SACxE,CACE,OAAO,KACP,aAAa,GACb,UACA,YACA,cAAc,SACd,QACA,WACA,YACA,GAAGS,GAEL,EACA,CACA,IAAMC,GAAA,EAAQT,EAAAA,OAAAA,CAAgC,IAAI,EAC5CU,EAAWC,IAAU,IAAA,IAAY,OAAOA,CAAK,CAAC,CAAC,OAAS,EAE9D,OACE,EAAAL,EAAA,IAAA,CAACL,EAAAA,WAAD,CACa,YACX,MAAM,EAAAK,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAM,KAAK,SAAS,KAAM,EAAK,CAAA,EACrC,mBAAA,GACA,MACEQ,GAAYE,GACV,EAAAN,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,UAAU,mBACV,aAAW,eACX,SAAUO,GAAcC,EACxB,YAAe,CACbF,EAAQ,EACRH,EAAM,SAAS,MAAM,CACvB,EAEA,UAAA,EAAAH,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAM,KAAK,IAAI,KAAM,EAAK,CAAA,CACpB,CAAA,EACN,IAAA,GAGN,UAAA,EAAAI,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAM,QAAUS,EACZ,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,SACE,QACM,cACb,SAAUF,GAAcC,EACxB,YAAWG,EACX,UAAU,iCACV,UAAY,GAAU,CAChBC,EAAM,MAAQ,UAAYN,GAASA,EAAQ,EAC/CO,IAAYD,CAAK,CACnB,EACA,GAAIV,CACL,CAAA,CACS,CAAA,CAEhB,CAAC,E"}

package/dist/components/SearchField/index.d.cts

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes } from "react";
+import type { FieldSize } from "../Field/index.cjs";
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: FieldSize;
+    isDisabled?: boolean;
+    /** Fired by the clear button and by Escape. */
+    onClear?: () => void;
+}
+/** A filter over a collection. Carries the glyph, and clears without a Save. */
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/SearchField/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}

package/dist/components/SearchField/index.d.ts

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes } from "react";
+import type { FieldSize } from "../Field/index.js";
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: FieldSize;
+    isDisabled?: boolean;
+    /** Fired by the clear button and by Escape. */
+    onClear?: () => void;
+}
+/** A filter over a collection. Carries the glyph, and clears without a Save. */
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SearchField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}

package/dist/components/SearchField/index.js

@@ -0,0 +1,49 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+/* empty css                          */
+import { FieldAffix as t } from "../FieldAffix/index.js";
+import { forwardRef as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/SearchField/index.tsx
+var a = n(function({ size: n = "md", isDisabled: a = !1, onClear: o, className: s, placeholder: c = "Search", value: l, disabled: u, onKeyDown: d, ...f }, p) {
+	let m = r(null), h = l !== void 0 && String(l).length > 0;
+	return /* @__PURE__ */ i(t, {
+		className: s,
+		lead: /* @__PURE__ */ i(e, {
+			name: "search",
+			size: 16
+		}),
+		isTrailInteractive: !0,
+		trail: h && o ? /* @__PURE__ */ i("button", {
+			type: "button",
+			className: "ds-search__clear",
+			"aria-label": "Clear search",
+			disabled: a || u,
+			onClick: () => {
+				o(), m.current?.focus();
+			},
+			children: /* @__PURE__ */ i(e, {
+				name: "x",
+				size: 16
+			})
+		}) : void 0,
+		children: /* @__PURE__ */ i("input", {
+			ref: (e) => {
+				m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+			},
+			type: "search",
+			value: l,
+			placeholder: c,
+			disabled: a || u,
+			"data-size": n,
+			className: "ds-field-skin ds-search__input",
+			onKeyDown: (e) => {
+				e.key === "Escape" && o && o(), d?.(e);
+			},
+			...f
+		})
+	});
+});
+//#endregion
+export { a as SearchField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/SearchField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","SearchField","forwardRef","rest","inner","useRef","hasValue","value","FieldAffix","onClear","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <button\n            type=\"button\"\n            className=\"ds-search__clear\"\n            aria-label=\"Clear search\"\n            disabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":";;;;;;AAgBA,IAAaC,IAAcC,EAA+C,SACxE,EACE,UAAO,MACP,gBAAa,IACb,YACA,cACA,iBAAc,UACd,UACA,aACA,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,EAAgC,IAAI,GAC5CC,IAAWC,MAAU,KAAA,KAAY,OAAOA,CAAK,CAAC,CAAC,SAAS;CAE9D,OACE,kBAACC,GAAD;EACa;EACX,MAAM,kBAACR,GAAD;GAAM,MAAK;GAAS,MAAM;EAAK,CAAA;EACrC,oBAAA;EACA,OACEM,KAAYG,IACV,kBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,cAAW;GACX,UAAUC,KAAcC;GACxB,eAAe;IAEb,AADAF,EAAQ,GACRL,EAAM,SAAS,MAAM;GACvB;GAEA,UAAA,kBAACJ,GAAD;IAAM,MAAK;IAAI,MAAM;GAAK,CAAA;EACpB,CAAA,IACN,KAAA;EAGN,UAAA,kBAAC,SAAD;GACE,MAAM,MAAS;IAEb,AADA,EAAM,UAAUY,GACZ,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACE;GACM;GACb,UAAUF,KAAcC;GACxB,aAAWG;GACX,WAAU;GACV,YAAY,MAAU;IAEpB,AADIC,EAAM,QAAQ,YAAYN,KAASA,EAAQ,GAC/CO,IAAYD,CAAK;GACnB;GACA,GAAIZ;EACL,CAAA;CACS,CAAA;AAEhB,CAAC"}

package/dist/components/SearchField/style.css

@@ -0,0 +1,27 @@
+@layer components {
+  .ds-search__input::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .ds-search__clear {
+    display: grid;
+    place-items: center;
+    inline-size: var(--space-6);
+    block-size: var(--space-6);
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+  }
+
+  .ds-search__clear:hover {
+    background: var(--field-hover);
+    color: var(--color-text);
+  }
+
+  .ds-search__clear:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+}

package/dist/components/Select/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */const t=require("../Popover/index.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(...e){return e.filter(Boolean).join(` `)}var a=(0,n.forwardRef)(function({options:a,value:o,defaultValue:s,onValueChange:c,placeholder:l=`Select an option`,size:u=`md`,isDisabled:d=!1,isInvalid:f=!1,className:p,disabled:m,onClick:h,onKeyDown:g,..._},v){let[y,b]=(0,n.useState)(s??``),x=o??y,[S,C]=(0,n.useState)(!1),[w,T]=(0,n.useState)(0),E=(0,n.useRef)(null),D=(0,n.useRef)(null),O=(0,n.useRef)(null),k=(0,n.useId)(),A=d||m,j=S&&!A,M=a.find(e=>e.value===x),N=a.filter(e=>!e.isDisabled),P=(0,n.useCallback)(e=>{o===void 0&&b(e),c?.(e),C(!1)},[c,o]);(0,n.useEffect)(()=>{if(!j)return;let e=a.findIndex(e=>e.value===x&&!e.isDisabled);T(e<0?a.indexOf(N[0]):e);let t=e=>{let t=e.target;!E.current?.contains(t)&&!O.current?.contains(t)&&C(!1)};return document.addEventListener(`mousedown`,t),()=>document.removeEventListener(`mousedown`,t)},[j]),(0,n.useEffect)(()=>{j&&(O.current?.querySelectorAll(`[role='option']`)[w])?.scrollIntoView({block:`nearest`})},[w,j]);let F=e=>{let t=a.map((e,t)=>({option:e,index:t})).filter(e=>!e.option.isDisabled);if(t.length===0)return;let n=t[(t.findIndex(e=>e.index===w)+e+t.length)%t.length];T(n.index)},I=e=>{if(!A){if(e.key===`Escape`)C(!1),D.current?.focus();else if(!j&&(e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `))e.preventDefault(),C(!0);else if(j){if(e.key===`Tab`)C(!1);else if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),F(e.key===`ArrowDown`?1:-1);else if(e.key===`Home`||e.key===`End`){e.preventDefault();let t=e.key===`Home`?N[0]:N[N.length-1];t&&T(a.indexOf(t))}else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=a[w];t&&!t.isDisabled&&P(t.value)}}}};return(0,r.jsxs)(`div`,{className:`ds-select-root`,ref:E,children:[(0,r.jsxs)(`button`,{ref:e=>{D.current=e,typeof v==`function`?v(e):v&&(v.current=e)},type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":j,"aria-controls":j?k:void 0,"aria-activedescendant":j&&a[w]&&!a[w].isDisabled?`${k}-option-${w}`:void 0,"aria-invalid":f||void 0,disabled:A,"data-size":u,"data-placeholder":M?void 0:``,className:i(`ds-field-skin`,`ds-select`,p),onClick:e=>{h?.(e),e.defaultPrevented||C(e=>!e)},onKeyDown:e=>{g?.(e),e.defaultPrevented||I(e)},..._,children:[(0,r.jsx)(`span`,{className:`ds-select__value`,children:M?M.label:l}),(0,r.jsx)(e.t,{name:`chevron-down`,size:16,className:`ds-select__chevron`})]}),(0,r.jsx)(t.Popover,{anchorRef:D,isOpen:j,matchAnchorWidth:!0,panelRef:O,id:k,role:`listbox`,"aria-label":_[`aria-label`]??l,className:`ds-surface-raised ds-select__menu`,children:(0,r.jsx)(`div`,{onKeyDown:I,children:a.map((t,n)=>(0,r.jsxs)(`div`,{id:`${k}-option-${n}`,role:`option`,"aria-selected":t.value===x,"aria-disabled":t.isDisabled||void 0,"data-active":n===w||void 0,className:`ds-select__option`,onMouseEnter:()=>!t.isDisabled&&T(n),onClick:()=>{t.isDisabled||(P(t.value),D.current?.focus())},children:[(0,r.jsxs)(`span`,{className:`ds-select__option-body`,children:[(0,r.jsx)(`span`,{className:`ds-select__option-label`,children:t.label}),t.description&&(0,r.jsx)(`span`,{className:`ds-select__option-description`,children:t.description})]}),t.value===x&&(0,r.jsx)(e.t,{name:`check`,size:16})]},t.value))})})]})});exports.Select=a;
+//# sourceMappingURL=index.cjs.map