@arbidocs/blocks 0.4.89 → 0.4.91

package/dist/chunk-VFUWWH52.cjs

@@ -1,83 +0,0 @@
-"use client";
-'use strict';
-
-var ui = require('@arbidocs/react/ui');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/components/ToneBadge.tsx
-
-// src/components/tones.ts
-var TONE_SURFACE = {
-  neutral: "bg-gray-bg text-gray-text",
-  info: "bg-blue-bg text-blue-text",
-  success: "bg-green-bg text-green-text",
-  warning: "bg-yellow-bg text-yellow-text",
-  danger: "bg-red-bg text-red-text",
-  accent: "bg-purple-bg text-purple-text",
-  ai: "bg-ai-soft text-ai-ink"
-};
-var TONE_BORDER = {
-  neutral: "border-gray-border",
-  info: "border-blue-border",
-  success: "border-green-border",
-  warning: "border-yellow-border",
-  danger: "border-red-border",
-  accent: "border-purple-border",
-  ai: "border-transparent"
-};
-var TONE_DOT = {
-  neutral: "bg-gray-text",
-  info: "bg-blue-solid",
-  success: "bg-green-solid",
-  warning: "bg-yellow-solid",
-  danger: "bg-red-solid",
-  accent: "bg-purple-solid",
-  ai: "bg-ai-ink"
-};
-function ToneBadge({
-  tone = "neutral",
-  icon,
-  children,
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      ...rest,
-      "data-slot": "tone-badge",
-      "data-tone": tone,
-      className: ui.cn(
-        "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
-        TONE_SURFACE[tone],
-        TONE_BORDER[tone],
-        className
-      ),
-      children: [
-        icon,
-        children
-      ]
-    }
-  );
-}
-function Dot({ tone = "neutral", label, className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      ...rest,
-      "data-slot": "dot",
-      "data-tone": tone,
-      role: label ? "img" : void 0,
-      "aria-label": label,
-      "aria-hidden": label ? void 0 : true,
-      className: ui.cn("inline-block size-2 shrink-0 rounded-full", TONE_DOT[tone], className)
-    }
-  );
-}
-
-exports.Dot = Dot;
-exports.TONE_BORDER = TONE_BORDER;
-exports.TONE_SURFACE = TONE_SURFACE;
-exports.ToneBadge = ToneBadge;
-//# sourceMappingURL=chunk-VFUWWH52.cjs.map
-//# sourceMappingURL=chunk-VFUWWH52.cjs.map

