@mieweb/ui 0.7.3-dev.13 → 0.7.3-dev.15

package/dist/{chunk-WUPT5SUN.js → chunk-2DP6BZ7A.js}

@@ -1,4 +1,4 @@
-import { inputVariants } from './chunk-FXTNCCD2.js';
+import { inputVariants, floatingLabelVariants, RequiredMark } from './chunk-3IMM2PM4.js';
 import { useClickOutside } from './chunk-62ZOA6PX.js';
 import { useAnchoredPosition } from './chunk-BOOJDRJO.js';
 import { cn } from './chunk-TQONQSJO.js';
@@ -22,6 +22,10 @@ function Autocomplete({
   minQueryLength = 1,
   clearOnSelect = true,
   disabled,
+  label,
+  labelVariant = "stacked",
+  required = false,
+  requiredVariant,
   size,
   className,
   inputClassName,
@@ -36,6 +40,10 @@ function Autocomplete({
   const [activeIndex, setActiveIndex] = React.useState(-1);
   const containerRef = React.useRef(null);
   const listId = React.useId();
+  const generatedInputId = React.useId();
+  const inputId = inputProps?.id ?? generatedInputId;
+  const isFloating = labelVariant === "floating" && !!label;
+  const requiredMark = required && /* @__PURE__ */ jsx(RequiredMark, { variant: requiredVariant });
   const meetsMinLength = query.length >= minQueryLength;
   const filteredItems = React.useMemo(() => {
     if (!filter) return items;
@@ -121,10 +129,23 @@ function Autocomplete({
       "data-slot": "autocomplete",
       className: cn("relative", className),
       children: [
+        label && !isFloating && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            "data-slot": "autocomplete-label",
+            htmlFor: inputId,
+            className: "text-foreground mb-1.5 block text-sm font-medium",
+            children: [
+              label,
+              requiredMark
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "input",
           {
             ref: inputRef,
+            id: inputId,
             type: "text",
             role: "combobox",
             "aria-expanded": isOpen,
@@ -135,15 +156,34 @@ function Autocomplete({
             autoComplete: "off",
             "data-slot": "autocomplete-input",
             value: query,
-            placeholder,
+            placeholder: isFloating ? " " : placeholder,
             disabled,
             onChange: handleChange,
             onKeyDown: handleKeyDown,
             onFocus: () => {
               if (meetsMinLength) setOpen(true);
             },
-            className: cn(inputVariants({ size }), inputClassName),
-            ...inputProps
+            className: cn(
+              inputVariants({
+                size,
+                labelVariant: isFloating ? "floating" : "stacked"
+              }),
+              inputClassName
+            ),
+            ...inputProps,
+            required
+          }
+        ),
+        isFloating && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            "data-slot": "autocomplete-label",
+            htmlFor: inputId,
+            className: floatingLabelVariants({ size }),
+            children: [
+              label,
+              requiredMark
+            ]
           }
         ),
         isOpen && createPortal(
@@ -203,5 +243,5 @@ function Autocomplete({
 Autocomplete.displayName = "Autocomplete";
 
 export { Autocomplete };
-//# sourceMappingURL=chunk-WUPT5SUN.js.map
-//# sourceMappingURL=chunk-WUPT5SUN.js.map
+//# sourceMappingURL=chunk-2DP6BZ7A.js.map
+//# sourceMappingURL=chunk-2DP6BZ7A.js.map

package/dist/chunk-2DP6BZ7A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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","file":"chunk-2DP6BZ7A.js","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useAnchoredPosition } from '../../hooks/useAnchoredPosition';\nimport {\n  inputVariants,\n  floatingLabelVariants,\n  RequiredMark,\n  type RequiredMarkVariant,\n} from '../Input';\n\nexport interface AutocompleteProps<T> extends Pick<\n  VariantProps<typeof inputVariants>,\n  'size'\n> {\n  /** Candidate items to search through. */\n  items: T[];\n  /** Called when the user picks an item. */\n  onSelect: (item: T) => void;\n  /** Returns a stable key for an item (used for React keys & option ids). */\n  getItemKey: (item: T) => string;\n  /** Renders the visible content of a result row. */\n  renderItem: (item: T) => React.ReactNode;\n  /**\n   * Predicate used to filter `items` by the current query. When omitted, all\n   * `items` are shown as-is (the caller is responsible for filtering).\n   */\n  filter?: (item: T, query: string) => boolean;\n  /** Controlled query value. */\n  value?: string;\n  /** Default query value (uncontrolled). */\n  defaultValue?: string;\n  /** Called whenever the query changes. */\n  onValueChange?: (query: string) => void;\n  /** Placeholder text for the search input. */\n  placeholder?: string;\n  /** Content shown when there are no matching items. */\n  emptyMessage?: React.ReactNode;\n  /**\n   * Renders the label of a \"create new\" action appended to the results. When\n   * provided together with `onCreate`, the action row is shown.\n   */\n  createLabel?: (query: string) => React.ReactNode;\n  /** Called when the \"create new\" action is chosen. Receives the query. */\n  onCreate?: (query: string) => void;\n  /** Minimum query length before results open. Defaults to 1. */\n  minQueryLength?: number;\n  /** Clear the query after a selection. Defaults to true. */\n  clearOnSelect?: boolean;\n  /** Disable the input. */\n  disabled?: boolean;\n  /** Label for the input. */\n  label?: string;\n  /**\n   * How the label is rendered.\n   * - `stacked` (default): label above the input.\n   * - `floating`: label rests inside the input like a placeholder and floats\n   *   to the top of the field when focused or filled. Ignores `placeholder`.\n   */\n  labelVariant?: 'stacked' | 'floating';\n  /** Whether the input is required. */\n  required?: boolean;\n  /**\n   * Color of the required asterisk.\n   * - `default`: destructive (hard requirement).\n   * - `warning`: warning color (soft requirement / recommended).\n   */\n  requiredVariant?: RequiredMarkVariant;\n  /** Accessible label for the combobox input. */\n  'aria-label'?: string;\n  /** Class applied to the outer wrapper. */\n  className?: string;\n  /** Class applied to the input element. */\n  inputClassName?: string;\n  /** Forwarded ref to the underlying input. */\n  inputRef?: React.Ref<HTMLInputElement>;\n  /** Additional props forwarded to the input element. */\n  inputProps?: Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'size'\n    | 'placeholder'\n    | 'disabled'\n    | 'required'\n    | 'aria-label'\n  >;\n}\n\ntype Row<T> =\n  | { kind: 'item'; item: T; key: string }\n  | { kind: 'create'; key: string };\n\n/**\n * A data-agnostic, presentational combobox. It renders a search input with a\n * filterable results popover and an optional \"create new\" action. All data and\n * side effects are supplied via props/callbacks so it can be wired to any store.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   items={employees}\n *   getItemKey={(e) => e.id}\n *   filter={(e, q) => e.name.toLowerCase().includes(q.toLowerCase())}\n *   renderItem={(e) => <span>{e.name}</span>}\n *   onSelect={handleSelect}\n *   placeholder=\"Search employees…\"\n * />\n * ```\n */\nfunction Autocomplete<T>({\n  items,\n  onSelect,\n  getItemKey,\n  renderItem,\n  filter,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  placeholder,\n  emptyMessage,\n  createLabel,\n  onCreate,\n  minQueryLength = 1,\n  clearOnSelect = true,\n  disabled,\n  label,\n  labelVariant = 'stacked',\n  required = false,\n  requiredVariant,\n  size,\n  className,\n  inputClassName,\n  inputRef,\n  inputProps,\n  'aria-label': ariaLabel,\n}: AutocompleteProps<T>) {\n  const [uncontrolledValue, setUncontrolledValue] =\n    React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const query = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = React.useState(false);\n  const [activeIndex, setActiveIndex] = React.useState(-1);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const listId = React.useId();\n  const generatedInputId = React.useId();\n  const inputId = inputProps?.id ?? generatedInputId;\n\n  const isFloating = labelVariant === 'floating' && !!label;\n  const requiredMark = required && <RequiredMark variant={requiredVariant} />;\n\n  const meetsMinLength = query.length >= minQueryLength;\n\n  const filteredItems = React.useMemo(() => {\n    if (!filter) return items;\n    return items.filter((item) => filter(item, query));\n  }, [items, filter, query]);\n\n  const showCreate = Boolean(onCreate && createLabel && query.length > 0);\n\n  const rows = React.useMemo<Row<T>[]>(() => {\n    const itemRows: Row<T>[] = filteredItems.map((item) => ({\n      kind: 'item',\n      item,\n      key: getItemKey(item),\n    }));\n    if (showCreate) {\n      itemRows.push({ kind: 'create', key: '__create__' });\n    }\n    return itemRows;\n  }, [filteredItems, showCreate, getItemKey]);\n\n  const hasContent =\n    rows.length > 0 || (meetsMinLength && emptyMessage != null);\n  const isOpen = open && meetsMinLength && hasContent;\n\n  // Portal + fixed positioning so the listbox escapes overflow-hidden\n  // ancestors (cards, dialogs, scroll containers, …).\n  const { anchorRef, floatingRef, style } = useAnchoredPosition<\n    HTMLDivElement,\n    HTMLDivElement\n  >({ open: isOpen, matchWidth: true, maxHeight: 300 });\n\n  const outsideRefs = React.useMemo(\n    () => [containerRef, floatingRef],\n    [floatingRef]\n  );\n  useClickOutside(outsideRefs, () => setOpen(false), open);\n\n  const setQuery = React.useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) setActiveIndex(-1);\n  }, [isOpen]);\n\n  const commitRow = (row: Row<T>) => {\n    if (row.kind === 'item') {\n      onSelect(row.item);\n    } else {\n      onCreate?.(query);\n    }\n    setOpen(false);\n    setActiveIndex(-1);\n    if (clearOnSelect) setQuery('');\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(e.target.value);\n    setOpen(true);\n    setActiveIndex(-1);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (!isOpen) {\n        setOpen(true);\n        return;\n      }\n      setActiveIndex((i) => (rows.length === 0 ? -1 : (i + 1) % rows.length));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      if (!isOpen) return;\n      setActiveIndex((i) =>\n        rows.length === 0 ? -1 : (i - 1 + rows.length) % rows.length\n      );\n    } else if (e.key === 'Enter') {\n      if (isOpen && activeIndex >= 0 && activeIndex < rows.length) {\n        e.preventDefault();\n        commitRow(rows[activeIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      setOpen(false);\n      setActiveIndex(-1);\n    }\n  };\n\n  const activeId =\n    isOpen && activeIndex >= 0 && activeIndex < rows.length\n      ? `${listId}-opt-${rows[activeIndex].key}`\n      : undefined;\n\n  return (\n    <div\n      ref={(node) => {\n        containerRef.current = node;\n        anchorRef.current = node;\n      }}\n      data-slot=\"autocomplete\"\n      className={cn('relative', className)}\n    >\n      {label && !isFloating && (\n        <label\n          data-slot=\"autocomplete-label\"\n          htmlFor={inputId}\n          className=\"text-foreground mb-1.5 block text-sm font-medium\"\n        >\n          {label}\n          {requiredMark}\n        </label>\n      )}\n      <input\n        ref={inputRef}\n        id={inputId}\n        type=\"text\"\n        role=\"combobox\"\n        aria-expanded={isOpen}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeId}\n        aria-label={ariaLabel}\n        autoComplete=\"off\"\n        data-slot=\"autocomplete-input\"\n        value={query}\n        // A single-space placeholder keeps :placeholder-shown reliable so the\n        // label can float via CSS alone (mirrors Input).\n        placeholder={isFloating ? ' ' : placeholder}\n        disabled={disabled}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onFocus={() => {\n          if (meetsMinLength) setOpen(true);\n        }}\n        className={cn(\n          inputVariants({\n            size,\n            labelVariant: isFloating ? 'floating' : 'stacked',\n          }),\n          inputClassName\n        )}\n        {...inputProps}\n        required={required}\n      />\n      {isFloating && (\n        <label\n          data-slot=\"autocomplete-label\"\n          htmlFor={inputId}\n          className={floatingLabelVariants({ size })}\n        >\n          {label}\n          {requiredMark}\n        </label>\n      )}\n\n      {isOpen &&\n        createPortal(\n          <div\n            ref={floatingRef}\n            style={style}\n            id={listId}\n            role=\"listbox\"\n            data-slot=\"autocomplete-list\"\n            className={cn(\n              'border-border overflow-auto rounded-md border',\n              'bg-card text-card-foreground shadow-lg'\n            )}\n          >\n            {rows.length === 0\n              ? emptyMessage != null && (\n                  <div\n                    data-slot=\"autocomplete-empty\"\n                    className=\"text-muted-foreground px-4 py-3 text-sm\"\n                  >\n                    {emptyMessage}\n                  </div>\n                )\n              : rows.map((row, index) => {\n                  const isActive = index === activeIndex;\n                  const optionId = `${listId}-opt-${row.key}`;\n                  return (\n                    <button\n                      key={row.key}\n                      id={optionId}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isActive}\n                      data-slot={\n                        row.kind === 'create'\n                          ? 'autocomplete-create'\n                          : 'autocomplete-option'\n                      }\n                      onMouseEnter={() => setActiveIndex(index)}\n                      onMouseDown={(e) => e.preventDefault()}\n                      onClick={() => commitRow(row)}\n                      className={cn(\n                        'w-full px-4 py-3 text-left text-sm transition-colors',\n                        'border-border border-b last:border-b-0',\n                        'focus:outline-none',\n                        isActive\n                          ? 'bg-muted text-foreground'\n                          : 'hover:bg-muted',\n                        row.kind === 'create' &&\n                          'text-primary-800 flex items-center gap-2 font-medium'\n                      )}\n                    >\n                      {row.kind === 'create'\n                        ? createLabel!(query)\n                        : renderItem(row.item)}\n                    </button>\n                  );\n                })}\n          </div>,\n          document.body\n        )}\n    </div>\n  );\n}\n\nAutocomplete.displayName = 'Autocomplete';\n\nexport { Autocomplete };\n"]}

package/dist/{chunk-ERTT36K3.js → chunk-33TQ25IK.js}

@@ -1,12 +1,12 @@
-import { Textarea } from './chunk-GP5CRU2I.js';
+import { Textarea } from './chunk-H3YO5GBM.js';
 import { Tooltip } from './chunk-FJ7YPVKV.js';
-import { RadioGroup, Radio } from './chunk-CLT4ASY7.js';
+import { RadioGroup, Radio } from './chunk-EPSB4WTL.js';
 import { Label } from './chunk-I3WGZPI6.js';
-import { Select } from './chunk-DM57NTOQ.js';
+import { Select } from './chunk-XBKOZRDO.js';
 import { Card, CardHeader, CardContent } from './chunk-QYSUYB3S.js';
-import { DateInput } from './chunk-UHVNVZ7L.js';
+import { DateInput } from './chunk-IILJGFI5.js';
 import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-XMCIXHGH.js';
-import { Input } from './chunk-FXTNCCD2.js';
+import { Input } from './chunk-3IMM2PM4.js';
 import { AlertCircle, Plus, GripVertical, StickyNote, Ban, Pencil, CalendarCheck, ExternalLink, ThumbsUp, HandMetal, ThumbsDown, HelpCircle, ChevronDown, ChevronUp, RefreshCw } from './chunk-3PXOIAF6.js';
 import { Button } from './chunk-D2GID3YK.js';
 import { Badge } from './chunk-BMSG4NBH.js';
@@ -1565,5 +1565,5 @@ function MedicationReconciliation({
 }
 
 export { ALLERGY_TYPE_LABELS, AllergyList, AllergyManager, CodeLookupProvider, MEDICATION_STATUS_LABELS, MedicationEditor, MedicationList, MedicationReconciliation, RowActionToolbar, RowIconButton, labelToMedicationFields, lookupToMedicationFields, parseMedicationLabel, parseSig, toolbarKeyNav, useCodeLookupConfig };
-//# sourceMappingURL=chunk-ERTT36K3.js.map
-//# sourceMappingURL=chunk-ERTT36K3.js.map
+//# sourceMappingURL=chunk-33TQ25IK.js.map
+//# sourceMappingURL=chunk-33TQ25IK.js.map