@tiny-design/react 1.0.4

package/es/select/style/_index.scss

@@ -0,0 +1,313 @@
+@use "../../style/variables" as *;
+
+.#{$prefix}-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-size: $font-size-base;
+  cursor: pointer;
+  outline: none;
+
+  &_disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .#{$prefix}-select__selector {
+      background-color: var(--ty-color-bg-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  // Sizes
+  &_sm .#{$prefix}-select__selector {
+    min-height: $height-sm;
+    font-size: $font-size-sm;
+    padding: 0 24px 0 8px;
+  }
+
+  &_md .#{$prefix}-select__selector {
+    min-height: $height-md;
+    font-size: $font-size-base;
+    padding: 0 28px 0 10px;
+  }
+
+  &_lg .#{$prefix}-select__selector {
+    min-height: $height-lg;
+    font-size: $font-size-lg;
+    padding: 0 32px 0 12px;
+  }
+
+  // Multiple mode
+  &_multiple {
+    .#{$prefix}-select__selector {
+      padding-right: 28px;
+    }
+
+    .#{$prefix}-select__selection {
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 2px 0;
+    }
+  }
+
+  // Open state
+  &_open .#{$prefix}-select__selector {
+    border-color: var(--ty-input-focus-border);
+    box-shadow: var(--ty-input-focus-shadow);
+  }
+
+  // Selector
+  &__selector {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border: $border-width solid var(--ty-input-border);
+    border-radius: $border-radius;
+    background-color: var(--ty-input-bg);
+    box-sizing: border-box;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: var(--ty-input-focus-border);
+    }
+  }
+
+  // Selection area
+  &__selection {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    min-width: 0;
+  }
+
+  &__selection-text {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--ty-color-text);
+  }
+
+  &__placeholder {
+    color: var(--ty-color-text-placeholder);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  // Search input
+  &__search {
+    flex: 1;
+    min-width: 4px;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: inherit;
+    font-family: inherit;
+    color: var(--ty-color-text);
+    appearance: none;
+
+    &::placeholder {
+      color: var(--ty-color-text-placeholder);
+    }
+  }
+
+  // Suffix (arrow + clear)
+  &__suffix {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    color: var(--ty-color-text-quaternary);
+  }
+
+  // Arrow
+  &__arrow {
+    display: inline-flex;
+    align-items: center;
+    transition: transform 300ms;
+
+    &_reverse {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Clear button — overlays arrow on hover (same pattern as TimePicker/DatePicker)
+  &__clear {
+    display: none;
+    position: absolute;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: var(--ty-color-text-quaternary);
+    background: var(--ty-input-bg);
+    cursor: pointer;
+    transition: color 0.2s;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      color: var(--ty-color-text-tertiary);
+    }
+  }
+
+  &_has-value:hover &__clear {
+    display: inline-flex;
+  }
+
+  // Tag pill (multi-select)
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    height: 22px;
+    padding: 0 4px 0 8px;
+    border-radius: $border-radius;
+    background-color: var(--ty-color-fill-secondary);
+    font-size: $font-size-sm;
+    line-height: 20px;
+    color: var(--ty-color-text);
+    box-sizing: border-box;
+
+    &_max {
+      padding: 0 8px;
+    }
+  }
+
+  &__tag-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__tag-close {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+    cursor: pointer;
+    color: var(--ty-color-text-quaternary);
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--ty-color-text);
+    }
+  }
+
+  // Dropdown
+  &__dropdown {
+    width: 100%;
+    margin: 0;
+    padding: 4px 0;
+    list-style-type: none;
+    background-color: var(--ty-select-dropdown-bg);
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 10;
+    box-shadow: var(--ty-shadow-popup);
+    border-radius: $border-radius;
+    font-size: $font-size-base;
+    max-height: $select-dropdown-max-height;
+  }
+
+  // Loading state
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16px;
+
+    svg {
+      animation: ty-select-spin 1s linear infinite;
+    }
+  }
+
+  // Empty state
+  &__empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--ty-color-text-quaternary);
+    font-size: $font-size-sm;
+  }
+}
+
+// Option (used both by Option component and options-prop rendering)
+.#{$prefix}-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+  color: var(--ty-color-text);
+  transition: background-color 0.2s;
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__check {
+    flex-shrink: 0;
+    margin-left: 8px;
+    color: var(--ty-color-primary);
+  }
+
+  &_active {
+    background-color: var(--ty-select-option-active-bg);
+  }
+
+  &_selected {
+    background-color: var(--ty-select-option-selected-bg);
+    font-weight: $select-selected-font-weight;
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+    background-color: var(--ty-select-option-disabled-bg);
+    opacity: 0.5;
+  }
+}
+
+.#{$prefix}-select-group {
+
+  &__title {
+    font-size: $font-size-sm;
+    cursor: default;
+    color: $gray-600;
+    padding: 7px 12px;
+  }
+
+  &__list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    > .#{$prefix}-select-option {
+      padding-left: 24px;
+    }
+  }
+}
+
+@keyframes ty-select-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/es/select/style/index.css