package/dist/chunk-VFUWWH52.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/tones.ts","../src/components/ToneBadge.tsx"],"names":["jsxs","cn","jsx"],"mappings":";;;;;;;;AAWO,IAAM,YAAA,GAAqC;AAAA,EAChD,OAAA,EAAS,2BAAA;AAAA,EACT,IAAA,EAAM,2BAAA;AAAA,EACN,OAAA,EAAS,6BAAA;AAAA,EACT,OAAA,EAAS,+BAAA;AAAA,EACT,MAAA,EAAQ,yBAAA;AAAA,EACR,MAAA,EAAQ,+BAAA;AAAA,EACR,EAAA,EAAI;AACN;AAGO,IAAM,WAAA,GAAoC;AAAA,EAC/C,OAAA,EAAS,oBAAA;AAAA,EACT,IAAA,EAAM,oBAAA;AAAA,EACN,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS,sBAAA;AAAA,EACT,MAAA,EAAQ,mBAAA;AAAA,EACR,MAAA,EAAQ,sBAAA;AAAA,EACR,EAAA,EAAI;AACN;AAGO,IAAM,QAAA,GAAiC;AAAA,EAC5C,OAAA,EAAS,cAAA;AAAA,EACT,IAAA,EAAM,eAAA;AAAA,EACN,OAAA,EAAS,gBAAA;AAAA,EACT,OAAA,EAAS,iBAAA;AAAA,EACT,MAAA,EAAQ,cAAA;AAAA,EACR,MAAA,EAAQ,iBAAA;AAAA,EACR,EAAA,EAAI;AACN,CAAA;AC3BO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA,GAAO,SAAA;AAAA,EACP,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,KAAA;AAAA,QACT,oFAAA;AAAA,QACA,aAAa,IAAI,CAAA;AAAA,QACjB,YAAY,IAAI,CAAA;AAAA,QAChB;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,GAAA,CAAI,EAAE,IAAA,GAAO,SAAA,EAAW,OAAO,SAAA,EAAW,GAAG,MAAK,EAAa;AAC7E,EAAA,uBACEC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,KAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,MACtB,YAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAa,QAAQ,MAAA,GAAY,IAAA;AAAA,MACjC,WAAWD,KAAA,CAAG,2CAAA,EAA6C,QAAA,CAAS,IAAI,GAAG,SAAS;AAAA;AAAA,GACtF;AAEJ","file":"chunk-VFUWWH52.cjs","sourcesContent":["/**\n * The ONE status/tone vocabulary of the blocks. `StatusPill`, `ToneBadge`, `Dot` and the plan,\n * connection and tag chips all read these maps, so a tone looks the same wherever it appears and\n * a new tone is added in one place. Every pair is a token pair checked by\n * `tokens.contrast.test.ts` (`--{hue}-text` on `--{hue}-bg`).\n */\n\n/** Semantic tones, mapped to the token palette (`--{hue}-bg|text|border`, `--ai-*`). */\nexport type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent' | 'ai'\n\n/** Background + text of a tinted chip. */\nexport const TONE_SURFACE: Record<Tone, string> = {\n  neutral: 'bg-gray-bg text-gray-text',\n  info: 'bg-blue-bg text-blue-text',\n  success: 'bg-green-bg text-green-text',\n  warning: 'bg-yellow-bg text-yellow-text',\n  danger: 'bg-red-bg text-red-text',\n  accent: 'bg-purple-bg text-purple-text',\n  ai: 'bg-ai-soft text-ai-ink',\n}\n\n/** Border of a tinted chip (the AI tint has none). */\nexport const TONE_BORDER: Record<Tone, string> = {\n  neutral: 'border-gray-border',\n  info: 'border-blue-border',\n  success: 'border-green-border',\n  warning: 'border-yellow-border',\n  danger: 'border-red-border',\n  accent: 'border-purple-border',\n  ai: 'border-transparent',\n}\n\n/** Solid fill of a status dot. */\nexport const TONE_DOT: Record<Tone, string> = {\n  neutral: 'bg-gray-text',\n  info: 'bg-blue-solid',\n  success: 'bg-green-solid',\n  warning: 'bg-yellow-solid',\n  danger: 'bg-red-solid',\n  accent: 'bg-purple-solid',\n  ai: 'bg-ai-ink',\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { TONE_BORDER, TONE_DOT, TONE_SURFACE, type Tone } from './tones'\n\nexport type { Tone }\n\nexport interface ToneBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  tone?: Tone\n  /** Leading glyph or dot. */\n  icon?: ReactNode\n  children: ReactNode\n}\n\n/** A small tinted label. The host decides the tone and the words (status, level, priority...). */\nexport function ToneBadge({\n  tone = 'neutral',\n  icon,\n  children,\n  className,\n  ...rest\n}: ToneBadgeProps) {\n  return (\n    <span\n      {...rest}\n      data-slot=\"tone-badge\"\n      data-tone={tone}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium',\n        TONE_SURFACE[tone],\n        TONE_BORDER[tone],\n        className\n      )}\n    >\n      {icon}\n      {children}\n    </span>\n  )\n}\n\nexport interface DotProps extends HTMLAttributes<HTMLSpanElement> {\n  tone?: Tone\n  /** Accessible name; without it the dot is decorative (`aria-hidden`). */\n  label?: string\n}\n\n/** A solid status dot in a tone. */\nexport function Dot({ tone = 'neutral', label, className, ...rest }: DotProps) {\n  return (\n    <span\n      {...rest}\n      data-slot=\"dot\"\n      data-tone={tone}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={cn('inline-block size-2 shrink-0 rounded-full', TONE_DOT[tone], className)}\n    />\n  )\n}\n"]}

