@yamada-ui/input 0.1.11 → 0.2.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { Input, InputProps } from './input.js';
-export { InputGroup, InputGroupProps, useInputGroup } from './input-group.js';
+export { InputGroup, InputGroupProps } from './input-group.js';
 export { InputAddonProps, InputLeftAddon, InputRightAddon } from './input-addon.js';
 export { InputElementProps, InputLeftElement, InputRightElement } from './input-element.js';
 import '@yamada-ui/core';

package/dist/index.js

@@ -25,8 +25,7 @@ __export(src_exports, {
   InputLeftAddon: () => InputLeftAddon,
   InputLeftElement: () => InputLeftElement,
   InputRightAddon: () => InputRightAddon,
-  InputRightElement: () => InputRightElement,
-  useInputGroup: () => useInputGroup
+  InputRightElement: () => InputRightElement
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -221,6 +220,5 @@ var InputRightElement = (0, import_core4.forwardRef)(
   InputLeftAddon,
   InputLeftElement,
   InputRightAddon,
-  InputRightElement,
-  useInputGroup
+  InputRightElement
 });

package/dist/index.mjs

@@ -3,8 +3,7 @@ import {
   InputLeftAddon,
   InputLeftElement,
   InputRightAddon,
-  InputRightElement,
-  useInputGroup
+  InputRightElement
 } from "./chunk-5IBH3I64.mjs";
 import {
   Input
@@ -15,6 +14,5 @@ export {
   InputLeftAddon,
   InputLeftElement,
   InputRightAddon,
-  InputRightElement,
-  useInputGroup
+  InputRightElement
 };

package/dist/input-addon.d.ts

@@ -2,6 +2,11 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps } from '@yamada-ui/core';
 
 type InputAddonOptions = {
+    /**
+     * The placement of the element.
+     *
+     * @default 'left'
+     */
     placement?: 'left' | 'right';
 };
 type InputAddonProps = HTMLUIProps<'div'> & InputAddonOptions;

package/dist/input-addon.js

@@ -27,6 +27,13 @@ module.exports = __toCommonJS(input_addon_exports);
 var import_core4 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 
+// src/input-group.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_file_input = require("@yamada-ui/file-input");
+var import_use_token = require("@yamada-ui/use-token");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react = require("react");
+
 // src/input.tsx
 var import_core = require("@yamada-ui/core");
 var import_form_control = require("@yamada-ui/form-control");
@@ -49,67 +56,11 @@ var Input = (0, import_core.forwardRef)((props, ref) => {
   );
 });
 
-// src/input-group.tsx
+// src/input-element.tsx
 var import_core2 = require("@yamada-ui/core");
-var import_file_input = require("@yamada-ui/file-input");
-var import_use_token = require("@yamada-ui/use-token");
 var import_utils2 = require("@yamada-ui/utils");
