{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-filtering",
  "type": "registry:component",
  "title": "Filtering controls",
  "description": "The field a data surface narrows its rows from",
  "author": "sudo-kw <https://github.com/sudo-kw>",
  "dependencies": [
    "@gpuix/native@0.11.0",
    "@gpuix/react@0.11.0",
    "effect@4.1.2"
  ],
  "registryDependencies": [
    "https://gpuixui.sudokw.com/gpuix-primitives.json",
    "https://gpuixui.sudokw.com/gpuix-tokens.json"
  ],
  "files": [
    {
      "path": "packages/data/src/filter/field.tsx",
      "target": "@ui/gpuixui/data/filter/field.tsx",
      "type": "registry:component",
      "content": "/** @jsxImportSource @gpuix/react */\nimport { Input } from \"../../primitives/index.js\";\nimport { spaceValue, spokenText, visibleCopy } from \"../../primitives/core/index.js\";\nimport * as Option from \"effect/Option\";\nimport { useTheme } from \"../theme.js\";\n\nexport interface TableFilterFieldProps {\n  readonly value: string;\n\n  readonly onValueChange: (next: string) => void;\n\n  readonly label?: string;\n\n  readonly placeholder?: string;\n\n  readonly width?: number;\n  readonly testId?: string;\n}\n\nexport const DEFAULT_FILTER_LABEL = \"Filter rows\";\n\nexport const DEFAULT_FILTER_PLACEHOLDER = \"Filter…\";\n\nexport const TableFilterField = ({\n  value,\n  onValueChange,\n  label,\n  placeholder,\n  width,\n  testId,\n}: TableFilterFieldProps) => {\n  const theme = useTheme();\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        alignItems: \"center\",\n        gap: spaceValue(theme, \"sm\"),\n        ...(width === undefined ? {} : { width }),\n      }}\n    >\n      <Input\n        label={spokenText(Option.fromNullishOr(label), DEFAULT_FILTER_LABEL)}\n        placeholder={visibleCopy(placeholder) ?? DEFAULT_FILTER_PLACEHOLDER}\n        value={value}\n        onValueChange={onValueChange}\n        size=\"sm\"\n        fullWidth\n        testId={testId}\n      />\n    </div>\n  );\n};\n"
    },
    {
      "path": "packages/data/src/theme.ts",
      "target": "@ui/gpuixui/data/theme.ts",
      "type": "registry:lib",
      "content": "import type { Theme } from \"../tokens/index.js\";\nimport { useTheme as useTokenTheme } from \"../tokens/react.js\";\n\nexport {\n  controlFocusRing,\n  dividerOn,\n  pointerWash,\n  textStyle,\n  themeColors,\n} from \"../tokens/index.js\";\nexport type { Theme };\n\nexport const useTheme = (): Theme => useTokenTheme();\n"
    }
  ],
  "docs": "[Filtering controls](https://gpuixui.sudokw.com/data-display/table-filtering) — These are GPUix native components: the files render through GPUix's reconciler against `@gpuix/react`, not the DOM, and need the per-platform `@gpuix/native` binding. The CLI installs the `@gpuixui/*` runtime the components import as registry items, so the copied tree resolves on its own; wrap it in `ThemeProvider` before it renders.",
  "meta": {
    "url": "/data-display/table-filtering",
    "kind": "component",
    "runtime": "gpuix",
    "registry": "gpuixui"
  }
}