@tamagui/demos 1.95.3 → 1.97.0

package/dist/jsx/TokensDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/TokensDemo.tsx"],
-  "mappings": "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",
-  "names": ["getConfig", "useState", "Button", "H2", "H3", "H4", "Separator", "Square", "XGroup", "XStack", "YStack", "sections", "name", "key", "TokensDemo", "section", "setSection", "space", "alignItems", "alignSelf", "map", "Item", "size", "theme", "fontFamily", "onPress", "SizeSection", "allTokens", "tokens", "startsWith", "st", "Object", "keys", "sort", "a", "b", "parseFloat", "spaceTokens", "filter", "t", "spaceTokensNegative", "flex", "width", "separator", "token", "val", "backgroundColor", "find", "borderRadius"]
+  "mappings": "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",
+  "names": ["getConfig", "useState", "Button", "H2", "H3", "H4", "Separator", "Square", "XGroup", "XStack", "YStack", "sections", "name", "key", "TokensDemo", "section", "setSection", "space", "alignItems", "alignSelf", "map", "Item", "size", "theme", "fontFamily", "onPress", "SizeSection", "allTokens", "tokens", "startsWith", "st", "Object", "keys", "sort", "a", "b", "Number", "parseFloat", "spaceTokens", "filter", "t", "spaceTokensNegative", "flex", "width", "separator", "token", "val", "backgroundColor", "find", "borderRadius"]
 }

package/dist/jsx/index.js

@@ -21,6 +21,7 @@ export * from "./GroupDemo";
 export * from "./HeadingsDemo";
 export * from "./ImageDemo";
 export * from "./InputsDemo";
+export * from "./NewInputsDemo";
 export * from "./LabelDemo";
 export * from "./LinearGradientDemo";
 export * from "./ListItemDemo";
@@ -28,6 +29,8 @@ export * from "./LucideIconsDemo";
 export * from "./PopoverDemo";
 export * from "./ProgressDemo";
 export * from "./RadioGroupDemo";
+export * from "./RadioGroupHeadlessDemo";
+export * from "./RadioGroupUnstyledDemo";
 export * from "./ReplaceThemeDemo";
 export * from "./ScrollViewDemo";
 export * from "./SelectDemo";

package/dist/jsx/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/jsx/index.mjs

@@ -21,6 +21,7 @@ export * from "./GroupDemo.mjs";
 export * from "./HeadingsDemo.mjs";
 export * from "./ImageDemo.mjs";
 export * from "./InputsDemo.mjs";
+export * from "./NewInputsDemo.mjs";
 export * from "./LabelDemo.mjs";
 export * from "./LinearGradientDemo.mjs";
 export * from "./ListItemDemo.mjs";
@@ -28,6 +29,8 @@ export * from "./LucideIconsDemo.mjs";
 export * from "./PopoverDemo.mjs";
 export * from "./ProgressDemo.mjs";
 export * from "./RadioGroupDemo.mjs";
+export * from "./RadioGroupHeadlessDemo.mjs";
+export * from "./RadioGroupUnstyledDemo.mjs";
 export * from "./ReplaceThemeDemo.mjs";
 export * from "./ScrollViewDemo.mjs";
 export * from "./SelectDemo.mjs";

package/dist/jsx/index.native.js

@@ -21,6 +21,7 @@ export * from "./GroupDemo";
 export * from "./HeadingsDemo";
 export * from "./ImageDemo";
 export * from "./InputsDemo";
+export * from "./NewInputsDemo";
 export * from "./LabelDemo";
 export * from "./LinearGradientDemo";
 export * from "./ListItemDemo";
@@ -28,6 +29,8 @@ export * from "./LucideIconsDemo";
 export * from "./PopoverDemo";
 export * from "./ProgressDemo";
 export * from "./RadioGroupDemo";
+export * from "./RadioGroupHeadlessDemo";
+export * from "./RadioGroupUnstyledDemo";
 export * from "./ReplaceThemeDemo";
 export * from "./ScrollViewDemo";
 export * from "./SelectDemo";