-var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var [InputGroupProvider, useInputGroup] = (0, import_utils2.createContext)({
-  name: "InputGroupContext",
-  errorMessage: `useInputGroup returned is 'undefined'. Seems you forgot to wrap the components in "<InputGroup />" `
-});
-var InputGroup = (0, import_core2.forwardRef)((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-  const [styles] = (0, import_core2.useMultiComponentStyle)("Input", props);
-  const { className, children, ...rest } = (0, import_core2.omitThemeProps)(props);
-  const css = {
-    width: "100%",
-    display: "flex",
-    position: "relative"
-  };
-  const groupProps = {};
-  const minHeight = (_g = (_e = (0, import_use_token.useToken)("sizes", (_c = (_a = styles.field) == null ? void 0 : _a.minHeight) != null ? _c : (_b = styles.field) == null ? void 0 : _b.minH)) != null ? _e : (_d = styles.field) == null ? void 0 : _d.minHeight) != null ? _g : (_f = styles.field) == null ? void 0 : _f.minH;
-  const height = (_n = (_l = (0, import_use_token.useToken)("sizes", (_j = (_h = styles.field) == null ? void 0 : _h.height) != null ? _j : (_i = styles.field) == null ? void 0 : _i.h)) != null ? _l : (_k = styles.field) == null ? void 0 : _k.height) != null ? _n : (_m = styles.field) == null ? void 0 : _m.h;
-  const validChildren = (0, import_utils2.getValidChildren)(children);
-  validChildren.forEach((child) => {
-    if ((minHeight || height) && child.type === InputLeftElement)
-      groupProps.paddingStart = height != null ? height : minHeight;
-    if ((minHeight || height) && child.type === InputRightElement)
-      groupProps.paddingEnd = height != null ? height : minHeight;
-    if (child.type === InputLeftAddon)
-      groupProps.roundedLeft = 0;
-    if (child.type === InputRightAddon)
-      groupProps.roundedRight = 0;
-  });
-  const cloneChildren = validChildren.map((child) => {
-    var _a2, _b2;
-    const childProps = (0, import_utils2.filterUndefined)({
-      size: ((_a2 = child.props) == null ? void 0 : _a2.size) || props.size,
-      variant: ((_b2 = child.props) == null ? void 0 : _b2.variant) || props.variant,
-      ...child.props
-    });
-    return child.type !== Input && child.type !== import_file_input.FileInput ? (0, import_react.cloneElement)(child, childProps) : (0, import_react.cloneElement)(child, Object.assign(childProps, groupProps));
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InputGroupProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_core2.ui.div,
-    {
-      ref,
-      className: (0, import_utils2.cx)("ui-input-group", className),
-      role: "group",
-      __css: css,
-      ...rest,
-      children: cloneChildren
-    }
-  ) });
-});
-
-// src/input-element.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var InputElement = (0, import_core3.forwardRef)(
+var InputElement = (0, import_core2.forwardRef)(
   ({ className, isClick = false, placement = "left", ...rest }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const styles = useInputGroup();
@@ -128,29 +79,29 @@ var InputElement = (0, import_core3.forwardRef)(
       cursor: isClick ? "pointer" : "auto",
       ...styles.element
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.div, { ref, className: (0, import_utils3.cx)("ui-input-element", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-input-element", className), __css: css, ...rest });
   }
 );
-var InputLeftElement = (0, import_core3.forwardRef)(
+var InputLeftElement = (0, import_core2.forwardRef)(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       InputElement,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-input-element-left", className),
+        className: (0, import_utils2.cx)("ui-input-element-left", className),
         placement: "left",
         ...rest
       }
     );
   }
 );
-var InputRightElement = (0, import_core3.forwardRef)(
+var InputRightElement = (0, import_core2.forwardRef)(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       InputElement,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-input-element-right", className),
+        className: (0, import_utils2.cx)("ui-input-element-right", className),
         placement: "right",
         ...rest
       }
@@ -158,6 +109,57 @@ var InputRightElement = (0, import_core3.forwardRef)(
   }
 );
 
+// src/input-group.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var [InputGroupProvider, useInputGroup] = (0, import_utils3.createContext)({
+  name: "InputGroupContext",
+  errorMessage: `useInputGroup returned is 'undefined'. Seems you forgot to wrap the components in "<InputGroup />" `
+});
+var InputGroup = (0, import_core3.forwardRef)((props, ref) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const [styles] = (0, import_core3.useMultiComponentStyle)("Input", props);
+  const { className, children, ...rest } = (0, import_core3.omitThemeProps)(props);
+  const css = {
+    width: "100%",
+    display: "flex",
+    position: "relative"
+  };
+  const groupProps = {};
+  const minHeight = (_g = (_e = (0, import_use_token.useToken)("sizes", (_c = (_a = styles.field) == null ? void 0 : _a.minHeight) != null ? _c : (_b = styles.field) == null ? void 0 : _b.minH)) != null ? _e : (_d = styles.field) == null ? void 0 : _d.minHeight) != null ? _g : (_f = styles.field) == null ? void 0 : _f.minH;
+  const height = (_n = (_l = (0, import_use_token.useToken)("sizes", (_j = (_h = styles.field) == null ? void 0 : _h.height) != null ? _j : (_i = styles.field) == null ? void 0 : _i.h)) != null ? _l : (_k = styles.field) == null ? void 0 : _k.height) != null ? _n : (_m = styles.field) == null ? void 0 : _m.h;
+  const validChildren = (0, import_utils3.getValidChildren)(children);
+  validChildren.forEach((child) => {
+    if ((minHeight || height) && child.type === InputLeftElement)
+      groupProps.paddingStart = height != null ? height : minHeight;
+    if ((minHeight || height) && child.type === InputRightElement)
+      groupProps.paddingEnd = height != null ? height : minHeight;
+    if (child.type === InputLeftAddon)
+      groupProps.roundedLeft = 0;
+    if (child.type === InputRightAddon)
+      groupProps.roundedRight = 0;
+  });
+  const cloneChildren = validChildren.map((child) => {
+    var _a2, _b2;
+    const childProps = (0, import_utils3.filterUndefined)({
+      size: ((_a2 = child.props) == null ? void 0 : _a2.size) || props.size,
+      variant: ((_b2 = child.props) == null ? void 0 : _b2.variant) || props.variant,
+      ...child.props
+    });
+    return child.type !== Input && child.type !== import_file_input.FileInput ? (0, import_react.cloneElement)(child, childProps) : (0, import_react.cloneElement)(child, Object.assign(childProps, groupProps));
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputGroupProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core3.ui.div,
+    {
+      ref,
+      className: (0, import_utils3.cx)("ui-input-group", className),
+      role: "group",
+      __css: css,
+      ...rest,
+      children: cloneChildren
+    }
+  ) });
+});
+
 // src/input-addon.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputAddon = (0, import_core4.forwardRef)(

