musae 0.2.26 → 0.3.0

package/dist/components/input/input.cjs

@@ -0,0 +1,225 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var hooks$1 = require('./hooks.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var theme = require('../theme/theme.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["className", "style", "type", "invalid", "readOnly", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "variant"];
+var styles = {
+  wrapper: function wrapper(props) {
+    return [{
+      display: "musaex-3nfvp2",
+      alignItems: "musaex-6s0dn4",
+      cursor: "musaex-1ed109x",
+      borderRadius: "musaex-ok3b7d",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      verticalAlign: "musaex-3ajldb",
+      minHeight: "musaex-tynr54",
+      minWidth: "musaex-u7itqx",
+      maxWidth: "musaex-77asx0",
+      boxShadow: "musaex-igitpm",
+      margin: "musaex-p8vts",
+      marginInline: null,
+      marginInlineStart: null,
+      marginLeft: null,
+      marginInlineEnd: null,
+      marginRight: null,
+      marginBlock: null,
+      marginTop: null,
+      marginBottom: null,
+      paddingBlock: "musaex-1i37kmv",
+      paddingTop: null,
+      paddingBottom: null,
+      paddingInline: "musaex-1dhq86w",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      transitionProperty: "musaex-kdsq27",
+      transitionDuration: "musaex-13dflua",
+      willChange: "musaex-1o9dqaq",
+      $$css: true
+    }, {
+      "--boxShadow": "inset 0px 0px 0px ".concat(tokens_stylex.sizes.smallest, " ").concat(props.outlineColor) != null ? "inset 0px 0px 0px ".concat(tokens_stylex.sizes.smallest, " ").concat(props.outlineColor) : "initial"
+    }];
+  },
+  focused: function focused(props) {
+    return [{
+      boxShadow: "musaex-igitpm",
+      $$css: true
+    }, {
+      "--boxShadow": "inset 0px 0px 0px ".concat(tokens_stylex.sizes.xxxxxxsmall, " ").concat(props.outlineColor) != null ? "inset 0px 0px 0px ".concat(tokens_stylex.sizes.xxxxxxsmall, " ").concat(props.outlineColor) : "initial"
+    }];
+  },
+  invalid: function invalid(props) {
+    return [{
+      boxShadow: "musaex-igitpm",
+      $$css: true
+    }, {
+      "--boxShadow": "inset 0px 0px 0px ".concat(tokens_stylex.sizes.xxxxxxsmall, " ").concat(props.outlineColor) != null ? "inset 0px 0px 0px ".concat(tokens_stylex.sizes.xxxxxxsmall, " ").concat(props.outlineColor) : "initial"
+    }];
+  },
+  input: {
+    backgroundColor: "musaex-jbqb8w",
+    outline: "musaex-3hncxx",
+    outlineColor: null,
+    outlineOffset: null,
+    outlineStyle: null,
+    outlineWidth: null,
+    border: "musaex-firn0k",
+    borderWidth: null,
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: null,
+    borderStyle: null,
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderColor: null,
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    minWidth: "musaex-1n0e6fi",
+    height: "musaex-mbc7o0",
+    flex: "musaex-98rzlu",
+    flexGrow: null,
+    flexShrink: null,
+    flexBasis: null,
+    $$css: true
+  }
+};
+/**
+ * @author murukal
+ *
+ * @description
+ * input component
+ */
+var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    type = _ref.type,
+    _ref$invalid = _ref.invalid,
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+    readOnly = _ref.readOnly,
+    maxLength = _ref.maxLength,
+    valueInProps = _ref.value,
+    onBlur = _ref.onBlur,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick,
+    onFocus = _ref.onFocus,
+    leading = _ref.leading,
+    trailing = _ref.trailing;
+    _ref.variant;
+    var inputProps = _objectWithoutProperties(_ref, _excluded);
+  var wrapperRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Input);
+  var theme$1 = hooks.useTheme();
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      },
+      select: function select() {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
+      }
+    };
+  }, []);
+  /// controlled value
+  var _useControlledState = relax.useControlledState(valueInProps, {
+      defaultState: ""
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _value = _useControlledState2[0],
+    _setValue = _useControlledState2[1];
+  /// events
+  var inputEvents = hooks$1.useInputEvents({
+    setValue: _setValue,
+    onBlur: onBlur,
+    onChange: onChange,
+    onClick: onClick,
+    onFocus: onFocus
+  });
+  var wrapperEvents = hooks$1.useWrapperEvents({
+    inputRef: inputRef
+  });
+  /// is focused
+  var _useFocus = relax.useFocus({
+      onBlur: inputEvents.blur,
+      onFocus: inputEvents.focus
+    }),
+    _useFocus2 = _slicedToArray(_useFocus, 2),
+    isFocused = _useFocus2[0],
+    focusProps = _useFocus2[1];
+  var styled = {
+    wrapper: stylex.default.props(theme.typography.body.medium, styles.wrapper({
+      outlineColor: theme$1.colors[colors.ColorToken.Outline]
+    }), isFocused && styles.focused({
+      outlineColor: theme$1.colors[colors.ColorToken.Primary]
+    }), invalid && styles.invalid({
+      outlineColor: theme$1.colors[colors.ColorToken.Error]
+    })),
+    input: {
+      className: "musaex-jbqb8w musaex-3hncxx musaex-firn0k musaex-1n0e6fi musaex-mbc7o0 musaex-98rzlu"
+    }
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    ref: wrapperRef,
+    className: relax.clsx(classNames[className.InputClassToken.Wrapper], _defineProperty(_defineProperty({}, classNames[className.InputClassToken.Focused], isFocused), classNames[className.InputClassToken.Invalid], !!invalid), className$1, styled.wrapper.className),
+    style: _objectSpread(_objectSpread({}, styled.wrapper.style), style),
+    tabIndex: -1,
+    onFocus: wrapperEvents.focus,
+    onBlur: wrapperEvents.blur,
+    onClick: wrapperEvents.click
+  }, leading, /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
+    value: _value,
+    className: relax.clsx(classNames[className.InputClassToken.Input], styled.input.className),
+    style: styled.input.style,
+    type: type,
+    ref: inputRef,
+    "aria-invalid": invalid,
+    readOnly: readOnly,
+    onChange: inputEvents.change,
+    onClick: inputEvents.click,
+    maxLength: maxLength
+  }, inputProps), focusProps)), trailing);
+});
+
+exports.default = Input;
+exports.styles = styles;

