add input element

Author: cschroeter

components/react/src/components/ui/index.ts

@@ -26,6 +26,7 @@ export * as HoverCard from './hover-card'
 export { Icon, type IconProps } from './icon'
 export { IconButton, type IconButtonProps } from './icon-button'
 export { Input, type InputProps } from './input'
+export { InputElement, type InputElementProps } from './input-element'
 export { Kbd, type KbdProps } from './kbd'
 export { Link, type LinkProps } from './link'
 export { Loader, type LoaderProps } from './loader'

components/react/src/components/ui/input-element.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { inputElement } from 'styled-system/recipes'
+
+export type InputElementProps = ComponentProps<typeof InputElement>
+export const InputElement = styled(ark.div, inputElement)

packages/preset/src/recipes/index.ts

@@ -27,6 +27,7 @@ import { heading } from './heading'
 import { hoverCard } from './hover-card'
 import { icon } from './icon'
 import { input } from './input'
+import { inputElement } from './input-element'
 import { kbd } from './kbd'
 import { link } from './link'
 import { listbox } from './listbox'
@@ -75,6 +76,7 @@ export const recipes = {
   heading,
   icon,
   input,
+  inputElement,
   kbd,
   link,
   skeleton,

packages/preset/src/recipes/input-element.ts

@@ -0,0 +1,26 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const inputElement = defineRecipe({
+  className: 'input-element',
+  base: {
+    alignItems: 'center',
+    color: 'fg.muted',
+    display: 'flex',
+    fontSize: 'sm',
+    height: 'full',
+    justifyContent: 'center',
+    position: 'absolute',
+    px: '3',
+    zIndex: '2',
+  },
+  variants: {
+    placement: {
+      start: {
+        insetInlineStart: '0',
+      },
+      end: {
+        insetInlineEnd: '0',
+      },
+    },
+  },
+})

website/public/registry/components/react/index.json

@@ -83,6 +83,9 @@
   {
     "id": "input"
   },
+  {
+    "id": "input-element"
+  },
   {
     "id": "kbd"
   },

website/public/registry/components/react/input-element.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://next.park-ui.com/schema/registry-item.json",
+  "id": "input-element",
+  "type": "component",
+  "files": [
+    {
+      "type": "component",
+      "fileName": "input-element.tsx",
+      "content": "import { ark } from '@ark-ui/react/factory'\nimport type { ComponentProps } from 'react'\nimport { styled } from 'styled-system/jsx'\nimport { inputElement } from 'styled-system/recipes'\n\nexport type InputElementProps = ComponentProps<typeof InputElement>\nexport const InputElement = styled(ark.div, inputElement)\n",
+      "indexFile": {
+        "exports": [
+          {
+            "type": "named",
+            "symbols": [
+              {
+                "name": "InputElement",
+                "isType": false
+              },
+              {
+                "name": "InputElementProps",
+                "isType": true
+              }
+            ],
+            "moduleSpecifier": "./input-element"
+          }
+        ]
+      }
+    },
+    {
+      "type": "recipe",
+      "fileName": "input-element.ts",
+      "content": "import { defineRecipe } from '@pandacss/dev'\n\nexport const inputElement = defineRecipe({\n  className: 'input-element',\n  base: {\n    alignItems: 'center',\n    color: 'fg.muted',\n    display: 'flex',\n    fontSize: 'sm',\n    height: 'full',\n    justifyContent: 'center',\n    position: 'absolute',\n    px: '3',\n    zIndex: '2',\n  },\n  variants: {\n    placement: {\n      start: {\n        insetInlineStart: '0',\n      },\n      end: {\n        insetInlineEnd: '0',\n      },\n    },\n  },\n})\n",
+      "indexFile": {
+        "imports": [
+          {
+            "type": "named",
+            "moduleSpecifier": "./input-element",
+            "symbols": [
+              {
+                "name": "input-element"
+              }
+            ]
+          }
+        ],
+        "exports": [
+          {
+            "type": "object-literal",
+            "variableName": "recipes",
+            "properties": [
+              {
+                "name": "input-element"
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}