@tiny-design/react 1.0.4

package/lib/style/base.scss

@@ -0,0 +1 @@
+@use '@tiny-design/tokens/scss/base' as *;

package/lib/style/index.scss

@@ -0,0 +1,2 @@
+@use '@tiny-design/tokens/scss/base' as *;
+@use './component' as *;

package/lib/switch/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/switch/index.tsx
+var switch_default = require("./switch.js").default;
+//#endregion
+exports.default = switch_default;
+
+//# sourceMappingURL=index.js.map

package/lib/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Switch"],"sources":["../../src/switch/index.tsx"],"sourcesContent":["import Switch from './switch';\n\nexport default Switch;\n"],"mappings":";AAEA,IAAA,wCAAeA"}

package/lib/switch/style/_index.scss

@@ -0,0 +1,144 @@
+@use '../../style/variables' as *;
+@use './mixin' as *;
+
+.#{$prefix}-switch {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  &__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: var(--ty-switch-bg);
+    transition: background-color 300ms;
+    user-select: none;
+  }
+
+  &__thumb {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    left: 0;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background-color: var(--ty-switch-thumb-bg);
+    border: 1px solid var(--ty-switch-thumb-border);
+    box-shadow: var(--ty-switch-thumb-shadow);
+    transition: all 300ms;
+    color: var(--ty-switch-bg);
+  }
+
+  &__label {
+    box-sizing: border-box;
+    display: block;
+    color: #fff;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    padding-left: 11px;
+    padding-right: 5px;
+    transition: all 300ms;
+  }
+
+  &_checked {
+    .#{$prefix}-switch {
+      &__bg {
+        background-color: var(--ty-color-primary);
+      }
+
+      &__thumb {
+        left: 100%;
+        border-color: var(--ty-color-primary);
+        color: var(--ty-color-primary);
+      }
+
+      &__label {
+        padding-left: 5px;
+        padding-right: 11px;
+      }
+    }
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  //TODO: optimise
+  &_loading {
+    .#{$prefix}-switch__thumb:before {
+      display: inline-block !important;
+    }
+  }
+
+  &_sm {
+    margin: 0 10px;
+    font-size: $switch-sm-font-size;
+    width: 29px;
+    height: 14px;
+
+    .#{$prefix}-switch {
+      &__bg {
+        border-radius: 18px;
+      }
+
+      &__thumb {
+        @include switch-bg(18px);
+      }
+
+      &__label {
+        line-height: 14px;
+      }
+    }
+  }
+
+  &_md {
+    margin: 0 12px;
+    font-size: $switch-md-font-size;
+    width: 36px;
+    height: 16px;
+
+    .#{$prefix}-switch {
+      &__bg {
+        border-radius: 22px;
+      }
+
+      &__thumb {
+        @include switch-bg(22px);
+      }
+
+      &__label {
+        line-height: 17px;
+      }
+    }
+  }
+
+  &_lg {
+    margin: 0 14px;
+    font-size: $switch-lg-font-size;
+    width: 42px;
+    height: 20px;
+
+    .#{$prefix}-switch {
+      &__bg {
+        border-radius: 26px;
+      }
+
+      &__thumb {
+        @include switch-bg(26px);
+      }
+
+      &__label {
+        line-height: 20px;
+      }
+    }
+  }
+}

package/lib/switch/style/_mixin.scss

@@ -0,0 +1,16 @@
+@use "../../style/mixins" as *;
+
+@mixin switch-bg($size) {
+  width: $size;
+  height: $size;
+  border-radius: $size;
+
+  &:before {
+    content: '';
+    width: calc(($size - 22px) / 2) + 10px;
+    height: calc(($size - 22px) / 2) + 10px;
+    @include loader();
+    display: none;
+  }
+}
+

package/lib/switch/style/index.css

