@yamada-ui/input 0.1.0

package/dist/input-addon.js

@@ -0,0 +1,216 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/input-addon.tsx
+var input_addon_exports = {};
+__export(input_addon_exports, {
+  InputLeftAddon: () => InputLeftAddon,
+  InputRightAddon: () => InputRightAddon
+});
+module.exports = __toCommonJS(input_addon_exports);
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+
+// src/input.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Input = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Input", props);
+  let { className, htmlSize, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+  rest = (0, import_form_control.useFormControlProps)(rest);
+  const css = { ...styles.field };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.input,
+    {
+      ref,
+      className: (0, import_utils.cx)("ui-input", className),
+      size: htmlSize,
+      __css: css,
+      ...rest
+    }
+  );
+});
+
+// src/input-group.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)(
+  ({ className, isClick = false, placement = "left", ...rest }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const styles = useInputGroup();
+    const css = {
+      position: "absolute",
+      top: "0",
+      [placement === "left" ? "insetStart" : "insetEnd"]: "0",
+      zIndex: 2,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: (_g = (_e = (_c = (_a = styles.field) == null ? void 0 : _a.height) != null ? _c : (_b = styles.field) == null ? void 0 : _b.h) != null ? _e : (_d = styles.field) == null ? void 0 : _d.minHeight) != null ? _g : (_f = styles.field) == null ? void 0 : _f.minH,
+      h: "full",
+      fontSize: (_h = styles.field) == null ? void 0 : _h.fontSize,
+      pointerEvents: isClick ? "auto" : "none",
+      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 });
+  }
+);
+var InputLeftElement = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      InputElement,
+      {
+        ref,
+        className: (0, import_utils3.cx)("ui-input-element-left", className),
+        placement: "left",
+        ...rest
+      }
+    );
+  }
+);
+var InputRightElement = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      InputElement,
+      {
+        ref,
+        className: (0, import_utils3.cx)("ui-input-element-right", className),
+        placement: "right",
+        ...rest
+      }
+    );
+  }
+);
+
+// src/input-addon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var InputAddon = (0, import_core4.forwardRef)(
+  ({ className, placement = "left", ...rest }, ref) => {
+    const styles = useInputGroup();
+    const placementStyles = {
+      left: {
+        me: "-1px",
+        roundedRight: 0,
+        borderEndColor: "transparent"
+      },
+      right: {
+        ms: "-1px",
+        roundedLeft: 0,
+        borderStartColor: "transparent"
+      }
+    };
+    const css = {
+      flex: "0 0 auto",
+      w: "auto",
+      display: "flex",
+      alignItems: "center",
+      whiteSpace: "nowrap",
+      ...styles.addon,
+      ...placementStyles[placement]
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.div, { ref, className: (0, import_utils4.cx)("ui-input-addon", className), __css: css, ...rest });
+  }
+);
+var InputLeftAddon = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    InputAddon,
+    {
+      ref,
+      className: (0, import_utils4.cx)("ui-input-addon-left", className),
+      placement: "left",
+      ...rest
+    }
+  );
+});
+var InputRightAddon = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    InputAddon,
+    {
+      ref,
+      className: (0, import_utils4.cx)("ui-input-addon-right", className),
+      placement: "right",
+      ...rest
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputLeftAddon,
+  InputRightAddon
+});

package/dist/input-addon.mjs

@@ -0,0 +1,9 @@
+import {
+  InputLeftAddon,
+  InputRightAddon
+} from "./chunk-5IBH3I64.mjs";
+import "./chunk-BFONSAR4.mjs";
+export {
+  InputLeftAddon,
+  InputRightAddon
+};

package/dist/input-element.d.ts

@@ -0,0 +1,12 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type InputElementOptions = {
+    isClick?: boolean;
+    placement?: 'left' | 'right';
+};
+type InputElementProps = HTMLUIProps<'div'> & InputElementOptions;
+declare const InputLeftElement: _yamada_ui_core.Component<"div", InputElementProps>;
+declare const InputRightElement: _yamada_ui_core.Component<"div", InputElementProps>;
+
+export { InputElementProps, InputLeftElement, InputRightElement };

