@tiny-design/react 1.0.4

package/lib/breadcrumb/style/_index.scss

@@ -0,0 +1,38 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-breadcrumb {
+  &__ol {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    color: var(--ty-color-text-tertiary);
+    font-size: $breadcrumb-font-size;
+  }
+
+  &-item {
+    &__separator {
+      margin: 0 8px;
+    }
+
+    a {
+      color: var(--ty-color-text-tertiary);
+      transition: all 300ms;
+
+      &:hover {
+        color: var(--ty-color-primary);
+      }
+    }
+
+    &:last-child {
+      color: var(--ty-color-text);
+
+      .#{$prefix}-breadcrumb-item {
+        &__separator {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/lib/breadcrumb/style/index.css

@@ -0,0 +1,25 @@
+.ty-breadcrumb__ol {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  color: var(--ty-color-text-tertiary);
+  font-size: 1rem;
+}
+.ty-breadcrumb-item__separator {
+  margin: 0 8px;
+}
+.ty-breadcrumb-item a {
+  color: var(--ty-color-text-tertiary);
+  transition: all 300ms;
+}
+.ty-breadcrumb-item a:hover {
+  color: var(--ty-color-primary);
+}
+.ty-breadcrumb-item:last-child {
+  color: var(--ty-color-text);
+}
+.ty-breadcrumb-item:last-child .ty-breadcrumb-item__separator {
+  display: none;
+}

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

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

package/lib/breadcrumb/style/index.js

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

package/lib/breadcrumb/types.d.ts

@@ -0,0 +1,15 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { ReactElement } from "react";
+
+//#region src/breadcrumb/types.d.ts
+interface BreadcrumbProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['nav']> {
+  separator?: React.ReactNode;
+  children: ReactElement<BreadcrumbItemProps>;
+}
+interface BreadcrumbItemProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
+  separator?: React.ReactNode;
+  children?: React.ReactNode;
+}
+//#endregion
+export { BreadcrumbItemProps, BreadcrumbProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/button/button-group.d.ts

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

package/lib/button/button-group.js

@@ -0,0 +1,41 @@
+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/button/button-group.tsx
+const ButtonGroup = react.default.forwardRef((props, ref) => {
+	const { size = "md", btnType = "default", disabled = false, round = false, prefixCls: customisedCls, className, children, ...otherProps } = props;
+	const configContext = (0, react.useContext)(require_config_context.ConfigContext);
+	const prefixCls = require_general.getPrefixCls("btn-group", configContext.prefixCls, customisedCls);
+	const btnSize = props.size || configContext.componentSize || size;
+	const cls = (0, classnames.default)(prefixCls, {
+		[`${prefixCls}_round`]: round,
+		[`${prefixCls}_${btnType}`]: btnType
+	}, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...otherProps,
+		className: cls,
+		ref,
+		children: react.default.Children.map(children, (child) => {
+			const childElement = child;
+			const { displayName } = childElement.type;
+			if (displayName === "Button") {
+				const childProps = {
+					btnType,
+					size: btnSize,
+					disabled: "disabled" in childElement.props ? childElement.props.disabled : disabled
+				};
+				return react.default.cloneElement(childElement, childProps);
+			} else return child;
+		})
+	});
+});
+ButtonGroup.displayName = "ButtonGroup";
+//#endregion
+exports.default = ButtonGroup;
+
+//# sourceMappingURL=button-group.js.map

package/lib/button/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":["React","ConfigContext","getPrefixCls"],"sources":["../../src/button/button-group.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { ButtonGroupProps, ButtonProps, ButtonType } from './types';\nimport { SizeType } from '../_utils/props';\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (props: ButtonGroupProps, ref) => {\n    const {\n      size = 'md',\n      btnType = 'default',\n      disabled = false,\n      round = false,\n      prefixCls: customisedCls,\n      className,\n      children,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('btn-group', configContext.prefixCls, customisedCls);\n    const btnSize = props.size || configContext.componentSize || size;\n    const cls = classNames(\n      prefixCls,\n      {\n        [`${prefixCls}_round`]: round,\n        [`${prefixCls}_${btnType}`]: btnType,\n      },\n      className\n    );\n    return (\n      <div {...otherProps} className={cls} ref={ref}>\n        {React.Children.map(children, (child) => {\n          const childElement = child as React.FunctionComponentElement<ButtonProps>;\n          const { displayName } = childElement.type;\n          if (displayName === 'Button') {\n            const childProps: Partial<ButtonProps> = {\n              btnType: btnType as ButtonType,\n              size: btnSize as SizeType,\n              disabled: 'disabled' in childElement.props ? childElement.props.disabled : disabled,\n            };\n            return React.cloneElement(childElement, childProps);\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n\nexport default ButtonGroup;\n"],"mappings":";;;;;;;;;AAOA,MAAM,cAAcA,MAAAA,QAAM,YACvB,OAAyB,QAAQ;CAChC,MAAM,EACJ,OAAO,MACP,UAAU,WACV,WAAW,OACX,QAAQ,OACR,WAAW,eACX,WACA,UACA,GAAG,eACD;CACJ,MAAM,iBAAA,GAAA,MAAA,YAA2BC,uBAAAA,cAAc;CAC/C,MAAM,YAAYC,gBAAAA,aAAa,aAAa,cAAc,WAAW,cAAc;CACnF,MAAM,UAAU,MAAM,QAAQ,cAAc,iBAAiB;CAC7D,MAAM,OAAA,GAAA,WAAA,SACJ,WACA;GACG,GAAG,UAAU,UAAU;GACvB,GAAG,UAAU,GAAG,YAAY;EAC9B,EACD,UACD;AACD,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAU;YACvCF,MAAAA,QAAM,SAAS,IAAI,WAAW,UAAU;GACvC,MAAM,eAAe;GACrB,MAAM,EAAE,gBAAgB,aAAa;AACrC,OAAI,gBAAgB,UAAU;IAC5B,MAAM,aAAmC;KAC9B;KACT,MAAM;KACN,UAAU,cAAc,aAAa,QAAQ,aAAa,MAAM,WAAW;KAC5E;AACD,WAAOA,MAAAA,QAAM,aAAa,cAAc,WAAW;SAEnD,QAAO;IAET;EACE,CAAA;EAGX;AAED,YAAY,cAAc"}

package/lib/button/button.d.ts

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

package/lib/button/button.js

@@ -0,0 +1,51 @@
+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/button/button.tsx
+const Button = react.default.forwardRef((props, ref) => {
+	const { size = "md", btnType = "default", loading = false, disabled = false, block = false, onClick, icon, round, children, className, style, prefixCls: customisedCls, ...otherProps } = props;
+	const configContext = (0, react.useContext)(require_config_context.ConfigContext);
+	const prefixCls = require_general.getPrefixCls("btn", configContext.prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, `${prefixCls}_${props.size || configContext.componentSize || size}`, {
+		[`${prefixCls}_${btnType}`]: btnType,
+		[`${prefixCls}_block`]: block,
+		[`${prefixCls}_round`]: round,
+		[`${prefixCls}_disabled`]: disabled,
+		[`${prefixCls}_loading`]: loading
+	}, className);
+	const btnOnClick = (e) => {
+		if (disabled || loading) return;
+		onClick && onClick(e);
+	};
+	const renderIcon = () => {
+		if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefixCls}__loader` });
+		else if (icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `${prefixCls}__icon-container`,
+			children: icon
+		});
+		else return null;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...otherProps,
+		ref,
+		role: "button",
+		className: cls,
+		disabled,
+		onClick: btnOnClick,
+		style,
+		children: [renderIcon(), children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `${prefixCls}__children`,
+			children
+		})]
+	});
+});
+Button.displayName = "Button";
+//#endregion
+exports.default = Button;
+
+//# sourceMappingURL=button.js.map

package/lib/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["React","ConfigContext","getPrefixCls"],"sources":["../../src/button/button.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { ButtonProps } from './types';\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps, ref) => {\n  const {\n    size = 'md',\n    btnType = 'default',\n    loading = false,\n    disabled = false,\n    block = false,\n    onClick,\n    icon,\n    round,\n    children,\n    className,\n    style,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('btn', configContext.prefixCls, customisedCls);\n  const btnSize = props.size || configContext.componentSize || size;\n  const cls = classNames(\n    prefixCls,\n    `${prefixCls}_${btnSize}`,\n    {\n      [`${prefixCls}_${btnType}`]: btnType,\n      [`${prefixCls}_block`]: block,\n      [`${prefixCls}_round`]: round,\n      [`${prefixCls}_disabled`]: disabled,\n      [`${prefixCls}_loading`]: loading,\n    },\n    className\n  );\n\n  const btnOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (disabled || loading) {\n      return;\n    }\n    onClick && onClick(e);\n  };\n\n  const renderIcon = (): React.ReactElement | null => {\n    if (loading) {\n      return <span className={`${prefixCls}__loader`} />;\n    } else if (icon) {\n      return <span className={`${prefixCls}__icon-container`}>{icon}</span>;\n    } else {\n      return null;\n    }\n  };\n\n  return (\n    <button\n      {...otherProps}\n      ref={ref}\n      role=\"button\"\n      className={cls}\n      disabled={disabled}\n      onClick={btnOnClick}\n      style={style}>\n      {renderIcon()}\n      {children && <span className={`${prefixCls}__children`}>{children}</span>}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAMA,MAAM,SAASA,MAAAA,QAAM,YAA4C,OAAoB,QAAQ;CAC3F,MAAM,EACJ,OAAO,MACP,UAAU,WACV,UAAU,OACV,WAAW,OACX,QAAQ,OACR,SACA,MACA,OACA,UACA,WACA,OACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,iBAAA,GAAA,MAAA,YAA2BC,uBAAAA,cAAc;CAC/C,MAAM,YAAYC,gBAAAA,aAAa,OAAO,cAAc,WAAW,cAAc;CAE7E,MAAM,OAAA,GAAA,WAAA,SACJ,WACA,GAAG,UAAU,GAHC,MAAM,QAAQ,cAAc,iBAAiB,QAI3D;GACG,GAAG,UAAU,GAAG,YAAY;GAC5B,GAAG,UAAU,UAAU;GACvB,GAAG,UAAU,UAAU;GACvB,GAAG,UAAU,aAAa;GAC1B,GAAG,UAAU,YAAY;EAC3B,EACD,UACD;CAED,MAAM,cAAc,MAA2C;AAC7D,MAAI,YAAY,QACd;AAEF,aAAW,QAAQ,EAAE;;CAGvB,MAAM,mBAA8C;AAClD,MAAI,QACF,QAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAW,GAAG,UAAU,WAAa,CAAA;WACzC,KACT,QAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAW,GAAG,UAAU;aAAoB;GAAY,CAAA;MAErE,QAAO;;AAIX,QACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;EACE,GAAI;EACC;EACL,MAAK;EACL,WAAW;EACD;EACV,SAAS;EACF;YAPT,CAQG,YAAY,EACZ,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAW,GAAG,UAAU;GAAc;GAAgB,CAAA,CAClE;;EAEX;AAEF,OAAO,cAAc"}

package/lib/button/index.d.ts

@@ -0,0 +1,11 @@
+import { Button } from "./button.js";
+import { ButtonGroup } from "./button-group.js";
+
+//#region src/button/index.d.ts
+type IButton = typeof Button & {
+  Group: typeof ButtonGroup;
+};
+declare const DefaultButton: IButton;
+//#endregion
+export { DefaultButton };
+//# sourceMappingURL=index.d.ts.map

package/lib/button/index.js

@@ -0,0 +1,11 @@
+require('../style/base.css');
+require('./style/index.css');
+const require_button = require("./button.js");
+const require_button_group = require("./button-group.js");
+//#region src/button/index.tsx
+const DefaultButton = require_button.default;
+DefaultButton.Group = require_button_group.default;
+//#endregion
+exports.default = DefaultButton;
+
+//# sourceMappingURL=index.js.map

package/lib/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Button","ButtonGroup"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import Button from './button';\nimport ButtonGroup from './button-group';\n\ntype IButton = typeof Button & {\n  Group: typeof ButtonGroup;\n};\n\nconst DefaultButton = Button as IButton;\nDefaultButton.Group = ButtonGroup;\n\nexport default DefaultButton;\n"],"mappings":";;;AAOA,MAAM,gBAAgBA,eAAAA;AACtB,cAAc,QAAQC,qBAAAA"}

package/lib/button/style/_index.scss

@@ -0,0 +1,215 @@
+@use '../../style/variables' as *;
+@use '../../style/mixins' as *;
+@use './mixin' as *;
+
+$btn-prefix: #{$prefix}-btn;
+
+.#{$btn-prefix} {
+  box-sizing: border-box;
+  border: 1px solid var(--ty-color-border-btn-default);
+  outline: none;
+  letter-spacing: 0;
+  text-align: center;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 50px;
+  vertical-align: middle;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  border-radius: $btn-border-radius;
+  transition: $btn-transition;
+  line-height: $btn-line-height;
+
+  &__loader {
+    @include loader();
+  }
+
+  &__icon-container, &__loader {
+    display: inline-block;
+    pointer-events: none;
+    line-height: $btn-line-height;
+    vertical-align: middle;
+
+    & + span {
+      margin-left: .3em;
+    }
+  }
+
+  &__children {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // Types
+  &_default {
+    @include button-style(
+      var(--ty-btn-default-color), var(--ty-btn-default-bg), var(--ty-btn-default-border),
+      var(--ty-btn-default-hover-bg), var(--ty-btn-default-hover-border), var(--ty-btn-default-hover-color),
+      var(--ty-btn-default-active-bg), var(--ty-btn-default-active-border), var(--ty-btn-default-active-color)
+    );
+  }
+
+  &_primary {
+    @include button-style(#fff, var(--ty-color-primary), var(--ty-color-primary),
+      var(--ty-color-primary-hover), var(--ty-color-primary-hover), #fff,
+      var(--ty-color-primary-active), var(--ty-color-primary-active), #fff);
+  }
+
+  &_outline {
+    @include button-style(var(--ty-color-primary), var(--ty-btn-default-bg), var(--ty-color-primary),
+      var(--ty-btn-outline-hover-bg), var(--ty-color-primary-hover), var(--ty-color-primary),
+      var(--ty-btn-outline-active-bg));
+  }
+
+  &_ghost {
+    @include button-style(var(--ty-color-primary), transparent, transparent,
+      var(--ty-btn-ghost-hover-bg), transparent, var(--ty-color-primary),
+      var(--ty-btn-ghost-active-bg), transparent, var(--ty-color-primary));
+
+    &:disabled {
+      border: 0;
+    }
+  }
+
+  &_link {
+    @include button-style(var(--ty-color-primary), transparent, transparent);
+
+    &:hover {
+      text-decoration-line: underline;
+    }
+
+    &:disabled {
+      color: var(--ty-btn-link-disabled-color);
+      background-color: transparent;
+      border-color: transparent;
+      text-decoration-line: none;
+    }
+  }
+
+  &_info {
+    @include button-style(#fff, var(--ty-color-info), var(--ty-color-info));
+  }
+
+  &_success {
+    @include button-style(#fff, var(--ty-color-success), var(--ty-color-success));
+  }
+
+  &_warning {
+    @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning));
+  }
+
+  &_danger {
+    @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger));
+  }
+
+  // Sizes
+  &_sm {
+    @include btn-size($btn-padding-sm, $btn-font-size-sm, $btn-height-sm);
+  }
+
+  &_md {
+    @include btn-size($btn-padding-md, $btn-font-size-md, $btn-height-md);
+  }
+
+  &_lg {
+    @include btn-size($btn-padding-lg, $btn-font-size-lg, $btn-height-lg);
+  }
+
+  &_block {
+    width: 100%;
+
+    & + & {
+      margin: 0;
+    }
+  }
+
+  &_round {
+    border-radius: $btn-height-lg;
+  }
+
+  &_loading {
+    position: relative;
+    pointer-events: none;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      left: -1px;
+      z-index: 1;
+      display: block;
+      background: var(--ty-btn-loading-bg);
+      border-radius: inherit;
+      opacity: $btn-loading-opacity;
+      transition: opacity .2s;
+    }
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+  }
+}
+
+.#{$btn-prefix}-group {
+  display: inline-block;
+
+  & + .#{$btn-prefix}-group {
+    margin-left: 10px;
+  }
+
+  .#{$btn-prefix} {
+    position: relative;
+    border-radius: 0;
+    float: left;
+
+    & + .#{$btn-prefix} {
+      margin-left: -1px;
+    }
+
+    &:hover {
+      z-index: 1;
+    }
+
+    &:first-child {
+      border-top-left-radius: $btn-border-radius;
+      border-bottom-left-radius: $btn-border-radius;
+    }
+
+    &:last-child {
+      border-top-right-radius: $btn-border-radius;
+      border-bottom-right-radius: $btn-border-radius;
+    }
+  }
+
+  &_round {
+    .#{$btn-prefix} {
+      &:first-child {
+        border-top-left-radius: 30px;
+        border-bottom-left-radius: 30px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 30px;
+        border-bottom-right-radius: 30px;
+      }
+    }
+  }
+
+  &_primary,
+  &_info,
+  &_success,
+  &_warning,
+  &_danger {
+    .#{$btn-prefix} {
+      &:not(:first-child) {
+        border-left-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}

package/lib/button/style/_mixin.scss

@@ -0,0 +1,45 @@
+@mixin button-style(
+  $color,
+  $background,
+  $border,
+  $hover-background: null,
+  $hover-border: null,
+  $hover-color: $color,
+  $active-background: null,
+  $active-border: null,
+  $active-color: $color,
+) {
+  color: $color;
+  background: $background;
+  border-color: $border;
+  &:hover {
+    color: $hover-color;
+    @if $hover-background { background: $hover-background; }
+    @if $hover-border { border-color: $hover-border; }
+  }
+
+  &:focus {
+    color: $hover-color;
+    @if $hover-background { background: $hover-background; }
+    @if $hover-border { border-color: $hover-border; }
+    z-index: 1;
+  }
+
+  &:active {
+    color: $active-color;
+    @if $active-background { background: $active-background; }
+    @if $active-border { border-color: $active-border; }
+  }
+
+  &:disabled {
+    color: var(--ty-btn-disabled-color);
+    background-color: var(--ty-btn-disabled-bg);
+    border-color: var(--ty-btn-disabled-border);
+  }
+}
+
+@mixin btn-size($padding, $font-size, $height) {
+  padding: $padding;
+  font-size: $font-size;
+  height: $height;
+}