diff --git a/apps/ui/public/r/p-switch-7.json b/apps/ui/public/r/p-switch-7.json
index 6fcbbe63e..7825b05d7 100644
--- a/apps/ui/public/r/p-switch-7.json
+++ b/apps/ui/public/r/p-switch-7.json
@@ -1,19 +1,37 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "p-switch-7",
-  "type": "registry:block",
-  "description": "Custom size switch",
+  "description": "Weekly availability editor with time range combobox pickers",
+  "dependencies": [
+    "lucide-react"
+  ],
   "registryDependencies": [
-    "@coss/switch"
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/select",
+    "@coss/switch",
+    "@coss/tooltip"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-switch-7.tsx",
-      "content": "import { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  return (\n    <Switch className=\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\" />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { CopyIcon, PlusIcon, SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { SelectButton } from \"@/registry/default/ui/select\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={<SelectButton className=\"w-27 tabular-nums\" size=\"sm\" />}\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => (\n                      <div className=\"flex items-center gap-2\" key={range.id}>\n                        <TimeCombobox\n                          ariaLabel={`${day} start time`}\n                          items={timeOptions}\n                          onChange={(start) =>\n                            updateStart(day, range.id, start)\n                          }\n                          value={range.start}\n                        />\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"text-muted-foreground\"\n                        >\n                          –\n                        </span>\n                        <TimeCombobox\n                          ariaLabel={`${day} end time`}\n                          items={timeOptions.slice(timeIndex(range.start) + 1)}\n                          onChange={(end) => updateEnd(day, range.id, end)}\n                          value={range.end}\n                        />\n                        <Tooltip disableHoverablePopup>\n                          <TooltipTrigger\n                            render={\n                              <Button\n                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                onClick={() => removeRange(day, range.id)}\n                                size=\"icon-sm\"\n                                variant=\"ghost\"\n                              />\n                            }\n                          >\n                            <XIcon aria-hidden=\"true\" />\n                          </TooltipTrigger>\n                          <TooltipPopup>Delete range</TooltipPopup>\n                        </Tooltip>\n                      </div>\n                    ))\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
   "categories": [
-    "switch"
-  ]
+    "switch",
+    "combobox",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
 }
