Segment Control (#5170)

* Segment

* Fix type errors

* Fix HUG

apps/web/pages/sandbox/form.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Label, Input, TextField } from "@calcom/ui/form/fields";
+import { Segment, SegmentOption } from "@calcom/ui/v2/core";
 
 import { sandboxPage } from ".";
 
@@ -14,6 +15,17 @@ const page = sandboxPage(() => (
     </div>
     <div>
       <TextField name="test-02" label="TextField" placeholder="it has an input baked in" />
+      {/* Adding to sandbox cause storybook doesnt like radix tailwind :S  */}
+      <div className="pt-4">
+        <Segment label="Test" value="Test">
+          <SegmentOption value="Test">One</SegmentOption>
+          <SegmentOption value="2">Two</SegmentOption>
+          <SegmentOption value="3">Three</SegmentOption>
+          <SegmentOption value="4" disabled>
+            Four
+          </SegmentOption>
+        </Segment>
+      </div>
     </div>
   </div>
 ));

packages/ui/v2/core/Segment.tsx

@@ -0,0 +1,36 @@
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import React from "react";
+
+import { Label } from "./form";
+
+type SegmentProps = {
+  label: string;
+  children: React.ReactNode;
+} & RadioGroup.RadioGroupProps;
+
+export function Segment({ label, children, ...rest }: SegmentProps) {
+  return (
+    <div>
+      <div className="inline-flex flex-col">
+        {label && <Label>{label}</Label>}
+        <RadioGroup.Root
+          className="flex space-x-1 rounded-md border-gray-200 bg-white p-[2px] text-sm font-medium leading-5 "
+          {...rest}>
+          {children}
+        </RadioGroup.Root>
+      </div>
+    </div>
+  );
+}
+
+type SegmentOptionProps = { value: string; children: React.ReactNode } & RadioGroup.RadioGroupItemProps;
+export function SegmentOption({ value, children, ...rest }: SegmentOptionProps) {
+  return (
+    <RadioGroup.Item
+      value={value}
+      className="radix-disabled:opacity-40 radix-state-checked:bg-gray-200 radix-state-checked:hover:bg-gray-200 rounded-[4px] py-[6px] px-3 hover:bg-gray-100"
+      {...rest}>
+      {children}
+    </RadioGroup.Item>
+  );
+}

packages/ui/v2/core/index.ts

@@ -31,4 +31,6 @@ export { default as HorizontalTabs, HorizontalTabItem } from "./navigation/tabs/
 export type { VerticalTabItemProps } from "./navigation/tabs/VerticalTabItem";
 export type { HorizontalTabItemProps } from "./navigation/tabs/HorizontalTabItem";
 export * from "./Portal";
+export * from "./Segment";
 export { default as SettingsToggle } from "./SettingsToggle";
+