package/dist/input-element.js

@@ -0,0 +1,216 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/input-element.tsx
+var input_element_exports = {};
+__export(input_element_exports, {
+  InputLeftElement: () => InputLeftElement,
+  InputRightElement: () => InputRightElement
+});
+module.exports = __toCommonJS(input_element_exports);
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+
+// src/input.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Input = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Input", props);
+  let { className, htmlSize, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+  rest = (0, import_form_control.useFormControlProps)(rest);
+  const css = { ...styles.field };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.input,
+    {
+      ref,
+      className: (0, import_utils.cx)("ui-input", className),
+      size: htmlSize,
+      __css: css,
+      ...rest
+    }
+  );
+});
+
+// src/input-group.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)(
+  ({ className, placement = "left", ...rest }, ref) => {
+    const styles = useInputGroup();
+    const placementStyles = {
+      left: {
+        me: "-1px",
+        roundedRight: 0,
+        borderEndColor: "transparent"
+      },
+      right: {
+        ms: "-1px",
+        roundedLeft: 0,
+        borderStartColor: "transparent"
+      }
+    };
+    const css = {
+      flex: "0 0 auto",
+      w: "auto",
+      display: "flex",
+      alignItems: "center",
+      whiteSpace: "nowrap",
+      ...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 });
+  }
+);
+var InputLeftAddon = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    InputAddon,
+    {
+      ref,
+      className: (0, import_utils3.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)(
+    InputAddon,
+    {
+      ref,
+      className: (0, import_utils3.cx)("ui-input-addon-right", className),
+      placement: "right",
+      ...rest
+    }
+  );
+});
+
+// src/input-element.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var InputElement = (0, import_core4.forwardRef)(
+  ({ className, isClick = false, placement = "left", ...rest }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const styles = useInputGroup();
+    const css = {
+      position: "absolute",
+      top: "0",
+      [placement === "left" ? "insetStart" : "insetEnd"]: "0",
+      zIndex: 2,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: (_g = (_e = (_c = (_a = styles.field) == null ? void 0 : _a.height) != null ? _c : (_b = styles.field) == null ? void 0 : _b.h) != null ? _e : (_d = styles.field) == null ? void 0 : _d.minHeight) != null ? _g : (_f = styles.field) == null ? void 0 : _f.minH,
+      h: "full",
+      fontSize: (_h = styles.field) == null ? void 0 : _h.fontSize,
+      pointerEvents: isClick ? "auto" : "none",
+      cursor: isClick ? "pointer" : "auto",
+      ...styles.element
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.div, { ref, className: (0, import_utils4.cx)("ui-input-element", className), __css: css, ...rest });
+  }
+);
+var InputLeftElement = (0, import_core4.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      InputElement,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-input-element-left", className),
+        placement: "left",
+        ...rest
+      }
+    );
+  }
+);
+var InputRightElement = (0, import_core4.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      InputElement,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-input-element-right", className),
+        placement: "right",
+        ...rest
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputLeftElement,
+  InputRightElement
+});

package/dist/input-element.mjs

@@ -0,0 +1,9 @@
+import {
+  InputLeftElement,
+  InputRightElement
+} from "./chunk-5IBH3I64.mjs";
+import "./chunk-BFONSAR4.mjs";
+export {
+  InputLeftElement,
+  InputRightElement
+};

package/dist/input-group.d.ts

@@ -0,0 +1,10 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIObject } from '@yamada-ui/core';
+
+type InputGroupProps = HTMLUIProps<'div'> & ThemeProps<'Input'>;
+type InputGroupContext = Record<string, CSSUIObject>;
+declare const useInputGroup: () => InputGroupContext;
+
+declare const InputGroup: _yamada_ui_core.Component<"div", InputGroupProps>;
+
+export { InputGroup, InputGroupProps, useInputGroup };