musae 0.3.0 → 0.3.2

package/dist/components/select/selector.cjs

@@ -1,7 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var React = require('react');
 var tag = require('../tag/tag.cjs');
 var input = require('../input/input.cjs');
@@ -26,7 +25,9 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     searchable = _ref.searchable,
     value = _ref.value,
     onSearch = _ref.onSearch,
-    searched = _ref.searched;
+    searched = _ref.searched,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
   var inputRef = React.useRef(null);
   var _useContext = React.useContext(context.Context),
     isFocused = _useContext.isFocused,
@@ -40,28 +41,38 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   });
+  // on user search input, trigger the search callback
   var search = function search(e) {
     open === null || open === void 0 || open();
-    // on user search input, trigger the search callback
     onSearch(e.target.value);
   };
-  /// multiple mode render
+  var styled = stylex.default.props(input.styles.input, styles.input({
+    color: isFocused && searchable && theme$1.colors[colors.ColorToken.OnSurface] || void 0
+  }), theme.typography.body.small);
+  // multiple mode render
   if (mode === "multiple") {
-    return [].concat(_toConsumableArray(Array.from(value.entries()).map(function (_ref2) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(value.entries()).map(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         label = _ref3[1];
       return /*#__PURE__*/React.createElement(tag.default, {
         key: key,
-        size: "small"
+        size: "small",
+        closable: true,
+        onClose: function onClose() {
+          return onChange(key);
+        }
       }, label);
-    })), [searchable && /*#__PURE__*/React.createElement("input", {
-      ref: inputRef
-    })]);
+    }), searchable && (/*#__PURE__*/React.createElement("input", {
+      key: "select-selector",
+      ref: inputRef,
+      value: searched,
+      className: styled.className,
+      style: styled.style,
+      onChange: search,
+      onBlur: onBlur
+    })));
   }
-  var styled = stylex.default.props(input.styles.input, styles.input({
-    color: isFocused && searchable && theme$1.colors[colors.ColorToken.OnSurface] || void 0
-  }), theme.typography.body.small);
   // single mode render
   if (!searchable) {
     return /*#__PURE__*/React.createElement("span", {
@@ -75,7 +86,8 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder: Array.from(value.values()).join(","),
     className: styled.className,
     style: styled.style,
-    onChange: search
+    onChange: search,
+    onBlur: onBlur
   });
 });
 

package/dist/components/select/selector.d.ts

@@ -1,4 +1,4 @@
 import { type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from "react";
-import type { SelectorProps, SelectorRef } from "./types";
+import type { SelectorProps, SelectorRef } from "../../types/select";
 declare const Selector: ForwardRefExoticComponent<PropsWithoutRef<SelectorProps> & RefAttributes<SelectorRef>>;
 export default Selector;

package/dist/components/select/selector.mjs

@@ -1,5 +1,4 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import React, { forwardRef, useRef, useContext, useImperativeHandle } from 'react';
 import Tag from '../tag/tag.mjs';
 import { styles as styles$1 } from '../input/input.mjs';
@@ -24,7 +23,9 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
     searchable = _ref.searchable,
     value = _ref.value,
     onSearch = _ref.onSearch,
-    searched = _ref.searched;
+    searched = _ref.searched,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
   var inputRef = useRef(null);
   var _useContext = useContext(Context),
     isFocused = _useContext.isFocused,
@@ -38,28 +39,38 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     };
   });
+  // on user search input, trigger the search callback
   var search = function search(e) {
     open === null || open === void 0 || open();
-    // on user search input, trigger the search callback
     onSearch(e.target.value);
   };
-  /// multiple mode render
+  var styled = _stylex.props(styles$1.input, styles.input({
+    color: isFocused && searchable && theme.colors[ColorToken.OnSurface] || void 0
+  }), typography.body.small);
+  // multiple mode render
   if (mode === "multiple") {
-    return [].concat(_toConsumableArray(Array.from(value.entries()).map(function (_ref2) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(value.entries()).map(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         label = _ref3[1];
       return /*#__PURE__*/React.createElement(Tag, {
         key: key,
-        size: "small"
+        size: "small",
+        closable: true,
+        onClose: function onClose() {
+          return onChange(key);
+        }
       }, label);
-    })), [searchable && /*#__PURE__*/React.createElement("input", {
-      ref: inputRef
-    })]);
+    }), searchable && (/*#__PURE__*/React.createElement("input", {
+      key: "select-selector",
+      ref: inputRef,
+      value: searched,
+      className: styled.className,
+      style: styled.style,
+      onChange: search,
+      onBlur: onBlur
+    })));
   }
