Lists

.github/actions/setup-node/action.yml

@@ -12,8 +12,9 @@ runs:
       uses: actions/setup-node@v4
       with:
         node-version-file: .node-version
-        cache: yarn
 
     - name: Install dependencies
-      run: yarn install --immutable
-      shell: bash
+      run: yarn install --no-immutable
+      shell: bash
+      env:
+        YARN_ENABLE_HARDENED_MODE: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork && '1' || '0' }}

.gitignore

@@ -27,4 +27,7 @@ storybook-static
 .tamagui
 
 # env
-.env
+.env
+
+# for monorepo use
+yarn.lock

.storybook/main.ts

@@ -30,7 +30,6 @@ export default defineMain({
 				tamaguiPlugin({
 					config: "./src/config/tamagui.config.ts",
 					components: ["tamagui"],
-					optimize: true,
 				}),
 			],
 			build: {

.vscode/settings.json

@@ -23,6 +23,8 @@
 		".tamagui": true,
 		".yarn": true
 	},
+	"typescript.preferences.importModuleSpecifier": "relative",
+
 	"explorer.fileNesting.enabled": true,
 	"explorer.fileNesting.patterns": {
 		"package.json": "package-lock.json, yarn.lock, .yarnrc.yml, cspell.config.yaml, biome.json, LICENSE, .gitignore",

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:62fea75bb5d432cf221355c3",
+  "zip": true
+}

cspell.config.yaml

@@ -8,6 +8,7 @@ words:
   - culori
   - mongolyy
   - nderscore
+  - nums
   - unplugin
 ignoreWords: []
 import: []

package.json

@@ -12,6 +12,7 @@
 	"scripts": {
 		"start": "storybook dev -p 6006 --no-open --quiet",
 		"storybook:build": "storybook build",
+		"storybook:test": "vitest --project=storybook",
 		"sync": "tsx scripts/syncFigma.ts",
 		"lint": "biome check .",
 		"format": "biome check --write .",
@@ -20,8 +21,8 @@
 	},
 	"dependencies": {
 		"@fontsource/nunito-sans": "^5.2.7",
-		"@tamagui/config": "1.137.3",
-		"@window-splitter/react": "^1.1.2",
+		"@tamagui/config": "2.0.0-rc.11",
+		"@window-splitter/react": "^1.1.3",
 		"browser-info": "^1.3.0",
 		"culori": "^4.0.2",
 		"motion": "^12.23.26",
@@ -31,18 +32,18 @@
 		"react-native-device-info": "^15.0.1",
 		"react-native-web": "^0.21.2",
 		"rtl-detect": "^1.1.2",
-		"tamagui": "1.137.3"
+		"tamagui": "2.0.0-rc.11"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.11",
-		"@chromatic-com/storybook": "^4.1.2",
+		"@chromatic-com/storybook": "^5.0.0",
 		"@storybook/addon-a11y": "^10.0.7",
 		"@storybook/addon-docs": "^10.0.7",
 		"@storybook/addon-vitest": "^10.0.7",
 		"@storybook/react-vite": "^10.0.7",
 		"@svgr/core": "^8.1.0",
 		"@svgr/plugin-jsx": "^8.1.0",
-		"@tamagui/vite-plugin": "1.137.3",
+		"@tamagui/vite-plugin": "2.0.0-rc.11",
 		"@types/culori": "^4",
 		"@types/node": "^22.10.2",
 		"@types/pluralize": "^0.0.33",
@@ -52,7 +53,7 @@
 		"@types/rtl-detect": "^1",
 		"@vitejs/plugin-react": "^5.0.4",
 		"@vitest/browser-playwright": "^4.0.8",
-		"@vitest/coverage-v8": "^4.0.8",
+		"@vitest/coverage-v8": "^4.0.17",
 		"dotenv": "^17.2.3",
 		"jsdom": "^27.0.0",
 		"patch-package": "^8.0.1",

scripts/syncFigma.ts

@@ -207,9 +207,7 @@ async function generateTypeScriptFile(
 		.map(({ name }) => `import ${name} from "./${name}"`)
 		.join("\n")
 
-	const exports = sortedIcons
-		.map(({ name }) => `\t${name}: ${name} as WebIconComponentType,`)
-		.join("\n")
+	const exports = sortedIcons.map(({ name }) => `\t${name},`).join("\n")
 
 	const attachments = sortedIcons
 		.map(({ name }) => `Icon.${name} = rawIcons.${name}`)
@@ -221,8 +219,6 @@ import { ComponentError } from "../../ComponentError"
 // Generated Icons:
 ${imports}
 
-import type { WebIconComponentType } from "../types"
-
 export const rawIcons = {
 ${exports}
 } as const

src/components/AfterText/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+
+import { Text } from "../Text"
+
+/**
+ * Text to show after an element. Used mostly for lists.
+ */
+type AfterTextProps = {
+	/**
+	 * The text to show. Note that this is rendred within a `Text` node.
+	 */
+	children: string | React.ReactNode
+}
+
+export const AfterText = React.memo(function AfterText({
+	children,
+}: AfterTextProps) {
+	return (
+		<Text
+			noUserSelect
+			style={Text.style.footnote}
+			fit={Text.fitValues.wrap}
+			px={"$edgeInset"}
+			py={"$captionVerticalMargin"}
+			color={"$secondaryColor"}
+			_style={{ flexShrink: 0 }}
+		>
+			{children}
+		</Text>
+	)
+})

src/components/Button/index.tsx

@@ -6,25 +6,22 @@ import { useShadow as getShadow } from "../../hooks/useShadow"
 import { ComponentError } from "../ComponentError"
 import { Icon, type IconComponentType } from "../Icon"
 import { Text } from "../Text"
-import { MotionView, type Row, ViewContext } from "../View"
+import { MotionView, ViewContext } from "../View"
 
 import type { FontKey } from "../../config/fonts"
+import type { IconSizes } from "../../config/tamagui.config"
+import type { ColorValue } from "../../utils/color"
 import type { OnPressWithRef } from "../../utils/types"
-import type { WebIconComponentProps } from "../Icon/types"
 
-type RowColorType = React.ComponentProps<typeof Row>["color"]
-type TextColorType = React.ComponentProps<typeof Text>["color"]
-type ParadigmButtonProps<
-	IconType extends IconComponentType = IconComponentType,
-> = {
+type ParadigmButtonProps = {
 	/**
 	 * The Icon for this button
 	 */
-	icon?: IconType
+	icon?: IconComponentType
 	/**
 	 * Props to pass to the icon component
 	 */
-	iconProps?: React.ComponentProps<IconType>
+	iconProps?: React.ComponentProps<IconComponentType>
 	/**
 	 * the text to show on the button, if any
 	 */
@@ -110,21 +107,14 @@ export const Button = ({
 	 */
 	let outerPadding: number
 	let innerPadding: number
-	let iconSize: number
+	let iconSize: IconSizes
 	let buttonHeight: number
 	let textStyle: FontKey
-	let disclosureSize: number
-	let backgroundColor: RowColorType
-	let textColor: TextColorType
-	let iconColor: string
-	let disclosureColor: string
-
-	const resolveColor = (value: unknown): string => {
-		if (typeof value === "string") return value
-		const maybe = value as { get?: () => unknown }
-		if (maybe?.get) return String(maybe.get())
-		return String(value)
-	}
+	let disclosureSize: IconSizes
+	let backgroundColor: ColorValue
+	let textColor: ColorValue
+	let iconColor: ColorValue
+	let disclosureColor: ColorValue
 
 	/**
 	 * Button Sizing!
@@ -223,17 +213,15 @@ export const Button = ({
 	switch (buttonState) {
 		case "loading":
 		case "disabled": {
-			iconColor = disclosureColor = resolveColor(theme.colorDisabled)
+			iconColor = disclosureColor = theme.colorDisabled
 			break
 		}
 		default: {
-			iconColor = disclosureColor = resolveColor(
-				isPrimary
-					? theme.colorOnPrimary
-					: isNegative
-						? theme.destructive
-						: theme.primary,
-			)
+			iconColor = disclosureColor = isPrimary
+				? theme.colorOnPrimary
+				: isNegative
+					? theme.destructive
+					: theme.primary
 		}
 	}
 
@@ -261,11 +249,6 @@ export const Button = ({
 		}
 	}
 
-	const iconComponentProps: WebIconComponentProps = {
-		size: iconSize,
-		color: iconColor,
-	}
-
 	return (
 		<MotionView
 			ref={buttonRef}
@@ -302,7 +285,7 @@ export const Button = ({
 			}}
 		>
 			{IconComponent && (
-				<IconComponent {...iconComponentProps} {...iconProps} />
+				<IconComponent size={iconSize} color={iconColor} {...iconProps} />
 			)}
 			{label && (
 				<Text

src/components/Icon/generated/Apple.tsx

@@ -1,10 +1,10 @@
-import { useTheme } from "@tamagui/core"
+import { getTokenValue, styled } from "@tamagui/core"
 import * as React from "react"
 
 import { TextContext } from "../../Text"
 
 import type { SVGProps } from "react"
-import type { WebIconComponentType } from "../types"
+import type { RawWebIconComponentProps } from "../types"
 
 const AppleIcon = (props: SVGProps<SVGSVGElement>) => (
 	<svg
@@ -20,15 +20,15 @@ const AppleIcon = (props: SVGProps<SVGSVGElement>) => (
 		/>
 	</svg>
 )
-const Apple: WebIconComponentType = ({
-	size,
+const Apple = ({
+	size: sizeKey,
 	color,
 	style = {},
 	...otherProps
-}) => {
-	const theme = useTheme()
+}: RawWebIconComponentProps) => {
 	const { isInText } = React.useContext(TextContext)
-	const fill = color || (isInText ? theme.iconInTextColor.get() : "black")
+	const size = getTokenValue(`$icon.${sizeKey}`)
+	const fill = color || (isInText ? "$iconInTextColor" : "black")
 	const combinedStyle = {
 		flexShrink: 0,
 		...style,
@@ -41,4 +41,13 @@ const Apple: WebIconComponentType = ({
 		fill,
 	})
 }
-export default Apple
+const StyledIcon = styled(
+	Apple,
+	{},
+	{
+		accept: {
+			color: "color",
+		} as const,
+	},
+)
+export default StyledIcon

src/components/Icon/generated/Archive.tsx

@@ -1,10 +1,10 @@
-import { useTheme } from "@tamagui/core"
+import { getTokenValue, styled } from "@tamagui/core"
 import * as React from "react"
 
 import { TextContext } from "../../Text"
 
 import type { SVGProps } from "react"
-import type { WebIconComponentType } from "../types"
+import type { RawWebIconComponentProps } from "../types"
 
 const ArchiveIcon = (props: SVGProps<SVGSVGElement>) => (
 	<svg
@@ -22,15 +22,15 @@ const ArchiveIcon = (props: SVGProps<SVGSVGElement>) => (
 		/>
 	</svg>
 )
-const Archive: WebIconComponentType = ({
-	size,
+const Archive = ({
+	size: sizeKey,
 	color,
 	style = {},
 	...otherProps
-}) => {
-	const theme = useTheme()
+}: RawWebIconComponentProps) => {
 	const { isInText } = React.useContext(TextContext)
-	const fill = color || (isInText ? theme.iconInTextColor.get() : "black")
+	const size = getTokenValue(`$icon.${sizeKey}`)
+	const fill = color || (isInText ? "$iconInTextColor" : "black")
 	const combinedStyle = {
 		flexShrink: 0,
 		...style,
@@ -43,4 +43,13 @@ const Archive: WebIconComponentType = ({
 		fill,
 	})
 }
-export default Archive
+const StyledIcon = styled(
+	Archive,
+	{},
+	{
+		accept: {
+			color: "color",
+		} as const,
+	},
+)
+export default StyledIcon