package/dist/input-element.d.ts

@@ -2,7 +2,17 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps } from '@yamada-ui/core';
 
 type InputElementOptions = {
+    /**
+     * If `true`, the element clickable.
+     *
+     * @default false
+     */
     isClick?: boolean;
+    /**
+     * The placement of the element.
+     *
+     * @default 'left'
+     */
     placement?: 'left' | 'right';
 };
 type InputElementProps = HTMLUIProps<'div'> & InputElementOptions;

package/dist/input-element.js

@@ -27,6 +27,13 @@ module.exports = __toCommonJS(input_element_exports);
 var import_core4 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 
+// src/input-group.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_file_input = require("@yamada-ui/file-input");
+var import_use_token = require("@yamada-ui/use-token");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react = require("react");
+
 // src/input.tsx
 var import_core = require("@yamada-ui/core");
 var import_form_control = require("@yamada-ui/form-control");
@@ -49,67 +56,11 @@ var Input = (0, import_core.forwardRef)((props, ref) => {
   );
 });
 
-// src/input-group.tsx
+// src/input-addon.tsx
 var import_core2 = require("@yamada-ui/core");
-var import_file_input = require("@yamada-ui/file-input");
-var import_use_token = require("@yamada-ui/use-token");
 var import_utils2 = require("@yamada-ui/utils");
-var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var [InputGroupProvider, useInputGroup] = (0, import_utils2.createContext)({
-  name: "InputGroupContext",
-  errorMessage: `useInputGroup returned is 'undefined'. Seems you forgot to wrap the components in "<InputGroup />" `
-});
-var InputGroup = (0, import_core2.forwardRef)((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-  const [styles] = (0, import_core2.useMultiComponentStyle)("Input", props);
-  const { className, children, ...rest } = (0, import_core2.omitThemeProps)(props);
-  const css = {
-    width: "100%",
-    display: "flex",
-    position: "relative"
-  };
-  const groupProps = {};
-  const minHeight = (_g = (_e = (0, import_use_token.useToken)("sizes", (_c = (_a = styles.field) == null ? void 0 : _a.minHeight) != null ? _c : (_b = styles.field) == null ? void 0 : _b.minH)) != null ? _e : (_d = styles.field) == null ? void 0 : _d.minHeight) != null ? _g : (_f = styles.field) == null ? void 0 : _f.minH;
-  const height = (_n = (_l = (0, import_use_token.useToken)("sizes", (_j = (_h = styles.field) == null ? void 0 : _h.height) != null ? _j : (_i = styles.field) == null ? void 0 : _i.h)) != null ? _l : (_k = styles.field) == null ? void 0 : _k.height) != null ? _n : (_m = styles.field) == null ? void 0 : _m.h;
-  const validChildren = (0, import_utils2.getValidChildren)(children);
-  validChildren.forEach((child) => {
-    if ((minHeight || height) && child.type === InputLeftElement)
-      groupProps.paddingStart = height != null ? height : minHeight;
-    if ((minHeight || height) && child.type === InputRightElement)
-      groupProps.paddingEnd = height != null ? height : minHeight;
-    if (child.type === InputLeftAddon)
-      groupProps.roundedLeft = 0;
-    if (child.type === InputRightAddon)
-      groupProps.roundedRight = 0;
-  });
-  const cloneChildren = validChildren.map((child) => {
-    var _a2, _b2;
-    const childProps = (0, import_utils2.filterUndefined)({
-      size: ((_a2 = child.props) == null ? void 0 : _a2.size) || props.size,
-      variant: ((_b2 = child.props) == null ? void 0 : _b2.variant) || props.variant,
-      ...child.props
-    });
-    return child.type !== Input && child.type !== import_file_input.FileInput ? (0, import_react.cloneElement)(child, childProps) : (0, import_react.cloneElement)(child, Object.assign(childProps, groupProps));
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InputGroupProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_core2.ui.div,
-    {
-      ref,
-      className: (0, import_utils2.cx)("ui-input-group", className),
-      role: "group",
-      __css: css,
-      ...rest,
-      children: cloneChildren
-    }
-  ) });
-});
-
-// src/input-addon.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var InputAddon = (0, import_core3.forwardRef)(
+var InputAddon = (0, import_core2.forwardRef)(
   ({ className, placement = "left", ...rest }, ref) => {
     const styles = useInputGroup();
     const placementStyles = {
@@ -133,32 +84,83 @@ var InputAddon = (0, import_core3.forwardRef)(
       ...styles.addon,
       ...placementStyles[placement]
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.div, { ref, className: (0, import_utils3.cx)("ui-input-addon", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-input-addon", className), __css: css, ...rest });
   }
 );
-var InputLeftAddon = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var InputLeftAddon = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     InputAddon,
     {
       ref,
-      className: (0, import_utils3.cx)("ui-input-addon-left", className),
+      className: (0, import_utils2.cx)("ui-input-addon-left", className),
       placement: "left",
       ...rest
     }
   );
 });
-var InputRightAddon = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var InputRightAddon = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     InputAddon,
     {
       ref,
-      className: (0, import_utils3.cx)("ui-input-addon-right", className),
+      className: (0, import_utils2.cx)("ui-input-addon-right", className),
       placement: "right",
       ...rest
     }
   );
 });
 
