Number Field

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
3

4
import { Show, splitProps } from "solid-js";
5
import * as NumberFieldPrimitive from "@kobalte/core/number-field";
6
import ChevronDownIcon from "lucide-solid/icons/chevron-down";
7
import ChevronUpIcon from "lucide-solid/icons/chevron-up";
8

9
import { cn } from "~/lib/utils";
10

11
const NumberField = <T extends ValidComponent = "div">(
12
  props: PolymorphicProps<T, NumberFieldPrimitive.NumberFieldRootProps<T>>,
13
) => {
14
  return (
15
    <NumberFieldPrimitive.Root data-slot="number-field" gutter={4} {...props} />
16
  );
17
};
18

19
const NumberFieldGroup: Component<ComponentProps<"div">> = (props) => {
20
  const [local, others] = splitProps(props, ["class"]);
21
  return (
22
    <div
23
      data-slot="number-field-group"
24
      class={cn(
25
        "relative rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
26
        local.class,
27
      )}
28
      {...others}
29
    />
30
  );
31
};
32

33
type NumberFieldLabelProps<T extends ValidComponent = "label"> =
34
  NumberFieldPrimitive.NumberFieldLabelProps<T> & {
35
    class?: string | undefined;
36
  };
37

38
const NumberFieldLabel = <T extends ValidComponent = "label">(
39
  props: PolymorphicProps<T, NumberFieldLabelProps<T>>,
40
) => {
41
  const [local, others] = splitProps(props as NumberFieldLabelProps, ["class"]);
42
  return (
43
    <NumberFieldPrimitive.Label
44
      data-slot="number-field-label"
45
      class={cn(
46
        "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
47
        local.class,
48
      )}
49
      {...others}
50
    />
51
  );
52
};
53

54
type NumberFieldInputProps<T extends ValidComponent = "input"> =
55
  NumberFieldPrimitive.NumberFieldInputProps<T> & {
56
    class?: string | undefined;
57
  };
58

59
const NumberFieldInput = <T extends ValidComponent = "input">(
60
  props: PolymorphicProps<T, NumberFieldInputProps<T>>,
61
) => {
62
  const [local, others] = splitProps(props as NumberFieldInputProps, ["class"]);
63
  return (
64
    <NumberFieldPrimitive.Input
65
      data-slot="number-field-input"
66
      class={cn(
67
        "flex h-10 w-full rounded-base border-2 border-border 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 ui-invalid:border-error-foreground ui-invalid:text-error-foreground",
68
        local.class,
69
      )}
70
      {...others}
71
    />
72
  );
73
};
74

75
type NumberFieldIncrementTriggerProps<T extends ValidComponent = "button"> =
76
  NumberFieldPrimitive.NumberFieldIncrementTriggerProps<T> & {
77
    class?: string | undefined;
78
    children?: JSX.Element;
79
  };
80

81
const NumberFieldIncrementTrigger = <T extends ValidComponent = "button">(
82
  props: PolymorphicProps<T, NumberFieldIncrementTriggerProps<T>>,
83
) => {
84
  const [local, others] = splitProps(
85
    props as NumberFieldIncrementTriggerProps,
86
    ["class", "children"],
87
  );
88
  return (
89
    <NumberFieldPrimitive.IncrementTrigger
90
      data-slot="number-field-increment-trigger"
91
      class={cn(
92
        "absolute top-1 right-1 inline-flex size-4 items-center justify-center",
93
        local.class,
94
      )}
95
      {...others}
96
    >
97
      <Show when={local.children} fallback={<ChevronUpIcon class="size-4" />}>
98
        {(children) => children()}
99
      </Show>
100
    </NumberFieldPrimitive.IncrementTrigger>
101
  );
102
};
103

104
type NumberFieldDecrementTriggerProps<T extends ValidComponent = "button"> =
105
  NumberFieldPrimitive.NumberFieldDecrementTriggerProps<T> & {
106
    class?: string | undefined;
107
    children?: JSX.Element;
108
  };
109

110
const NumberFieldDecrementTrigger = <T extends ValidComponent = "button">(
111
  props: PolymorphicProps<T, NumberFieldDecrementTriggerProps<T>>,
112
) => {
113
  const [local, others] = splitProps(
114
    props as NumberFieldDecrementTriggerProps,
115
    ["class", "children"],
116
  );
117
  return (
118
    <NumberFieldPrimitive.DecrementTrigger
119
      data-slot="number-field-decrement-trigger"
120
      class={cn(
121
        "absolute right-1 bottom-1 inline-flex size-4 items-center justify-center",
122
        local.class,
123
      )}
124
      {...others}
125
    >
126
      <Show when={local.children} fallback={<ChevronDownIcon class="size-4" />}>
127
        {(children) => children()}
128
      </Show>
129
    </NumberFieldPrimitive.DecrementTrigger>
130
  );
131
};
132

133
type NumberFieldDescriptionProps<T extends ValidComponent = "div"> =
134
  NumberFieldPrimitive.NumberFieldDescriptionProps<T> & {
135
    class?: string | undefined;
136
  };
137

138
const NumberFieldDescription = <T extends ValidComponent = "div">(
139
  props: PolymorphicProps<T, NumberFieldDescriptionProps<T>>,
140
) => {
141
  const [local, others] = splitProps(props as NumberFieldDescriptionProps, [
142
    "class",
143
  ]);
144
  return (
145
    <NumberFieldPrimitive.Description
146
      data-slot="number-field-description"
147
      class={cn("text-sm text-muted-foreground", local.class)}
148
      {...others}
149
    />
150
  );
151
};
152

153
type NumberFieldErrorMessageProps<T extends ValidComponent = "div"> =
154
  NumberFieldPrimitive.NumberFieldErrorMessageProps<T> & {
155
    class?: string | undefined;
156
  };
157

158
const NumberFieldErrorMessage = <T extends ValidComponent = "div">(
159
  props: PolymorphicProps<T, NumberFieldErrorMessageProps<T>>,
160
) => {
161
  const [local, others] = splitProps(props as NumberFieldErrorMessageProps, [
162
    "class",
163
  ]);
164
  return (
165
    <NumberFieldPrimitive.ErrorMessage
166
      data-slot="number-field-error-message"
167
      class={cn("text-sm text-error-foreground", local.class)}
168
      {...others}
169
    />
170
  );
171
};
172

173
export {
174
  NumberField,
175
  NumberFieldGroup,
176
  NumberFieldLabel,
177
  NumberFieldInput,
178
  NumberFieldIncrementTrigger,
179
  NumberFieldDecrementTrigger,
180
  NumberFieldDescription,
181
  NumberFieldErrorMessage,
182
};