@hanzogui/toggle-group 2.0.0

package/src/ToggleGroup.tsx

@@ -0,0 +1,355 @@
+import { isWeb } from '@hanzogui/constants'
+import { registerFocusable } from '@hanzogui/focusable'
+import { withStaticProperties } from '@hanzogui/helpers'
+import { RovingFocusGroup } from '@hanzogui/roving-focus'
+import { useControllableState } from '@hanzogui/use-controllable-state'
+import { useDirection } from '@hanzogui/use-direction'
+import type { GetProps, GuiElement } from '@hanzogui/web'
+import { createStyledContext, styled, View } from '@hanzogui/web'
+import React from 'react'
+
+import type { ToggleProps } from './Toggle'
+import { Toggle, ToggleFrame } from './Toggle'
+import { context as ToggleContext } from './context'
+
+const TOGGLE_GROUP_NAME = 'ToggleGroup'
+const TOGGLE_GROUP_ITEM_NAME = 'ToggleGroupItem'
+const TOGGLE_GROUP_CONTEXT = 'ToggleGroup'
+
+/* -------------------------------------------------------------------------------------------------
+ * ToggleGroupItem
+ * -----------------------------------------------------------------------------------------------*/
+
+type ToggleGroupItemContextValue = { disabled?: boolean }
+
+const { Provider: ToggleGroupItemProvider } =
+  createStyledContext<ToggleGroupItemContextValue>()
+
+const { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } =
+  createStyledContext<ToggleGroupContextValue>({})
+
+type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
+  value: string
+  id?: string
+  disabled?: boolean
+}
+
+const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>(
+  (props, forwardedRef) => {
+    const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
+    const context = useToggleGroupContext(props.__scopeToggleGroup)
+    const toggleContext = ToggleContext.useStyledContext(props.__scopeToggleGroup)
+    const active = valueContext?.value.includes(props.value)
+    const color = (props as any).color || toggleContext.color
+    const disabled = context.disabled || props.disabled || false
+
+    const inner = (
+      <ToggleGroupItemImpl
+        ref={forwardedRef}
+        tabIndex={disabled ? -1 : 0}
+        {...(props as any)}
+        active={active}
+        disabled={disabled}
+      />
+    )
+
+    return (
+      <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>
+        <ToggleContext.Provider color={color} active={active}>
+          {context.rovingFocus ? (
+            <RovingFocusGroup.Item
+              asChild="except-style"
+              __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
+              focusable={!disabled}
+              active={active}
+            >
+              {inner}
+            </RovingFocusGroup.Item>
+          ) : (
+            inner
+          )}
+        </ToggleContext.Provider>
+      </ToggleGroupItemProvider>
+    )
+  }
+)
+ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME
+
+/* -----------------------------------------------------------------------------------------------*/
+
+type ToggleGroupItemImplProps = Omit<ToggleProps, 'defaultActive' | 'onActiveChange'> & {
+  value: string
+}
+
+const ToggleGroupItemImpl = React.forwardRef<
+  GuiElement,
+  ScopedProps<ToggleGroupItemImplProps>
+>((props, forwardedRef) => {
+  const { __scopeToggleGroup, value, ...itemProps } = props
+  const valueContext = useToggleGroupValueContext(__scopeToggleGroup)
+  const singleProps = { 'aria-pressed': undefined }
+  const typeProps = valueContext.type === 'single' ? singleProps : undefined
+
+  return (
+    <Toggle
+      {...typeProps}
+      {...itemProps}
+      ref={forwardedRef}
+      onActiveChange={(pressed) => {
+        if (pressed) {
+          valueContext.onItemActivate(value)
+        } else {
+          valueContext.onItemDeactivate(value)
+        }
+      }}
+    />
+  )
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * ToggleGroup
+ * -----------------------------------------------------------------------------------------------*/
+
+type ScopedProps<P> = P & { __scopeToggleGroup?: string }
+
+interface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {
+  type: 'single'
+}
+
+interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
+  type: 'multiple'
+}
+
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps
+
+const ToggleGroup = withStaticProperties(
+  React.forwardRef<GuiElement, ScopedProps<ToggleGroupProps>>(
+    (props, forwardedRef) => {
+      const { type, ...toggleGroupProps } = props
+
+      if (!isWeb) {
+        React.useEffect(() => {
+          if (!props.id) return
+          return registerFocusable(props.id, {
+            focus: () => {},
+          })
+        }, [props.id])
+      }
+
+      if (type === 'single') {
+        const singleProps = toggleGroupProps as ToggleGroupImplSingleProps
+        return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />
+      }
+
+      if (type === 'multiple') {
+        const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps
+        return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />
+      }
+
+      throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``)
+    }
+  ),
+  {
+    Item: ToggleGroupItem,
+  }
+)
+
+ToggleGroup.displayName = TOGGLE_GROUP_NAME
+
+/* -----------------------------------------------------------------------------------------------*/
+
+type ToggleGroupValueContextValue = {
+  type: 'single' | 'multiple'
+  defaultValue?: string | string[]
+  value: string[]
+  onItemActivate(value: string): void
+  onItemDeactivate(value: string): void
+}
+
+const {
+  Provider: ToggleGroupValueProvider,
+  useStyledContext: useToggleGroupValueContext,
+} = createStyledContext<ToggleGroupValueContextValue>()
+
+interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
+  /** The controlled stateful value of the item that is pressed. */
+  value?: string
+  /** The value of the item that is pressed when initially rendered. */
+  defaultValue?: string
+  /** The callback that fires when the value of the toggle group changes. */
+  onValueChange?(value: string): void
+  /** Won't let the user turn the active item off. */
+  disableDeactivation?: boolean
+}
+
+const ToggleGroupImplSingle = React.forwardRef<
+  GuiElement,
+  ScopedProps<ToggleGroupImplSingleProps>
+>((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {},
+    disableDeactivation = false,
+    children,
+    ...toggleGroupSingleProps
+  } = props
+
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue!,
+    onChange: onValueChange,
+  })
+
+  return (
+    <ToggleGroupValueProvider
+      scope={props.__scopeToggleGroup}
+      type="single"
+      value={value ? [value] : []}
+      defaultValue={value}
+      onItemActivate={setValue}
+      onItemDeactivate={React.useCallback(
+        () => (disableDeactivation ? null : setValue('')),
+        [setValue, disableDeactivation]
+      )}
+    >
+      <ToggleGroupImpl {...toggleGroupSingleProps} ref={forwardedRef}>
+        {children}
+      </ToggleGroupImpl>
+    </ToggleGroupValueProvider>
+  )
+})
+
+interface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {
+  /** The controlled stateful value of the items that are pressed. */
+  value?: string[]
+  /** The value of the items that are pressed when initially rendered. */
+  defaultValue?: string[]
+  /** The callback that fires when the state of the toggle group changes. */
+  onValueChange?(value: string[]): void
+  disableDeactivation?: never
+}
+
+const ToggleGroupImplMultiple = React.forwardRef<
+  GuiElement,
+  ToggleGroupImplMultipleProps
+>((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {},
+    disableDeactivation,
+    children,
+    ...toggleGroupMultipleProps
+  } = props
+
+  const [value = [], setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue!,
+    onChange: onValueChange,
+  })
+
+  const handleButtonActivate = React.useCallback(
+    (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),
+    [setValue]
+  )
+
+  const handleButtonDeactivate = React.useCallback(
+    (itemValue: string) =>
+      setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),
+    [setValue]
+  )
+
+  return (
+    <ToggleGroupValueProvider
+      scope={props.__scopeToggleGroup}
+      type="multiple"
+      value={value}
+      defaultValue={value}
+      onItemActivate={handleButtonActivate}
+      onItemDeactivate={handleButtonDeactivate}
+    >
+      <ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef}>
+        {children}
+      </ToggleGroupImpl>
+    </ToggleGroupValueProvider>
+  )
+})
+
+/* -----------------------------------------------------------------------------------------------*/
+
+type ToggleGroupContextValue = {
+  rovingFocus?: boolean
+  disabled?: boolean
+}
+
+type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>
+
+const ToggleGroupFrame = styled(View, {
+  name: TOGGLE_GROUP_NAME,
+})
+
+type ToggleGroupImplProps = GetProps<typeof ToggleGroupFrame> & {
+  orientation?: 'horizontal' | 'vertical'
+  rovingFocus?: boolean
+  dir?: RovingFocusGroupProps['dir']
+  loop?: RovingFocusGroupProps['loop']
+  color?: string
+}
+
+const ToggleGroupImpl = ToggleGroupFrame.styleable<GuiElement, ToggleGroupImplProps>(
+  (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {
+    const {
+      __scopeToggleGroup,
+      disabled = false,
+      orientation = 'horizontal',
+      dir,
+      rovingFocus = true,
+      loop = true,
+      color,
+      ...toggleGroupProps
+    } = props
+    const direction = useDirection(dir)
+
+    const content = (
+      <ToggleGroupFrame
+        role="group"
+        ref={forwardedRef}
+        data-disabled={disabled ? '' : undefined}
+        {...toggleGroupProps}
+      />
+    )
+
+    return (
+      <ToggleGroupContext
+        scope={__scopeToggleGroup}
+        rovingFocus={rovingFocus}
+        disabled={disabled}
+      >
+        <ToggleContext.Provider color={color}>
+          {rovingFocus ? (
+            <RovingFocusGroup
+              asChild="except-style"
+              __scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
+              orientation={orientation}
+              dir={direction}
+              loop={loop}
+            >
+              {content}
+            </RovingFocusGroup>
+          ) : (
+            content
+          )}
+        </ToggleContext.Provider>
+      </ToggleGroupContext>
+    )
+  }
+)
+
+export { ToggleGroup }
+export type {
+  ToggleGroupItemProps,
+  ToggleGroupMultipleProps,
+  ToggleGroupProps,
+  ToggleGroupSingleProps,
+}

package/src/context.tsx

@@ -0,0 +1,10 @@
+import { createStyledContext } from '@hanzogui/web'
+
+export const context = createStyledContext({
+  color: '',
+  active: false,
+})
+
+export const useToggleGroupItem = () => {
+  return context.useStyledContext()
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './ToggleGroup'
+export { useToggleGroupItem } from './context'

package/src/types.tsx

@@ -0,0 +1,3 @@
+import type { ViewStyle } from '@hanzogui/web'
+
+export type ToggleStylesBase = ViewStyle & { color?: string }

package/types/Toggle.d.ts

@@ -0,0 +1,74 @@
+import type { GetProps, GuiElement, ViewStyle } from '@gui/web';
+import * as React from 'react';
+export declare const ToggleFrame: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}, {
+    unstyled?: boolean | undefined;
+    size?: number | import("@gui/web").SizeTokens | undefined;
+    defaultActiveStyle?: boolean | undefined;
+}, {
+    accept: {
+        readonly activeStyle: "style";
+    };
+}>;
+type ToggleFrameProps = GetProps<typeof ToggleFrame>;
+type ToggleItemExtraProps = {
+    orientation?: 'horizontal' | 'vertical';
+    defaultValue?: string;
+    disabled?: boolean;
+    active?: boolean;
+    defaultActive?: boolean;
+    onActiveChange?(active: boolean): void;
+    activeStyle?: ViewStyle | null;
+    activeTheme?: string | null;
+};
+export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@gui/web").StackNonStyleProps, "unstyled" | keyof import("@gui/web").StackStyleBase | "size" | "activeStyle" | "defaultActiveStyle"> & import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}> & {
+    unstyled?: boolean | undefined;
+    size?: number | import("@gui/web").SizeTokens | undefined;
+    defaultActiveStyle?: boolean | undefined;
+} & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}>> & import("@gui/web").WithPseudoProps<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}> & {
+    unstyled?: boolean | undefined;
+    size?: number | import("@gui/web").SizeTokens | undefined;
+    defaultActiveStyle?: boolean | undefined;
+} & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}>>> & import("@gui/web").WithMediaProps<import("@gui/web").WithThemeShorthandsAndPseudos<import("@gui/web").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}, {
+    unstyled?: boolean | undefined;
+    size?: number | import("@gui/web").SizeTokens | undefined;
+    defaultActiveStyle?: boolean | undefined;
+}>> & ToggleItemExtraProps & React.RefAttributes<GuiElement>>;
+export {};
+//# sourceMappingURL=Toggle.d.ts.map