\ No newline at end of file
diff --git a/apps/ui/public/r/p-switch-8.json b/apps/ui/public/r/p-switch-8.json
new file mode 100644
index 000000000..9464691bd
--- /dev/null
+++ b/apps/ui/public/r/p-switch-8.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-switch-8",
+  "description": "Weekly availability editor with grouped time range controls",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/switch",
+    "@coss/tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-switch-8.tsx",
+      "content": "\"use client\";\n\nimport {\n  ArrowRightIcon,\n  CopyIcon,\n  PlusIcon,\n  SearchIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={\n          <Button\n            className=\"w-24 font-normal tabular-nums\"\n            size=\"sm\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => (\n                      <div className=\"flex items-center gap-2\" key={range.id}>\n                        <Group aria-label={`${day} time range`}>\n                          <TimeCombobox\n                            ariaLabel={`${day} start time`}\n                            items={timeOptions}\n                            onChange={(start) =>\n                              updateStart(day, range.id, start)\n                            }\n                            value={range.start}\n                          />\n                          <GroupSeparator />\n                          <GroupText aria-hidden=\"true\" className=\"px-2\">\n                            <ArrowRightIcon className=\"size-3.5\" />\n                          </GroupText>\n                          <GroupSeparator />\n                          <TimeCombobox\n                            ariaLabel={`${day} end time`}\n                            items={timeOptions.slice(\n                              timeIndex(range.start) + 1,\n                            )}\n                            onChange={(end) => updateEnd(day, range.id, end)}\n                            value={range.end}\n                          />\n                        </Group>\n                        <Tooltip disableHoverablePopup>\n                          <TooltipTrigger\n                            render={\n                              <Button\n                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                onClick={() => removeRange(day, range.id)}\n                                size=\"icon-sm\"\n                                variant=\"ghost\"\n                              />\n                            }\n                          >\n                            <XIcon aria-hidden=\"true\" />\n                          </TooltipTrigger>\n                          <TooltipPopup>Delete range</TooltipPopup>\n                        </Tooltip>\n                      </div>\n                    ))\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
+  "categories": [
+    "switch",
+    "combobox",
+    "group",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-switch-9.json b/apps/ui/public/r/p-switch-9.json
new file mode 100644
index 000000000..bdd7a3f51
--- /dev/null
+++ b/apps/ui/public/r/p-switch-9.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-switch-9",
+  "description": "Weekly availability editor with From/To labeled time groups",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/switch",
+    "@coss/tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-switch-9.tsx",
+      "content": "\"use client\";\n\nimport { CopyIcon, PlusIcon, SearchIcon, XIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  id,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  id: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={\n          <Button\n            className=\"w-24 font-normal tabular-nums\"\n            id={id}\n            size=\"sm\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const id = useId();\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => {\n                      const startId = `${id}-start-${range.id}`;\n                      const endId = `${id}-end-${range.id}`;\n\n                      return (\n                        <div className=\"flex items-center gap-2\" key={range.id}>\n                          <Group aria-label={`${day} time range`}>\n                            <GroupText render={<Label htmlFor={startId} />}>\n                              From\n                            </GroupText>\n                            <GroupSeparator />\n                            <TimeCombobox\n                              ariaLabel={`${day} start time`}\n                              id={startId}\n                              items={timeOptions}\n                              onChange={(start) =>\n                                updateStart(day, range.id, start)\n                              }\n                              value={range.start}\n                            />\n                            <GroupSeparator />\n                            <GroupText render={<Label htmlFor={endId} />}>\n                              To\n                            </GroupText>\n                            <GroupSeparator />\n                            <TimeCombobox\n                              ariaLabel={`${day} end time`}\n                              id={endId}\n                              items={timeOptions.slice(\n                                timeIndex(range.start) + 1,\n                              )}\n                              onChange={(end) => updateEnd(day, range.id, end)}\n                              value={range.end}\n                            />\n                          </Group>\n                          <Tooltip disableHoverablePopup>\n                            <TooltipTrigger\n                              render={\n                                <Button\n                                  aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                  onClick={() => removeRange(day, range.id)}\n                                  size=\"icon-sm\"\n                                  variant=\"ghost\"\n                                />\n                              }\n                            >\n                              <XIcon aria-hidden=\"true\" />\n                            </TooltipTrigger>\n                            <TooltipPopup>Delete range</TooltipPopup>\n                          </Tooltip>\n                        </div>\n                      );\n                    })\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
+  "categories": [
+    "switch",
+    "combobox",
+    "group",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 217515665..77b71b589 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -9868,6 +9868,113 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with time range combobox pickers",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-7",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/select",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with grouped time range controls",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-8",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with From/To labeled time groups",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-9",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "table"
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 217515665..77b71b589 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -9868,6 +9868,113 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with time range combobox pickers",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-7",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/select",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with grouped time range controls",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-8",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with From/To labeled time groups",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-9",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "table"
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 1907fce55..da6834fcf 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -8557,6 +8557,60 @@ export const Index: Record<string, any> = {
     categories: ["switch"],
     meta: undefined,
   },
+  "p-switch-7": {
+    name: "p-switch-7",
+    description: "Weekly availability editor with time range combobox pickers",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/label","@coss/popover","@coss/select","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-7.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-7.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
+  "p-switch-8": {
+    name: "p-switch-8",
+    description: "Weekly availability editor with grouped time range controls",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/group","@coss/label","@coss/popover","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-8.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-8.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","group","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
+  "p-switch-9": {
+    name: "p-switch-9",
+    description: "Weekly availability editor with From/To labeled time groups",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/group","@coss/label","@coss/popover","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-9.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-9.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","group","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
   "p-table-1": {
     name: "p-table-1",
     description: "Basic table",
diff --git a/apps/ui/registry/default/particles/p-switch-7.tsx b/apps/ui/registry/default/particles/p-switch-7.tsx
new file mode 100644
index 000000000..9e13362ea
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-7.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { CopyIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { SelectButton } from "@/registry/default/ui/select";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={<SelectButton className="w-27 tabular-nums" size="sm" />}
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => (
+                      <div className="flex items-center gap-2" key={range.id}>
+                        <TimeCombobox
+                          ariaLabel={`${day} start time`}
+                          items={timeOptions}
+                          onChange={(start) =>
+                            updateStart(day, range.id, start)
+                          }
+                          value={range.start}
+                        />
+                        <span
+                          aria-hidden="true"
+                          className="text-muted-foreground"
+                        >
+                          –
+                        </span>
+                        <TimeCombobox
+                          ariaLabel={`${day} end time`}
+                          items={timeOptions.slice(timeIndex(range.start) + 1)}
+                          onChange={(end) => updateEnd(day, range.id, end)}
+                          value={range.end}
+                        />
+                        <Tooltip disableHoverablePopup>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                onClick={() => removeRange(day, range.id)}
+                                size="icon-sm"
+                                variant="ghost"
+                              />
+                            }
+                          >
+                            <XIcon aria-hidden="true" />
+                          </TooltipTrigger>
+                          <TooltipPopup>Delete range</TooltipPopup>
+                        </Tooltip>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-switch-8.tsx b/apps/ui/registry/default/particles/p-switch-8.tsx
new file mode 100644
index 000000000..90f64aa62
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-8.tsx
@@ -0,0 +1,397 @@
+"use client";
+
+import {
+  ArrowRightIcon,
+  CopyIcon,
+  PlusIcon,
+  SearchIcon,
+  XIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={
+          <Button
+            className="w-24 font-normal tabular-nums"
+            size="sm"
+            variant="outline"
+          />
+        }
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => (
+                      <div className="flex items-center gap-2" key={range.id}>
+                        <Group aria-label={`${day} time range`}>
+                          <TimeCombobox
+                            ariaLabel={`${day} start time`}
+                            items={timeOptions}
+                            onChange={(start) =>
+                              updateStart(day, range.id, start)
+                            }
+                            value={range.start}
+                          />
+                          <GroupSeparator />
+                          <GroupText aria-hidden="true" className="px-2">
+                            <ArrowRightIcon className="size-3.5" />
+                          </GroupText>
+                          <GroupSeparator />
+                          <TimeCombobox
+                            ariaLabel={`${day} end time`}
+                            items={timeOptions.slice(
+                              timeIndex(range.start) + 1,
+                            )}
+                            onChange={(end) => updateEnd(day, range.id, end)}
+                            value={range.end}
+                          />
+                        </Group>
+                        <Tooltip disableHoverablePopup>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                onClick={() => removeRange(day, range.id)}
+                                size="icon-sm"
+                                variant="ghost"
+                              />
+                            }
+                          >
+                            <XIcon aria-hidden="true" />
+                          </TooltipTrigger>
+                          <TooltipPopup>Delete range</TooltipPopup>
+                        </Tooltip>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-switch-9.tsx b/apps/ui/registry/default/particles/p-switch-9.tsx
new file mode 100644
index 000000000..08c8ba745
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-9.tsx
@@ -0,0 +1,406 @@
+"use client";
+
+import { CopyIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react";
+import { useId, useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  id,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  id: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={
+          <Button
+            className="w-24 font-normal tabular-nums"
+            id={id}
+            size="sm"
+            variant="outline"
+          />
+        }
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const id = useId();
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => {
+                      const startId = `${id}-start-${range.id}`;
+                      const endId = `${id}-end-${range.id}`;
+
+                      return (
+                        <div className="flex items-center gap-2" key={range.id}>
+                          <Group aria-label={`${day} time range`}>
+                            <GroupText render={<Label htmlFor={startId} />}>
+                              From
+                            </GroupText>
+                            <GroupSeparator />
+                            <TimeCombobox
+                              ariaLabel={`${day} start time`}
+                              id={startId}
+                              items={timeOptions}
+                              onChange={(start) =>
+                                updateStart(day, range.id, start)
+                              }
+                              value={range.start}
+                            />
+                            <GroupSeparator />
+                            <GroupText render={<Label htmlFor={endId} />}>
+                              To
+                            </GroupText>
+                            <GroupSeparator />
+                            <TimeCombobox
+                              ariaLabel={`${day} end time`}
+                              id={endId}
+                              items={timeOptions.slice(
+                                timeIndex(range.start) + 1,
+                              )}
+                              onChange={(end) => updateEnd(day, range.id, end)}
+                              value={range.end}
+                            />
+                          </Group>
+                          <Tooltip disableHoverablePopup>
+                            <TooltipTrigger
+                              render={
+                                <Button
+                                  aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                  onClick={() => removeRange(day, range.id)}
+                                  size="icon-sm"
+                                  variant="ghost"
+                                />
+                              }
+                            >
+                              <XIcon aria-hidden="true" />
+                            </TooltipTrigger>
+                            <TooltipPopup>Delete range</TooltipPopup>
+                          </Tooltip>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 5f6afd02e..ae3a44deb 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -4802,6 +4802,78 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/switch"],
     type: "registry:block",
   },
+  {
+    categories: categories("switch", "combobox", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with time range combobox pickers",
+    files: [{ path: "particles/p-switch-7.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-7",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/select",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("switch", "combobox", "group", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with grouped time range controls",
+    files: [{ path: "particles/p-switch-8.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-8",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("switch", "combobox", "group", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with From/To labeled time groups",
+    files: [{ path: "particles/p-switch-9.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-9",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("table"),
     description: "Basic table",