@hanzogui/checkbox 2.0.0

package/src/Checkbox.tsx

@@ -0,0 +1,122 @@
+// fork of radix
+// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx
+
+import { getVariableValue, styled } from '@hanzogui/core'
+import { getSize } from '@hanzogui/get-token'
+import { YStack } from '@hanzogui/stacks'
+
+import { CheckboxStyledContext } from './CheckboxStyledContext'
+
+/* -------------------------------------------------------------------------------------------------
+ * CheckboxIndicator
+ * -----------------------------------------------------------------------------------------------*/
+const INDICATOR_NAME = 'CheckboxIndicator'
+
+export const CheckboxIndicatorFrame = styled(
+  YStack,
+  {
+    // use Checkbox for easier themes
+    name: INDICATOR_NAME,
+    context: CheckboxStyledContext,
+    variants: {
+      unstyled: {
+        false: {},
+      },
+    } as const,
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    },
+  },
+  {
+    accept: {
+      activeStyle: 'style',
+    } as const,
+  }
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Checkbox
+ * -----------------------------------------------------------------------------------------------*/
+
+const CHECKBOX_NAME = 'Checkbox'
+
+export const CheckboxFrame = styled(
+  YStack,
+  {
+    name: CHECKBOX_NAME,
+    render: 'button',
+
+    context: CheckboxStyledContext,
+    variants: {
+      unstyled: {
+        false: {
+          size: '$true',
+          backgroundColor: '$background',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderWidth: 1,
+          borderColor: '$borderColor',
+
+          hoverStyle: {
+            borderColor: '$borderColorHover',
+          },
+
+          pressStyle: {
+            backgroundColor: '$backgroundPress',
+            borderColor: '$borderColorPress',
+          },
+
+          focusStyle: {
+            borderColor: '$borderColorFocus',
+          },
+
+          focusVisibleStyle: {
+            outlineStyle: 'solid',
+            outlineWidth: 2,
+            outlineColor: '$outlineColor',
+          },
+        },
+      },
+
+      disabled: {
+        true: {
+          pointerEvents: 'none',
+          userSelect: 'none',
+          cursor: 'not-allowed',
+
+          hoverStyle: {
+            borderColor: '$borderColor',
+            backgroundColor: '$background',
+          },
+
+          pressStyle: {
+            borderColor: '$borderColor',
+            backgroundColor: '$background',
+          },
+
+          focusStyle: {
+            outlineWidth: 0,
+          },
+        },
+      },
+
+      size: {
+        '...size': (val) => {
+          const radiusToken = getVariableValue(getSize(val)) / 8
+          return {
+            borderRadius: radiusToken,
+          }
+        },
+      },
+    } as const,
+
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    },
+  },
+  {
+    accept: {
+      activeStyle: 'style',
+    } as const,
+  }
+)

package/src/CheckboxStyledContext.tsx

@@ -0,0 +1,16 @@
+import type { SizeTokens } from '@hanzogui/core'
+import { createStyledContext } from '@hanzogui/core'
+
+export const CheckboxStyledContext = createStyledContext<{
+  size: SizeTokens
+  scaleIcon: number
+  unstyled?: boolean
+  active?: boolean
+  disabled?: boolean
+}>({
+  size: '$true' as SizeTokens,
+  scaleIcon: 1,
+  unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  active: false,
+  disabled: false,
+})

package/src/createCheckbox.tsx