@@ -0,0 +1,187 @@
+@keyframes ty-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ty-rotate-reverse {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+@keyframes ty-processing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.8);
+    opacity: 0;
+  }
+}
+.ty-switch {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+}
+.ty-switch__bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: var(--ty-switch-bg);
+  transition: background-color 300ms;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ty-switch__thumb {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  left: 0;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  background-color: var(--ty-switch-thumb-bg);
+  border: 1px solid var(--ty-switch-thumb-border);
+  box-shadow: var(--ty-switch-thumb-shadow);
+  transition: all 300ms;
+  color: var(--ty-switch-bg);
+}
+.ty-switch__label {
+  box-sizing: border-box;
+  display: block;
+  color: #fff;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-left: 11px;
+  padding-right: 5px;
+  transition: all 300ms;
+}
+.ty-switch_checked .ty-switch__bg {
+  background-color: var(--ty-color-primary);
+}
+.ty-switch_checked .ty-switch__thumb {
+  left: 100%;
+  border-color: var(--ty-color-primary);
+  color: var(--ty-color-primary);
+}
+.ty-switch_checked .ty-switch__label {
+  padding-left: 5px;
+  padding-right: 11px;
+}
+.ty-switch_disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.ty-switch_loading .ty-switch__thumb:before {
+  display: inline-block !important;
+}
+.ty-switch_sm {
+  margin: 0 10px;
+  font-size: 9px;
+  width: 29px;
+  height: 14px;
+}
+.ty-switch_sm .ty-switch__bg {
+  border-radius: 18px;
+}
+.ty-switch_sm .ty-switch__thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+}
+.ty-switch_sm .ty-switch__thumb:before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  position: relative;
+  border-width: 2px;
+  border-color: currentColor currentColor transparent transparent;
+  border-style: solid;
+  border-radius: 50%;
+  animation: ty-rotate-reverse 600ms infinite linear;
+  display: none;
+}
+.ty-switch_sm .ty-switch__label {
+  line-height: 14px;
+}
+.ty-switch_md {
+  margin: 0 12px;
+  font-size: 12px;
+  width: 36px;
+  height: 16px;
+}
+.ty-switch_md .ty-switch__bg {
+  border-radius: 22px;
+}
+.ty-switch_md .ty-switch__thumb {
+  width: 22px;
+  height: 22px;
+  border-radius: 22px;
+}
+.ty-switch_md .ty-switch__thumb:before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  position: relative;
+  border-width: 2px;
+  border-color: currentColor currentColor transparent transparent;
+  border-style: solid;
+  border-radius: 50%;
+  animation: ty-rotate-reverse 600ms infinite linear;
+  display: none;
+}
+.ty-switch_md .ty-switch__label {
+  line-height: 17px;
+}
+.ty-switch_lg {
+  margin: 0 14px;
+  font-size: 14px;
+  width: 42px;
+  height: 20px;
+}
+.ty-switch_lg .ty-switch__bg {
+  border-radius: 26px;
+}
+.ty-switch_lg .ty-switch__thumb {
+  width: 26px;
+  height: 26px;
+  border-radius: 26px;
+}
+.ty-switch_lg .ty-switch__thumb:before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  position: relative;
+  border-width: 2px;
+  border-color: currentColor currentColor transparent transparent;
+  border-style: solid;
+  border-radius: 50%;
+  animation: ty-rotate-reverse 600ms infinite linear;
+  display: none;
+}
+.ty-switch_lg .ty-switch__label {
+  line-height: 20px;
+}

package/lib/switch/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/switch/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/switch/switch.d.ts

@@ -0,0 +1,8 @@
+import { SwitchProps } from "./types.js";
+import React from "react";
+
+//#region src/switch/switch.d.ts
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { Switch };
+//# sourceMappingURL=switch.d.ts.map

package/lib/switch/switch.js

@@ -0,0 +1,58 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/switch/switch.tsx
+const Switch = react.default.forwardRef((props, ref) => {
+	const { size = "md", defaultChecked = true, disabled, loading, onChange, checkedText, uncheckedText, className, onClick, prefixCls: customisedCls, ...otherProps } = props;
+	const [checked, setChecked] = (0, react.useState)("checked" in props ? props.checked : defaultChecked);
+	const configContext = (0, react.useContext)(require_config_context.ConfigContext);
+	const prefixCls = require_general.getPrefixCls("switch", configContext.prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className, `${prefixCls}_${props.size || configContext.componentSize || size}`, {
+		[`${prefixCls}_checked`]: checked,
+		[`${prefixCls}_loading`]: loading,
+		[`${prefixCls}_disabled`]: loading || disabled
+	});
+	const labelOnClick = (e) => {
+		const val = !checked;
+		onClick && onClick(val, e);
+		if (!(disabled || loading)) {
+			onChange && onChange(val, e);
+			!("checked" in props) && setChecked(val);
+		}
+	};
+	(0, react.useEffect)(() => {
+		"checked" in props && typeof props.checked !== "undefined" && setChecked(props.checked);
+	}, [props]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+		...otherProps,
+		ref,
+		className: cls,
+		role: "switch",
+		"aria-checked": checked,
+		tabIndex: disabled || loading ? -1 : 0,
+		onClick: labelOnClick,
+		onKeyDown: (e) => {
+			if (e.key === " " || e.key === "Enter") {
+				e.preventDefault();
+				labelOnClick(e);
+			}
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: `${prefixCls}__bg`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefixCls}__thumb` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefixCls}__label`,
+				children: checked ? checkedText : uncheckedText
+			})]
+		})
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+exports.default = Switch;
+
+//# sourceMappingURL=switch.js.map

