@progress/kendo-themes-html 10.2.0-dev.2 → 10.2.0

package/dist/esm/otp/templates/otp-groups-no-space.mjs

@@ -633,9 +633,63 @@ InputValidationIcon.className = className5;
 
 // src/input/input-prefix.tsx
 import { Fragment as Fragment7, jsx as jsx13 } from "react/jsx-runtime";
+var className6 = `k-input-prefix`;
+var defaultOptions9 = {
+  direction: "horizontal"
+};
+var InputPrefix = (props) => {
+  const {
+    direction = defaultOptions9.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ jsx13(Fragment7, {});
+  }
+  return /* @__PURE__ */ jsx13(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className6,
+        props.className,
+        {
+          [`k-input-prefix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-suffix.tsx
 import { Fragment as Fragment8, jsx as jsx14 } from "react/jsx-runtime";
+var className7 = `k-input-suffix`;
+var defaultOptions10 = {
+  direction: "horizontal"
+};
+var InputSuffix = (props) => {
+  const {
+    direction = defaultOptions10.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ jsx14(Fragment8, {});
+  }
+  return /* @__PURE__ */ jsx14(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className7,
+        props.className,
+        {
+          [`k-input-suffix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-prefix-text.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
@@ -645,10 +699,33 @@ import { jsx as jsx16 } from "react/jsx-runtime";
 
 // src/input/input-separator.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
+var className8 = `k-input-separator`;
+var defaultOptions11 = {
+  direction: "vertical"
+};
+var InputSeparator = (props) => {
+  const {
+    direction = defaultOptions11.direction,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx17(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className8,
+        props.className,
+        {
+          [`${className8}-${direction}`]: direction
+        }
+      )
+    }
+  );
+};
 
-// src/otp/otp-input.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var ONETIMEPASSWORDINPUT_CLASSNAME = `k-otp-input`;
+// src/textbox/textbox.spec.tsx
+import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs2 } from "react/jsx-runtime";
+var TEXTBOX_CLASSNAME = `k-textbox`;
 var states12 = [
   States.hover,
   States.focus,
@@ -656,6 +733,7 @@ var states12 = [
   States.invalid,
   States.required,
   States.disabled,
+  States.loading,
   States.readonly
 ];
 var options11 = {
@@ -663,16 +741,24 @@ var options11 = {
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultOptions9 = {
+var defaultOptions12 = {
+  showClearButton: true,
+  showValidationIcon: true,
   size: Input.defaultOptions.size,
   rounded: Input.defaultOptions.rounded,
-  fillMode: Input.defaultOptions.fillMode
+  fillMode: Input.defaultOptions.fillMode,
+  separators: true
 };
-var OneTimePasswordInput = (props) => {
+var Textbox = (props) => {
   const {
-    size = defaultOptions9.size,
-    rounded = defaultOptions9.rounded,
-    fillMode = defaultOptions9.fillMode,
+    size = defaultOptions12.size,
+    rounded = defaultOptions12.rounded,
+    fillMode = defaultOptions12.fillMode,
+    separators = defaultOptions12.separators,
+    showClearButton = defaultOptions12.showClearButton,
+    showValidationIcon = defaultOptions12.showValidationIcon,
+    prefix,
+    suffix,
     type,
     value,
     placeholder,
@@ -681,11 +767,12 @@ var OneTimePasswordInput = (props) => {
     valid,
     invalid,
     required,
+    loading,
     disabled,
     readonly,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs2(
     Input,
     {
       ...other,
@@ -697,33 +784,256 @@ var OneTimePasswordInput = (props) => {
       valid,
       invalid,
       required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, TEXTBOX_CLASSNAME),
+      children: [
+        prefix && /* @__PURE__ */ jsxs2(Fragment9, { children: [
+          /* @__PURE__ */ jsx18(InputPrefix, { children: prefix }),
+          separators && /* @__PURE__ */ jsx18(InputSeparator, {})
+        ] }),
+        /* @__PURE__ */ jsx18(InputInnerInput, { placeholder, value, type }),
+        showValidationIcon && /* @__PURE__ */ jsx18(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showClearButton && /* @__PURE__ */ jsx18(
+          InputClearValue,
+          {
+            loading,
+            disabled,
+            readonly,
+            value
+          }
+        ),
+        suffix && /* @__PURE__ */ jsxs2(Fragment9, { children: [
+          separators && /* @__PURE__ */ jsx18(InputSeparator, {}),
+          /* @__PURE__ */ jsx18(InputSuffix, { children: suffix })
+        ] })
+      ]
+    }
+  );
+};
+Textbox.states = states12;
+Textbox.options = options11;
+Textbox.className = TEXTBOX_CLASSNAME;
+Textbox.defaultOptions = defaultOptions12;
+
+// src/textbox/templates/textbox-normal.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+
+// src/textbox/templates/textbox-prefix.tsx
+import { Fragment as Fragment10, jsx as jsx20 } from "react/jsx-runtime";
+
+// src/button/button.spec.tsx
+import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs3 } from "react/jsx-runtime";
+var BUTTON_CLASSNAME = `k-button`;
+var states13 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options12 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultOptions13 = {
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.base,
+  showArrow: false,
+  arrowIconName: "caret-alt-down"
+};
+var Button = (props) => {
+  const {
+    size = defaultOptions13.size,
+    rounded = defaultOptions13.rounded,
+    fillMode = defaultOptions13.fillMode,
+    themeColor = defaultOptions13.themeColor,
+    showArrow = defaultOptions13.showArrow,
+    arrowIconName = defaultOptions13.arrowIconName,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    iconClassName,
+    ...other
+  } = props;
+  const hasIcon = icon !== void 0;
+  const hasChildren = props.children !== void 0;
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BUTTON_CLASSNAME,
+        optionClassNames(BUTTON_CLASSNAME, {
+          size,
+          rounded,
+          fillMode,
+          themeColor
+        }),
+        stateClassNames(BUTTON_CLASSNAME, {
+          hover,
+          focus,
+          active,
+          disabled,
+          selected
+        }),
+        {
+          ["k-icon-button"]: !text && !hasChildren && hasIcon
+        }
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx21(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ jsxs3(Fragment11, { children: [
+          text && /* @__PURE__ */ jsx21("span", { className: "k-button-text", children: text }),
+          props.children
+        ] }) : props.children && /* @__PURE__ */ jsx21("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ jsx21("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx21(Icon, { icon: arrowIconName }) })
+      ]
+    }
+  );
+};
+Button.states = states13;
+Button.options = options12;
+Button.className = BUTTON_CLASSNAME;
+Button.defaultOptions = defaultOptions13;
+
+// src/button/templates/icon-button.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+
+// src/button/templates/icon-text-button.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// src/button/templates/text-button.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+
+// src/textbox/templates/textbox-suffix.tsx
+import { Fragment as Fragment12, jsx as jsx25 } from "react/jsx-runtime";
+
+// src/otp/otp-input.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ONETIMEPASSWORDINPUT_CLASSNAME = `k-otp-input`;
+var states14 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.readonly
+];
+var options13 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultOptions14 = {
+  size: Textbox.defaultOptions.size,
+  rounded: Textbox.defaultOptions.rounded,
+  fillMode: Textbox.defaultOptions.fillMode
+};
+var OneTimePasswordInput = (props) => {
+  const {
+    size = defaultOptions14.size,
+    rounded = defaultOptions14.rounded,
+    fillMode = defaultOptions14.fillMode,
+    type,
+    value,
+    placeholder,
+    hover,
+    focus,
+    valid,
+    invalid,
+    required,
+    disabled,
+    readonly,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx26(
+    Textbox,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      type,
+      value,
+      placeholder,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
       disabled,
       readonly,
+      showClearButton: false,
+      showValidationIcon: false,
       className: classNames(
         props.className,
         ONETIMEPASSWORDINPUT_CLASSNAME
-      ),
-      children: /* @__PURE__ */ jsx18(InputInnerInput, { placeholder, value, type })
+      )
     }
   );
 };
-OneTimePasswordInput.states = states12;
-OneTimePasswordInput.options = options11;
+OneTimePasswordInput.states = states14;
+OneTimePasswordInput.options = options13;
 OneTimePasswordInput.className = ONETIMEPASSWORDINPUT_CLASSNAME;
-OneTimePasswordInput.defaultOptions = defaultOptions9;
+OneTimePasswordInput.defaultOptions = defaultOptions14;
 
 // src/otp/otp-separator.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ONETIMEPASSWORDSEPARATOR_CLASSNAME = `k-otp-separator`;
-var states13 = [];
-var options12 = {};
-var defaultOptions10 = {};
+var states15 = [];
+var options14 = {};
+var defaultOptions15 = {};
 var OneTimePasswordSeparator = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       ...other,
@@ -735,33 +1045,33 @@ var OneTimePasswordSeparator = (props) => {
     }
   );
 };
-OneTimePasswordSeparator.states = states13;
-OneTimePasswordSeparator.options = options12;
+OneTimePasswordSeparator.states = states15;
+OneTimePasswordSeparator.options = options14;
 OneTimePasswordSeparator.className = ONETIMEPASSWORDSEPARATOR_CLASSNAME;
-OneTimePasswordSeparator.defaultOptions = defaultOptions10;
+OneTimePasswordSeparator.defaultOptions = defaultOptions15;
 
 // src/otp/templates/otp-normal.tsx
-import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx28, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/input-group/input-group.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var INPUTGROUP_CLASSNAME = `k-input-group`;
-var states14 = [
+var states16 = [
   States.disabled
 ];
-var options13 = {
+var options15 = {
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
 };
-var defaultOptions11 = {
+var defaultOptions16 = {
   fillMode: FillMode.solid
 };
 var InputGroup = (props) => {
   const {
-    fillMode = defaultOptions11.fillMode,
+    fillMode = defaultOptions16.fillMode,
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       ...other,
@@ -779,30 +1089,30 @@ var InputGroup = (props) => {
     }
   );
 };
-InputGroup.states = states14;
-InputGroup.options = options13;
+InputGroup.states = states16;
+InputGroup.options = options15;
 InputGroup.className = INPUTGROUP_CLASSNAME;
-InputGroup.defaultOptions = defaultOptions11;
+InputGroup.defaultOptions = defaultOptions16;
 
 // src/otp/templates/otp-no-space.tsx
-import { Fragment as Fragment10, jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx30, jsxs as jsxs5 } from "react/jsx-runtime";
 
 // src/otp/templates/otp-groups.tsx
-import { Fragment as Fragment11, jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx31, jsxs as jsxs6 } from "react/jsx-runtime";
 
 // src/otp/templates/otp-groups-no-space.tsx
-import { Fragment as Fragment12, jsx as jsx24, jsxs as jsxs5 } from "react/jsx-runtime";
-var OneTimePasswordGroupsNoSpace = ({ hover, focus, invalid, fillMode, size, ...props }) => /* @__PURE__ */ jsx24(OneTimePassword, { invalid, size, children: /* @__PURE__ */ jsxs5(Fragment12, { children: [
-  /* @__PURE__ */ jsxs5(InputGroup, { fillMode, children: [
-    /* @__PURE__ */ jsx24(OneTimePasswordInput, { size, fillMode, invalid, focus, hover, ...props }),
-    /* @__PURE__ */ jsx24(OneTimePasswordInput, { size, fillMode, invalid, ...props }),
-    /* @__PURE__ */ jsx24(OneTimePasswordInput, { size, fillMode, invalid, ...props })
+import { Fragment as Fragment16, jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
+var OneTimePasswordGroupsNoSpace = ({ hover, focus, invalid, fillMode, size, ...props }) => /* @__PURE__ */ jsx32(OneTimePassword, { invalid, size, children: /* @__PURE__ */ jsxs7(Fragment16, { children: [
+  /* @__PURE__ */ jsxs7(InputGroup, { fillMode, children: [
+    /* @__PURE__ */ jsx32(OneTimePasswordInput, { size, fillMode, invalid, focus, hover, ...props }),
+    /* @__PURE__ */ jsx32(OneTimePasswordInput, { size, fillMode, invalid, ...props }),
+    /* @__PURE__ */ jsx32(OneTimePasswordInput, { size, fillMode, invalid, ...props })
   ] }),
-  /* @__PURE__ */ jsx24(OneTimePasswordSeparator, { children: "-" }),
-  /* @__PURE__ */ jsxs5(InputGroup, { fillMode, children: [
-    /* @__PURE__ */ jsx24(OneTimePasswordInput, { size, fillMode, invalid, ...props }),
-    /* @__PURE__ */ jsx24(OneTimePasswordInput, { size, fillMode, invalid, ...props }),
-    /* @__PURE__ */ jsx24(OneTimePasswordInput, { size, fillMode, invalid, ...props })
+  /* @__PURE__ */ jsx32(OneTimePasswordSeparator, { children: "-" }),
+  /* @__PURE__ */ jsxs7(InputGroup, { fillMode, children: [
+    /* @__PURE__ */ jsx32(OneTimePasswordInput, { size, fillMode, invalid, ...props }),
+    /* @__PURE__ */ jsx32(OneTimePasswordInput, { size, fillMode, invalid, ...props }),
+    /* @__PURE__ */ jsx32(OneTimePasswordInput, { size, fillMode, invalid, ...props })
   ] })
 ] }) });
 export {