+// src/input-group.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var [InputGroupProvider, useInputGroup] = (0, import_utils3.createContext)({
+  name: "InputGroupContext",
+  errorMessage: `useInputGroup returned is 'undefined'. Seems you forgot to wrap the components in "<InputGroup />" `
+});
+var InputGroup = (0, import_core3.forwardRef)((props, ref) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const [styles] = (0, import_core3.useMultiComponentStyle)("Input", props);
+  const { className, children, ...rest } = (0, import_core3.omitThemeProps)(props);
+  const css = {
+    width: "100%",
+    display: "flex",
+    position: "relative"
+  };
+  const groupProps = {};
+  const minHeight = (_g = (_e = (0, import_use_token.useToken)("sizes", (_c = (_a = styles.field) == null ? void 0 : _a.minHeight) != null ? _c : (_b = styles.field) == null ? void 0 : _b.minH)) != null ? _e : (_d = styles.field) == null ? void 0 : _d.minHeight) != null ? _g : (_f = styles.field) == null ? void 0 : _f.minH;
+  const height = (_n = (_l = (0, import_use_token.useToken)("sizes", (_j = (_h = styles.field) == null ? void 0 : _h.height) != null ? _j : (_i = styles.field) == null ? void 0 : _i.h)) != null ? _l : (_k = styles.field) == null ? void 0 : _k.height) != null ? _n : (_m = styles.field) == null ? void 0 : _m.h;
+  const validChildren = (0, import_utils3.getValidChildren)(children);
+  validChildren.forEach((child) => {
+    if ((minHeight || height) && child.type === InputLeftElement)
+      groupProps.paddingStart = height != null ? height : minHeight;
+    if ((minHeight || height) && child.type === InputRightElement)
+      groupProps.paddingEnd = height != null ? height : minHeight;
+    if (child.type === InputLeftAddon)
+      groupProps.roundedLeft = 0;
+    if (child.type === InputRightAddon)
+      groupProps.roundedRight = 0;
+  });
+  const cloneChildren = validChildren.map((child) => {
+    var _a2, _b2;
+    const childProps = (0, import_utils3.filterUndefined)({
+      size: ((_a2 = child.props) == null ? void 0 : _a2.size) || props.size,
+      variant: ((_b2 = child.props) == null ? void 0 : _b2.variant) || props.variant,
+      ...child.props
+    });
+    return child.type !== Input && child.type !== import_file_input.FileInput ? (0, import_react.cloneElement)(child, childProps) : (0, import_react.cloneElement)(child, Object.assign(childProps, groupProps));
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputGroupProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core3.ui.div,
+    {
+      ref,
+      className: (0, import_utils3.cx)("ui-input-group", className),
+      role: "group",
+      __css: css,
+      ...rest,
+      children: cloneChildren
+    }
+  ) });
+});
+
 // src/input-element.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputElement = (0, import_core4.forwardRef)(

package/dist/input.d.ts

@@ -3,8 +3,17 @@ import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 
 type InputOptions = {
+    /**
+     * The border color when the input is focused.
+     */
     focusBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    /**
+     * The border color when the input is invalid.
+     */
     errorBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    /**
+     * The native HTML `size` attribute to be passed to the `input`
+     */
     htmlSize?: number;
 };
 type InputProps = Omit<HTMLUIProps<'input'>, 'disabled' | 'required' | 'readOnly' | 'size'> & ThemeProps<'Input'> & InputOptions & FormControlOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/input",
-  "version": "0.1.11",
+  "version": "0.2.1",
   "description": "Yamada UI input component",
   "keywords": [
     "yamada",
@@ -35,11 +35,11 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.3.0",
+    "@yamada-ui/core": "0.4.0",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/file-input": "0.1.11",
-    "@yamada-ui/form-control": "0.1.11",
-    "@yamada-ui/use-token": "0.1.11"
+    "@yamada-ui/file-input": "0.2.1",
+    "@yamada-ui/form-control": "0.2.1",
+    "@yamada-ui/use-token": "0.1.13"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -73,6 +73,6 @@
     "build:fast": "tsup src",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
-    "gen:types": "tsx ../../../scripts/generate-types"
+    "gen:docs": "tsx ../../../scripts/generate-docs"
   }
 }