From 1dec7b49ee712e45554ab2f78d75b259b5705d70 Mon Sep 17 00:00:00 2001
From: AOKI Takashi <55625375+RyushiAok@users.noreply.github.com>
Date: Fri, 4 Oct 2024 14:30:05 +0900
Subject: [PATCH 1/9] wip: number-input

---
 packages/constants/component/name.ts          |  1 +
 packages/styles/bases/number-input.css.ts     | 69 ++++++++++++++
 .../inputs/number-input/components/index.ts   |  1 +
 .../number-input/components/number-input.tsx  | 92 +++++++++++++++++++
 .../base/inputs/number-input/index.ts         |  1 +
 .../stories/number-input.stories.tsx          | 34 +++++++
 6 files changed, 198 insertions(+)
 create mode 100644 packages/styles/bases/number-input.css.ts
 create mode 100644 packages/wiz-ui-react/src/components/base/inputs/number-input/components/index.ts
 create mode 100644 packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
 create mode 100644 packages/wiz-ui-react/src/components/base/inputs/number-input/index.ts
 create mode 100644 packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx

diff --git a/packages/constants/component/name.ts b/packages/constants/component/name.ts
index e32fb8505..c583f9b8f 100644
--- a/packages/constants/component/name.ts
+++ b/packages/constants/component/name.ts
@@ -68,6 +68,7 @@ export const ComponentName = {
   ChatCard: "WizChatCard",
   ChatForm: "WizChatForm",
   ChatItem: "WizChatItem",
+  NumberInput: "WizNumberInput",
   Notification: "WizNotification",
   NotificationList: "WizNotificationList",
   NotificationPanel: "WizNotificationPanel",
diff --git a/packages/styles/bases/number-input.css.ts b/packages/styles/bases/number-input.css.ts
new file mode 100644
index 000000000..bd7cc7c9c
--- /dev/null
+++ b/packages/styles/bases/number-input.css.ts
@@ -0,0 +1,69 @@
+import { style } from "@vanilla-extract/css";
+import { THEME } from "@wizleap-inc/wiz-ui-constants";
+
+const BORDER_WIDTH = "1px";
+
+export const datePickerStyle = style({
+  width: "100%",
+  borderRadius: THEME.spacing.xs2,
+  boxSizing: "border-box",
+  padding: `calc(${THEME.spacing.xs} - ${BORDER_WIDTH}) ${THEME.spacing.xs}`,
+  fontSize: THEME.fontSize.sm,
+  lineHeight: THEME.fontSize.xl3,
+});
+
+export const InputStyle = style({
+  "::-webkit-outer-spin-button": {
+    appearance: "none",
+    margin: 0,
+  },
+  "::-webkit-inner-spin-button": {
+    appearance: "none",
+    margin: 0,
+  },
+  MozAppearance: "textfield",
+  minWidth: "30%",
+  border: "none",
+  outline: "none",
+  padding: `${THEME.spacing.xs2} ${THEME.spacing.no}`,
+  lineHeight: THEME.fontSize.xl,
+  flexGrow: 1,
+  fontSize: THEME.fontSize.sm,
+  color: THEME.color.gray["800"],
+  "::placeholder": {
+    color: THEME.color.gray["500"],
+    userSelect: "none",
+  },
+  ":disabled": {
+    cursor: "not-allowed",
+    backgroundColor: THEME.color.gray["300"],
+  },
+});
+
+export const ButtonStyle = style({
+  lineHeight: 0.2,
+  position: "relative",
+  cursor: "pointer",
+  padding: THEME.spacing.no,
+  borderRadius: THEME.spacing.xs2,
+  border: "none",
+  background: "transparent",
+  fill: THEME.color.gray["800"],
+  "@media": {
+    "(any-hover: hover)": {
+      ":hover": {
+        backgroundColor: THEME.color.green["300"],
+        fill: THEME.color.green["800"],
+      },
+    },
+  },
+  ":active": {
+    backgroundColor: THEME.color.green["800"],
+    fill: THEME.color.white["800"],
+  },
+});
+
+export const ArrowIconStyle = style({
+  transform: "scale(2)",
+  pointerEvents: "none",
+});
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/index.ts b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/index.ts
new file mode 100644
index 000000000..5f0382f95
--- /dev/null
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/index.ts
@@ -0,0 +1 @@
+export { WizNumberInput } from "./number-input";
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
new file mode 100644
index 000000000..92ff27c98
--- /dev/null
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
@@ -0,0 +1,92 @@
+import { ARIA_LABELS, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import * as styles from "@wizleap-inc/wiz-ui-styles/bases/number-input.css";
+import {
+  fillStyle,
+  fontSizeStyle,
+  inputBorderStyle,
+} from "@wizleap-inc/wiz-ui-styles/commons";
+import clsx from "clsx";
+import { ChangeEvent, useRef } from "react";
+
+import { WizIArrowDropDown, WizIArrowDropUp, WizVStack } from "@/components";
+import { BaseProps } from "@/types";
+
+type Props = BaseProps & {
+  value: number;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  width?: string;
+  error?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+};
+
+const NumberInput = (props: Props) => {
+  const { value, onChange, ...rest } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleStepUp = () => inputRef.current?.stepUp();
+  const handleStepDown = () => inputRef.current?.stepDown();
+
+  return (
+    <div
+      className={clsx(inputBorderStyle["default"])}
+      style={{ display: "flex", alignItems: "center", borderColor: "black" }}
+    >
+      <input
+        className={clsx(styles.InputStyle)}
+        type="number"
+        value={value}
+        ref={inputRef}
+        onChange={onChange}
+        style={{
+          width: "50px",
+          textAlign: "center",
+          margin: "0 10px",
+          padding: "5px",
+        }}
+        {...rest}
+      />
+
+      <WizVStack>
+        <button
+          type="button"
+          onClick={handleStepUp}
+          className={styles.ButtonStyle}
+          aria-label={ARIA_LABELS.YEAR_SELECTOR_NEXT}
+        >
+          <WizIArrowDropUp
+            className={clsx(
+              fillStyle["gray.800"],
+              fontSizeStyle["xs2"],
+              styles.ArrowIconStyle
+            )}
+          />
+        </button>
+        <button
+          type="button"
+          onClick={handleStepDown}
+          className={styles.ButtonStyle}
+          aria-label={ARIA_LABELS.YEAR_SELECTOR_PREV}
+        >
+          <WizIArrowDropDown
+            className={clsx(
+              fillStyle["gray.800"],
+              fontSizeStyle["xs2"],
+              styles.ArrowIconStyle
+            )}
+          />
+        </button>
+      </WizVStack>
+    </div>
+  );
+};
+
+export default NumberInput;
+
+NumberInput.displayName = ComponentName.NumberInput;
+
+export const WizNumberInput = NumberInput;
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/index.ts b/packages/wiz-ui-react/src/components/base/inputs/number-input/index.ts
new file mode 100644
index 000000000..40b494c5f
--- /dev/null
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/index.ts
@@ -0,0 +1 @@
+export * from "./components";
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
new file mode 100644
index 000000000..a0154ff2f
--- /dev/null
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
+
+import { WizNumberInput } from "..";
+
+const meta: Meta<typeof WizNumberInput> = {
+  title: "Base/Input/NumberInput",
+  component: WizNumberInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof WizNumberInput>;
+
+const Template: Story = {
+  render: (args) => {
+    return (
+      <div>
+        <WizNumberInput {...args} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textbox = canvas.getByRole("textbox");
+    userEvent.click(textbox);
+    textbox.blur();
+  },
+};
+
+export const Default: Story = {
+  ...Template,
+  args: {},
+};

From 4d6a8f2dee35ed6a7d897b7b490a399903e7dbd2 Mon Sep 17 00:00:00 2001
From: AOKI Takashi <55625375+RyushiAok@users.noreply.github.com>
Date: Fri, 4 Oct 2024 16:21:39 +0900
Subject: [PATCH 2/9] feat(number-input): react

---
 packages/styles/bases/number-input.css.ts     | 30 +++++---
 .../number-input/components/number-input.tsx  | 75 +++++++++++++------
 .../stories/number-input.stories.tsx          | 22 +++++-
 3 files changed, 88 insertions(+), 39 deletions(-)

diff --git a/packages/styles/bases/number-input.css.ts b/packages/styles/bases/number-input.css.ts
index bd7cc7c9c..ab2fbed2e 100644
--- a/packages/styles/bases/number-input.css.ts
+++ b/packages/styles/bases/number-input.css.ts
@@ -1,18 +1,20 @@
 import { style } from "@vanilla-extract/css";
 import { THEME } from "@wizleap-inc/wiz-ui-constants";
 
-const BORDER_WIDTH = "1px";
-
-export const datePickerStyle = style({
-  width: "100%",
+export const container = style({
+  position: "relative",
+  background: THEME.color.white["800"],
   borderRadius: THEME.spacing.xs2,
   boxSizing: "border-box",
-  padding: `calc(${THEME.spacing.xs} - ${BORDER_WIDTH}) ${THEME.spacing.xs}`,
-  fontSize: THEME.fontSize.sm,
-  lineHeight: THEME.fontSize.xl3,
+  overflow: "hidden",
 });
 
-export const InputStyle = style({
+export const disabled = style({
+  backgroundColor: THEME.color.gray[300],
+  cursor: "not-allowed",
+});
+
+export const input = style({
   "::-webkit-outer-spin-button": {
     appearance: "none",
     margin: 0,
@@ -22,6 +24,7 @@ export const InputStyle = style({
     margin: 0,
   },
   MozAppearance: "textfield",
+  textAlign: "center",
   minWidth: "30%",
   border: "none",
   outline: "none",
@@ -40,13 +43,16 @@ export const InputStyle = style({
   },
 });
 
-export const ButtonStyle = style({
+export const button = style({
   lineHeight: 0.2,
   position: "relative",
   cursor: "pointer",
-  padding: THEME.spacing.no,
-  borderRadius: THEME.spacing.xs2,
+  padding: THEME.spacing.xs2,
+  borderRadius: THEME.spacing.no,
+  boxSizing: "border-box",
+  borderColor: THEME.color.gray["400"],
   border: "none",
+  borderLeft: `1px solid ${THEME.color.gray["400"]}`,
   background: "transparent",
   fill: THEME.color.gray["800"],
   "@media": {
@@ -63,7 +69,7 @@ export const ButtonStyle = style({
   },
 });
 
-export const ArrowIconStyle = style({
+export const arrowIcon = style({
   transform: "scale(2)",
   pointerEvents: "none",
 });
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
index 92ff27c98..e4cb0bcdd 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
@@ -8,11 +8,16 @@ import {
 import clsx from "clsx";
 import { ChangeEvent, useRef } from "react";
 
-import { WizIArrowDropDown, WizIArrowDropUp, WizVStack } from "@/components";
+import {
+  WizDivider,
+  WizIArrowDropDown,
+  WizIArrowDropUp,
+  WizVStack,
+} from "@/components";
 import { BaseProps } from "@/types";
 
 type Props = BaseProps & {
-  value: number;
+  value: number | null;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
   disabled?: boolean;
@@ -25,58 +30,82 @@ type Props = BaseProps & {
 };
 
 const NumberInput = (props: Props) => {
-  const { value, onChange, ...rest } = props;
+  const {
+    className,
+    style,
+    value,
+    width = "7rem",
+    onChange,
+    disabled,
+    ...rest
+  } = props;
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleStepUp = () => inputRef.current?.stepUp();
-  const handleStepDown = () => inputRef.current?.stepDown();
+  const triggerChangeEvent = () => {
+    const event = new Event("input", { bubbles: true });
+    if (inputRef.current) {
+      inputRef.current.dispatchEvent(event);
+    }
+  };
+  const handleStepUp = () => {
+    inputRef.current?.stepUp();
+    triggerChangeEvent();
+  };
+  const handleStepDown = () => {
+    inputRef.current?.stepDown();
+    triggerChangeEvent();
+  };
 
   return (
     <div
-      className={clsx(inputBorderStyle["default"])}
-      style={{ display: "flex", alignItems: "center", borderColor: "black" }}
+      className={clsx(
+        styles.container,
+        disabled && styles.disabled,
+        inputBorderStyle["default"],
+        className
+      )}
+      style={{
+        display: "flex",
+        width: width,
+        ...style,
+      }}
     >
       <input
-        className={clsx(styles.InputStyle)}
+        className={clsx(styles.input)}
         type="number"
-        value={value}
+        value={value || ""}
         ref={inputRef}
         onChange={onChange}
-        style={{
-          width: "50px",
-          textAlign: "center",
-          margin: "0 10px",
-          padding: "5px",
-        }}
+        disabled={disabled}
         {...rest}
       />
-
       <WizVStack>
         <button
           type="button"
           onClick={handleStepUp}
-          className={styles.ButtonStyle}
+          className={styles.button}
           aria-label={ARIA_LABELS.YEAR_SELECTOR_NEXT}
         >
           <WizIArrowDropUp
             className={clsx(
-              fillStyle["gray.800"],
+              fillStyle["gray.500"],
               fontSizeStyle["xs2"],
-              styles.ArrowIconStyle
+              styles.arrowIcon
             )}
           />
         </button>
+        <WizDivider />
         <button
           type="button"
           onClick={handleStepDown}
-          className={styles.ButtonStyle}
+          className={styles.button}
           aria-label={ARIA_LABELS.YEAR_SELECTOR_PREV}
         >
           <WizIArrowDropDown
             className={clsx(
-              fillStyle["gray.800"],
+              fillStyle["gray.500"],
               fontSizeStyle["xs2"],
-              styles.ArrowIconStyle
+              styles.arrowIcon
             )}
           />
         </button>
@@ -85,8 +114,6 @@ const NumberInput = (props: Props) => {
   );
 };
 
-export default NumberInput;
-
 NumberInput.displayName = ComponentName.NumberInput;
 
 export const WizNumberInput = NumberInput;
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
index a0154ff2f..ba0045ffb 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/testing-library";
+import { useState } from "react";
 
 import { WizNumberInput } from "..";
 
@@ -14,10 +15,18 @@ type Story = StoryObj<typeof WizNumberInput>;
 
 const Template: Story = {
   render: (args) => {
+    const [value, setValue] = useState<number | null>(0);
     return (
-      <div>
-        <WizNumberInput {...args} />
-      </div>
+      <>
+        <WizNumberInput
+          {...args}
+          value={value}
+          onChange={(e) => {
+            setValue(e.currentTarget.valueAsNumber);
+          }}
+        />
+        <div> value : {value} </div>
+      </>
     );
   },
   play: async ({ canvasElement }) => {
@@ -32,3 +41,10 @@ export const Default: Story = {
   ...Template,
   args: {},
 };
+
+export const Placeholder: Story = {
+  ...Template,
+  args: {
+    placeholder: "数字を入力",
+  },
+};

From d2e789e606ed0be4d5ce0d1ffb7ffd09f2598d4b Mon Sep 17 00:00:00 2001
From: AOKI Takashi <55625375+RyushiAok@users.noreply.github.com>
Date: Fri, 4 Oct 2024 16:37:26 +0900
Subject: [PATCH 3/9] feat(number-input): vue

---
 packages/styles/bases/number-input.css.ts     |   4 +-
 .../base/inputs/number-input/index.ts         |   1 +
 .../number-input/number-input.stories.ts      |  30 ++++
 .../base/inputs/number-input/number-input.vue | 137 ++++++++++++++++++
 4 files changed, 170 insertions(+), 2 deletions(-)
 create mode 100644 packages/wiz-ui-next/src/components/base/inputs/number-input/index.ts
 create mode 100644 packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts
 create mode 100644 packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue

diff --git a/packages/styles/bases/number-input.css.ts b/packages/styles/bases/number-input.css.ts
index ab2fbed2e..37102743b 100644
--- a/packages/styles/bases/number-input.css.ts
+++ b/packages/styles/bases/number-input.css.ts
@@ -24,11 +24,11 @@ export const input = style({
     margin: 0,
   },
   MozAppearance: "textfield",
-  textAlign: "center",
+  textAlign: "right",
   minWidth: "30%",
   border: "none",
   outline: "none",
-  padding: `${THEME.spacing.xs2} ${THEME.spacing.no}`,
+  padding: `${THEME.spacing.xs2} ${THEME.spacing.xs}`,
   lineHeight: THEME.fontSize.xl,
   flexGrow: 1,
   fontSize: THEME.fontSize.sm,
diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/index.ts b/packages/wiz-ui-next/src/components/base/inputs/number-input/index.ts
new file mode 100644
index 000000000..dd5b23851
--- /dev/null
+++ b/packages/wiz-ui-next/src/components/base/inputs/number-input/index.ts
@@ -0,0 +1 @@
+export { default as WizNumberInput } from "./number-input.vue";
diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts
new file mode 100644
index 000000000..462ff8305
--- /dev/null
+++ b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts
@@ -0,0 +1,30 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+
+import { WizHStack } from "@/components";
+
+import { WizNumberInput } from ".";
+
+export default {
+  title: "Base/Input/NumberInput",
+  component: WizNumberInput,
+} as Meta<typeof WizNumberInput>;
+
+const Template: StoryFn<typeof WizNumberInput> = (args) => ({
+  components: { WizNumberInput, WizHStack },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+      <WizNumberInput v-bind="args" v-model="args.modelValue"/>
+      <div> value : {{ args.modelValue }} </div>
+    </div>
+  `,
+});
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  placeholder: "数字を入力",
+};
diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
new file mode 100644
index 000000000..f7eca9c12
--- /dev/null
+++ b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
@@ -0,0 +1,137 @@
+<template>
+  <div
+    :class="[
+      styles.container,
+      disabled && styles.disabled,
+      inputBorderStyle['default'],
+    ]"
+    :style="{ display: 'flex', width: width }"
+  >
+    <input
+      :class="styles.input"
+      type="number"
+      :value="inputValue"
+      ref="inputRef"
+      @input="onInput"
+      v-bind="restProps"
+    />
+    <WizVStack>
+      <button
+        type="button"
+        @click="handleStepUp"
+        :class="styles.button"
+        :aria-label="ARIA_LABELS.YEAR_SELECTOR_NEXT"
+      >
+        <WizIArrowDropUp
+          :class="[
+            fillStyle['gray.500'],
+            fontSizeStyle['xs2'],
+            styles.arrowIcon,
+          ]"
+        />
+      </button>
+      <WizDivider />
+      <button
+        type="button"
+        @click="handleStepDown"
+        :class="styles.button"
+        :aria-label="ARIA_LABELS.YEAR_SELECTOR_PREV"
+      >
+        <WizIArrowDropDown
+          :class="[
+            fillStyle['gray.500'],
+            fontSizeStyle['xs2'],
+            styles.arrowIcon,
+          ]"
+        />
+      </button>
+    </WizVStack>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T = number">
+import { ARIA_LABELS, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import * as styles from "@wizleap-inc/wiz-ui-styles/bases/number-input.css";
+import {
+  fillStyle,
+  fontSizeStyle,
+  inputBorderStyle,
+} from "@wizleap-inc/wiz-ui-styles/commons";
+import { computed, ref } from "vue";
+
+import {
+  WizDivider,
+  WizIArrowDropDown,
+  WizIArrowDropUp,
+  WizVStack,
+} from "@/components";
+
+defineOptions({
+  name: ComponentName.NumberInput,
+});
+
+type Props = {
+  modelValue: number | null;
+  placeholder?: string;
+  disabled?: boolean;
+  width?: string;
+  error?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  width: "7rem",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const inputValue = computed({
+  get() {
+    return props.modelValue !== null ? props.modelValue : "";
+  },
+  set(value) {
+    emit("update:modelValue", value !== "" ? Number(value) : null);
+  },
+});
+
+const triggerChangeEvent = () => {
+  if (inputRef.value) {
+    const event = new Event("input", { bubbles: true });
+    inputRef.value.dispatchEvent(event);
+  }
+};
+
+const handleStepUp = () => {
+  if (inputRef.value) {
+    inputRef.value.stepUp();
+    triggerChangeEvent();
+  }
+};
+
+const handleStepDown = () => {
+  if (inputRef.value) {
+    inputRef.value.stepDown();
+    triggerChangeEvent();
+  }
+};
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = target.value;
+  emit("update:modelValue", value !== "" ? Number(value) : null);
+};
+
+const restProps = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { modelValue, width, ...rest } = props;
+  return rest;
+});
+
+const disabled = computed(() => props.disabled);
+const width = computed(() => props.width);
+</script>

From 333fceac8332db74a281a514b7635fbc540ef88f Mon Sep 17 00:00:00 2001
From: RyushiAok <55625375+RyushiAok@users.noreply.github.com>
Date: Sun, 6 Oct 2024 00:03:46 +0900
Subject: [PATCH 4/9] feat(number-input): button, disabled, error style

---
 packages/styles/bases/number-input.css.ts     | 24 +++++----
 .../number-input/number-input.stories.ts      | 11 ++++
 .../base/inputs/number-input/number-input.vue | 47 ++++++++--------
 .../components/custom/form/group.stories.ts   | 13 +++++
 .../number-input/components/number-input.tsx  | 53 ++++++++++---------
 .../stories/number-input.stories.tsx          | 31 +++++------
 .../custom/form/stories/all-input.tsx         |  9 ++++
 7 files changed, 117 insertions(+), 71 deletions(-)

diff --git a/packages/styles/bases/number-input.css.ts b/packages/styles/bases/number-input.css.ts
index 37102743b..532c9f191 100644
--- a/packages/styles/bases/number-input.css.ts
+++ b/packages/styles/bases/number-input.css.ts
@@ -40,6 +40,7 @@ export const input = style({
   ":disabled": {
     cursor: "not-allowed",
     backgroundColor: THEME.color.gray["300"],
+    color: THEME.color.gray["500"],
   },
 });
 
@@ -54,18 +55,23 @@ export const button = style({
   border: "none",
   borderLeft: `1px solid ${THEME.color.gray["400"]}`,
   background: "transparent",
-  fill: THEME.color.gray["800"],
-  "@media": {
-    "(any-hover: hover)": {
-      ":hover": {
-        backgroundColor: THEME.color.green["300"],
-        fill: THEME.color.green["800"],
+  fill: THEME.color.gray["500"],
+  selectors: {
+    "&:hover:not(:disabled)": {
+      "@media": {
+        "(any-hover: hover)": {
+          backgroundColor: THEME.color.green["300"],
+          fill: THEME.color.green["800"],
+        },
       },
     },
+    "&:active:not(:disabled)": {
+      backgroundColor: THEME.color.green["800"],
+      fill: THEME.color.white["800"],
+    },
   },
-  ":active": {
-    backgroundColor: THEME.color.green["800"],
-    fill: THEME.color.white["800"],
+  ":disabled": {
+    cursor: "not-allowed",
   },
 });
 
diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts
index 462ff8305..c1c2d3cbd 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.stories.ts
@@ -28,3 +28,14 @@ export const Placeholder = Template.bind({});
 Placeholder.args = {
   placeholder: "数字を入力",
 };
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  modelValue: 100,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 100,
+  disabled: true,
+};
diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
index f7eca9c12..9676cfdac 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
@@ -3,9 +3,11 @@
     :class="[
       styles.container,
       disabled && styles.disabled,
-      inputBorderStyle['default'],
+      inputBorderStyle[isError ? 'error' : hasFocus ? 'active' : 'default'],
     ]"
     :style="{ display: 'flex', width: width }"
+    @focusin="hasFocus = true"
+    @focusout="hasFocus = false"
   >
     <input
       :class="styles.input"
@@ -14,20 +16,20 @@
       ref="inputRef"
       @input="onInput"
       v-bind="restProps"
+      :disabled="disabled"
     />
     <WizVStack>
       <button
         type="button"
         @click="handleStepUp"
         :class="styles.button"
-        :aria-label="ARIA_LABELS.YEAR_SELECTOR_NEXT"
+        :disabled="disabled"
       >
-        <WizIArrowDropUp
-          :class="[
-            fillStyle['gray.500'],
-            fontSizeStyle['xs2'],
-            styles.arrowIcon,
-          ]"
+        <WizIcon
+          :icon="WizIArrowDropUp"
+          :class="[styles.arrowIcon]"
+          size="xs2"
+          color="inherit"
         />
       </button>
       <WizDivider />
@@ -35,14 +37,13 @@
         type="button"
         @click="handleStepDown"
         :class="styles.button"
-        :aria-label="ARIA_LABELS.YEAR_SELECTOR_PREV"
+        :disabled="disabled"
       >
-        <WizIArrowDropDown
-          :class="[
-            fillStyle['gray.500'],
-            fontSizeStyle['xs2'],
-            styles.arrowIcon,
-          ]"
+        <WizIcon
+          :icon="WizIArrowDropDown"
+          :class="[styles.arrowIcon]"
+          size="xs2"
+          color="inherit"
         />
       </button>
     </WizVStack>
@@ -50,21 +51,19 @@
 </template>
 
 <script setup lang="ts" generic="T = number">
-import { ARIA_LABELS, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/number-input.css";
-import {
-  fillStyle,
-  fontSizeStyle,
-  inputBorderStyle,
-} from "@wizleap-inc/wiz-ui-styles/commons";
-import { computed, ref } from "vue";
+import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
+import { computed, inject, ref } from "vue";
 
 import {
   WizDivider,
   WizIArrowDropDown,
   WizIArrowDropUp,
+  WizIcon,
   WizVStack,
 } from "@/components";
+import { formControlKey } from "@/hooks/use-form-control-provider";
 
 defineOptions({
   name: ComponentName.NumberInput,
@@ -88,6 +87,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 
+const form = inject(formControlKey);
+const isError = computed(() => (form ? form.isError.value : false));
+const hasFocus = ref(false);
+
 const inputRef = ref<HTMLInputElement | null>(null);
 
 const inputValue = computed({
diff --git a/packages/wiz-ui-next/src/components/custom/form/group.stories.ts b/packages/wiz-ui-next/src/components/custom/form/group.stories.ts
index 0d740d29f..3dea3a676 100644
--- a/packages/wiz-ui-next/src/components/custom/form/group.stories.ts
+++ b/packages/wiz-ui-next/src/components/custom/form/group.stories.ts
@@ -24,6 +24,7 @@ import {
   DateRange,
   DateRangePickerSelectBoxOption,
 } from "@/components/base/inputs/date-range-picker/types";
+import { WizNumberInput } from "@/components/base/inputs/number-input";
 import { RadioOption } from "@/components/base/inputs/radio/types";
 import { SelectBoxOption } from "@/components/base/inputs/selectbox/types";
 
@@ -211,6 +212,7 @@ export const AllInput: StoryFn<typeof WizFormControl> = () => ({
     WizDatePicker,
     WizTimePicker,
     WizDateRangePicker,
+    WizNumberInput,
   },
   setup() {
     const textInput = ref("");
@@ -256,6 +258,7 @@ export const AllInput: StoryFn<typeof WizFormControl> = () => ({
       { label: "選択肢3", value: "3" },
     ]);
     const selectBoxInput = ref("");
+    const numberInput = ref<number>();
     return {
       textInput,
       passwordInput,
@@ -271,6 +274,7 @@ export const AllInput: StoryFn<typeof WizFormControl> = () => ({
       dateRangeInput,
       selectBoxOptions,
       selectBoxInput,
+      numberInput,
     };
   },
   template: `
@@ -302,6 +306,9 @@ export const AllInput: StoryFn<typeof WizFormControl> = () => ({
       <WizFormControl label="WizDateRangePicker">
         <WizDateRangePicker v-model="dateRangeInput" name="dateRangeInput" :selectBoxOptions="selectBoxOptions" v-model:selectBoxValue="selectBoxInput" />
       </WizFormControl>
+      <WizFormControl label="WizNumberInput">
+        <WizNumberInput v-model="numberInput" name="numberInput" />
+      </WizFormControl>
     </WizFormGroup>
   `,
 });
@@ -319,6 +326,7 @@ export const AllInputError: StoryFn<typeof WizFormControl> = () => ({
     WizDatePicker,
     WizTimePicker,
     WizDateRangePicker,
+    WizNumberInput,
   },
   setup() {
     const textInput = ref("");
@@ -364,6 +372,7 @@ export const AllInputError: StoryFn<typeof WizFormControl> = () => ({
       { label: "選択肢3", value: "3" },
     ]);
     const selectBoxInput = ref("");
+    const numberInput = ref<number>();
     return {
       textInput,
       passwordInput,
@@ -379,6 +388,7 @@ export const AllInputError: StoryFn<typeof WizFormControl> = () => ({
       dateRangeInput,
       selectBoxOptions,
       selectBoxInput,
+      numberInput,
     };
   },
   template: `
@@ -410,6 +420,9 @@ export const AllInputError: StoryFn<typeof WizFormControl> = () => ({
       <WizFormControl label="WizDateRangePicker" error="エラーが発生しました">
         <WizDateRangePicker v-model="dateRangeInput" name="dateRangeInput" :selectBoxOptions="selectBoxOptions" v-model:selectBoxValue="selectBoxInput" />
       </WizFormControl>
+      <WizFormControl label="WizNumberInput" error="エラーが発生しました">
+        <WizNumberInput v-model="numberInput" name="numberInput" />
+      </WizFormControl>
     </WizFormGroup>
   `,
 });
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
index e4cb0bcdd..f49b1e59d 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
@@ -1,24 +1,22 @@
-import { ARIA_LABELS, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/number-input.css";
-import {
-  fillStyle,
-  fontSizeStyle,
-  inputBorderStyle,
-} from "@wizleap-inc/wiz-ui-styles/commons";
+import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
-import { ChangeEvent, useRef } from "react";
+import { useContext, useRef, useState } from "react";
 
 import {
   WizDivider,
   WizIArrowDropDown,
   WizIArrowDropUp,
+  WizIcon,
   WizVStack,
 } from "@/components";
+import { FormControlContext } from "@/components/custom/form/components/form-control-context";
 import { BaseProps } from "@/types";
 
 type Props = BaseProps & {
   value: number | null;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: number | null) => void;
   placeholder?: string;
   disabled?: boolean;
   width?: string;
@@ -33,6 +31,7 @@ const NumberInput = (props: Props) => {
   const {
     className,
     style,
+    error,
     value,
     width = "7rem",
     onChange,
@@ -40,6 +39,9 @@ const NumberInput = (props: Props) => {
     ...rest
   } = props;
   const inputRef = useRef<HTMLInputElement>(null);
+  const formControl = useContext(FormControlContext);
+
+  const isError = error || formControl.error;
 
   const triggerChangeEvent = () => {
     const event = new Event("input", { bubbles: true });
@@ -56,12 +58,13 @@ const NumberInput = (props: Props) => {
     triggerChangeEvent();
   };
 
+  const [isFocused, setIsFocused] = useState(false);
   return (
     <div
       className={clsx(
         styles.container,
         disabled && styles.disabled,
-        inputBorderStyle["default"],
+        inputBorderStyle[isError ? "error" : isFocused ? "active" : "default"],
         className
       )}
       style={{
@@ -69,13 +72,15 @@ const NumberInput = (props: Props) => {
         width: width,
         ...style,
       }}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
     >
       <input
         className={clsx(styles.input)}
         type="number"
-        value={value || ""}
+        value={value === null ? "" : value}
         ref={inputRef}
-        onChange={onChange}
+        onChange={(e) => onChange(e.currentTarget.valueAsNumber)}
         disabled={disabled}
         {...rest}
       />
@@ -84,14 +89,13 @@ const NumberInput = (props: Props) => {
           type="button"
           onClick={handleStepUp}
           className={styles.button}
-          aria-label={ARIA_LABELS.YEAR_SELECTOR_NEXT}
+          disabled={disabled}
         >
-          <WizIArrowDropUp
-            className={clsx(
-              fillStyle["gray.500"],
-              fontSizeStyle["xs2"],
-              styles.arrowIcon
-            )}
+          <WizIcon
+            className={styles.arrowIcon}
+            icon={WizIArrowDropUp}
+            size="xs2"
+            color="inherit"
           />
         </button>
         <WizDivider />
@@ -99,14 +103,13 @@ const NumberInput = (props: Props) => {
           type="button"
           onClick={handleStepDown}
           className={styles.button}
-          aria-label={ARIA_LABELS.YEAR_SELECTOR_PREV}
+          disabled={disabled}
         >
-          <WizIArrowDropDown
-            className={clsx(
-              fillStyle["gray.500"],
-              fontSizeStyle["xs2"],
-              styles.arrowIcon
-            )}
+          <WizIcon
+            className={styles.arrowIcon}
+            icon={WizIArrowDropDown}
+            size="xs2"
+            color="inherit"
           />
         </button>
       </WizVStack>
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
index ba0045ffb..bca1e0669 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
 import { useState } from "react";
 
 import { WizNumberInput } from "..";
@@ -15,26 +14,14 @@ type Story = StoryObj<typeof WizNumberInput>;
 
 const Template: Story = {
   render: (args) => {
-    const [value, setValue] = useState<number | null>(0);
+    const [value, setValue] = useState<number | null>(args.value);
     return (
       <>
-        <WizNumberInput
-          {...args}
-          value={value}
-          onChange={(e) => {
-            setValue(e.currentTarget.valueAsNumber);
-          }}
-        />
+        <WizNumberInput {...args} value={value} onChange={setValue} />
         <div> value : {value} </div>
       </>
     );
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const textbox = canvas.getByRole("textbox");
-    userEvent.click(textbox);
-    textbox.blur();
-  },
 };
 
 export const Default: Story = {
@@ -48,3 +35,17 @@ export const Placeholder: Story = {
     placeholder: "数字を入力",
   },
 };
+
+export const WithValue: Story = {
+  ...Template,
+  args: {
+    value: 100,
+  },
+};
+export const Disabled: Story = {
+  ...Template,
+  args: {
+    value: 100,
+    disabled: true,
+  },
+};
diff --git a/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx b/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx
index 20952c2ca..902561c04 100644
--- a/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx
+++ b/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx
@@ -7,6 +7,7 @@ import {
   WizTextInput,
   WizTimePicker,
 } from "@/components";
+import { WizNumberInput } from "@/components/base/inputs/number-input";
 
 import { WizFormControl, WizFormGroup } from "..";
 
@@ -24,6 +25,7 @@ const TemplateComponent = ({
   const [selectBoxValue, setSelectBoxValue] = useState<number | null>(null);
   const [checkBoxValues, setCheckBoxValues] = useState<number[]>([]);
   const [radioValue, setRadioValue] = useState<number | null>(null);
+  const [numberValue, setNumberValue] = useState<number | null>(null);
   const [timePickerValue, setTimePickerValue] =
     useState<ComponentProps<typeof WizTimePicker>["time"]>(null);
   return (
@@ -91,6 +93,13 @@ const TemplateComponent = ({
       </WizFormControl>
       {/* TODO: WizTextarea 追加待ち */}
       {/* TODO: WizDateRangePicker 追加待ち */}
+      <WizFormControl
+        label="WizNumberInput"
+        direction={direction}
+        error={error}
+      >
+        <WizNumberInput value={numberValue} onChange={setNumberValue} />
+      </WizFormControl>
     </WizFormGroup>
   );
 };

From d0e8556a47433c4e40226fe171b638e593103061 Mon Sep 17 00:00:00 2001
From: RyushiAok <55625375+RyushiAok@users.noreply.github.com>
Date: Sun, 6 Oct 2024 00:04:39 +0900
Subject: [PATCH 5/9] chore: add changeset

---
 .changeset/chilly-lobsters-talk.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/chilly-lobsters-talk.md

diff --git a/.changeset/chilly-lobsters-talk.md b/.changeset/chilly-lobsters-talk.md
new file mode 100644
index 000000000..c0677e145
--- /dev/null
+++ b/.changeset/chilly-lobsters-talk.md
@@ -0,0 +1,8 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-constants": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+Feat: WizNumberInput

From b8c3a3350a8158b1ab938107b7d37ca5f9b631f5 Mon Sep 17 00:00:00 2001
From: RyushiAok <55625375+RyushiAok@users.noreply.github.com>
Date: Mon, 7 Oct 2024 11:43:06 +0900
Subject: [PATCH 6/9] chore: fix linter error

---
 .../base/inputs/number-input/components/number-input.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
index f49b1e59d..c0c5c984b 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
@@ -59,12 +59,17 @@ const NumberInput = (props: Props) => {
   };
 
   const [isFocused, setIsFocused] = useState(false);
+  const borderStyle = (() => {
+    if (isError) return "error";
+    if (isFocused) return "active";
+    return "default";
+  })();
   return (
     <div
       className={clsx(
         styles.container,
         disabled && styles.disabled,
-        inputBorderStyle[isError ? "error" : isFocused ? "active" : "default"],
+        inputBorderStyle[borderStyle],
         className
       )}
       style={{

From af03af1555a662479f52662fe679b18a1551bc8b Mon Sep 17 00:00:00 2001
From: RyushiAok <55625375+RyushiAok@users.noreply.github.com>
Date: Mon, 7 Oct 2024 11:44:16 +0900
Subject: [PATCH 7/9] fix(number-input): icon container

---
 packages/styles/bases/number-input.css.ts         | 13 +++++++++----
 .../base/inputs/number-input/number-input.vue     | 15 ++-------------
 .../number-input/components/number-input.tsx      | 15 ++-------------
 3 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/styles/bases/number-input.css.ts b/packages/styles/bases/number-input.css.ts
index 532c9f191..5763cf11f 100644
--- a/packages/styles/bases/number-input.css.ts
+++ b/packages/styles/bases/number-input.css.ts
@@ -1,5 +1,6 @@
 import { style } from "@vanilla-extract/css";
 import { THEME } from "@wizleap-inc/wiz-ui-constants";
+import { fontSizeStyle } from "commons";
 
 export const container = style({
   position: "relative",
@@ -75,7 +76,11 @@ export const button = style({
   },
 });
 
-export const arrowIcon = style({
-  transform: "scale(2)",
-  pointerEvents: "none",
-});
+export const arrowIcon = style([
+  fontSizeStyle.xs2,
+  {
+    transform: "scale(2)",
+    pointerEvents: "none",
+    color: "currentcolor",
+  },
+]);
diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
index 9676cfdac..9d7b31b75 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
@@ -25,12 +25,7 @@
         :class="styles.button"
         :disabled="disabled"
       >
-        <WizIcon
-          :icon="WizIArrowDropUp"
-          :class="[styles.arrowIcon]"
-          size="xs2"
-          color="inherit"
-        />
+        <WizIArrowDropUp :class="[styles.arrowIcon]" />
       </button>
       <WizDivider />
       <button
@@ -39,12 +34,7 @@
         :class="styles.button"
         :disabled="disabled"
       >
-        <WizIcon
-          :icon="WizIArrowDropDown"
-          :class="[styles.arrowIcon]"
-          size="xs2"
-          color="inherit"
-        />
+        <WizIArrowDropDown :class="[styles.arrowIcon]" />
       </button>
     </WizVStack>
   </div>
@@ -60,7 +50,6 @@ import {
   WizDivider,
   WizIArrowDropDown,
   WizIArrowDropUp,
-  WizIcon,
   WizVStack,
 } from "@/components";
 import { formControlKey } from "@/hooks/use-form-control-provider";
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
index c0c5c984b..72fd52a03 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
@@ -8,7 +8,6 @@ import {
   WizDivider,
   WizIArrowDropDown,
   WizIArrowDropUp,
-  WizIcon,
   WizVStack,
 } from "@/components";
 import { FormControlContext } from "@/components/custom/form/components/form-control-context";
@@ -96,12 +95,7 @@ const NumberInput = (props: Props) => {
           className={styles.button}
           disabled={disabled}
         >
-          <WizIcon
-            className={styles.arrowIcon}
-            icon={WizIArrowDropUp}
-            size="xs2"
-            color="inherit"
-          />
+          <WizIArrowDropUp className={styles.arrowIcon} />
         </button>
         <WizDivider />
         <button
@@ -110,12 +104,7 @@ const NumberInput = (props: Props) => {
           className={styles.button}
           disabled={disabled}
         >
-          <WizIcon
-            className={styles.arrowIcon}
-            icon={WizIArrowDropDown}
-            size="xs2"
-            color="inherit"
-          />
+          <WizIArrowDropDown className={styles.arrowIcon} />
         </button>
       </WizVStack>
     </div>

From b7da62751b2110a8f6082c4abd935debf202ba42 Mon Sep 17 00:00:00 2001
From: RyushiAok <55625375+RyushiAok@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:08:46 +0900
Subject: [PATCH 8/9] fix(number-input): optional props

---
 .../base/inputs/number-input/number-input.vue      |  2 +-
 .../number-input/components/number-input.tsx       | 14 ++++++++++----
 .../number-input/stories/number-input.stories.tsx  |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
index 9d7b31b75..e79d2d258 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
@@ -59,7 +59,7 @@ defineOptions({
 });
 
 type Props = {
-  modelValue: number | null;
+  modelValue?: number;
   placeholder?: string;
   disabled?: boolean;
   width?: string;
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
index 72fd52a03..e25bc75a3 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
@@ -14,8 +14,8 @@ import { FormControlContext } from "@/components/custom/form/components/form-con
 import { BaseProps } from "@/types";
 
 type Props = BaseProps & {
-  value: number | null;
-  onChange: (e: number | null) => void;
+  value?: number;
+  onChange?: (e: number | undefined) => void;
   placeholder?: string;
   disabled?: boolean;
   width?: string;
@@ -82,9 +82,15 @@ const NumberInput = (props: Props) => {
       <input
         className={clsx(styles.input)}
         type="number"
-        value={value === null ? "" : value}
+        value={value}
         ref={inputRef}
-        onChange={(e) => onChange(e.currentTarget.valueAsNumber)}
+        onChange={(e) => {
+          onChange?.(
+            isNaN(e.currentTarget.valueAsNumber)
+              ? undefined
+              : e.currentTarget.valueAsNumber
+          );
+        }}
         disabled={disabled}
         {...rest}
       />
diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
index bca1e0669..31682859d 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof WizNumberInput>;
 
 const Template: Story = {
   render: (args) => {
-    const [value, setValue] = useState<number | null>(args.value);
+    const [value, setValue] = useState<number | undefined>(args.value);
     return (
       <>
         <WizNumberInput {...args} value={value} onChange={setValue} />

From 16fde5d71c9be59d1af2ad8b56fffc6d62f2bb16 Mon Sep 17 00:00:00 2001
From: ichi-h <85932406+ichi-h@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:52:26 +0900
Subject: [PATCH 9/9] =?UTF-8?q?fix(react):=20build=20error=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/styles/bases/number-input.css.ts                      | 3 ++-
 .../src/components/custom/form/stories/all-input.tsx           | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/styles/bases/number-input.css.ts b/packages/styles/bases/number-input.css.ts
index 5763cf11f..4f0d9b9ee 100644
--- a/packages/styles/bases/number-input.css.ts
+++ b/packages/styles/bases/number-input.css.ts
@@ -1,6 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { THEME } from "@wizleap-inc/wiz-ui-constants";
-import { fontSizeStyle } from "commons";
+
+import { fontSizeStyle } from "../commons";
 
 export const container = style({
   position: "relative",
diff --git a/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx b/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx
index 902561c04..5e1cafbc5 100644
--- a/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx
+++ b/packages/wiz-ui-react/src/components/custom/form/stories/all-input.tsx
@@ -25,7 +25,7 @@ const TemplateComponent = ({
   const [selectBoxValue, setSelectBoxValue] = useState<number | null>(null);
   const [checkBoxValues, setCheckBoxValues] = useState<number[]>([]);
   const [radioValue, setRadioValue] = useState<number | null>(null);
-  const [numberValue, setNumberValue] = useState<number | null>(null);
+  const [numberValue, setNumberValue] = useState<number | undefined>(undefined);
   const [timePickerValue, setTimePickerValue] =
     useState<ComponentProps<typeof WizTimePicker>["time"]>(null);
   return (