@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/dist/esm/switch/templates/switch-normal.js

@@ -0,0 +1,181 @@
+// src/misc/class-names.ts
+var classNames = (...args) => {
+  return args.filter((arg) => arg !== true && Boolean(arg)).map((arg) => {
+    return Array.isArray(arg) ? classNames(...arg) : typeof arg === "object" ? Object.keys(arg).map((key, idx) => arg[idx] || arg[key] && key || null).filter((el) => el !== null).join(" ") : arg;
+  }).filter((arg) => Boolean(arg)).join(" ");
+};
+
+// src/misc/component-class-names.ts
+var optionClassNames = (componentClassName, props) => {
+  return classNames(
+    {
+      [`${componentClassName}-xs`]: props.size === "xsmall",
+      [`${componentClassName}-sm`]: props.size === "small",
+      [`${componentClassName}-md`]: props.size === "medium",
+      [`${componentClassName}-lg`]: props.size === "large",
+      [`${componentClassName}-xl`]: props.size === "xlarge",
+      [`${componentClassName}-xxl`]: props.size === "xxlarge",
+      [`${componentClassName}-xxxl`]: props.size === "xxxlarge"
+    },
+    {
+      [`${componentClassName}-${props.fillMode}`]: props.fillMode
+    },
+    {
+      [`${componentClassName}-${props.fillMode}-${props.themeColor}`]: props.fillMode && props.themeColor
+    },
+    {
+      [`${componentClassName}-${props.themeColor}`]: props.themeColor && props.fillMode === void 0
+    },
+    {
+      "k-rounded-sm": props.rounded === "small",
+      "k-rounded-md": props.rounded === "medium",
+      "k-rounded-lg": props.rounded === "large",
+      "k-rounded-full": props.rounded === "full"
+    }
+  );
+};
+var stateClassNames = (_componentClassName, props) => {
+  return classNames({
+    "k-valid": props.valid,
+    "k-invalid": props.invalid,
+    "k-hover": props.hover,
+    "k-focus": props.focus,
+    "k-checked": props.checked,
+    "k-active": props.active,
+    "k-selected": props.selected,
+    "k-disabled": props.disabled,
+    "k-indeterminate": props.indeterminate && !props.checked,
+    "k-loading": props.loading,
+    "k-empty": props.empty,
+    "k-readonly": props.readonly
+  });
+};
+
+// src/misc/theme.ts
+var Size = {
+  "xsmall": "xsmall",
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "xlarge": "xlarge",
+  "xxlarge": "xxlarge",
+  "xxxlarge": "xxxlarge"
+};
+var Roundness = {
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "full": "full"
+};
+var States = {
+  "open": "open",
+  "hover": "hover",
+  "focus": "focus",
+  "active": "active",
+  "selected": "selected",
+  "disabled": "disabled",
+  "valid": "valid",
+  "invalid": "invalid",
+  "loading": "loading",
+  "required": "required",
+  "empty": "empty",
+  "indeterminate": "indeterminate",
+  "checked": "checked",
+  "readonly": "readonly"
+};
+
+// src/switch/switch.spec.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SWITCH_CLASSNAME = `k-switch`;
+var states = [
+  States.hover,
+  States.focus,
+  States.disabled,
+  States.checked
+];
+var options = {
+  size: [Size.small, Size.medium, Size.large],
+  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
+};
+var defaultProps = {
+  size: Size.medium,
+  trackRounded: Roundness.full,
+  thumbRounded: Roundness.full
+};
+var Switch = (props) => {
+  const {
+    checked,
+    onLabel,
+    offLabel,
+    size = defaultProps.size,
+    trackRounded = defaultProps.trackRounded,
+    thumbRounded = defaultProps.thumbRounded,
+    hover,
+    focus,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SWITCH_CLASSNAME,
+        optionClassNames(SWITCH_CLASSNAME, {
+          size
+        }),
+        stateClassNames(SWITCH_CLASSNAME, {
+          hover,
+          focus,
+          disabled
+        }),
+        {
+          [`${SWITCH_CLASSNAME}-on`]: checked,
+          [`${SWITCH_CLASSNAME}-off`]: !checked
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: classNames(
+              "k-switch-track",
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
+            ),
+            children: [
+              onLabel && /* @__PURE__ */ jsx("span", { className: "k-switch-label-on", children: onLabel }),
+              offLabel && /* @__PURE__ */ jsx("span", { className: "k-switch-label-off", children: offLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              "k-switch-thumb",
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+Switch.states = states;
+Switch.options = options;
+Switch.className = SWITCH_CLASSNAME;
+Switch.defaultProps = defaultProps;
+var switch_spec_default = Switch;
+
+// src/switch/templates/switch-normal.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SwitchNormal = (props) => /* @__PURE__ */ jsx2(switch_spec_default, { ...props });
+export {
+  SwitchNormal
+};

package/dist/esm/switch/tests/switch-size-rounded.js

@@ -61,6 +61,12 @@ var Size = {
   "xxlarge": "xxlarge",
   "xxxlarge": "xxxlarge"
 };
+var Roundness = {
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "full": "full"
+};
 var States = {
   "open": "open",
   "hover": "hover",
@@ -88,12 +94,14 @@ var states = [
   States.checked
 ];
 var options = {
-  size: [Size.small, Size.medium, Size.large]
+  size: [Size.small, Size.medium, Size.large],
+  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
 };
 var defaultProps = {
   size: Size.medium,
-  trackRounded: "full",
-  thumbRounded: "full"
+  trackRounded: Roundness.full,
+  thumbRounded: Roundness.full
 };
 var Switch = (props) => {
   const {
@@ -134,9 +142,9 @@ var Switch = (props) => {
           {
             className: classNames(
               "k-switch-track",
-              {
-                [`k-rounded-${trackRounded}`]: trackRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
             ),
             children: [
               onLabel && /* @__PURE__ */ jsx("span", { className: "k-switch-label-on", children: onLabel }),
@@ -149,9 +157,9 @@ var Switch = (props) => {
           {
             className: classNames(
               "k-switch-thumb",
-              {
-                [`k-rounded-${thumbRounded}`]: thumbRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
             )
           }
         ) })
@@ -163,56 +171,46 @@ Switch.states = states;
 Switch.options = options;
 Switch.className = SWITCH_CLASSNAME;
 Switch.defaultProps = defaultProps;
+var switch_spec_default = Switch;
+
+// src/switch/templates/switch-normal.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SwitchNormal = (props) => /* @__PURE__ */ jsx2(switch_spec_default, { ...props });
+
+// src/switch/templates/switch-checked.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SwitchChecked = (props) => /* @__PURE__ */ jsx3(switch_spec_default, { ...props, checked: true });
 
 // src/switch/tests/switch-size-rounded.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var styles = `
     #test-area {
-        grid-template-columns: 120px repeat(6, 1fr);
+        grid-template-columns: 120px repeat(3, 1fr);
+    }
+
+    #test-area > span {
+        text-align: center;
+    }
+
+    .wrapper {
+        display: flex;
+        justify-content: space-around;
     }
 `;
 var switch_size_rounded_default = () => /* @__PURE__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("style", { children: styles }),
+  /* @__PURE__ */ jsx4("style", { children: styles }),
   /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2("small", { children: "rounded / size" }) }),
-    /* @__PURE__ */ jsx2("span", { className: "k-colspan-2 k-col-span-2", children: "small" }),
-    /* @__PURE__ */ jsx2("span", { className: "k-colspan-2 k-col-span-2", children: "medium" }),
-    /* @__PURE__ */ jsx2("span", { className: "k-colspan-2 k-col-span-2", children: "large" }),
-    /* @__PURE__ */ jsx2("span", { children: "null" }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "small", onLabel: "On", trackRounded: null, thumbRounded: null }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "small", offLabel: "Off", trackRounded: null, thumbRounded: null }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "medium", onLabel: "On", trackRounded: null, thumbRounded: null }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "medium", offLabel: "Off", trackRounded: null, thumbRounded: null }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "large", onLabel: "On", trackRounded: null, thumbRounded: null }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "large", offLabel: "Off", trackRounded: null, thumbRounded: null }) }),
-    /* @__PURE__ */ jsx2("span", { children: "small" }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "small", onLabel: "On", trackRounded: "sm", thumbRounded: "sm" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "small", offLabel: "Off", trackRounded: "sm", thumbRounded: "sm" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "medium", onLabel: "On", trackRounded: "sm", thumbRounded: "sm" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "medium", offLabel: "Off", trackRounded: "sm", thumbRounded: "sm" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "large", onLabel: "On", trackRounded: "sm", thumbRounded: "sm" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "large", offLabel: "Off", trackRounded: "sm", thumbRounded: "sm" }) }),
-    /* @__PURE__ */ jsx2("span", { children: "medium" }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "small", onLabel: "On", trackRounded: "md", thumbRounded: "md" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "small", offLabel: "Off", trackRounded: "md", thumbRounded: "md" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "medium", onLabel: "On", trackRounded: "md", thumbRounded: "md" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "medium", offLabel: "Off", trackRounded: "md", thumbRounded: "md" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "large", onLabel: "On", trackRounded: "md", thumbRounded: "md" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "large", offLabel: "Off", trackRounded: "md", thumbRounded: "md" }) }),
-    /* @__PURE__ */ jsx2("span", { children: "large" }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "small", onLabel: "On", trackRounded: "lg", thumbRounded: "lg" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "small", offLabel: "Off", trackRounded: "lg", thumbRounded: "lg" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "medium", onLabel: "On", trackRounded: "lg", thumbRounded: "lg" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "medium", offLabel: "Off", trackRounded: "lg", thumbRounded: "lg" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "large", onLabel: "On", trackRounded: "lg", thumbRounded: "lg" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "large", offLabel: "Off", trackRounded: "lg", thumbRounded: "lg" }) }),
-    /* @__PURE__ */ jsx2("span", { children: "full" }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "small", onLabel: "On", trackRounded: "full", thumbRounded: "full" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "small", offLabel: "Off", trackRounded: "full", thumbRounded: "full" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "medium", onLabel: "On", trackRounded: "full", thumbRounded: "full" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "medium", offLabel: "Off", trackRounded: "full", thumbRounded: "full" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, size: "large", onLabel: "On", trackRounded: "full", thumbRounded: "full" }) }),
-    /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(Switch, { size: "large", offLabel: "Off", trackRounded: "full", thumbRounded: "full" }) })
+    /* @__PURE__ */ jsx4("span", { children: /* @__PURE__ */ jsx4("small", { children: "rounded / size" }) }),
+    /* @__PURE__ */ jsx4("span", { children: "small" }),
+    /* @__PURE__ */ jsx4("span", { children: "medium" }),
+    /* @__PURE__ */ jsx4("span", { children: "large" }),
+    [null, ...Switch.options.trackRounded].map((roundness) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx4("span", { children: roundness || "none" }),
+      Switch.options.size.map((size) => /* @__PURE__ */ jsxs2("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx4(SwitchChecked, { onLabel: "On", size, trackRounded: roundness, thumbRounded: roundness }),
+        /* @__PURE__ */ jsx4(SwitchNormal, { offLabel: "Off", size, trackRounded: roundness, thumbRounded: roundness })
+      ] }))
+    ] }))
   ] })
 ] });
 export {

package/dist/esm/switch/tests/switch.js

@@ -61,6 +61,12 @@ var Size = {
   "xxlarge": "xxlarge",
   "xxxlarge": "xxxlarge"
 };
+var Roundness = {
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "full": "full"
+};
 var States = {
   "open": "open",
   "hover": "hover",
@@ -88,12 +94,14 @@ var states = [
   States.checked
 ];
 var options = {
-  size: [Size.small, Size.medium, Size.large]
+  size: [Size.small, Size.medium, Size.large],
+  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
 };
 var defaultProps = {
   size: Size.medium,
-  trackRounded: "full",
-  thumbRounded: "full"
+  trackRounded: Roundness.full,
+  thumbRounded: Roundness.full
 };
 var Switch = (props) => {
   const {
@@ -134,9 +142,9 @@ var Switch = (props) => {
           {
             className: classNames(
               "k-switch-track",
-              {
-                [`k-rounded-${trackRounded}`]: trackRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
             ),
             children: [
               onLabel && /* @__PURE__ */ jsx("span", { className: "k-switch-label-on", children: onLabel }),
@@ -149,9 +157,9 @@ var Switch = (props) => {
           {
             className: classNames(
               "k-switch-thumb",
-              {
-                [`k-rounded-${thumbRounded}`]: thumbRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
             )
           }
         ) })
@@ -163,9 +171,18 @@ Switch.states = states;
 Switch.options = options;
 Switch.className = SWITCH_CLASSNAME;
 Switch.defaultProps = defaultProps;
+var switch_spec_default = Switch;
+
+// src/switch/templates/switch-normal.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SwitchNormal = (props) => /* @__PURE__ */ jsx2(switch_spec_default, { ...props });
+
+// src/switch/templates/switch-checked.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SwitchChecked = (props) => /* @__PURE__ */ jsx3(switch_spec_default, { ...props, checked: true });
 
 // src/switch/tests/switch.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var styles = `
     body {
         background: #fcfcfc;
@@ -175,32 +192,27 @@ var styles = `
     }
 `;
 var switch_default = () => /* @__PURE__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("style", { children: styles }),
-  /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-    /* @__PURE__ */ jsx2("span", {}),
-    /* @__PURE__ */ jsx2("span", { children: "On" }),
-    /* @__PURE__ */ jsx2("span", { children: "Off" }),
-    /* @__PURE__ */ jsx2("span", { children: "Normal" }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { checked: true }) }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, {}) }),
-    /* @__PURE__ */ jsx2("span", { children: "Hover" }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, hover: true }) }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { hover: true }) }),
-    /* @__PURE__ */ jsx2("span", { children: "Focus" }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, focus: true }) }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { focus: true }) }),
-    /* @__PURE__ */ jsx2("span", { children: "Disabled" }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { checked: true, disabled: true }) }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { disabled: true }) }),
-    /* @__PURE__ */ jsx2("span", { children: "Localized" }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { onLabel: "On", offLabel: "Off", checked: true }) }),
-    /* @__PURE__ */ jsx2("section", { children: /* @__PURE__ */ jsx2(Switch, { onLabel: "On", offLabel: "Off" }) }),
-    /* @__PURE__ */ jsx2("span", { children: "RTL" }),
-    /* @__PURE__ */ jsx2("section", { dir: "rtl", children: /* @__PURE__ */ jsx2(Switch, { checked: true }) }),
-    /* @__PURE__ */ jsx2("section", { dir: "rtl", children: /* @__PURE__ */ jsx2(Switch, {}) }),
-    /* @__PURE__ */ jsx2("span", {}),
-    /* @__PURE__ */ jsx2("section", { dir: "rtl", children: /* @__PURE__ */ jsx2(Switch, { onLabel: "On", offLabel: "Off", checked: true }) }),
-    /* @__PURE__ */ jsx2("section", { dir: "rtl", children: /* @__PURE__ */ jsx2(Switch, { onLabel: "On", offLabel: "Off" }) })
+  /* @__PURE__ */ jsx4("style", { children: styles }),
+  /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid k-grid-cols-5", children: [
+    /* @__PURE__ */ jsx4("span", {}),
+    /* @__PURE__ */ jsx4("span", { children: "Off" }),
+    /* @__PURE__ */ jsx4("span", { children: "On" }),
+    /* @__PURE__ */ jsx4("span", { children: "RTL - Off" }),
+    /* @__PURE__ */ jsx4("span", { children: "RTL - On" }),
+    ["normal", ...Switch.states].map(
+      (state) => state !== "checked" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4("span", { children: state }),
+        /* @__PURE__ */ jsx4("section", { children: /* @__PURE__ */ jsx4(SwitchNormal, { ...{ [state]: true } }) }),
+        /* @__PURE__ */ jsx4("section", { children: /* @__PURE__ */ jsx4(SwitchChecked, { ...{ [state]: true } }) }),
+        /* @__PURE__ */ jsx4("section", { dir: "rtl", children: /* @__PURE__ */ jsx4(SwitchNormal, { ...{ [state]: true } }) }),
+        /* @__PURE__ */ jsx4("section", { dir: "rtl", children: /* @__PURE__ */ jsx4(SwitchChecked, { ...{ [state]: true } }) })
+      ] }) : null
+    ),
+    /* @__PURE__ */ jsx4("span", { children: "localized" }),
+    /* @__PURE__ */ jsx4("section", { children: /* @__PURE__ */ jsx4(SwitchNormal, { onLabel: "On", offLabel: "Off" }) }),
+    /* @__PURE__ */ jsx4("section", { children: /* @__PURE__ */ jsx4(SwitchChecked, { onLabel: "On", offLabel: "Off" }) }),
+    /* @__PURE__ */ jsx4("section", { dir: "rtl", children: /* @__PURE__ */ jsx4(SwitchNormal, { onLabel: "On", offLabel: "Off" }) }),
+    /* @__PURE__ */ jsx4("section", { dir: "rtl", children: /* @__PURE__ */ jsx4(SwitchChecked, { onLabel: "On", offLabel: "Off" }) })
   ] })
 ] });
 export {

package/dist/esm/table/table-header.js

@@ -225,17 +225,29 @@ import { jsx as jsx17 } from "react/jsx-runtime";
 // src/table/table-list-group-row.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
 
+// src/table/templates/table-list.tsx
+import { jsx as jsx19, jsxs } from "react/jsx-runtime";
+
+// src/table/templates/table-list-virtualization.tsx
+import { jsx as jsx20, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/table/templates/data-table-normal.tsx
+import { jsx as jsx21, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/table/templates/table-native.tsx
+import { jsx as jsx22, jsxs as jsxs4 } from "react/jsx-runtime";
+
 // src/table/table-header.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var className = `k-table-header`;
-var TableHeader = (props) => /* @__PURE__ */ jsx19(
+var TableHeader = (props) => /* @__PURE__ */ jsx23(
   "div",
   {
     className: classNames(
       props.className,
       className
     ),
-    children: /* @__PURE__ */ jsx19("div", { className: "k-table-header-wrap", children: /* @__PURE__ */ jsx19(Table, { children: props.children }) })
+    children: /* @__PURE__ */ jsx23("div", { className: "k-table-header-wrap", children: /* @__PURE__ */ jsx23(Table, { children: props.children }) })
   }
 );
 export {