inital commit

src/common/components/ui/number-input.tsx

@@ -0,0 +1,53 @@
+import { Show, children } from 'solid-js'
+import * as StyledNumberInput from './styled/number-input'
+
+export interface NumberInputProps extends StyledNumberInput.RootProps {}
+
+export const NumberInput = (props: NumberInputProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledNumberInput.Root {...props}>
+      <Show when={getChildren()}>
+        <StyledNumberInput.Label>{getChildren()}</StyledNumberInput.Label>
+      </Show>
+      <StyledNumberInput.Control>
+        <StyledNumberInput.Input />
+        <StyledNumberInput.IncrementTrigger>
+          <ChevronUpIcon />
+        </StyledNumberInput.IncrementTrigger>
+        <StyledNumberInput.DecrementTrigger>
+          <ChevronDownIcon />
+        </StyledNumberInput.DecrementTrigger>
+      </StyledNumberInput.Control>
+    </StyledNumberInput.Root>
+  )
+}
+
+const ChevronUpIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Up Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m18 15l-6-6l-6 6"
+    />
+  </svg>
+)
+
+const ChevronDownIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Down Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m6 9l6 6l6-6"
+    />
+  </svg>
+)