feat: add segment preset

Author: mu29

packages/react/src/preset/Segment/Segment.module.css

@@ -0,0 +1,35 @@
+.frame {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 4px;
+  border: 1px solid var(--composify-palette-outline);
+  background-color: var(--composify-palette-surface-container-low);
+}
+
+.item {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 8px;
+  background-color: transparent;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 4px;
+  border: none;
+  outline: none;
+  color: var(--composify-palette-on-surface-variant);
+}
+
+.item--active {
+  background-color: var(--composify-palette-secondary);
+  color: var(--composify-palette-on-secondary);
+}
+
+.item > * {
+  height: 16px;
+}

packages/react/src/preset/Segment/Segment.tsx

@@ -0,0 +1,7 @@
+import { compoundComponents } from '../../utils';
+import { SegmentFrame } from './SegmentFrame';
+import { SegmentItem } from './SegmentItem';
+
+export const Segment = compoundComponents(SegmentFrame, {
+  Item: SegmentItem,
+});

packages/react/src/preset/Segment/SegmentFrame.tsx

@@ -0,0 +1,50 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type PropsWithChildren,
+  type ReactElement,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { createVariants } from '../../utils';
+import styles from './Segment.module.css';
+import type { Props as SegmentItemProps } from './SegmentItem';
+
+type Props<Value> = PropsWithChildren<{
+  className?: string;
+  value: Value;
+  onChange: (value: Value) => void;
+}>;
+
+const variants = createVariants(styles);
+
+export const SegmentFrame = <Value,>({ className, children, onChange, ...props }: Props<Value>) => {
+  const validChildren = useMemo(
+    () =>
+      Children.toArray(children).filter((child) => isValidElement(child)) as ReactElement<
+        SegmentItemProps<Value>
+      >[],
+    [children],
+  );
+
+  const options = useMemo(
+    () => validChildren.map(({ props }) => ({ ...props })) ?? [],
+    [validChildren],
+  );
+
+  const [value, setValue] = useState(options[0]?.value);
+
+  useEffect(() => {
+    onChange?.(value);
+  }, [value, onChange]);
+
+  return (
+    <div className={variants('frame', { className })} {...props}>
+      {validChildren.map((child) =>
+        cloneElement(child, { active: child.props.value === value, onChange: setValue }),
+      )}
+    </div>
+  );
+};

packages/react/src/preset/Segment/SegmentItem.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren } from 'react';
+import { createVariants } from '../../utils';
+import styles from './Segment.module.css';
+
+export type Props<Value> = PropsWithChildren<{
+  className?: string;
+  active?: boolean;
+  value: Value;
+  onChange?: (value: Value) => void;
+}>;
+
+const variants = createVariants(styles);
+
+export const SegmentItem = <Value,>({
+  className,
+  active,
+  value,
+  onChange,
+  ...props
+}: Props<Value>) => (
+  <button
+    className={variants('item', { className, active })}
+    onClick={() => onChange?.(value)}
+    {...props}
+  />
+);

packages/react/src/preset/Segment/index.ts

@@ -0,0 +1 @@
+export { Segment } from './Segment';

packages/react/src/preset/index.ts

@@ -1 +1,2 @@
 export { Button } from './Button';
+export { Segment } from './Segment';

packages/react/src/utils/compoundComponents/compoundComponents.ts

@@ -0,0 +1,9 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: To accept any component */
+import type { ComponentType } from 'react';
+
+export function compoundComponents<
+  Parent extends ComponentType<any>,
+  Children extends Record<string, ComponentType<any>>,
+>(ParentComponent: Parent, children: Children): Parent & Children {
+  return Object.assign(ParentComponent, children) as Parent & Children;
+}

packages/react/src/utils/compoundComponents/index.ts

@@ -0,0 +1 @@
+export { compoundComponents } from './compoundComponents';

packages/react/src/utils/index.ts

@@ -1,3 +1,4 @@
 export { Bridge, GuestEventType, HostEventType } from './Bridge';
+export { compoundComponents } from './compoundComponents';
 export { createVariants } from './createVariants';
 export { getClassNameFactory } from './getClassNameFactory';