package/dist/chunk-ZX2VPMBJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shell/FilterInput.tsx"],"names":[],"mappings":"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","file":"chunk-ZX2VPMBJ.js","sourcesContent":["/** Shared page filter with configurable searchable fields and optional quick-filter control. */\nimport type { ReactNode } from 'react'\nimport { X, Filter, SlidersHorizontal, Check } from 'lucide-react'\nimport {\n  Command,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { testIdOr } from '../chat/test-id'\n\nexport type FilterField = 'text' | 'labels'\n\nexport const DEFAULT_FILTER_FIELDS: { value: FilterField; label: string }[] = [\n  { value: 'text', label: 'Text' },\n  { value: 'labels', label: 'Labels' },\n]\n\nexport interface FilterInputLabels<Field extends string = FilterField> {\n  placeholder: string\n  clear: string\n  chooseFields: string\n  fieldsHeading: string\n  /** Display name per searchable field. */\n  fieldNames: Partial<Record<Field, string>>\n}\n\nexport const DEFAULT_FILTER_INPUT_LABELS: FilterInputLabels = {\n  placeholder: 'Filter...',\n  clear: 'Clear filter',\n  chooseFields: 'Choose fields to filter',\n  fieldsHeading: 'Filter fields',\n  fieldNames: { text: 'Text', labels: 'Labels' },\n}\n\nexport interface FilterInputTestIds<Field extends string = FilterField> {\n  root: string\n  quick: string\n  input: string\n  fieldsButton: string\n  field: (field: Field) => string\n}\n\nexport interface FilterInputProps<Field extends string = FilterField> {\n  fieldOptions?: { value: Field; label: string }[]\n  value: string\n  /** Lists with one searchable field need no field selector. */\n  hideFieldPicker?: boolean\n  ariaLabel?: string\n  onChange: (q: string) => void\n  /** Enter in the box (e.g. open the one match, or add what was typed). */\n  onSubmit?: (q: string) => void\n  fields: Field[]\n  onFieldsChange: (fields: Field[]) => void\n  /**\n   * The quick-filter dropdown trigger, embedded inside the input on the left\n   * (mirroring the Files search box). When absent, a static funnel icon shows.\n   */\n  filter?: ReactNode\n  /** Width classes for the box (default `w-44`). */\n  className?: string\n  /** No outline: a soft fill instead of the input border, for a header that is already ruled. */\n  borderless?: boolean\n  labels?: Partial<FilterInputLabels<Field>>\n  testIds?: Partial<FilterInputTestIds<Field>>\n}\n\nexport function FilterInput<Field extends string = FilterField>({\n  fieldOptions,\n  value,\n  hideFieldPicker = false,\n  ariaLabel,\n  onChange,\n  onSubmit,\n  fields,\n  onFieldsChange,\n  filter,\n  className,\n  borderless = false,\n  labels,\n  testIds,\n}: FilterInputProps<Field>) {\n  const l = { ...DEFAULT_FILTER_INPUT_LABELS, ...labels }\n  const options = fieldOptions ?? (DEFAULT_FILTER_FIELDS as { value: Field; label: string }[])\n  const toggleField = (field: Field) =>\n    onFieldsChange(fields.includes(field) ? fields.filter((f) => f !== field) : [...fields, field])\n\n  return (\n    <div\n      className={cn('flex min-w-0 items-center', className ?? 'w-44 pointer-coarse:w-56')}\n      data-testid={testIdOr(testIds?.root, { testId: 'facts-filter' })}\n    >\n      <div className=\"relative flex-1 min-w-0\">\n        {filter ? (\n          <div\n            className=\"absolute left-1 top-1/2 z-10 -translate-y-1/2\"\n            data-testid={testIdOr(testIds?.quick, { testId: 'facts-filter-quick' })}\n          >\n            {filter}\n          </div>\n        ) : (\n          <Filter className=\"pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n        )}\n        <Input\n          aria-label={ariaLabel}\n          value={value}\n          onChange={(e) => onChange(e.target.value)}\n          onKeyDown={\n            onSubmit\n              ? (e) => {\n                  if (e.key !== 'Enter') return\n                  e.preventDefault()\n                  onSubmit(value)\n                }\n              : undefined\n          }\n          placeholder={l.placeholder}\n          data-testid={testIdOr(testIds?.input, { testId: 'facts-filter-input' })}\n          className={cn(\n            'h-7 pr-12 text-sm shadow-none focus-visible:ring-0 pointer-coarse:h-11 pointer-coarse:pr-12',\n            // Touch: the 44px clear button only needs its room while there is text to clear, so\n            // an empty field keeps space for its placeholder on a phone.\n            value && 'pointer-coarse:pr-24',\n            borderless\n              ? 'border-transparent bg-muted/50 hover:bg-muted focus-visible:bg-muted'\n              : 'border-input bg-background',\n            filter ? 'pl-11' : 'pl-7',\n            hideFieldPicker && 'pr-7 pointer-coarse:pr-11'\n          )}\n        />\n        {value && (\n          <button\n            type=\"button\"\n            onClick={() => onChange('')}\n            aria-label={l.clear}\n            className={cn(\n              'absolute top-1/2 z-10 -translate-y-1/2 text-muted-foreground hover:text-foreground pointer-coarse:flex pointer-coarse:size-11 pointer-coarse:items-center pointer-coarse:justify-center',\n              hideFieldPicker\n                ? 'right-1.5 pointer-coarse:right-0'\n                : 'right-7 pointer-coarse:right-11'\n            )}\n          >\n            <X className=\"size-3\" />\n          </button>\n        )}\n        {/* Field picker — inside the input on the right, muted, exactly as the\n            Files search box renders it. */}\n        {!hideFieldPicker && (\n          <Popover>\n            <PopoverTrigger asChild>\n              <button\n                type=\"button\"\n                aria-label={l.chooseFields}\n                data-testid={testIdOr(testIds?.fieldsButton, {\n                  testId: 'facts-filter-fields-button',\n                })}\n                className=\"absolute right-1.5 top-1/2 z-10 -translate-y-1/2 !h-5 !w-5 !p-0 text-muted-foreground/60 transition-colors hover:text-foreground pointer-coarse:right-0 pointer-coarse:!flex pointer-coarse:!h-11 pointer-coarse:!w-11 pointer-coarse:items-center pointer-coarse:justify-center\"\n              >\n                <SlidersHorizontal className=\"size-3.5\" />\n              </button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-44 p-0\" align=\"end\" sideOffset={4}>\n              <Command shouldFilter={false}>\n                <CommandList>\n                  <CommandGroup heading={l.fieldsHeading}>\n                    {options.map((option) => {\n                      const isSelected = fields.includes(option.value)\n                      return (\n                        <CommandItem\n                          key={option.value}\n                          onSelect={() => toggleField(option.value)}\n                          className=\"cursor-pointer text-sm\"\n                          data-testid={testIdOr(testIds?.field?.(option.value), {\n                            testId: `facts-filter-field-${option.value}`,\n                          })}\n                        >\n                          <div\n                            className={cn(\n                              'mr-2 flex size-3.5 items-center justify-center rounded-sm border border-primary',\n                              isSelected\n                                ? 'bg-primary text-primary-foreground'\n                                : 'opacity-50 [&_svg]:invisible'\n                            )}\n                          >\n                            <Check className=\"size-3\" />\n                          </div>\n                          {labels?.fieldNames?.[option.value] ?? option.label}\n                        </CommandItem>\n                      )\n                    })}\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </PopoverContent>\n          </Popover>\n        )}\n      </div>\n    </div>\n  )\n}\n"]}