-  var styled = _stylex.props(styles$1.input, styles.input({
-    color: isFocused && searchable && theme.colors[ColorToken.OnSurface] || void 0
-  }), typography.body.small);
   // single mode render
   if (!searchable) {
     return /*#__PURE__*/React.createElement("span", {
@@ -73,7 +84,8 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
     placeholder: Array.from(value.values()).join(","),
     className: styled.className,
     style: styled.style,
-    onChange: search
+    onChange: search,
+    onBlur: onBlur
   });
 });
 

package/dist/components/select/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Filter, ReadableOptions, ToMenuItem, Value, ValueOrValues } from "./types";
+import type { Filter, ReadableOptions, ToMenuItem, Value, ValueOrValues } from "../../types/select";
 import type { Option } from "musae/types/option";
 import type { MenuItem } from "musae/types/menu";
 /**

package/dist/components/table/header/cell.cjs

@@ -78,18 +78,17 @@ var Cell = function Cell(_ref) {
     }, new Map());
   }, [_sortDirections]);
   var sort = React.useMemo(function () {
-    if ((sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.key) === value) {
-      return sortDescriptor.direction;
-    }
-    return null;
+    if (!sortDescriptor) return null;
+    if (sortDescriptor.key !== value) return null;
+    return sortDescriptor.direction;
   }, [sortDescriptor, value]);
   // sort handler
   var onSort = relax.useEvent(function () {
-    var _direction = sortDirections.get(sort);
-    var __direction = relax.isUndefined(_direction) ? "ascending" : _direction;
+    var _sortDirections$get;
+    if (!value) return;
     onSortChange === null || onSortChange === void 0 || onSortChange({
       key: value,
-      direction: __direction
+      direction: (_sortDirections$get = sortDirections.get(sort)) !== null && _sortDirections$get !== void 0 ? _sortDirections$get : "ascending"
     });
   });
   // only children, render directly

package/dist/components/table/header/cell.mjs

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react';
-import { toFunction, useEvent, isUndefined } from '@aiszlab/relax';
+import { toFunction, useEvent } from '@aiszlab/relax';
 import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../../theme/hooks.mjs';
 import { ColorToken } from '../../../utils/colors.mjs';
@@ -76,18 +76,17 @@ var Cell = function Cell(_ref) {
     }, new Map());
   }, [_sortDirections]);
   var sort = useMemo(function () {
-    if ((sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.key) === value) {
-      return sortDescriptor.direction;
-    }
-    return null;
+    if (!sortDescriptor) return null;
+    if (sortDescriptor.key !== value) return null;
+    return sortDescriptor.direction;
   }, [sortDescriptor, value]);
   // sort handler
   var onSort = useEvent(function () {
-    var _direction = sortDirections.get(sort);
-    var __direction = isUndefined(_direction) ? "ascending" : _direction;
+    var _sortDirections$get;
+    if (!value) return;
     onSortChange === null || onSortChange === void 0 || onSortChange({
       key: value,
-      direction: __direction
+      direction: (_sortDirections$get = sortDirections.get(sort)) !== null && _sortDirections$get !== void 0 ? _sortDirections$get : "ascending"
     });
   });
   // only children, render directly

package/dist/components/table/hooks.cjs

@@ -19,9 +19,10 @@ var useColumns = function useColumns(_ref) {
         _ref2$sortable = _ref2.sortable,
         sortable = _ref2$sortable === void 0 ? false : _ref2$sortable,
         _ref2$sortDirections = _ref2.sortDirections,
-        sortDirections = _ref2$sortDirections === void 0 ? ["ascending", "descending"] : _ref2$sortDirections;
+        sortDirections = _ref2$sortDirections === void 0 ? ["ascending", "descending"] : _ref2$sortDirections,
+        valueAt = _ref2.valueAt;
       // @ts-ignore
-      return helper.current.accessor(key, {
+      return helper.current.accessor(valueAt !== null && valueAt !== void 0 ? valueAt : key, {
         header: /*#__PURE__*/React.createElement(cell.default, {
           children: title,
           sortable: sortable,

package/dist/components/table/hooks.d.ts

@@ -1,4 +1,4 @@
-import { type ColumnDef } from "@tanstack/react-table";
+import { type ColumnDef, DeepValue, DeepKeys } from "@tanstack/react-table";
 import type { Column, ContextValue, SortDescriptor } from "musae/types/table";
 /**
  * @description
@@ -6,7 +6,7 @@ import type { Column, ContextValue, SortDescriptor } from "musae/types/table";
  */
 export declare const useColumns: <T>({ columns }: {
     columns: Column<T>[];
-}) => ColumnDef<T, any>[];
+}) => ColumnDef<T, DeepValue<T, DeepKeys<T>>>[];
 /**
  * @author murukal
  * @description

package/dist/components/table/hooks.mjs

@@ -19,9 +19,10 @@ var useColumns = function useColumns(_ref) {
         _ref2$sortable = _ref2.sortable,
         sortable = _ref2$sortable === void 0 ? false : _ref2$sortable,
         _ref2$sortDirections = _ref2.sortDirections,
-        sortDirections = _ref2$sortDirections === void 0 ? ["ascending", "descending"] : _ref2$sortDirections;
+        sortDirections = _ref2$sortDirections === void 0 ? ["ascending", "descending"] : _ref2$sortDirections,
+        valueAt = _ref2.valueAt;
       // @ts-ignore
-      return helper.current.accessor(key, {
+      return helper.current.accessor(valueAt !== null && valueAt !== void 0 ? valueAt : key, {
         header: /*#__PURE__*/createElement(Cell, {
           children: title,
           sortable: sortable,

package/dist/components/time-picker/hooks.d.ts

@@ -1,7 +1,7 @@
 import type { TimePickerProps } from "./types";
 import dayjs from "dayjs";
 import { type RefObject } from "react";
-import type { PickerRef } from "../picker";
+import type { PickerRef } from "musae/types/picker";
 /**
  * @description
  * value

package/dist/index.cjs

@@ -1,4 +1,4 @@
-import "musae/styles.css";
+require("musae/styles")
 var index = require('./components/avatar/index.cjs');
 var index$1 = require('./components/radio/index.cjs');
 var index$2 = require('./components/checkbox/index.cjs');

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import "musae/styles.css";
+import "musae/styles";
 export { Avatar } from './components/avatar/index.mjs';
 export { Radio } from './components/radio/index.mjs';
 export { Checkbox } from './components/checkbox/index.mjs';

package/dist/types/form.d.ts

@@ -119,3 +119,8 @@ export interface TypedForm {
  * form ref
  */
 export type FormRef<T extends FieldValues = FieldValues> = UseFormReturn<T>;
+/**
+ * @description
+ * form instance
+ */
+export type UsedForm<T extends FieldValues = FieldValues> = UseFormReturn<T>;

package/dist/{components/pagination/types.d.ts → types/pagination.d.ts}

@@ -4,12 +4,7 @@ type UsedCounter = ReturnType<typeof useCounter>;
  * @description
  * pagiantion item type
  */
-export declare enum PaginationItemType {
-    Prev = "prev",
-    Next = "next",
-    MorePrev = "more-prev",
-    MoreNext = "more-next"
-}
+export type PaginationItemType = "prev" | "next" | "more-prev" | "more-next";
 /**
  * @author murukal
  *
@@ -47,8 +42,24 @@ export type PagiantionProps = {
      * @default [10, 20, 50, 100]
      */
     pageSizes?: number[];
+    /**
+     * @description
+     * current page at
+     * @default 1
+     */
+    at?: number;
+    /**
+     * @description
+     * change handler when current page `at` changed
+     */
+    onChange?: (at: number) => void;
+    /**
+     * @description
+     * change handler when `pageSize` changed
+     */
+    onPageSizeChange?: (pageSize: number) => void;
 };
-export type PaginationItems = [PaginationItemType.Prev, ...(PaginationItemType | number)[], PaginationItemType.Next];
+export type PaginationItems = (PaginationItemType | number)[];
 /**
  * @description
  * pagination item props
@@ -71,9 +82,9 @@ export type PaginationItemProps = {
     subtract: UsedCounter[1]["subtract"];
     /**
      * @description
-     * change
+     * click handler
      */
-    onPageChange: (page: number) => void;
+    onClick: (page: number) => void;
     /**
      * @description
      * checked

package/dist/{components/picker/types.d.ts → types/picker.d.ts}

@@ -1,11 +1,11 @@
-import type { CSSProperties, MouseEventHandler, ReactNode } from "react";
+import type { CSSProperties, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
 import type { ComponentProps } from "musae/types/element";
 import type { Nullable } from "@aiszlab/relax/types";
 /**
  * @description
  * picker props
  */
-export interface PickerProps extends ComponentProps {
+export interface PickerProps extends ComponentProps, Pick<HTMLAttributes<HTMLSpanElement>, "onBlur"> {
     /**
      * @description
      * children

package/dist/{components/rich-text-editor/types.d.ts → types/rich-text-editor.d.ts}

@@ -34,6 +34,11 @@ export type RichTextEditorProps = Pick<HTMLAttributes<HTMLDivElement>, "aria-pla
      * change handler
      */
     onChange?: (value: string) => void;
+    /**
+     * @description
+     * value
+     */
+    value?: string;
 };
 /**
  * @description
@@ -61,3 +66,13 @@ export type DropdownProps<T> = {
     onChange: (value: T) => void;
     children?: ReactNode;
 };
+/**
+ * @description
+ * editor ref
+ */
+export type RichTextEditorRef = {
+    /**
+     * value setter
+     */
+    setValue: (value: string) => void;
+};

package/dist/{components/select/types.d.ts → types/select.d.ts}

@@ -3,6 +3,7 @@ import type { Option } from "musae/types/option";
 import type { MenuItem, MenuProps } from "musae/types/menu";
 import type { ComponentProps } from "musae/types/element";
 import type { RequiredIn } from "@aiszlab/relax/types";
+import type { PickerProps } from "musae/types/picker";
 export type Mode = "multiple";
 export type Value = Key | Pick<Option, "value" | "label">;
 export type ValueOrValues = Value[] | Value;
@@ -12,7 +13,7 @@ export type ValueOrValues = Value[] | Value;
  * @description
  * select props
  */
-export type SelectProps<T extends ValueOrValues = ValueOrValues> = ComponentProps & {
+export type SelectProps<T extends ValueOrValues = ValueOrValues> = ComponentProps & Pick<PickerProps, "onBlur"> & {
     /**
      * @description
      * options
@@ -77,7 +78,7 @@ export type Filter = (option: Option) => boolean;
  * @description
  * selected props
  */
-export type SelectorProps = Pick<RequiredIn<SelectProps, "searchable" | "onSearch">, "searchable" | "mode" | "onSearch"> & {
+export type SelectorProps = Pick<RequiredIn<SelectProps, "searchable" | "onSearch">, "searchable" | "mode" | "onSearch" | "onBlur"> & {
     /**
      * @description
      * value
@@ -88,6 +89,11 @@ export type SelectorProps = Pick<RequiredIn<SelectProps, "searchable" | "onSearc
      * searched value
      */
     searched: string;
+    /**
+     * @description
+     * change
+     */
+    onChange: (key: Key) => void;
 };
 /**
  * @description
@@ -114,7 +120,7 @@ export type SelectionsProps = {
      * @description
      * select menu item handler
      */
-    onSelect: MenuProps["onClick"];
+    onSelect: (key: Key) => void;
     /**
      * @description
      * selected keys

package/dist/types/table.d.ts

@@ -11,12 +11,17 @@ export type SortDescriptor = {
  * @description
  * column def
  */
-export type Column<T, V = unknown> = {
+export type Column<T> = {
     /**
      * @description
      * key
      */
-    key: DeepKeys<T>;
+    key?: Key;
+    /**
+     * @description
+     * value at
+     */
+    valueAt?: DeepKeys<T>;
     /**
      * @description
      * title
@@ -26,7 +31,7 @@ export type Column<T, V = unknown> = {
      * @description
      * custom render, render is not provided, just render value
      */
-    render?: (value: V, record: T, index: number) => ReactNode | unknown;
+    render?: (value: any, record: T, index: number) => ReactNode | unknown;
     /**
      * @description
      * enable sort
@@ -113,6 +118,6 @@ export type HeaderProps = ComponentProps;
 export type HeaderCellProps = {
     sortable?: boolean;
     children: ReactNode | (() => ReactNode);
-    value: Key;
+    value?: Key;
     sortDirections: SortDirection[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -24,7 +24,7 @@
       "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     },
-    "./styles.css": "./dist/styles.css",
+    "./styles": "./dist/styles.css",
     "./locales": {
       "types": "./dist/locale/locales/index.d.ts",
       "require": "./dist/locale/locales/index.cjs",
@@ -53,7 +53,7 @@
     "pnpm": ">=9"
   },
   "dependencies": {
-    "@aiszlab/relax": "^1.3.14",
+    "@aiszlab/relax": "^1.3.15",
     "@babel/runtime": "^7.25.6",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",

package/dist/components/pagination/types.cjs

@@ -1,11 +0,0 @@
-/**
- * @description
- * pagiantion item type
- */
-exports.PaginationItemType = void 0;
-(function (PaginationItemType) {
-  PaginationItemType["Prev"] = "prev";
-  PaginationItemType["Next"] = "next";
-  PaginationItemType["MorePrev"] = "more-prev";
-  PaginationItemType["MoreNext"] = "more-next";
-})(exports.PaginationItemType || (exports.PaginationItemType = {}));

package/dist/components/pagination/types.mjs

@@ -1,13 +0,0 @@
-/**
- * @description
- * pagiantion item type
- */
-var PaginationItemType;
-(function (PaginationItemType) {
-  PaginationItemType["Prev"] = "prev";
-  PaginationItemType["Next"] = "next";
-  PaginationItemType["MorePrev"] = "more-prev";
-  PaginationItemType["MoreNext"] = "more-next";
-})(PaginationItemType || (PaginationItemType = {}));
-
-export { PaginationItemType };