Number Field

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { Show, splitProps } from "solid-js"
3 
4import * as NumberFieldPrimitive from "@kobalte/core/number-field"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const NumberField = NumberFieldPrimitive.Root
10 
11const NumberFieldGroup: Component<ComponentProps<"div">> = (props) => {
12  const [local, others] = splitProps(props, ["class"])
13  return (
14    <div
15      class={cn(
16        "relative rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
17        local.class
18      )}
19      {...others}
20    />
21  )
22}
23 
24type NumberFieldLabelProps<T extends ValidComponent = "label"> =
25  NumberFieldPrimitive.NumberFieldLabelProps<T> & {
26    class?: string | undefined
27  }
28 
29const NumberFieldLabel = <T extends ValidComponent = "label">(
30  props: PolymorphicProps<T, NumberFieldLabelProps<T>>
31) => {
32  const [local, others] = splitProps(props as NumberFieldLabelProps, ["class"])
33  return (
34    <NumberFieldPrimitive.Label
35      class={cn(
36        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
37        local.class
38      )}
39      {...others}
40    />
41  )
42}
43 
44type NumberFieldInputProps<T extends ValidComponent = "input"> =
45  NumberFieldPrimitive.NumberFieldInputProps<T> & {
46    class?: string | undefined
47  }
48 
49const NumberFieldInput = <T extends ValidComponent = "input">(
50  props: PolymorphicProps<T, NumberFieldInputProps<T>>
51) => {
52  const [local, others] = splitProps(props as NumberFieldInputProps, ["class"])
53  return (
54    <NumberFieldPrimitive.Input
55      class={cn(
56        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground",
57        local.class
58      )}
59      {...others}
60    />
61  )
62}
63 
64type NumberFieldIncrementTriggerProps<T extends ValidComponent = "button"> =
65  NumberFieldPrimitive.NumberFieldIncrementTriggerProps<T> & {
66    class?: string | undefined
67    children?: JSX.Element
68  }
69 
70const NumberFieldIncrementTrigger = <T extends ValidComponent = "button">(
71  props: PolymorphicProps<T, NumberFieldIncrementTriggerProps<T>>
72) => {
73// … truncated