@tamagui/shapes 1.0.1-beta.56 → 1.0.1-beta.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/shapes",
-  "version": "1.0.1-beta.56",
+  "version": "1.0.1-beta.60",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -18,14 +19,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.56",
-    "@tamagui/stacks": "^1.0.1-beta.56"
+    "@tamagui/core": "^1.0.1-beta.60",
+    "@tamagui/stacks": "^1.0.1-beta.60"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.56",
+    "@tamagui/build": "^1.0.1-beta.60",
     "react": "*"
   },
   "publishConfig": {

package/src/Circle.tsx

@@ -0,0 +1,10 @@
+import { GetProps, styled } from '@tamagui/core'
+
+import { Square } from './Square'
+
+export const Circle = styled(Square, {
+  name: 'Circle',
+  circular: true,
+})
+
+export type CircleProps = GetProps<typeof Circle>

package/src/Square.tsx

@@ -0,0 +1,26 @@
+import { GetProps, styled } from '@tamagui/core'
+import { ThemeableStack } from '@tamagui/stacks'
+
+import { getShapeSize } from './getShapeSize'
+
+export const Square = styled(ThemeableStack, {
+  name: 'Square',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  backgrounded: true,
+
+  variants: {
+    circular: {
+      true: {
+        borderRadius: 100_000,
+      },
+    },
+
+    size: {
+      '...size': getShapeSize,
+    },
+  },
+})
+
+export type SquareProps = GetProps<typeof Square>

package/src/getShapeSize.tsx

@@ -0,0 +1,15 @@
+import { SizeVariantSpreadFunction } from '@tamagui/core'
+import { SizableStackProps } from '@tamagui/stacks'
+
+export const getShapeSize: SizeVariantSpreadFunction<SizableStackProps> = (size, { tokens }) => {
+  const width = tokens.size[size] ?? size
+  const height = tokens.size[size] ?? size
+  return {
+    width,
+    height,
+    minWidth: width,
+    maxWidth: width,
+    maxHeight: height,
+    minHeight: height,
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './Square'
+export * from './Circle'
+export * from './getShapeSize'