package/types/ToggleGroup.d.ts

@@ -0,0 +1,189 @@
+import { RovingFocusGroup } from '@gui/roving-focus';
+import type { GetProps, GuiElement } from '@gui/web';
+import React from 'react';
+import { ToggleFrame } from './Toggle';
+type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
+    value: string;
+    id?: string;
+    disabled?: boolean;
+};
+type ScopedProps<P> = P & {
+    __scopeToggleGroup?: string;
+};
+interface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {
+    type: 'single';
+}
+interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
+    type: 'multiple';
+}
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+declare const ToggleGroup: React.ForwardRefExoticComponent<ScopedProps<ToggleGroupProps> & React.RefAttributes<GuiElement>> & {
+    Item: import("@gui/web").GuiComponent<Omit<import("@gui/web").GetFinalProps<import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }, {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    }>, "theme" | "debug" | "style" | `$${string}` | `$${number}` | import("@gui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | "render" | "hitSlop" | "children" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "disabled" | "className" | "themeShallow" | "unstyled" | "id" | "group" | "untilMeasured" | "componentName" | "tabIndex" | "role" | "disableOptimization" | "forceStyle" | "disableClassName" | "animatedBy" | "onFocus" | "onBlur" | "onPointerCancel" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | keyof import("@gui/web").StackStyleBase | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onClick" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onChange" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "size" | "activeStyle" | "value" | "defaultActiveStyle" | keyof import("@gui/web").WithPseudoProps<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }> & {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    } & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }>>> | "__scopeToggleGroup"> & Omit<import("@gui/web").StackNonStyleProps, "unstyled" | keyof import("@gui/web").StackStyleBase | "size" | "activeStyle" | "defaultActiveStyle"> & import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }> & {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    } & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }>> & import("@gui/web").WithPseudoProps<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }> & {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    } & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }>>> & import("@gui/web").WithMediaProps<import("@gui/web").WithThemeShorthandsAndPseudos<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }, {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    }>> & {
+        value: string;
+        id?: string;
+        disabled?: boolean;
+    } & {
+        __scopeToggleGroup?: string;
+    }, GuiElement, import("@gui/web").StackNonStyleProps & Omit<import("@gui/web").StackNonStyleProps, "unstyled" | keyof import("@gui/web").StackStyleBase | "size" | "activeStyle" | "defaultActiveStyle"> & import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }> & {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    } & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }>> & import("@gui/web").WithPseudoProps<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }> & {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    } & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }>>> & import("@gui/web").WithMediaProps<import("@gui/web").WithThemeShorthandsAndPseudos<import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }, {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    }>> & {
+        value: string;
+        id?: string;
+        disabled?: boolean;
+    } & {
+        __scopeToggleGroup?: string;
+    }, import("@gui/web").StackStyleBase & {
+        readonly activeStyle?: Partial<import("@gui/web").InferStyleProps<import("@gui/web").GuiComponent<import("@gui/web").ViewProps, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, {}>, {
+            accept: {
+                readonly activeStyle: "style";
+            };
+        }>> | undefined;
+    }, {
+        unstyled?: boolean | undefined;
+        size?: number | import("@gui/web").SizeTokens | undefined;
+        defaultActiveStyle?: boolean | undefined;
+    }, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>;
+};
+interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
+    /** The controlled stateful value of the item that is pressed. */
+    value?: string;
+    /** The value of the item that is pressed when initially rendered. */
+    defaultValue?: string;
+    /** The callback that fires when the value of the toggle group changes. */
+    onValueChange?(value: string): void;
+    /** Won't let the user turn the active item off. */
+    disableDeactivation?: boolean;
+}
+interface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {
+    /** The controlled stateful value of the items that are pressed. */
+    value?: string[];
+    /** The value of the items that are pressed when initially rendered. */
+    defaultValue?: string[];
+    /** The callback that fires when the state of the toggle group changes. */
+    onValueChange?(value: string[]): void;
+    disableDeactivation?: never;
+}
+type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>;
+declare const ToggleGroupFrame: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, GuiElement, import("@gui/web").StackNonStyleProps, import("@gui/web").StackStyleBase, {}, import("@gui/web").StaticConfigPublic>;
+type ToggleGroupImplProps = GetProps<typeof ToggleGroupFrame> & {
+    orientation?: 'horizontal' | 'vertical';
+    rovingFocus?: boolean;
+    dir?: RovingFocusGroupProps['dir'];
+    loop?: RovingFocusGroupProps['loop'];
+    color?: string;
+};
+export { ToggleGroup };
+export type { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupProps, ToggleGroupSingleProps, };
+//# sourceMappingURL=ToggleGroup.d.ts.map

package/types/context.d.ts

@@ -0,0 +1,9 @@
+export declare const context: import("@gui/web").StyledContext<{
+    color: string;
+    active: boolean;
+}>;
+export declare const useToggleGroupItem: () => {
+    color: string;
+    active: boolean;
+};
+//# sourceMappingURL=context.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ToggleGroup';
+export { useToggleGroupItem } from './context';
+//# sourceMappingURL=index.d.ts.map

package/types/types.d.ts

@@ -0,0 +1,5 @@
+import type { ViewStyle } from '@gui/web';
+export type ToggleStylesBase = ViewStyle & {
+    color?: string;
+};
+//# sourceMappingURL=types.d.ts.map