{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"html-css-segmented-button-group","type":"registry:component","title":"HTML CSS Segmented Button Group","description":"","dependencies":[],"files":[{"path":"components/we-inc/html-css-segmented-button-group.tsx","type":"registry:component","content":"import { useState } from \"react\";\n\n// Joined buttons where one option is on: a view switcher with icons and a date range picker.\nconst views = [\n  { id: \"list\", label: \"List\", d: \"M3 5h14v2H3zm0 4h14v2H3zm0 4h14v2H3z\" },\n  { id: \"board\", label: \"Board\", d: \"M3 4h4v12H3zm5 0h4v8H8zm5 0h4v10h-4z\" },\n  { id: \"calendar\", label: \"Calendar\", d: \"M6 2h2v2h4V2h2v2h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2zm10 7H4v7h12z\" },\n];\nconst ranges = [\"Day\", \"Week\", \"Month\", \"Quarter\"];\n\nconst seg = \"inline-flex min-h-[40px] items-center gap-2 px-4 text-sm font-medium transition-colors focus-visible:relative focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 motion-reduce:transition-none\";\n\nexport default function HtmlCssSegmentedButtonGroup() {\n  const [view, setView] = useState(\"board\");\n  const [range, setRange] = useState(\"Week\");\n  return (\n    <section className=\"bg-white px-5 py-14\">\n      <div className=\"mx-auto flex max-w-2xl flex-col gap-8\">\n        <div>\n          <h2 className=\"text-lg font-semibold text-slate-900\">Sprint 14 tasks</h2>\n          <p className=\"text-sm text-slate-600\">Showing the {view} view for this {range.toLowerCase()}.</p>\n        </div>\n        <div className=\"flex flex-wrap items-center gap-x-6 gap-y-4\">\n          <div role=\"group\" aria-label=\"Task view\" className=\"inline-flex divide-x divide-slate-300 overflow-hidden rounded-lg border border-slate-300\">\n            {views.map((v) => (\n              <button key={v.id} type=\"button\" aria-pressed={view === v.id} onClick={() => setView(v.id)}\n                className={`${seg} ${view === v.id ? \"bg-slate-900 text-white\" : \"bg-white text-slate-700 hover:bg-slate-50\"}`}>\n                <svg viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" className=\"fill-current\"><path d={v.d} /></svg>\n                {v.label}\n              </button>\n            ))}\n          </div>\n          <div role=\"group\" aria-label=\"Date range\" className=\"inline-flex rounded-full bg-slate-100 p-1\">\n            {ranges.map((r) => (\n              <button key={r} type=\"button\" aria-pressed={range === r} onClick={() => setRange(r)}\n                className={`${seg} min-h-[36px] rounded-full px-3.5 ${range === r ? \"bg-white text-slate-900 shadow-sm\" : \"text-slate-600 hover:text-slate-900\"}`}>\n                {r}\n              </button>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"}]}