package/dist/jsx/index.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/index.tsx"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.95.3",
+  "version": "1.97.0",
   "sideEffects": [
     "*.css"
   ],
@@ -33,36 +33,35 @@
     },
     "./demo/*": {
       "types": "./types/*.d.ts",
-      "node": "./dist/cjs/*.js",
       "import": "./dist/esm/*.mjs",
       "require": "./dist/cjs/*.js",
       "react-native": "./dist/cjs/*.native.js"
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.95.3",
-    "@tamagui/button": "1.95.3",
-    "@tamagui/core": "1.95.3",
-    "@tamagui/list-item": "1.95.3",
-    "@tamagui/logo": "1.95.3",
-    "@tamagui/menu": "1.95.3",
-    "@tamagui/popover": "1.95.3",
-    "@tamagui/progress": "1.95.3",
-    "@tamagui/radio-group": "1.95.3",
-    "@tamagui/select": "1.95.3",
-    "@tamagui/sheet": "1.95.3",
-    "@tamagui/site-config": "1.95.3",
-    "@tamagui/slider": "1.95.3",
-    "@tamagui/stacks": "1.95.3",
-    "@tamagui/toast": "1.95.3",
-    "tamagui": "1.95.3"
+    "@tamagui/avatar": "1.97.0",
+    "@tamagui/button": "1.97.0",
+    "@tamagui/core": "1.97.0",
+    "@tamagui/list-item": "1.97.0",
+    "@tamagui/logo": "1.97.0",
+    "@tamagui/menu": "1.97.0",
+    "@tamagui/popover": "1.97.0",
+    "@tamagui/progress": "1.97.0",
+    "@tamagui/radio-group": "1.97.0",
+    "@tamagui/select": "1.97.0",
+    "@tamagui/sheet": "1.97.0",
+    "@tamagui/site-config": "1.97.0",
+    "@tamagui/slider": "1.97.0",
+    "@tamagui/stacks": "1.97.0",
+    "@tamagui/toast": "1.97.0",
+    "tamagui": "1.97.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.95.3",
+    "@tamagui/build": "1.97.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/AccordionDemo.tsx

@@ -6,7 +6,11 @@ export function AccordionDemo() {
     <Accordion overflow="hidden" width="$20" type="multiple">
       <Accordion.Item value="a1">
         <Accordion.Trigger flexDirection="row" justifyContent="space-between">
-          {({ open }) => (
+          {({
+            open,
+          }: {
+            open: boolean
+          }) => (
             <>
               <Paragraph>1. Take a cold shower</Paragraph>
               <Square animation="quick" rotate={open ? '180deg' : '0deg'}>
@@ -15,17 +19,23 @@ export function AccordionDemo() {
             </>
           )}
         </Accordion.Trigger>
-        <Accordion.Content>
-          <Paragraph>
-            Cold showers can help reduce inflammation, relieve pain, improve circulation,
-            lower stress levels, and reduce muscle soreness and fatigue.
-          </Paragraph>
-        </Accordion.Content>
+        <Accordion.HeightAnimator animation="medium">
+          <Accordion.Content animation="medium" exitStyle={{ opacity: 0 }}>
+            <Paragraph>
+              Cold showers can help reduce inflammation, relieve pain, improve
+              circulation, lower stress levels, and reduce muscle soreness and fatigue.
+            </Paragraph>
+          </Accordion.Content>
+        </Accordion.HeightAnimator>
       </Accordion.Item>
 
       <Accordion.Item value="a2">
         <Accordion.Trigger flexDirection="row" justifyContent="space-between">
-          {({ open }) => (
+          {({
+            open,
+          }: {
+            open: boolean
+          }) => (
             <>
               <Paragraph>2. Eat 4 eggs</Paragraph>
               <Square animation="quick" rotate={open ? '180deg' : '0deg'}>
@@ -34,12 +44,14 @@ export function AccordionDemo() {
             </>
           )}
         </Accordion.Trigger>
-        <Accordion.Content>
-          <Paragraph>
-            Eggs have been a dietary staple since time immemorial and there’s good reason
-            for their continued presence in our menus and meals.
-          </Paragraph>
-        </Accordion.Content>
+        <Accordion.HeightAnimator animation="medium">
+          <Accordion.Content animation="medium" exitStyle={{ opacity: 0 }}>
+            <Paragraph>
+              Eggs have been a dietary staple since time immemorial and there’s good
+              reason for their continued presence in our menus and meals.
+            </Paragraph>
+          </Accordion.Content>
+        </Accordion.HeightAnimator>
       </Accordion.Item>
     </Accordion>
   )

package/src/NewInputsDemo.tsx

@@ -0,0 +1,30 @@
+import type { SizeTokens } from 'tamagui'
+import { Button, XStack, YStack } from 'tamagui'
+import { Input, TextArea } from '@tamagui/input'
+
+export function NewInputsDemo() {
+  return (
+    <YStack
+      width={200}
+      minHeight={250}
+      overflow="hidden"
+      space="$2"
+      margin="$3"
+      padding="$2"
+    >
+      <InputDemo size="$2" />
+      <InputDemo size="$3" />
+      <InputDemo size="$4" />
+      <TextArea placeholder="Enter your details..." />
+    </YStack>
+  )
+}
+
+function InputDemo(props: { size: SizeTokens }) {
+  return (
+    <XStack alignItems="center" space="$2">
+      <Input flex={1} size={props.size} placeholder={`Size ${props.size}...`} />
+      <Button size={props.size}>Go</Button>
+    </XStack>
+  )
+}

package/src/RadioGroupHeadlessDemo.tsx

@@ -0,0 +1,133 @@
+import type {
+  RadioGroupContextValue,
+  RadioGroupItemContextValue,
+} from '@tamagui/radio-headless'
+import {
+  useRadioGroup,
+  useRadioGroupItem,
+  useRadioGroupItemIndicator,
+} from '@tamagui/radio-headless'
+import { RovingFocusGroup } from '@tamagui/roving-focus'
+import { createContext } from 'react'
+import { StyleSheet, View, Pressable, Text } from 'react-native'
+import { isWeb, useTheme } from 'tamagui'
+
+const RadioGroupContext = createContext<RadioGroupContextValue>({})
+const RadioGroupItemContext = createContext<RadioGroupItemContextValue>({
+  checked: false,
+  disabled: false,
+})
+
+export function RadioGroupHeadlessDemo() {
+  const { providerValue, frameAttrs, rovingFocusGroupAttrs } = useRadioGroup({
+    orientation: 'vertical',
+    name: 'form',
+    defaultValue: '3',
+  })
+  return (
+    <RadioGroupContext.Provider value={providerValue}>
+      <RovingFocusGroup {...rovingFocusGroupAttrs}>
+        <View style={styles.radioGroup} {...frameAttrs}>
+          <RadioGroupItem value="2" id="2" label="First Value" />
+          <RadioGroupItem value="3" id="3" label="Second Value" />
+          <RadioGroupItem value="4" id="4" label="Third Value" />
+        </View>
+      </RovingFocusGroup>
+    </RadioGroupContext.Provider>
+  )
+}
+
+function RadioGroupItem(props: {
+  value: string
+  id: string
+  label: string
+}) {
+  const theme = useTheme()
+  const { value, id, label } = props
+  const {
+    providerValue,
+    native,
+    bubbleInput,
+    rovingFocusGroupAttrs,
+    frameAttrs,
+    isFormControl,
+    checked,
+  } = useRadioGroupItem({
+    radioGroupContext: RadioGroupContext,
+    value,
+    id,
+  })
+
+  return (
+    <RadioGroupItemContext.Provider value={providerValue}>
+      {isWeb && native ? (
+        bubbleInput
+      ) : (
+        <View style={styles.radioGroupItemContainer}>
+          <RovingFocusGroup.Item {...rovingFocusGroupAttrs}>
+            <Pressable
+              style={{
+                ...styles.radioGroupItem,
+                ...{ borderColor: theme.borderColor.get() },
+                ...(checked
+                  ? { borderWidth: 4 }
+                  : { backgroundColor: theme.background.get() }),
+              }}
+              {...frameAttrs}
+              onFocus={frameAttrs.onFocus as any}
+            >
+              <RadioGroupItemIndicator />
+            </Pressable>
+          </RovingFocusGroup.Item>
+          <Text style={{ color: theme.color.get() }}>{label}</Text>
+          {isFormControl && bubbleInput}
+        </View>
+      )}
+    </RadioGroupItemContext.Provider>
+  )
+}
+
+function RadioGroupItemIndicator() {
+  const theme = useTheme()
+  const params = useRadioGroupItemIndicator({
+    radioGroupItemContext: RadioGroupItemContext,
+    disabled: false,
+  })
+  if (params.checked) {
+    return (
+      <View
+        style={{
+          ...styles.radioGroupItemIndicator,
+          backgroundColor: theme.color.get(),
+        }}
+        {...params}
+      />
+    )
+  }
+  return null
+}
+
+const styles = StyleSheet.create({
+  radioGroup: {
+    flexDirection: 'column',
+    gap: 20,
+    alignItems: 'flex-start',
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  radioGroupItemIndicator: {
+    width: '35%',
+    height: '35%',
+  },
+  radioGroupItemContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 12,
+  },
+})

package/src/RadioGroupUnstyledDemo.tsx

@@ -0,0 +1,126 @@
+import type { SizeTokens } from 'tamagui'
+import { Label, ThemeableStack, XStack, YStack, styled } from 'tamagui'
+
+import { createRadioGroup } from '@tamagui/radio-group'
+
+const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'
+
+const RadioGroupItemFrame = styled(ThemeableStack, {
+  name: RADIO_GROUP_ITEM_NAME,
+  tag: 'button',
+
+  borderRadius: 1000,
+  backgroundColor: '$background',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  padding: 0,
+
+  hoverStyle: {
+    borderColor: '$borderColorHover',
+    backgroundColor: '$backgroundHover',
+  },
+
+  focusStyle: {
+    borderColor: '$borderColorHover',
+    backgroundColor: '$backgroundHover',
+  },
+
+  focusVisibleStyle: {
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineColor: '$outlineColor',
+  },
+
+  pressStyle: {
+    borderColor: '$borderColorFocus',
+    backgroundColor: '$backgroundFocus',
+  },
+
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none',
+        userSelect: 'none',
+        cursor: 'not-allowed',
+
+        hoverStyle: {
+          borderColor: '$borderColor',
+          backgroundColor: '$background',
+        },
+
+        pressStyle: {
+          borderColor: '$borderColor',
+          backgroundColor: '$background',
+        },
+
+        focusVisibleStyle: {
+          outlineWidth: 0,
+        },
+      },
+    },
+  },
+} as const)
+
+const RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'
+
+const RadioGroupIndicatorFrame = styled(ThemeableStack, {
+  name: RADIO_GROUP_INDICATOR_NAME,
+  width: '53%',
+  height: '53%',
+  borderRadius: 1000,
+  backgroundColor: '$color',
+  pressTheme: true,
+})
+
+const RADIO_GROUP_NAME = 'RadioGroup'
+
+const RadioGroupFrame = styled(ThemeableStack, {
+  name: RADIO_GROUP_NAME,
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+        spaceDirection: 'horizontal',
+      },
+      vertical: {
+        flexDirection: 'column',
+        spaceDirection: 'vertical',
+      },
+    },
+  } as const,
+})
+
+const RadioGroup = createRadioGroup({
+  Frame: RadioGroupFrame,
+  Indicator: RadioGroupIndicatorFrame,
+  Item: RadioGroupItemFrame,
+})
+
+export function RadioGroupUnstyledDemo() {
+  return (
+    <RadioGroup aria-labelledby="Select one item" defaultValue="3" name="form">
+      <YStack width={200} alignItems="center" space="$2">
+        <RadioGroupItemWithLabel value="2" label="Option One" />
+        <RadioGroupItemWithLabel value="3" label="Option Two" />
+      </YStack>
+    </RadioGroup>
+  )
+}
+
+function RadioGroupItemWithLabel(props: {
+  value: string
+  label: string
+}) {
+  const id = `radiogroup-${props.value}`
+  return (
+    <XStack width={300} alignItems="center" gap="$4">
+      <RadioGroup.Item value={props.value} id={id}>
+        <RadioGroup.Indicator />
+      </RadioGroup.Item>
+
+      <Label htmlFor={id}>{props.label}</Label>
+    </XStack>
+  )
+}

package/src/SelectDemo.tsx

@@ -173,26 +173,4 @@ const items = [
   { name: 'Grape' },
   { name: 'Jackfruit' },
   { name: 'Durian' },
-  { name: 'Apple' },
-  { name: 'Pear' },
-  { name: 'Blackberry' },
-  { name: 'Peach' },
-  { name: 'Apricot' },
-  { name: 'Melon' },
-  { name: 'Honeydew' },
-  { name: 'Starfruit' },
-  { name: 'Blueberry' },
-  { name: 'Raspberry' },
-  { name: 'Strawberry' },
-  { name: 'Mango' },
-  { name: 'Pineapple' },
-  { name: 'Lime' },
-  { name: 'Lemon' },
-  { name: 'Coconut' },
-  { name: 'Guava' },
-  { name: 'Papaya' },
-  { name: 'Orange' },
-  { name: 'Grape' },
-  { name: 'Jackfruit' },
-  { name: 'Durian' },
 ]

package/src/TokensDemo.tsx

@@ -57,11 +57,13 @@ export function TokensDemo() {
 function SizeSection({ section }: { section: Section }) {
   const allTokens = getConfig().tokens
   const tokens = allTokens[section.startsWith('space') ? 'space' : section]
-  const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))
-  const spaceTokens = st.filter((t) => parseFloat(t) >= 0)
+  const st = Object.keys(tokens).sort((a, b) =>
+    Number.parseFloat(a) > Number.parseFloat(b) ? 1 : -1
+  )
+  const spaceTokens = st.filter((t) => Number.parseFloat(t) >= 0)
   const spaceTokensNegative = st
-    .filter((t) => parseFloat(t) < 0)
-    .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))
+    .filter((t) => Number.parseFloat(t) < 0)
+    .sort((a, b) => (Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1))
 
   return (
     <YStack flex={1} space>
@@ -85,7 +87,7 @@ function SizeSection({ section }: { section: Section }) {
                     size:
                       -tokens[
                         spaceTokensNegative.find(
-                          (t) => parseFloat(t) === -parseFloat(token)
+                          (t) => Number.parseFloat(t) === -Number.parseFloat(token)
                         ) ?? token
                       ]?.val,
                   })}

package/src/index.tsx

@@ -21,6 +21,7 @@ export * from './GroupDemo'
 export * from './HeadingsDemo'
 export * from './ImageDemo'
 export * from './InputsDemo'
+export * from './NewInputsDemo'
 export * from './LabelDemo'
 export * from './LinearGradientDemo'
 export * from './ListItemDemo'
@@ -28,6 +29,8 @@ export * from './LucideIconsDemo'
 export * from './PopoverDemo'
 export * from './ProgressDemo'
 export * from './RadioGroupDemo'
+export * from './RadioGroupHeadlessDemo'
+export * from './RadioGroupUnstyledDemo'
 export * from './ReplaceThemeDemo'
 export * from './ScrollViewDemo'
 export * from './SelectDemo'

package/types/AccordionDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionDemo.d.ts","sourceRoot":"","sources":["../src/AccordionDemo.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,4CA0C5B"}
+{"version":3,"file":"AccordionDemo.d.ts","sourceRoot":"","sources":["../src/AccordionDemo.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,4CAsD5B"}