package/lib/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":["React","ConfigContext","getPrefixCls"],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["import React, { useState, useEffect, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { SwitchProps } from './types';\n\nconst Switch = React.forwardRef<HTMLLabelElement, SwitchProps>(\n  (props: SwitchProps, ref): JSX.Element => {\n    const {\n      size = 'md',\n      defaultChecked = true,\n      disabled,\n      loading,\n      onChange,\n      checkedText,\n      uncheckedText,\n      className,\n      onClick,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const [checked, setChecked] = useState<boolean>(\n      'checked' in props ? (props.checked as boolean) : defaultChecked\n    );\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('switch', configContext.prefixCls, customisedCls);\n    const switchSize = props.size || configContext.componentSize || size;\n    const cls = classNames(prefixCls, className, `${prefixCls}_${switchSize}`, {\n      [`${prefixCls}_checked`]: checked,\n      [`${prefixCls}_loading`]: loading,\n      [`${prefixCls}_disabled`]: loading || disabled,\n    });\n\n    const labelOnClick = (e: React.MouseEvent<HTMLLabelElement>): void => {\n      const val = !checked;\n      onClick && onClick(val, e);\n      if (!(disabled || loading)) {\n        onChange && onChange(val, e);\n        !('checked' in props) && setChecked(val);\n      }\n    };\n\n    useEffect(() => {\n      'checked' in props && typeof props.checked !== 'undefined' && setChecked(props.checked);\n    }, [props]);\n\n    return (\n      <label\n        {...otherProps}\n        ref={ref}\n        className={cls}\n        role=\"switch\"\n        aria-checked={checked}\n        tabIndex={disabled || loading ? -1 : 0}\n        onClick={labelOnClick}\n        onKeyDown={(e: React.KeyboardEvent<HTMLLabelElement>) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            labelOnClick(e as unknown as React.MouseEvent<HTMLLabelElement>);\n          }\n        }}>\n        <span className={`${prefixCls}__bg`}>\n          <span className={`${prefixCls}__thumb`} />\n          <span className={`${prefixCls}__label`}>{checked ? checkedText : uncheckedText}</span>\n        </span>\n      </label>\n    );\n  }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;;;AAMA,MAAM,SAASA,MAAAA,QAAM,YAClB,OAAoB,QAAqB;CACxC,MAAM,EACJ,OAAO,MACP,iBAAiB,MACjB,UACA,SACA,UACA,aACA,eACA,WACA,SACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UACd,aAAa,QAAS,MAAM,UAAsB,eACnD;CACD,MAAM,iBAAA,GAAA,MAAA,YAA2BC,uBAAAA,cAAc;CAC/C,MAAM,YAAYC,gBAAAA,aAAa,UAAU,cAAc,WAAW,cAAc;CAEhF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAAG,UAAU,GADvC,MAAM,QAAQ,cAAc,iBAAiB,QACW;GACxE,GAAG,UAAU,YAAY;GACzB,GAAG,UAAU,YAAY;GACzB,GAAG,UAAU,aAAa,WAAW;EACvC,CAAC;CAEF,MAAM,gBAAgB,MAAgD;EACpE,MAAM,MAAM,CAAC;AACb,aAAW,QAAQ,KAAK,EAAE;AAC1B,MAAI,EAAE,YAAY,UAAU;AAC1B,eAAY,SAAS,KAAK,EAAE;AAC5B,KAAE,aAAa,UAAU,WAAW,IAAI;;;AAI5C,EAAA,GAAA,MAAA,iBAAgB;AACd,eAAa,SAAS,OAAO,MAAM,YAAY,eAAe,WAAW,MAAM,QAAQ;IACtF,CAAC,MAAM,CAAC;AAEX,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,MAAK;EACL,gBAAc;EACd,UAAU,YAAY,UAAU,KAAK;EACrC,SAAS;EACT,YAAY,MAA6C;AACvD,OAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,MAAE,gBAAgB;AAClB,iBAAa,EAAmD;;;YAGpE,iBAAA,GAAA,kBAAA,MAAC,QAAD;GAAM,WAAW,GAAG,UAAU;aAA9B,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAW,GAAG,UAAU,UAAY,CAAA,EAC1C,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,GAAG,UAAU;cAAW,UAAU,cAAc;IAAqB,CAAA,CACjF;;EACD,CAAA;EAGb;AAED,OAAO,cAAc"}

package/lib/switch/types.d.ts

@@ -0,0 +1,18 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import React from "react";
+
+//#region src/switch/types.d.ts
+interface SwitchProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['label']>, 'onChange' | 'onClick'> {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  size?: SizeType;
+  onChange?: (checked: boolean, event: React.MouseEvent) => void;
+  onClick?: (checked: boolean, event: React.MouseEvent) => void;
+  checkedText?: React.ReactNode;
+  uncheckedText?: React.ReactNode;
+}
+//#endregion
+export { SwitchProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/table/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/table/index.tsx
+var table_default = require("./table.js").default;
+//#endregion
+exports.default = table_default;
+
+//# sourceMappingURL=index.js.map

package/lib/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Table"],"sources":["../../src/table/index.tsx"],"sourcesContent":["import Table from './table';\n\nexport default Table;\n"],"mappings":";AAEA,IAAA,sCAAeA"}

package/lib/table/style/_index.scss

@@ -0,0 +1,143 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-table {
+  color: var(--ty-color-text, #{$gray-800});
+  font-size: $font-size-base;
+
+  &__wrapper {
+    overflow-x: auto;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+  }
+
+  &_bordered &__table {
+    border: 1px solid var(--ty-table-border, #{$gray-300});
+  }
+
+  &_bordered &__cell {
+    border: 1px solid var(--ty-table-border, #{$gray-300});
+  }
+
+  // Sizes
+  &_sm &__cell {
+    padding: 8px 8px;
+    font-size: $font-size-sm;
+  }
+
+  &_md &__cell {
+    padding: 12px 16px;
+  }
+
+  &_lg &__cell {
+    padding: 16px 16px;
+    font-size: $font-size-lg;
+  }
+
+  // Sticky header for virtual scroll
+  &__thead_sticky {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  // Spacer rows for virtual scroll
+  &__row_spacer td {
+    padding: 0 !important;
+    border: 0 !important;
+  }
+
+  // Header
+  &__thead {
+    .#{$prefix}-table__cell {
+      background: var(--ty-table-header-bg, #{$gray-100});
+      font-weight: 500;
+      border-bottom: 1px solid var(--ty-table-border, #{$gray-300});
+    }
+  }
+
+  // Cells
+  &__cell {
+    text-align: left;
+    vertical-align: middle;
+
+    &_sortable {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background: var(--ty-table-hover, #{$gray-200});
+      }
+    }
+
+    &_ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 0;
+    }
+
+    &_align-center {
+      text-align: center;
+    }
+
+    &_align-right {
+      text-align: right;
+    }
+  }
+
+  // Rows
+  &__tbody &__row {
+    border-bottom: 1px solid var(--ty-table-border, #{$gray-200});
+    transition: background 0.2s;
+
+    &:hover {
+      background: var(--ty-table-hover, #{$gray-100});
+    }
+
+    &_selected {
+      background: var(--ty-table-selected-bg, rgba(110, 65, 191, 0.06));
+    }
+  }
+
+  // Selection column
+  &__selection-col {
+    width: 40px;
+    text-align: center;
+  }
+
+  // Sorter
+  &__col-title {
+    display: inline;
+  }
+
+  &__sorter {
+    display: inline-flex;
+    flex-direction: column;
+    margin-left: 4px;
+    vertical-align: middle;
+    line-height: 1;
+  }
+
+  &__sorter-icon {
+    font-size: 8px;
+    line-height: 8px;
+    color: var(--ty-color-text-secondary, #{$gray-400});
+
+    &_active {
+      color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  // Empty & loading
+  &__empty-cell,
+  &__loading-cell {
+    text-align: center;
+    padding: 32px !important;
+    color: var(--ty-color-text-secondary, #{$gray-500});
+  }
+
+}