@@ -0,0 +1,280 @@
+import type {
+  CheckedState,
+  CheckboxExtraProps as HeadlessCheckboxExtraProps,
+} from '@hanzogui/checkbox-headless'
+import { isIndeterminate, useCheckbox } from '@hanzogui/checkbox-headless'
+import type { GetProps, NativeValue, SizeTokens, ViewProps } from '@hanzogui/core'
+import {
+  getVariableValue,
+  isWeb,
+  shouldRenderNativePlatform,
+  useProps,
+  useTheme,
+  withStaticProperties,
+} from '@hanzogui/core'
+import { registerFocusable } from '@hanzogui/focusable'
+import { getFontSize } from '@hanzogui/font-size'
+import { getSize } from '@hanzogui/get-token'
+import { useGetThemedIcon } from '@hanzogui/helpers'
+import { useControllableState } from '@hanzogui/use-controllable-state'
+import React, { useMemo } from 'react'
+
+import { CheckboxFrame, CheckboxIndicatorFrame } from './Checkbox'
+import { CheckboxStyledContext } from './CheckboxStyledContext'
+
+type CheckboxExpectingVariantProps = {
+  size?: SizeTokens
+  unstyled?: boolean
+}
+
+type CheckboxExtraProps = HeadlessCheckboxExtraProps & {
+  scaleIcon?: number
+  scaleSize?: number
+  sizeAdjust?: number
+  native?: NativeValue<'web'>
+}
+type CheckboxBaseProps = ViewProps
+
+type DefaultCheckboxFrame = typeof CheckboxFrame
+type DefaultIndicatorFrame = typeof CheckboxIndicatorFrame
+
+type CheckboxFrameActiveStyleProps = {
+  activeStyle?: GetProps<DefaultCheckboxFrame>
+  activeTheme?: string | null
+}
+
+type CheckboxIndicatorActiveStyleProps = {
+  activeStyle?: GetProps<DefaultIndicatorFrame>
+}
+
+export type CheckboxProps = CheckboxBaseProps &
+  CheckboxExtraProps &
+  CheckboxExpectingVariantProps &
+  CheckboxFrameActiveStyleProps
+
+// loose types for createCheckbox generics - actual components have stricter types
+type CheckboxComponent = (props: any) => React.ReactNode
+type CheckboxIndicatorComponent = (props: any) => React.ReactNode
+
+type CheckboxIndicatorBaseProps = ViewProps
+type CheckboxIndicatorExtraProps = {
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with React animation libraries.
+   */
+  forceMount?: boolean
+  /**
+   * Used to disable passing styles down to children.
+   */
+  disablePassStyles?: boolean
+}
+
+export type CheckboxIndicatorProps = CheckboxIndicatorBaseProps &
+  CheckboxIndicatorExtraProps &
+  CheckboxIndicatorActiveStyleProps
+
+export const CheckboxContext = React.createContext<{
+  checked: CheckedState
+  disabled?: boolean
+}>({
+  checked: false,
+  disabled: false,
+})
+
+const ensureContext = (x: any) => {
+  if (!x.context) {
+    x.context = CheckboxContext
+  }
+}
+
+export function createCheckbox<
+  F extends CheckboxComponent,
+  T extends CheckboxIndicatorComponent,
+>(createProps: { Frame?: F; Indicator?: T }) {
+  const { Frame = CheckboxFrame, Indicator = CheckboxIndicatorFrame } =
+    createProps as any as {
+      Frame: typeof CheckboxFrame
+      Indicator: typeof CheckboxIndicatorFrame
+    }
+
+  ensureContext(Frame)
+  ensureContext(Indicator)
+
+  const FrameComponent = Frame.styleable<CheckboxProps>(
+    function Checkbox(_props, forwardedRef) {
+      const {
+        scaleSize = 0.45,
+        sizeAdjust = 0,
+        scaleIcon,
+        checked: checkedProp,
+        defaultChecked,
+        onCheckedChange,
+        native,
+        unstyled = false,
+        activeStyle,
+        activeTheme,
+        ...props
+      } = _props
+      const propsActive = useProps(props)
+
+      const styledContext = React.useContext(CheckboxStyledContext.context)
+      let adjustedSize = 0
+      let size = 0
+      if (!unstyled) {
+        adjustedSize = getVariableValue(
+          getSize(propsActive.size ?? styledContext?.size ?? '$true', {
+            shift: sizeAdjust,
+          })
+        ) as number
+        size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize
+      }
+
+      const [checked = false, setChecked] = useControllableState({
+        prop: checkedProp,
+        defaultProp: defaultChecked!,
+        onChange: onCheckedChange,
+      })
+
+      const { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(
+        // @ts-ignore
+        propsActive,
+        [checked, setChecked],
+        forwardedRef
+      )
+
+      if (process.env.HANZO_GUI_TARGET === 'native') {
+        React.useEffect(() => {
+          if (!props.id) return
+          if (props.disabled) return
+
+          return registerFocusable(props.id, {
+            focusAndSelect: () => {
+              setChecked?.((value) => !value)
+            },
+            focus: () => {},
+          })
+        }, [props.id, props.disabled])
+      }
+
+      const renderNative = shouldRenderNativePlatform(native)
+      if (renderNative === 'web') {
+        return (
+          <input
+            type="checkbox"
+            defaultChecked={isIndeterminate(checked) ? false : checked}
+            tabIndex={-1}
+            ref={checkboxRef as any}
+            disabled={checkboxProps.disabled}
+            style={{
+              appearance: 'auto',
+              accentColor: 'var(--color6)',
+              ...(checkboxProps.style as any),
+            }}
+          />
+        )
+      }
+
+      const memoizedContext = useMemo(
+        () => ({
+          checked,
+          disabled: checkboxProps.disabled,
+        }),
+        [checked, checkboxProps.disabled]
+      )
+
+      const isActive = !!checked
+      const disabled = checkboxProps.disabled
+
+      return (
+        <CheckboxContext.Provider value={memoizedContext}>
+          <CheckboxStyledContext.Provider
+            size={propsActive.size ?? styledContext?.size ?? '$true'}
+            scaleIcon={scaleIcon ?? styledContext?.scaleIcon ?? 1}
+            unstyled={unstyled}
+            active={isActive}
+            disabled={disabled}
+          >
+            <Frame
+              render="button"
+              ref={checkboxRef}
+              unstyled={unstyled}
+              theme={activeTheme ?? null}
+              {...(isWeb && { type: 'button' })}
+              {...(!unstyled && {
+                width: size,
+                height: size,
+                size,
+              })}
+              checked={checked}
+              disabled={disabled}
+              {...(checkboxProps as CheckboxProps)}
+              {...props}
+              {...(isActive && {
+                ...(!unstyled &&
+                  !activeStyle && {
+                    backgroundColor: '$backgroundActive',
+                  }),
+                ...activeStyle,
+              })}
+            >
+              {propsActive.children}
+            </Frame>
+            {bubbleInput}
+          </CheckboxStyledContext.Provider>
+        </CheckboxContext.Provider>
+      )
+    }
+  )
+
+  const IndicatorComponent = Indicator.styleable<CheckboxIndicatorProps>(
+    (props, forwardedRef) => {
+      const {
+        children: childrenProp,
+        forceMount,
+        disablePassStyles,
+        unstyled = false,
+        activeStyle,
+        ...indicatorProps
+      } = props
+      const styledContext = CheckboxStyledContext.useStyledContext()
+      const { active } = styledContext
+      let children = childrenProp
+
+      if (!unstyled) {
+        const iconSize =
+          (typeof styledContext.size === 'number'
+            ? styledContext.size * 0.65
+            : getFontSize(styledContext.size as any)) * styledContext.scaleIcon
+        const theme = useTheme()
+        const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })
+
+        const childrens = React.Children.toArray(childrenProp)
+        children = childrens.map((child) => {
+          if (disablePassStyles || !React.isValidElement(child)) {
+            return child
+          }
+          return getThemedIcon(child)
+        })
+      }
+
+      const context = React.useContext(CheckboxContext)
+      if (forceMount || isIndeterminate(context.checked) || context.checked === true)
+        return (
+          <Indicator
+            pointerEvents="none"
+            {...indicatorProps}
+            {...(active && activeStyle)}
+            ref={forwardedRef}
+          >
+            {children}
+          </Indicator>
+        )
+
+      return null
+    }
+  )
+
+  return withStaticProperties(FrameComponent, {
+    Indicator: IndicatorComponent,
+  })
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+import { CheckboxFrame, CheckboxIndicatorFrame } from './Checkbox'
+import { createCheckbox } from './createCheckbox'
+
+export * from './createCheckbox'
+export * from './Checkbox'
+export * from './CheckboxStyledContext'
+export type { CheckedState } from '@hanzogui/checkbox-headless'
+
+export const Checkbox = createCheckbox({
+  Frame: CheckboxFrame,
+  Indicator: CheckboxIndicatorFrame,
+})

package/types/Checkbox.d.ts

@@ -0,0 +1,39 @@
+export declare const CheckboxIndicatorFrame: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/core").InferStyleProps<import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+        elevation?: number | import("@gui/core").SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/core").StaticConfigPublic>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/core").StaticConfigPublic & {
+    accept: {
+        readonly activeStyle: "style";
+    };
+}>;
+export declare const CheckboxFrame: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@gui/core").InferStyleProps<import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+        elevation?: number | import("@gui/core").SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/core").StaticConfigPublic>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}, {
+    size?: import("@gui/core").SizeTokens | undefined;
+    disabled?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/core").StaticConfigPublic & {
+    accept: {
+        readonly activeStyle: "style";
+    };
+}>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/types/CheckboxStyledContext.d.ts

@@ -0,0 +1,9 @@
+import type { SizeTokens } from '@gui/core';
+export declare const CheckboxStyledContext: import("@gui/core").StyledContext<{
+    size: SizeTokens;
+    scaleIcon: number;
+    unstyled?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+}>;
+//# sourceMappingURL=CheckboxStyledContext.d.ts.map