feat(ui): add Segment component with types and update component index

Author: Ohh-889

packages/ui/src/components/segment/Segment.tsx

@@ -0,0 +1,66 @@
+import type { Root } from '@radix-ui/react-tabs';
+import { forwardRef } from 'react';
+
+import SegmentList from '../tabs/TabsList';
+import SegmentRoot from '../tabs/TabsRoot';
+import SegmentTrigger from '../tabs/TabsTrigger';
+
+import type { SegmentOptionData, SegmentProps } from './types';
+
+const Segment = forwardRef<React.ComponentRef<typeof Root>, SegmentProps<SegmentOptionData>>((props, ref) => {
+  const {
+    className,
+    classNames,
+    dir,
+    enableIndicator = true,
+    items,
+    loop,
+    orientation = 'horizontal',
+    size,
+    value,
+    ...rest
+  } = props;
+
+  return (
+    <SegmentRoot
+      className={[className, classNames?.root]}
+      dir={dir}
+      ref={ref}
+      size={size}
+      value={value}
+      {...rest}
+    >
+      <SegmentList
+        className={classNames?.list}
+        dir={dir}
+        enableIndicator={enableIndicator}
+        loop={loop}
+        orientation={orientation}
+        size={size}
+        value={value}
+        classNames={{
+          indicator: classNames?.indicator,
+          indicatorRoot: classNames?.indicatorRoot
+        }}
+      >
+        {items.map(item => (
+          <SegmentTrigger
+            className={classNames?.trigger}
+            dir={dir}
+            disabled={item.disabled}
+            enableIndicator={enableIndicator}
+            key={item.value}
+            size={size}
+            value={item.value}
+          >
+            {item.label}
+          </SegmentTrigger>
+        ))}
+      </SegmentList>
+    </SegmentRoot>
+  );
+});
+
+Segment.displayName = 'Segment';
+
+export default Segment;

packages/ui/src/components/segment/index.ts

@@ -0,0 +1,3 @@
+export { default as Segment } from './Segment';
+
+export type { SegmentOptionData, SegmentProps } from './types';

packages/ui/src/components/segment/types.ts

@@ -0,0 +1,7 @@
+import type { TabsOptionData, TabsProps } from '../tabs/types';
+
+export type SegmentOptionData = Omit<TabsOptionData, 'children'>;
+
+export type SegmentProps<T extends SegmentOptionData> = Omit<TabsProps<TabsOptionData>, 'items'> & {
+  items: T[];
+};

packages/ui/src/components/tabs/TabsRoot.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 import { tabsVariants } from './tabs-variants';
 import type { TabsRootProps } from './types';
 
-const TabRoot = forwardRef<React.ElementRef<typeof Root>, TabsRootProps>((props, ref) => {
+const TabRoot = forwardRef<React.ComponentRef<typeof Root>, TabsRootProps>((props, ref) => {
   const { className, fill, orientation, size, ...rest } = props;
 
   const { root } = tabsVariants({ fill, orientation, size });

packages/ui/src/components/tabs/TabsTrigger.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 import { tabsVariants } from './tabs-variants';
 import type { TabsTriggerProps } from './types';
 
-const TabsTrigger = forwardRef<React.ElementRef<typeof Trigger>, TabsTriggerProps>((props, ref) => {
+const TabsTrigger = forwardRef<React.ComponentRef<typeof Trigger>, TabsTriggerProps>((props, ref) => {
   const { className, enableIndicator = true, size, ...rest } = props;
 
   const { trigger } = tabsVariants({ enableIndicator, size });

packages/ui/src/index.ts

@@ -62,6 +62,8 @@ export * from './components/resizable';
 
 export * from './components/scroll-area';
 
+export * from './components/segment';
+
 export * from './components/select';
 
 export * from './components/sheet';