@arbidocs/blocks 0.3.185 → 0.4.1

package/dist/chunk-LGBAZD37.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/home/CollapsibleSection.tsx","../src/home/KeyValueRow.tsx"],"names":["jsx","cn","jsxs"],"mappings":"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","file":"chunk-LGBAZD37.js","sourcesContent":["import type { ReactNode } from 'react'\nimport { ChevronRight } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\n/** Fixed strings of the section header. */\nexport interface CollapsibleSectionLabels {\n  /** The chevron button's name (only with `onHeaderClick`). */\n  collapseSection: string\n  expandSection: string\n}\n\nexport const DEFAULT_COLLAPSIBLE_SECTION_LABELS: CollapsibleSectionLabels = {\n  collapseSection: 'Collapse section',\n  expandSection: 'Expand section',\n}\n\nexport interface CollapsibleSectionProps {\n  /** The section's heading. A node, so callers can add badges or tooltips. */\n  title: ReactNode\n  /** Leading glyph before the title. */\n  icon?: ReactNode\n  isExpanded: boolean\n  onToggle: () => void\n  children: ReactNode\n  /** Count badge beside the title. When 0 the section cannot expand (unless `expandWhenEmpty`). */\n  count?: number\n  /** The count badge is filled (a filter is active). */\n  hasActiveFilters?: boolean\n  expandWhenEmpty?: boolean\n  /** Class for the body wrapper. */\n  childrenClassName?: string\n  headerClassName?: string\n  className?: string\n  /** Trailing header content. */\n  rightContent?: ReactNode\n  /** When false the section is always open: no chevron, a plain header. */\n  collapsible?: boolean\n  /**\n   * When set, the whole header is one click target firing this (e.g. open a\n   * detail panel) and the chevron becomes its own separate toggle.\n   */\n  onHeaderClick?: () => void\n  labels?: Partial<CollapsibleSectionLabels>\n}\n\n/**\n * A section with a chevron toggle, title, optional count and body. The header\n * is a `role=\"button\"` div (not a native button) because `title`/`rightContent`\n * may hold interactive nodes such as tooltip triggers; a button inside a button\n * is invalid HTML.\n */\nexport function CollapsibleSection({\n  title,\n  icon,\n  isExpanded,\n  onToggle,\n  children,\n  count,\n  hasActiveFilters = false,\n  expandWhenEmpty = false,\n  childrenClassName,\n  headerClassName,\n  className,\n  rightContent,\n  collapsible = true,\n  onHeaderClick,\n  labels,\n}: CollapsibleSectionProps) {\n  const l = { ...DEFAULT_COLLAPSIBLE_SECTION_LABELS, ...labels }\n  const hasCount = count !== undefined\n  const shouldBeExpanded = !collapsible\n    ? true\n    : hasCount\n      ? count > 0\n        ? isExpanded\n        : expandWhenEmpty && isExpanded\n      : isExpanded\n  const hasContent = hasCount ? count > 0 || expandWhenEmpty : true\n\n  const chevron = (\n    <ChevronRight\n      className={cn('size-4 shrink-0 transition-transform', shouldBeExpanded && 'rotate-90')}\n    />\n  )\n  const titleBlock = (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      {icon}\n      {typeof title === 'string'\n        ? title && <span className=\"whitespace-nowrap\">{title}</span>\n        : title}\n      {hasCount && (\n        <span\n          className={cn(\n            'ml-1 text-xs tabular-nums',\n            hasActiveFilters\n              ? 'rounded-full bg-primary px-1.5 font-medium text-primary-foreground'\n              : 'font-normal text-muted-foreground'\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </div>\n  )\n\n  return (\n    <div className={cn('w-full', className)} data-slot=\"collapsible-section\">\n      {onHeaderClick ? (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={onHeaderClick}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onHeaderClick()\n            }\n          }}\n          className={cn(\n            'mb-4 flex cursor-pointer items-center justify-between gap-2 font-semibold pointer-coarse:min-h-11 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n            headerClassName\n          )}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left\">\n            <button\n              type=\"button\"\n              aria-expanded={shouldBeExpanded}\n              aria-label={shouldBeExpanded ? l.collapseSection : l.expandSection}\n              disabled={!hasContent}\n              onClick={(e) => {\n                e.stopPropagation()\n                if (hasContent) onToggle()\n              }}\n              className=\"-ml-0.5 shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 pointer-coarse:p-3.5\"\n            >\n              {chevron}\n            </button>\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : !collapsible ? (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left font-medium\">{titleBlock}</div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div\n            role=\"button\"\n            tabIndex={hasContent ? 0 : -1}\n            aria-expanded={shouldBeExpanded}\n            aria-disabled={!hasContent}\n            onClick={hasContent ? onToggle : undefined}\n            onKeyDown={\n              hasContent\n                ? (e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      onToggle()\n                    }\n                  }\n                : undefined\n            }\n            className={cn(\n              'touch-hit flex min-w-0 items-center gap-2 rounded-md text-left font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n              hasContent\n                ? 'cursor-pointer hover:text-muted-foreground'\n                : 'cursor-default opacity-60'\n            )}\n          >\n            {chevron}\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      )}\n      {shouldBeExpanded && (\n        <div className={childrenClassName ?? 'mb-8 flex flex-wrap justify-start gap-6'}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ArrowDownFromLine, ArrowUpFromLine, GripVertical } from 'lucide-react'\nimport { Tooltip, TooltipContent, TooltipTrigger, cn } from '@arbidocs/react/ui'\n\n/** Fixed strings of the row controls. */\nexport interface KeyValueRowLabels {\n  hideField: string\n  showField: string\n  dragToReorder: string\n}\n\nexport const DEFAULT_KEY_VALUE_ROW_LABELS: KeyValueRowLabels = {\n  hideField: 'Hide this field',\n  showField: 'Show this field',\n  dragToReorder: 'Drag to reorder',\n}\n\nexport interface KeyValueRowProps {\n  /** Label text; also the accessible name when `labelSlot` replaces it visually. */\n  label: string\n  /** Glyph before the label. */\n  icon?: ReactNode\n  /** Id of the control in the value: renders the label as a real `<label for>`. */\n  htmlFor?: string\n  /** Replaces the icon + label (e.g. a tag pill that is itself the label). */\n  labelSlot?: ReactNode\n  /** The value, on the right (or below the label when the container is narrow). */\n  children: ReactNode\n  className?: string\n  'data-testid'?: string\n  /** Enables drag reordering; requires a parent `DndContext` + `SortableContext`. */\n  sortableId?: string\n  /** Shows a \"hide this field\" control on the label line. */\n  onHide?: () => void\n  /** Shows a \"show this field\" control (for hidden rows, rendered dimmed). */\n  onShow?: () => void\n  labels?: Partial<KeyValueRowLabels>\n}\n\n/**\n * Wrap rows in this to switch on container-query responsiveness: a row stacks\n * its label above its value in a narrow container and goes side by side when\n * wider, by the container's width and not the viewport's.\n */\nexport function KeyValueContainer({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return <div className={cn('@container', className)}>{children}</div>\n}\n\n/** Small square control, sized to sit on the label line (44px on touch). */\nfunction RowControlButton({\n  onClick,\n  label,\n  icon,\n}: {\n  onClick: () => void\n  label: string\n  icon: ReactNode\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-label={label}\n          className=\"flex size-5 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11\"\n        >\n          {icon}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\">\n        <p>{label}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\ninterface RowBodyProps {\n  grip: ReactNode\n  icon?: ReactNode\n  htmlFor?: string\n  labelSlot?: ReactNode\n  label: string\n  children: ReactNode\n  onHide?: () => void\n  onShow?: () => void\n  labels: KeyValueRowLabels\n}\n\n/**\n * The shared row body: a label line (grip + hide/show + icon/label) beside the\n * value. Controls sit on the label's line so they align with the label even\n * when the value is a tall multi-line field.\n */\nfunction RowBody({\n  grip,\n  icon,\n  htmlFor,\n  labelSlot,\n  label,\n  children,\n  onHide,\n  onShow,\n  labels,\n}: RowBodyProps) {\n  const LabelText = htmlFor ? 'label' : 'span'\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1 py-1.5 @[400px]:flex-row @[400px]:items-start @[400px]:gap-4\">\n      <div\n        className=\"flex w-full shrink-0 items-center gap-1 @[400px]:w-44 @[400px]:pt-2\"\n        data-slot=\"key-value-label\"\n      >\n        {grip}\n        {onHide && (\n          <RowControlButton\n            onClick={onHide}\n            label={labels.hideField}\n            icon={<ArrowDownFromLine className=\"size-3.5\" />}\n          />\n        )}\n        {onShow && (\n          <RowControlButton\n            onClick={onShow}\n            label={labels.showField}\n            icon={<ArrowUpFromLine className=\"size-3.5 text-primary\" />}\n          />\n        )}\n        {labelSlot ?? (\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon && (\n              <span className=\"inline-flex shrink-0 items-center justify-center text-muted-foreground/60\">\n                {icon}\n              </span>\n            )}\n            <LabelText\n              {...(htmlFor ? { htmlFor } : null)}\n              className=\"truncate text-sm font-medium text-muted-foreground\"\n            >\n              {label}\n            </LabelText>\n          </span>\n        )}\n      </div>\n      <div className=\"min-w-0 flex-1\" data-slot=\"key-value-value\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nconst ROW_CLASS =\n  'group flex items-start rounded-md pl-1 pr-1.5 transition-colors hover:bg-muted/50'\n\ntype SortableRowProps = Omit<KeyValueRowProps, 'data-testid' | 'labels'> & {\n  labels: KeyValueRowLabels\n  sortableId: string\n  testId?: string\n}\n\nfunction SortableKeyValueRow({\n  sortableId,\n  label,\n  icon,\n  htmlFor,\n  labelSlot,\n  children,\n  className,\n  testId,\n  onHide,\n  onShow,\n  labels,\n}: SortableRowProps) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: sortableId,\n  })\n\n  const grip = (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={labels.dragToReorder}\n          className=\"flex size-5 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing pointer-coarse:size-11\"\n          {...attributes}\n          {...listeners}\n        >\n          <GripVertical className=\"size-3.5\" />\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\">\n        <p>{labels.dragToReorder}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n        opacity: isDragging ? 0 : 1,\n      }}\n      className={cn(ROW_CLASS, className)}\n      data-slot=\"key-value-row\"\n      data-testid={testId}\n    >\n      <RowBody\n        grip={grip}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        label={label}\n        onHide={onHide}\n        onShow={onShow}\n        labels={labels}\n      >\n        {children}\n      </RowBody>\n    </div>\n  )\n}\n\n/**\n * A label/value row for forms, settings and detail views. Optionally sortable\n * (drag handle) and hideable (hide/show controls), all visible without hover.\n */\nexport function KeyValueRow({\n  label,\n  icon,\n  htmlFor,\n  labelSlot,\n  children,\n  className,\n  'data-testid': testId,\n  sortableId,\n  onHide,\n  onShow,\n  labels,\n}: KeyValueRowProps) {\n  const mergedLabels = { ...DEFAULT_KEY_VALUE_ROW_LABELS, ...labels }\n  if (sortableId) {\n    return (\n      <SortableKeyValueRow\n        sortableId={sortableId}\n        label={label}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        className={className}\n        testId={testId}\n        onHide={onHide}\n        onShow={onShow}\n        labels={mergedLabels}\n      >\n        {children}\n      </SortableKeyValueRow>\n    )\n  }\n\n  return (\n    <div\n      className={cn(ROW_CLASS, onShow && 'opacity-60', className)}\n      data-slot=\"key-value-row\"\n      data-testid={testId}\n    >\n      <RowBody\n        grip={null}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        label={label}\n        onShow={onShow}\n        labels={mergedLabels}\n      >\n        {children}\n      </RowBody>\n    </div>\n  )\n}\n"]}