feat: add component toggle-group

Author: Ohh-889

packages/ui/package.json

@@ -45,6 +45,7 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "1.1.12",
     "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@soybean-react-ui/tailwind-plugin": "workspace:*",
     "clsx": "2.1.1",

packages/ui/src/components/toggle-group/ToggleGroup.tsx

@@ -0,0 +1,34 @@
+import { isFunction } from '@/lib/typed';
+
+import ToggleGroupItem from './ToggleGroupItem';
+import ToggleGroupRoot from './ToggleGroupRoot';
+import type { ToggleGroupProps } from './types';
+
+const ToggleGroup = (props: ToggleGroupProps) => {
+  const { className, classNames, itemRender, items, size, variant, ...rest } = props;
+
+  return (
+    <ToggleGroupRoot
+      {...rest}
+      className={[classNames?.groupRoot, className]}
+      size={size}
+    >
+      {items.map(item => {
+        const { label, ...restItem } = item;
+
+        return (
+          <ToggleGroupItem
+            key={item.value}
+            size={size}
+            variant={variant}
+            {...restItem}
+          >
+            {isFunction(itemRender) ? itemRender(item) : label}
+          </ToggleGroupItem>
+        );
+      })}
+    </ToggleGroupRoot>
+  );
+};
+
+export default ToggleGroup;

packages/ui/src/components/toggle-group/ToggleGroupItem.tsx

@@ -0,0 +1,27 @@
+import { Item } from '@radix-ui/react-toggle-group';
+
+import { cn } from '@/lib/utils';
+
+import { toggleVariants } from '../toggle/toggle-variants';
+
+import type { ToggleGroupItemProps } from './types';
+
+const ToggleGroupItem = (props: ToggleGroupItemProps) => {
+  const { className, size, variant, ...rest } = props;
+
+  const { toggle } = toggleVariants({ size, variant });
+
+  const mergedCls = cn(toggle(), className);
+
+  return (
+    <Item
+      className={mergedCls}
+      data-size={size}
+      data-slot="toggle-group-item"
+      data-variant={variant}
+      {...rest}
+    />
+  );
+};
+
+export default ToggleGroupItem;

packages/ui/src/components/toggle-group/ToggleGroupRoot.tsx

@@ -0,0 +1,26 @@
+import { Root } from '@radix-ui/react-toggle-group';
+
+import { cn } from '@/lib/utils';
+
+import { toggleVariants } from '../toggle/toggle-variants';
+
+import type { ToggleGroupRootProps } from './types';
+
+const ToggleGroupRoot = (props: ToggleGroupRootProps) => {
+  const { className, size, ...rest } = props;
+
+  const { groupRoot } = toggleVariants({ size });
+
+  const mergedCls = cn(groupRoot(), className);
+
+  return (
+    <Root
+      data-size={size}
+      data-slot="toggle-group"
+      {...rest}
+      className={mergedCls}
+    />
+  );
+};
+
+export default ToggleGroupRoot;

packages/ui/src/components/toggle-group/index.ts

@@ -0,0 +1,5 @@
+export { default as ToggleGroup } from './ToggleGroup';
+export { default as ToggleGroupItem } from './ToggleGroupItem';
+export { default as ToggleGroupRoot } from './ToggleGroupRoot';
+
+export * from './types';

packages/ui/src/components/toggle-group/types.ts

@@ -0,0 +1,31 @@
+import type {
+  // eslint-disable-next-line sort/import-members
+  ToggleGroupMultipleProps,
+  ToggleGroupSingleProps,
+  ToggleGroupItemProps as _ToggleGroupItemProps
+} from '@radix-ui/react-toggle-group';
+import type { ReactNode } from 'react';
+
+import type { BaseNodeProps, ClassValue } from '@/types/other';
+
+import type { ToggleProps } from '../toggle';
+import type { ToggleSlots } from '../toggle/toggle-variants';
+
+export type ToggleGroupRootProps = BaseNodeProps<ToggleGroupMultipleProps> | BaseNodeProps<ToggleGroupSingleProps>;
+
+export type ToggleGroupItemProps = BaseNodeProps<_ToggleGroupItemProps> & {
+  variant?: ToggleProps['variant'];
+};
+
+export type ToggleGroupClassNames = Partial<Record<ToggleSlots, ClassValue>>;
+
+export type ToggleGroupItemData = Omit<ToggleGroupItemProps, 'children'> & {
+  label: ReactNode;
+};
+
+export type ToggleGroupProps<T extends ToggleGroupItemData = ToggleGroupItemData> = ToggleGroupRootProps & {
+  classNames?: ToggleGroupClassNames;
+  itemRender?: (item: T) => ReactNode;
+  items: T[];
+  variant?: ToggleProps['variant'];
+};

packages/ui/src/index.ts

@@ -64,6 +64,8 @@ export * from './components/tabs';
 
 export * from './components/toggle';
 
+export * from './components/toggle-group';
+
 export * from './components/tooltip';
 
 export * from './lib';

playground/src/app/(demo)/toggle-group/modules/ToggleGroupMulti.tsx

@@ -0,0 +1,22 @@
+import { Card, Label, ToggleGroup } from 'soybean-react-ui';
+
+import { items } from './shared';
+
+const ToggleGroupMulti = () => {
+  return (
+    <Card
+      split
+      title="Multi"
+    >
+      <ToggleGroup
+        items={items}
+        type="multiple"
+        itemRender={item => {
+          return <Label>{item.label}</Label>;
+        }}
+      />
+    </Card>
+  );
+};
+
+export default ToggleGroupMulti;

playground/src/app/(demo)/toggle-group/modules/ToggleGroupSingle.tsx

@@ -0,0 +1,19 @@
+import { Card, ToggleGroup } from 'soybean-react-ui';
+
+import { items } from './shared';
+
+const ToggleGroupSingle = () => {
+  return (
+    <Card
+      split
+      title="Single"
+    >
+      <ToggleGroup
+        items={items}
+        type="single"
+      />
+    </Card>
+  );
+};
+
+export default ToggleGroupSingle;

playground/src/app/(demo)/toggle-group/modules/shared.ts

@@ -0,0 +1,15 @@
+import type { ToggleGroupProps } from 'soybean-react-ui';
+
+export const items: ToggleGroupProps['items'] = [
+  { disabled: false, label: 'Top', value: 'top' },
+  { disabled: false, label: 'Right', value: 'right' },
+  { disabled: false, label: 'Bottom', value: 'bottom' },
+  { disabled: false, label: 'Left', value: 'left' }
+];
+
+export const items2: ToggleGroupProps['items'] = [
+  { disabled: false, label: 'Top', value: 'top' },
+  { disabled: true, label: 'Right', value: 'right' },
+  { disabled: false, label: 'Bottom', value: 'bottom' },
+  { disabled: false, label: 'Left', value: 'left' }
+];