package/dist/components/input/{input.js → input.mjs}

@@ -3,16 +3,16 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useInputEvents, useWrapperEvents } from './hooks.js';
+import { useInputEvents, useWrapperEvents } from './hooks.mjs';
 import { useControlledState, useFocus, clsx } from '@aiszlab/relax';
-import { InputClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { sizes } from '../theme/tokens.stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { typography } from '../theme/theme.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { InputClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { sizes } from '../theme/tokens.stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { typography } from '../theme/theme.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["className", "style", "type", "invalid", "readOnly", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "variant"];
 var styles = {
@@ -186,7 +186,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isFocused = _useFocus2[0],
     focusProps = _useFocus2[1];
   var styled = {
-    wrapper: props(typography.body.medium, styles.wrapper({
+    wrapper: _stylex.props(typography.body.medium, styles.wrapper({
       outlineColor: theme.colors[ColorToken.Outline]
     }), isFocused && styles.focused({
       outlineColor: theme.colors[ColorToken.Primary]
@@ -218,6 +218,5 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     maxLength: maxLength
   }, inputProps), focusProps)), trailing);
 });
-var Input$1 = Input;
 
-export { Input$1 as default, styles };
+export { Input as default, styles };

package/dist/components/input/types.d.ts

@@ -1,5 +1,5 @@
 import type { InputHTMLAttributes, ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 /**
  * @description
  * Variant

package/dist/components/layout/footer.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Footer = function Footer(props) {
+  return null;
+};
+
+exports.default = Footer;

package/dist/components/layout/header.cjs

@@ -0,0 +1,46 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var hooks = require('../theme/hooks.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var colors = require('../../utils/colors.cjs');
+var relax = require('@aiszlab/relax');
+
+var styles = {
+  header: function header(props) {
+    return [{
+      display: "musaex-78zum5",
+      alignItems: "musaex-6s0dn4",
+      height: "musaex-xtgfc8",
+      paddingInline: "musaex-1mavw9y",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      marginBottom: "musaex-uaxuc",
+      position: "musaex-7wzq59",
+      top: "musaex-13vifvy",
+      zIndex: "musaex-cjiq3g",
+      backgroundColor: "musaex-q1mx2j",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  }
+};
+var Header = function Header(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var theme = hooks.useTheme();
+  var styled = stylex.default.props(styles.header({
+    backgroundColor: theme.colors[colors.ColorToken.SurfaceContainerLowest]
+  }));
+  return /*#__PURE__*/React.createElement("header", {
+    className: relax.clsx(className, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, children);
+};
+
+exports.default = Header;

package/dist/components/layout/{header.js → header.mjs}

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { useTheme } from '../theme/hooks.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { ColorToken } from '../../utils/colors.js';
+import { useTheme } from '../theme/hooks.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { clsx } from '@aiszlab/relax';
 
 var styles = {
@@ -32,7 +32,7 @@ var Header = function Header(_ref) {
     style = _ref.style,
     children = _ref.children;
   var theme = useTheme();
-  var styled = props(styles.header({
+  var styled = _stylex.props(styles.header({
     backgroundColor: theme.colors[ColorToken.SurfaceContainerLowest]
   }));
   return /*#__PURE__*/React.createElement("header", {

package/dist/components/layout/hooks.cjs

@@ -0,0 +1,60 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var header = require('./header.cjs');
+var sider = require('./sider.cjs');
+var footer = require('./footer.cjs');
+var main = require('./main.cjs');
+
+exports.ChildToken = void 0;
+(function (ChildToken) {
+  ChildToken["Header"] = "header";
+  ChildToken["Sider"] = "sider";
+  ChildToken["Footer"] = "footer";
+  ChildToken["Main"] = "main";
+})(exports.ChildToken || (exports.ChildToken = {}));
+/**
+ * @description
+ * children node
+ */
+var useChildren = function useChildren(_ref) {
+  var _ref2 = _slicedToArray(_ref, 1),
+    children = _ref2[0];
+  var _children = React.useMemo(function () {
+    return React.Children.toArray(children);
+  }, [children]);
+  var _useMemo = React.useMemo(function () {
+      return _children.reduce(function (prev, current) {
+        // invalid element, just ignore
+        if (! /*#__PURE__*/React.isValidElement(current)) return prev;
+        // valid element, check which type
+        switch (current.type) {
+          case header.default:
+            prev[0].set(exports.ChildToken.Header, current);
+            break;
+          case sider.default:
+            prev[0].set(exports.ChildToken.Sider, current);
+            break;
+          case footer.default:
+            prev[0].set(exports.ChildToken.Footer, current);
+            break;
+          case main.default:
+            prev[0].set(exports.ChildToken.Main, current);
+            prev[1] = {
+              className: current.props.className,
+              style: current.props.style
+            };
+            break;
+        }
+        return prev;
+      }, [new Map(), {}]);
+    }, [_children]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    groupedChildren = _useMemo2[0],
+    mainProps = _useMemo2[1];
+  return {
+    children: groupedChildren,
+    mainProps: mainProps
+  };
+};
+
+exports.useChildren = useChildren;

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 export declare enum ChildToken {
     Header = "header",
     Sider = "sider",

package/dist/components/layout/{hooks.js → hooks.mjs}

@@ -1,9 +1,9 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useMemo, Children, isValidElement } from 'react';
-import Header from './header.js';
-import Sider from './sider.js';
-import Footer from './footer.js';
-import Main from './main.js';
+import Header from './header.mjs';
+import Sider from './sider.mjs';
+import Footer from './footer.mjs';
+import Main from './main.mjs';
 
 var ChildToken;
 (function (ChildToken) {

package/dist/components/layout/index.cjs

@@ -0,0 +1,13 @@
+var layout = require('./layout.cjs');
+var header = require('./header.cjs');
+var sider = require('./sider.cjs');
+var main = require('./main.cjs');
+
+var Layout = Object.assign(layout.default, {
+  Header: header.default,
+  Sider: sider.default,
+  Main: main.default,
+  Footer: header.default
+});
+
+exports.Layout = Layout;

package/dist/components/layout/index.mjs

@@ -0,0 +1,13 @@
+import Layout$1 from './layout.mjs';
+import Header from './header.mjs';
+import Sider from './sider.mjs';
+import Main from './main.mjs';
+
+var Layout = Object.assign(Layout$1, {
+  Header: Header,
+  Sider: Sider,
+  Main: Main,
+  Footer: Header
+});
+
+export { Layout };

package/dist/components/layout/layout.cjs

@@ -0,0 +1,52 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var index = require('../grid/index.cjs');
+var hooks$1 = require('./hooks.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var relax = require('@aiszlab/relax');
+
+var _excluded = ["className", "style"];
+var styles = {
+  layout: function layout(props) {
+    return [{
+      backgroundColor: "musaex-q1mx2j",
+      color: "musaex-19dipnz",
+      display: "musaex-78zum5",
+      flexDirection: "musaex-dt5ytf",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+var Layout = function Layout(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = hooks.useTheme();
+  var _useChildren = hooks$1.useChildren([props.children]),
+    children = _useChildren.children,
+    mainProps = _useChildren.mainProps;
+  var sider = children.get(hooks$1.ChildToken.Sider);
+  var hasSider = !!sider;
+  var styled = stylex.default.props(styles.layout({
+    backgroundColor: theme.colors[colors.ColorToken.SurfaceContainerLowest],
+    color: theme.colors[colors.ColorToken.OnSurface]
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(className, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, children.get(hooks$1.ChildToken.Header), hasSider ? (/*#__PURE__*/React.createElement(index.Grid.Row, {
+    as: "main"
+  }, sider, /*#__PURE__*/React.createElement(index.Grid.Col, _objectSpread(_objectSpread({}, mainProps), {}, {
+    span: 19
+  }), children.get(hooks$1.ChildToken.Main), children.get(hooks$1.ChildToken.Footer)))) : (/*#__PURE__*/React.createElement("main", _objectSpread({}, mainProps), children.get(hooks$1.ChildToken.Main), children.get(hooks$1.ChildToken.Footer))));
+};
+
+exports.default = Layout;

package/dist/components/layout/{layout.js → layout.mjs}

@@ -1,11 +1,11 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React from 'react';
-import { Grid } from '../grid/index.js';
-import { useChildren, ChildToken } from './hooks.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
+import { Grid } from '../grid/index.mjs';
+import { useChildren, ChildToken } from './hooks.mjs';
+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';
 import { clsx } from '@aiszlab/relax';
 
 var _excluded = ["className", "style"];

package/dist/components/layout/main.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Main = function Main(_ref) {
+  var children = _ref.children;
+  return children;
+};
+
+exports.default = Main;

package/dist/components/layout/sider.cjs

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../grid/index.cjs');
+var React = require('react');
+
+var Sider = function Sider(_ref) {
+  var style = _ref.style,
+    children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(index.Grid.Col, {
+    style: style,
+    className: className,
+    span: 5,
+    as: "aside"
+  }, children);
+};
+
+exports.default = Sider;

package/dist/components/layout/{sider.js → sider.mjs}

@@ -1,4 +1,4 @@
-import { Grid } from '../grid/index.js';
+import { Grid } from '../grid/index.mjs';
 import React from 'react';
 
 var Sider = function Sider(_ref) {

package/dist/components/layout/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 /**
  * @description
  * shell header props