@@ -0,0 +1,260 @@
+.ty-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-size: 1rem;
+  cursor: pointer;
+  outline: none;
+}
+.ty-select_disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ty-select_disabled .ty-select__selector {
+  background-color: var(--ty-color-bg-disabled);
+  cursor: not-allowed;
+}
+.ty-select_sm .ty-select__selector {
+  min-height: 24px;
+  font-size: 0.875rem;
+  padding: 0 24px 0 8px;
+}
+.ty-select_md .ty-select__selector {
+  min-height: 32px;
+  font-size: 1rem;
+  padding: 0 28px 0 10px;
+}
+.ty-select_lg .ty-select__selector {
+  min-height: 42px;
+  font-size: 1.25rem;
+  padding: 0 32px 0 12px;
+}
+.ty-select_multiple .ty-select__selector {
+  padding-right: 28px;
+}
+.ty-select_multiple .ty-select__selection {
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 2px 0;
+}
+.ty-select_open .ty-select__selector {
+  border-color: var(--ty-input-focus-border);
+  box-shadow: var(--ty-input-focus-shadow);
+}
+.ty-select__selector {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid var(--ty-input-border);
+  border-radius: 2px;
+  background-color: var(--ty-input-bg);
+  box-sizing: border-box;
+  transition: all 0.3s;
+}
+.ty-select__selector:hover {
+  border-color: var(--ty-input-focus-border);
+}
+.ty-select__selection {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-width: 0;
+}
+.ty-select__selection-text {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ty-color-text);
+}
+.ty-select__placeholder {
+  color: var(--ty-color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.ty-select__search {
+  flex: 1;
+  min-width: 4px;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--ty-color-text);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.ty-select__search::-moz-placeholder {
+  color: var(--ty-color-text-placeholder);
+}
+.ty-select__search::placeholder {
+  color: var(--ty-color-text-placeholder);
+}
+.ty-select__suffix {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  color: var(--ty-color-text-quaternary);
+}
+.ty-select__arrow {
+  display: inline-flex;
+  align-items: center;
+  transition: transform 300ms;
+}
+.ty-select__arrow_reverse {
+  transform: rotate(180deg);
+}
+.ty-select__clear {
+  display: none;
+  position: absolute;
+  inset: 0;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--ty-color-text-quaternary);
+  background: var(--ty-input-bg);
+  cursor: pointer;
+  transition: color 0.2s;
+  border: none;
+  padding: 0;
+}
+.ty-select__clear:hover {
+  color: var(--ty-color-text-tertiary);
+}
+.ty-select_has-value:hover .ty-select__clear {
+  display: inline-flex;
+}
+.ty-select__tag {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: 22px;
+  padding: 0 4px 0 8px;
+  border-radius: 2px;
+  background-color: var(--ty-color-fill-secondary);
+  font-size: 0.875rem;
+  line-height: 20px;
+  color: var(--ty-color-text);
+  box-sizing: border-box;
+}
+.ty-select__tag_max {
+  padding: 0 8px;
+}
+.ty-select__tag-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ty-select__tag-close {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+  cursor: pointer;
+  color: var(--ty-color-text-quaternary);
+  transition: color 0.2s;
+}
+.ty-select__tag-close:hover {
+  color: var(--ty-color-text);
+}
+.ty-select__dropdown {
+  width: 100%;
+  margin: 0;
+  padding: 4px 0;
+  list-style-type: none;
+  background-color: var(--ty-select-dropdown-bg);
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: var(--ty-shadow-popup);
+  border-radius: 2px;
+  font-size: 1rem;
+  max-height: 300px;
+}
+.ty-select__loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+}
+.ty-select__loading svg {
+  animation: ty-select-spin 1s linear infinite;
+}
+.ty-select__empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--ty-color-text-quaternary);
+  font-size: 0.875rem;
+}
+
+.ty-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+  color: var(--ty-color-text);
+  transition: background-color 0.2s;
+}
+.ty-select-option__content {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ty-select-option__check {
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: var(--ty-color-primary);
+}
+.ty-select-option_active {
+  background-color: var(--ty-select-option-active-bg);
+}
+.ty-select-option_selected {
+  background-color: var(--ty-select-option-selected-bg);
+  font-weight: 600;
+}
+.ty-select-option_disabled {
+  cursor: not-allowed;
+  background-color: var(--ty-select-option-disabled-bg);
+  opacity: 0.5;
+}
+
+.ty-select-group__title {
+  font-size: 0.875rem;
+  cursor: default;
+  color: #8898aa;
+  padding: 7px 12px;
+}
+.ty-select-group__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.ty-select-group__list > .ty-select-option {
+  padding-left: 24px;
+}
+
+@keyframes ty-select-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/es/select/style/index.d.ts

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

package/es/select/style/index.js

@@ -0,0 +1,3 @@
+import "./index.css";
+import "../../popup/style/index.css";
+import "../../input/style/index.css";

package/es/select/types.d.ts

@@ -0,0 +1,53 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import React from "react";
+
+//#region src/select/types.d.ts
+interface SelectOptGroupProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
+  label?: string;
+  children?: React.ReactNode;
+}
+interface SelectOptionsProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
+  value: string;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+interface SelectOptionItem {
+  value: string;
+  label?: React.ReactNode;
+  disabled?: boolean;
+}
+type SelectValue = string | string[];
+interface SelectProps extends BaseProps, Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'onSelect' | 'onChange' | 'defaultValue'> {
+  value?: SelectValue;
+  defaultValue?: SelectValue;
+  mode?: 'multiple' | 'tags';
+  showSearch?: boolean;
+  filterOption?: boolean | ((inputValue: string, option: SelectOptionItem) => boolean);
+  onSearch?: (value: string) => void;
+  allowClear?: boolean;
+  loading?: boolean;
+  size?: SizeType;
+  maxTagCount?: number;
+  notFoundContent?: React.ReactNode;
+  options?: SelectOptionItem[];
+  onChange?: (value: SelectValue, option?: SelectOptionItem | SelectOptionItem[]) => void;
+  onSelect?: (value: SelectValue) => void;
+  optionRender?: (option: SelectOptionItem, info: {
+    index: number;
+  }) => React.ReactNode;
+  labelRender?: (props: {
+    label: React.ReactNode;
+    value: string;
+  }) => React.ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onDropdownVisibleChange?: (open: boolean) => void;
+  dropdownStyle?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+//#endregion
+export { SelectOptGroupProps, SelectOptionsProps, SelectProps };
+//# sourceMappingURL=types.d.ts.map

package/es/skeleton/index.d.ts

@@ -0,0 +1 @@
+import { Skeleton } from "./skeleton.js";

package/es/skeleton/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import Skeleton from "./skeleton.js";
+//#region src/skeleton/index.tsx
+var skeleton_default = Skeleton;
+//#endregion
+export { skeleton_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/skeleton/index.js.map

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

package/es/skeleton/skeleton.d.ts

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

package/es/skeleton/skeleton.js

@@ -0,0 +1,28 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/skeleton/skeleton.tsx
+const Skeleton = React.memo(React.forwardRef((props, ref) => {
+	const { active = false, rounded = false, className, children, prefixCls: customisedCls, ...otherProps } = props;
+	const configContext = useContext(ConfigContext);
+	const prefixCls = getPrefixCls("skeleton", configContext.prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}_active`]: configContext.shimmer || active,
+		[`${prefixCls}_rounded`]: rounded
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...otherProps,
+		className: cls,
+		role: "status",
+		"aria-busy": "true",
+		children
+	});
+}));
+Skeleton.displayName = "Skeleton";
+//#endregion
+export { Skeleton as default };
+
+//# sourceMappingURL=skeleton.js.map

package/es/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { SkeletonProps } from './types';\n\nconst Skeleton = React.memo(React.forwardRef<HTMLDivElement, SkeletonProps>(\n  (props: SkeletonProps, ref): JSX.Element => {\n    const {\n      active = false,\n      rounded = false,\n      className,\n      children,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('skeleton', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className, {\n      [`${prefixCls}_active`]: configContext.shimmer || active,\n      [`${prefixCls}_rounded`]: rounded,\n    });\n\n    return (\n      <div ref={ref} {...otherProps} className={cls} role=\"status\" aria-busy=\"true\">\n        {children}\n      </div>\n    );\n  }\n));\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAMA,MAAM,WAAW,MAAM,KAAK,MAAM,YAC/B,OAAsB,QAAqB;CAC1C,MAAM,EACJ,SAAS,OACT,UAAU,OACV,WACA,UACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,gBAAgB,WAAW,cAAc;CAC/C,MAAM,YAAY,aAAa,YAAY,cAAc,WAAW,cAAc;CAClF,MAAM,MAAM,WAAW,WAAW,WAAW;GAC1C,GAAG,UAAU,WAAW,cAAc,WAAW;GACjD,GAAG,UAAU,YAAY;EAC3B,CAAC;AAEF,QACE,oBAAC,OAAD;EAAU;EAAK,GAAI;EAAY,WAAW;EAAK,MAAK;EAAS,aAAU;EACpE;EACG,CAAA;EAGX,CAAC;AAEF,SAAS,cAAc"}