Forward props to inputs

Closes #112

.changeset/flat-readers-roll.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Allow for control props to be passed to the input

apps/docs/pages/components/editor.mdx

@@ -86,3 +86,21 @@ export function Demo() {
   )
 }
 ```
+
+### Customizing Inputs
+
+When using the composition-based approach, you can customize the `label`, `steps`, `range`.
+
+```js
+<Inputs.FontSize
+  label="Size"
+  steps={{
+    px: 1,
+    em: 0.2,
+  }}
+  range={{
+    px: [1, 256],
+    em: [0.1, 16],
+  }}
+/>
+```

packages/gui/src/components/Editor/Controls.tsx

@@ -26,11 +26,13 @@ import { Label } from '../primitives'
 import { kebabCase } from 'lodash-es'
 import { useThemeProperty } from '../providers/ThemeContext'
 import { PositionInput } from '../inputs/PositionInput'
+import { UnitSteps } from '../../lib'
+import { UnitRanges } from '../../data/ranges'
 
-type ControlProps = {
+type ControlProps = InputProps & {
   field: KeyArg
 }
-const Control = ({ field }: ControlProps) => {
+const Control = ({ field, ...props }: ControlProps) => {
   const { getField, setField } = useEditor()
   const fieldset = useFieldset()
   const property = field.toString()
@@ -58,13 +60,21 @@ const Control = ({ field }: ControlProps) => {
       themeValues={themeValues}
       {...properties[property]}
       keywords={keywords}
+      {...props}
     />
   )
 }
 
+type InputProps = {
+  label?: string
+  steps?: UnitSteps
+  range?: UnitRanges
+}
 export const Inputs: Record<string, any> = {}
 Object.keys(properties).forEach((field: string) => {
-  Inputs[pascal(field)] = () => <Control field={field} />
+  Inputs[pascal(field)] = (props: InputProps) => (
+    <Control {...props} field={field} />
+  )
 })
 
 type ControlsProps = {