musae 0.1.26 → 0.1.28

package/dist/components/button/button.mjs

@@ -40,8 +40,8 @@ const styles = {
     paddingBlock: null,
     paddingTop: null,
     paddingBottom: null,
-    minHeight: "musae-1v3fk47",
-    minWidth: "musae-1a7a393",
+    minHeight: "musae-jbwyga",
+    minWidth: "musae-dsbmi5",
     $$css: true
   },
   medium: {
@@ -279,7 +279,7 @@ const Button = forwardRef(({
     },
     onPointerEnter: onPointerEnter,
     onPointerLeave: onPointerLeave
-  }, props$1.prefix, children, ripple && React.createElement(Ripple, {
+  }, props$1.prefix, children, props$1.suffix, ripple && React.createElement(Ripple, {
     ripples: ripples,
     onClear: clear
   }));

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

@@ -54,6 +54,13 @@ export interface ButtonProps extends Partial<Pick<ButtonHTMLAttributes<HTMLButto
      * icon or prefix signal
      */
     prefix?: ReactNode;
+    /**
+     * @description
+     * suffix react node
+     * @template
+     * icon or suffix signal
+     */
+    suffix?: ReactNode;
     /**
      * @description
      * if false, without a ripple

package/dist/components/icon/icon.mjs

@@ -8,6 +8,7 @@ import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 const styles = {
   icon: props => [{
     display: "musae-3nfvp2",
+    verticalAlign: "musae-1uuroth",
     color: "musae-19dipnz",
     $$css: true
   }, {

package/dist/components/icon/icons/image/bedtime.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Bedtime: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default Bedtime;

package/dist/components/icon/icons/image/bedtime.mjs

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withIcon } from '../../hoc.mjs';
+
+const Bedtime = withIcon(({ size }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M9.93998 4.48488C8.30998 12.0249 13.69 16.8949 17.6 18.2849C16.21 19.3749 14.48 19.9949 12.67 19.9949C8.25998 19.9949 4.66998 16.4049 4.66998 11.9949C4.66998 8.54488 6.86998 5.59488 9.93998 4.48488ZM12.66 2.00488C7.06998 2.00488 2.66998 6.53488 2.66998 11.9949C2.66998 17.5149 7.14998 21.9949 12.67 21.9949C16.38 21.9949 19.6 19.9749 21.33 16.9749C13.82 16.7249 9.23998 8.54488 13.01 2.00488H12.66Z", fill: "currentcolor" })));
+});
+var Bedtime$1 = Bedtime;
+
+export { Bedtime$1 as default };

package/dist/components/icon/icons/image/wb-sunny.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Bedtime: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default Bedtime;

package/dist/components/icon/icons/image/wb-sunny.mjs

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withIcon } from '../../hoc.mjs';
+
+const Bedtime = withIcon(({ size }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M6.76 5.3398L4.96 3.5498L3.55 4.9598L5.34 6.7498L6.76 5.3398ZM1 10.9998H4V12.9998H1V10.9998ZM11 1.0498H13V3.9998H11V1.0498ZM19.04 3.5448L20.448 4.9518L18.658 6.7418L17.251 5.3338L19.04 3.5448ZM17.24 18.6598L19.03 20.4598L20.44 19.0498L18.64 17.2598L17.24 18.6598ZM20 10.9998H23V12.9998H20V10.9998ZM12 5.9998C8.69 5.9998 6 8.6898 6 11.9998C6 15.3098 8.69 17.9998 12 17.9998C15.31 17.9998 18 15.3098 18 11.9998C18 8.6898 15.31 5.9998 12 5.9998ZM12 15.9998C9.79 15.9998 8 14.2098 8 11.9998C8 9.7898 9.79 7.9998 12 7.9998C14.21 7.9998 16 9.7898 16 11.9998C16 14.2098 14.21 15.9998 12 15.9998ZM11 19.9998H13V22.9498H11V19.9998ZM3.55 19.0398L4.96 20.4498L6.75 18.6498L5.34 17.2398L3.55 19.0398Z", fill: "currentcolor" })));
+});
+var Bedtime$1 = Bedtime;
+
+export { Bedtime$1 as default };

package/dist/components/icon/icons/index.d.ts

@@ -15,9 +15,11 @@ import KeyboardArrowLeft from "./hardware/keyboard-arrow-left";
 import KeyboardArrowRight from "./hardware/keyboard-arrow-right";
 import KeyboardArrowUp from "./hardware/keyboard-arrow-up";
 import KeyboardArrowDown from "./hardware/keyboard-arrow-down";
+import Bedtime from "./image/bedtime";
+import WbSunny from "./image/wb-sunny";
 import Github from "./mocks/github";
 /**
  * @description
  * icon presets
  */
-export { KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardArrowLeft, KeyboardArrowRight, KeyboardArrowUp, KeyboardArrowDown, SwapHoriz, Visibility, VisibilityOff, CheckCircle, CheckCircleOutline, Done, ErrorOutline, Cancel, Clear, MoreHoriz, Close, Github, };
+export { KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardArrowLeft, KeyboardArrowRight, KeyboardArrowUp, KeyboardArrowDown, SwapHoriz, Visibility, VisibilityOff, CheckCircle, CheckCircleOutline, Done, ErrorOutline, Cancel, Clear, MoreHoriz, Close, Github, Bedtime, WbSunny, };

package/dist/components/icon/icons/index.mjs

@@ -15,4 +15,6 @@ export { default as KeyboardArrowLeft } from './hardware/keyboard-arrow-left.mjs
 export { default as KeyboardArrowRight } from './hardware/keyboard-arrow-right.mjs';
 export { default as KeyboardArrowUp } from './hardware/keyboard-arrow-up.mjs';
 export { default as KeyboardArrowDown } from './hardware/keyboard-arrow-down.mjs';
+export { default as Bedtime } from './image/bedtime.mjs';
+export { default as WbSunny } from './image/wb-sunny.mjs';
 export { default as Github } from './mocks/github.mjs';

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

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

package/dist/components/layout/hooks.mjs

@@ -34,7 +34,7 @@ const useChildren = ([children]) => {
                     prev[0].set(ChildToken.Footer, current);
                     break;
                 case Main:
-                    prev[0].set(ChildToken.Footer, current);
+                    prev[0].set(ChildToken.Main, current);
                     prev[1] = {
                         className: current.props.className,
                         style: current.props.style,

package/dist/components/layout/layout.mjs

@@ -1,20 +1,44 @@
 import React from 'react';
 import { Grid } from '../grid/index.mjs';
 import { useChildren, ChildToken } from './hooks.mjs';
+import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import clsx from 'clsx';
 
-const Layout = (props) => {
-    const { children, mainProps } = useChildren([props.children]);
-    const sider = children.get(ChildToken.Sider);
-    const hasSider = !!sider;
-    return (React.createElement(React.Fragment, null,
-        children.get(ChildToken.Header),
-        hasSider ? (React.createElement(Grid.Row, { as: "main" },
-            sider,
-            React.createElement(Grid.Col, { ...mainProps, span: 19 },
-                children.get(ChildToken.Main),
-                children.get(ChildToken.Footer)))) : (React.createElement("main", { ...mainProps },
-            children.get(ChildToken.Main),
-            children.get(ChildToken.Footer)))));
+const styles = {
+  layout: props => [{
+    backgroundColor: "musae-q1mx2j",
+    color: "musae-19dipnz",
+    $$css: true
+  }, {
+    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+    "--color": props.color != null ? props.color : "initial"
+  }]
+};
+const Layout = props => {
+  const theme = useTheme();
+  const {
+    children,
+    mainProps
+  } = useChildren([props.children]);
+  const sider = children.get(ChildToken.Sider);
+  const hasSider = !!sider;
+  const styled = _stylex.props(styles.layout({
+    backgroundColor: theme.colors[ColorToken.SurfaceContainerLowest],
+    color: theme.colors[ColorToken.OnSurface]
+  }));
+  return React.createElement("div", {
+    className: clsx(styled.className),
+    style: styled.style
+  }, children.get(ChildToken.Header), hasSider ? React.createElement(Grid.Row, {
+    as: "main"
+  }, sider, React.createElement(Grid.Col, {
+    ...mainProps,
+    span: 19
+  }, children.get(ChildToken.Main), children.get(ChildToken.Footer))) : React.createElement("main", {
+    ...mainProps
+  }, children.get(ChildToken.Main), children.get(ChildToken.Footer)));
 };
 var _Layout = Layout;
 

package/dist/components/layout/sider.mjs

@@ -11,7 +11,7 @@ const Sider = props => {
       ...styled.style,
       ...props.style
     },
-    className: clsx(styled.className, props.className),
+    className: clsx(props.className, styled.className),
     span: 5,
     as: "aside"
   }, props.children);

package/dist/components/menu/group.mjs

@@ -37,12 +37,14 @@ const styles = {
       listStylePosition: null,
       listStyleType: null,
       backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
       overflow: "musae-ysyzu8",
       overflowX: null,
       overflowY: null,
       $$css: true
     }, {
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
     }],
     hidden: {
       display: "musae-1s85apg",
@@ -133,7 +135,8 @@ const Group = forwardRef(({
   });
   const styled = {
     group: props(styles.group.default({
-      backgroundColor: theme.colors[ColorToken.SurfaceContainerLow]
+      backgroundColor: theme.colors[ColorToken.SurfaceContainerLowest],
+      color: theme.colors[ColorToken.OnSurface]
     }), !expanded && styles.group.hidden, props$1.styles),
     submenu: [styles.submenu[mode]]
   };

package/dist/components/pagination/item.mjs

@@ -18,7 +18,7 @@ const Item = ({
 }) => {
   if (value === PaginationItemType.Prev) {
     return React.createElement(Button, {
-      onClick: () => add(),
+      onClick: () => subtract(),
       shape: "circular",
       variant: "text",
       color: "secondary",

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

@@ -3,7 +3,7 @@ import { ContextValue, TableProps } from "./types";
  * @description
  * use columns
  */
-export declare const useColumns: <T>([columns]: [((helper: import("@tanstack/react-table").ColumnHelper<T>) => import("@tanstack/react-table").ColumnDef<T, any>[]) | undefined]) => import("@tanstack/react-table").ColumnDef<T, any>[];
+export declare const useColumns: <T>([columns]: [TableProps<T>["columns"]]) => import("@tanstack/react-table").ColumnDef<T, any>[];
 /**
  * @author murukal
  * @description
@@ -16,6 +16,6 @@ export declare const useTable: <T>() => ContextValue<T>;
  * for context value
  */
 export declare const useContextValue: <T>({ table: _table, bordered, }: {
-    table: import("@tanstack/react-table").Table<T> | undefined;
+    table: ContextValue<T>["table"];
     bordered: boolean;
 }) => ContextValue<unknown>;

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

@@ -19,6 +19,6 @@ export declare const useTheme: () => ContextValue;
  * @description
  * context value
  */
-export declare const useContextValue: (dependencies: {
-    theme?: Theme;
+export declare const useContextValue: ({ theme }: {
+    theme?: Theme | undefined;
 }) => ContextValue;

package/dist/components/theme/hooks.mjs

@@ -1,105 +1,108 @@
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { toColors } from '../../utils/colors.mjs';
 import deepmerge from 'deepmerge';
+import { useDefault, useMounted, useEvent, isFunction } from '@aiszlab/relax';
 
 const PALETTE = {
-    primary: {
-        "0": "#000",
-        "10": "#21005D",
-        "20": "#381E72",
-        "30": "#4F378B",
-        "40": "#6750A4",
-        "50": "#7F67BE",
-        "60": "#9A82DB",
-        "70": "#B69DF8",
-        "80": "#D0BCFF",
-        "90": "#EADDFF",
-        "95": "#F6EDFF",
-        "99": "#FFFBFE",
-        "100": "#FFF",
-    },
-    secondary: {
-        "0": "#000",
-        "10": "#1D192B",
-        "20": "#332D41",
-        "30": "#4A4458",
-        "40": "#625B71",
-        "50": "#7A7289",
-        "60": "#958DA5",
-        "70": "#B0A7C0",
-        "80": "#CCC2DC",
-        "90": "#E8DEF8",
-        "95": "#F6EDFF",
-        "99": "#FFFBFE",
-        "100": "#FFF",
-    },
-    tertiary: {
-        "0": "#000",
-        "10": "#31111D",
-        "20": "#492532",
-        "30": "#633B48",
-        "40": "#7D5260",
-        "50": "#986977",
-        "60": "#B58392",
-        "70": "#D29DAC",
-        "80": "#EFB8C8",
-        "90": "#FFD8E4",
-        "95": "#FFECF1",
-        "99": "#FFFBFA",
-        "100": "#FFF",
-    },
-    error: {
-        "0": "#000",
-        "10": "#410E0B",
-        "20": "#601410",
-        "30": "#8C1D18",
-        "40": "#B3261E",
-        "50": "#DC362E",
-        "60": "#E46962",
-        "70": "#EC928E",
-        "80": "#F2B8B5",
-        "90": "#F9DEDC",
-        "95": "#FCEEEE",
-        "99": "#FFFBF9",
-        "100": "#FFF",
-    },
-    neutral: {
-        "0": "#000",
-        "10": "#1D1B20",
-        "20": "#48464C",
-        "30": "#48464C",
-        "40": "#605D64",
-        "50": "#79767D",
-        "60": "#938F96",
-        "70": "#AEA9B1",
-        "80": "#CAC5CD",
-        "90": "#E6E0E9",
-        "95": "#F5EFF7",
-        "99": "#FFFBFE",
-        "100": "#FFF",
-    },
-    neutralVariant: {
-        "0": "#000",
-        "10": "#1D1A22",
-        "20": "#322F37",
-        "30": "#49454F",
-        "40": "#605D66",
-        "50": "#79747E",
-        "60": "#938F99",
-        "70": "#AEA9B4",
-        "80": "#CAC4D0",
-        "90": "#E7E0EC",
-        "95": "#F5EEFA",
-        "99": "#FFFBFE",
-        "100": "#FFF",
-    },
+  primary: {
+    "0": "#000",
+    "10": "#21005D",
+    "20": "#381E72",
+    "30": "#4F378B",
+    "40": "#6750A4",
+    "50": "#7F67BE",
+    "60": "#9A82DB",
+    "70": "#B69DF8",
+    "80": "#D0BCFF",
+    "90": "#EADDFF",
+    "95": "#F6EDFF",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  },
+  secondary: {
+    "0": "#000",
+    "10": "#1D192B",
+    "20": "#332D41",
+    "30": "#4A4458",
+    "40": "#625B71",
+    "50": "#7A7289",
+    "60": "#958DA5",
+    "70": "#B0A7C0",
+    "80": "#CCC2DC",
+    "90": "#E8DEF8",
+    "95": "#F6EDFF",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  },
+  tertiary: {
+    "0": "#000",
+    "10": "#31111D",
+    "20": "#492532",
+    "30": "#633B48",
+    "40": "#7D5260",
+    "50": "#986977",
+    "60": "#B58392",
+    "70": "#D29DAC",
+    "80": "#EFB8C8",
+    "90": "#FFD8E4",
+    "95": "#FFECF1",
+    "99": "#FFFBFA",
+    "100": "#FFF"
+  },
+  error: {
+    "0": "#000",
+    "10": "#410E0B",
+    "20": "#601410",
+    "30": "#8C1D18",
+    "40": "#B3261E",
+    "50": "#DC362E",
+    "60": "#E46962",
+    "70": "#EC928E",
+    "80": "#F2B8B5",
+    "90": "#F9DEDC",
+    "95": "#FCEEEE",
+    "99": "#FFFBF9",
+    "100": "#FFF"
+  },
+  neutral: {
+    "0": "#000",
+    "10": "#1D1B20",
+    "20": "#48464C",
+    "30": "#48464C",
+    "40": "#605D64",
+    "50": "#79767D",
+    "60": "#938F96",
+    "70": "#AEA9B1",
+    "80": "#CAC5CD",
+    "90": "#E6E0E9",
+    "95": "#F5EFF7",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  },
+  neutralVariant: {
+    "0": "#000",
+    "10": "#1D1A22",
+    "20": "#322F37",
+    "30": "#49454F",
+    "40": "#605D66",
+    "50": "#79747E",
+    "60": "#938F99",
+    "70": "#AEA9B4",
+    "80": "#CAC4D0",
+    "90": "#E7E0EC",
+    "95": "#F5EEFA",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  }
 };
 /**
  * @description
  * theme context
  */
 const Context = createContext({
-    colors: toColors(PALETTE),
+  colors: toColors(PALETTE, "light"),
+  mode: "light",
+  toggle: () => void 0
 });
 /**
  * @author murukal
@@ -111,28 +114,72 @@ const Context = createContext({
  * set the preset theme for musae ui component
  */
 const useTheme = () => {
-    return useContext(Context);
+  return useContext(Context);
 };
 /**
  * @description
  * context value
  */
-const useContextValue = (dependencies) => {
-    const theme = useMemo(() => {
-        if (!dependencies.theme) {
-            return {
-                palette: PALETTE,
-            };
-        }
-        return deepmerge(dependencies.theme, {
-            palette: PALETTE,
-        });
-    }, [dependencies.theme]);
-    return useMemo(() => {
-        return {
-            colors: toColors(theme.palette),
-        };
-    }, [theme]);
+const useContextValue = ({
+  theme
+}) => {
+  const [mode, setMode] = useState("light");
+  const isDark = mode === "dark";
+  const modeToggler = useCallback(() => {
+    setMode(_mode => _mode === "light" ? "dark" : "light");
+  }, []);
+  const _theme = useMemo(() => {
+    return deepmerge(theme ?? {}, {
+      palette: PALETTE
+    });
+  }, [theme]);
+  const styled = useDefault(() => ({
+    default: ({
+      class: "musae-ynce87 musae-15342hd musae-goest1 musae-1sgbmat"
+    }.class ).split(" "),
+    light: ({
+      class: "musae-1oc29kk musae-8b1qih"
+    }.class ).split(" "),
+    dark: ({
+      class: "musae-8dcoj0 musae-1g3ure4"
+    }.class ).split(" ")
+  }));
+  useMounted(() => {
+    document.documentElement.classList.add(...styled.default);
+    document.documentElement.classList.add(...styled[mode]);
+  });
+  /// dark, light mode switch
+  const themeToggler = useEvent(event => {
+    if (!(event && isFunction(document.startViewTransition))) {
+      modeToggler();
+      return;
+    }
+    const x = event.clientX;
+    const y = event.clientY;
+    const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+    const animation = document.startViewTransition(() => {
+      document.documentElement.classList.remove(...(isDark ? styled.dark : styled.light));
+      document.documentElement.classList.add(...(isDark ? styled.light : styled.dark));
+    });
+    animation.ready.then(() => {
+      modeToggler();
+      const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`];
+      document.documentElement.animate({
+        clipPath: isDark ? [...clipPath].reverse() : clipPath
+      }, {
+        duration: 500,
+        easing: "ease-in",
+        pseudoElement: isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
+      });
+    });
+  });
+  return useMemo(() => {
+    return {
+      colors: toColors(_theme.palette, mode),
+      mode,
+      toggle: themeToggler
+    };
+  }, [_theme, mode, themeToggler]);
 };
 
 export { Context, useContextValue, useTheme };

package/dist/components/theme/tokens.stylex.d.ts

@@ -42,6 +42,7 @@ export declare const sizes: import("@stylexjs/stylex").VarGroup<Readonly<{
     large: string;
     xlarge: string;
     xxlarge: string;
+    xxxlarge: string;
     infinity: string;
     full: string;
     auto: string;

package/dist/components/theme/tokens.stylex.mjs

@@ -31,6 +31,7 @@ const sizes = {
   large: "var(--musae-wll1cf)",
   xlarge: "var(--musae-cftog7)",
   xxlarge: "var(--musae-laggmb)",
+  xxxlarge: "var(--musae-xrqq76)",
   infinity: "var(--musae-1rrllem)",
   full: "var(--musae-1qj6wod)",
   auto: "var(--musae-1yg5bqe)",

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { MouseEvent, ReactNode } from "react";
 import type { toColors } from "../../utils/colors";
 export type Theme = {
     palette: Palette;
@@ -48,5 +48,17 @@ export interface ContextValue {
      * colors
      */
     colors: ReturnType<typeof toColors>;
+    /**
+     * @description
+     * theme mode
+     * in musae, use light or dark
+     * @example light
+     */
+    mode: "light" | "dark";
+    /**
+     * @description
+     * toggle theme mode, if dark, change to light
+     */
+    toggle: (event: MouseEvent) => void;
 }
 export {};

package/dist/node_modules/@stylexjs/stylex/lib/es/stylex.mjs

@@ -148,6 +148,12 @@ function createStyleq(options) {
 var styleq = createStyleq();
 styleq_2 = styleq$1.styleq = styleq;
 styleq.factory = createStyleq;
+var errorForFn = function errorForFn(name) {
+  return new Error("'stylex.".concat(name, "' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'"));
+};
+var errorForType = function errorForType(key) {
+  return errorForFn("types.".concat(key));
+};
 function props() {
   var options = this;
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -169,6 +175,121 @@ function props() {
   }
   return result;
 }
+function attrs() {
+  var _props = props.apply(void 0, arguments),
+    className = _props.className,
+    style = _props.style;
+  var result = {};
+  if (className != null && className !== '') {
+    result["class"] = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = Object.keys(style).map(function (key) {
+      return "".concat(key, ":").concat(style[key], ";");
+    }).join('');
+  }
+  return result;
+}
+function stylexCreate(styles) {
+  if (__implementations.create != null) {
+    var _create = __implementations.create;
+    return _create(styles);
+  }
+  throw errorForFn('create');
+}
+function stylexDefineVars(styles) {
+  if (__implementations.defineVars) {
+    return __implementations.defineVars(styles);
+  }
+  throw errorForFn('defineVars');
+}
+var stylexCreateTheme = function stylexCreateTheme(baseTokens, overrides) {
+  if (__implementations.createTheme) {
+    return __implementations.createTheme(baseTokens, overrides);
+  }
+  throw errorForFn('createTheme');
+};
+var stylexInclude = function stylexInclude(styles) {
+  if (__implementations.include) {
+    return __implementations.include(styles);
+  }
+  throw errorForFn('include');
+};
+var create = stylexCreate;
+var defineVars = stylexDefineVars;
+var createTheme = stylexCreateTheme;
+var include = stylexInclude;
+var types = {
+  angle: function angle(_v) {
+    throw errorForType('angle');
+  },
+  color: function color(_v) {
+    throw errorForType('color');
+  },
+  url: function url(_v) {
+    throw errorForType('url');
+  },
+  image: function image(_v) {
+    throw errorForType('image');
+  },
+  integer: function integer(_v) {
+    throw errorForType('integer');
+  },
+  lengthPercentage: function lengthPercentage(_v) {
+    throw errorForType('lengthPercentage');
+  },
+  length: function length(_v) {
+    throw errorForType('length');
+  },
+  percentage: function percentage(_v) {
+    throw errorForType('percentage');
+  },
+  number: function number(_v) {
+    throw errorForType('number');
+  },
+  resolution: function resolution(_v) {
+    throw errorForType('resolution');
+  },
+  time: function time(_v) {
+    throw errorForType('time');
+  },
+  transformFunction: function transformFunction(_v) {
+    throw errorForType('transformFunction');
+  },
+  transformList: function transformList(_v) {
+    throw errorForType('transformList');
+  }
+};
+var keyframes = function keyframes(_keyframes) {
+  if (__implementations.keyframes) {
+    return __implementations.keyframes(_keyframes);
+  }
+  throw errorForFn('keyframes');
+};
+var firstThatWorks = function firstThatWorks() {
+  if (__implementations.firstThatWorks) {
+    return __implementations.firstThatWorks.apply(__implementations, arguments);
+  }
+  throw errorForFn('firstThatWorks');
+};
+function _stylex() {
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
+  }
+  var _styleq_3 = styleq_2(styles),
+    _styleq_4 = _slicedToArray(_styleq_3, 1),
+    className = _styleq_4[0];
+  return className;
+}
+_stylex.props = props;
+_stylex.attrs = attrs;
+_stylex.create = create;
+_stylex.defineVars = defineVars;
+_stylex.createTheme = createTheme;
+_stylex.include = include;
+_stylex.keyframes = keyframes;
+_stylex.firstThatWorks = firstThatWorks;
+_stylex.types = types;
 var __implementations = {};
 
-export { props };
+export { attrs, create, createTheme, _stylex as default, defineVars, firstThatWorks, include, keyframes, props, types };

package/dist/stylex.css

@@ -1,4 +1,4 @@
-:root{--musae-1aj7t22:0px;--musae-1ax7z96:1px;--musae-1l9c3uf:4px;--musae-cx2xv5:8px;--musae-rlgvtq:16px;--musae-1qsoxbc:24px;--musae-16n5srz:32px;--musae-wll1cf:40px;--musae-cftog7:48px;--musae-laggmb:64px;--musae-1rrllem:calc(Infinity * 1px);--musae-1qj6wod:100%;--musae-1yg5bqe:auto;}
+:root{--musae-1aj7t22:0px;--musae-1ax7z96:1px;--musae-1l9c3uf:4px;--musae-cx2xv5:8px;--musae-rlgvtq:16px;--musae-1qsoxbc:24px;--musae-16n5srz:32px;--musae-wll1cf:40px;--musae-cftog7:48px;--musae-laggmb:64px;--musae-xrqq76:96px;--musae-1rrllem:calc(Infinity * 1px);--musae-1qj6wod:100%;--musae-1yg5bqe:auto;}
 :root{--musae-1odcd6w:0px;--musae-bbiwro:0.1px;--musae-1x9q6du:0.15px;--musae-1fsxyg9:0.25px;--musae-2s74kj:0.4px;--musae-1ry795:0.5px;}
 :root{--musae-1wblvyz:0px;--musae-1h5s2h0:2px;--musae-qk2ac7:4px;--musae-h30iw9:6px;--musae-vk5id6:8px;--musae-1ncxh3n:12px;--musae-oohzsl:16px;--musae-1tzp6vk:24px;--musae-15cw4i4:32px;--musae-1n7xs5j:48px;--musae-68a8pz:auto;}
 :root{--musae-gmufu8:none;--musae-15zostt:0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);--musae-1trg6py:0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);--musae-4poz8g:0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);--musae-1vq77kn:0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);--musae-1yt3x0a:0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);}
@@ -164,6 +164,7 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1g0ag68:not(#\#):not(#\#):not(#\#){transform-origin:center}
 .musae-umwmo6:not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
 .musae-1v0jg1i:not(#\#):not(#\#):not(#\#){transform:var(--transform,revert)}
+.musae-1uuroth:not(#\#):not(#\#):not(#\#){vertical-align:text-bottom}
 .musae-lshs6z:not(#\#):not(#\#):not(#\#){visibility:hidden}
 .musae-uxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
 .musae-1aaibe2:not(#\#):not(#\#):not(#\#){will-change:background-color,border,color}
@@ -225,15 +226,15 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-yzno7u:not(#\#):not(#\#):not(#\#):not(#\#){max-width:960px}
 .musae-kfv0gj:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--musae-1qj6wod)}
 .musae-u0aao5:not(#\#):not(#\#):not(#\#):not(#\#){min-height:36px}
-.musae-1v3fk47:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-16n5srz)}
+.musae-jbwyga:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-1qsoxbc)}
 .musae-1infgec:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-cftog7)}
 .musae-1oxjezn:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-wll1cf)}
 .musae-euugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}
 .musae-1jzhcrs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:200px}
 .musae-15cq3s0:not(#\#):not(#\#):not(#\#):not(#\#){min-width:480px}
 .musae-13to73x:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--minWidth,revert)}
-.musae-1a7a393:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-16n5srz)}
 .musae-yumy05:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1aj7t22)}
+.musae-dsbmi5:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1qsoxbc)}
 .musae-ba7gwn:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-cftog7)}
 .musae-kw4qbi:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-wll1cf)}
 .musae-6ikm8r:not(#\#):not(#\#):not(#\#):not(#\#){overflow-x:hidden}
@@ -276,6 +277,8 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-vpkyr8:not(:last-of-type):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--musae-1ax7z96)}
 .musae-cu8lob:first-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musae-qk2ac7)}
 .musae-r8ctv5:hover:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:auto}
+.musae-ynce87:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){animation:none}
+.musae-goest1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){animation:none}
 .musae-8hkgfc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{margin:var(--musae-1h5s2h0)}
 .musae-123gkgz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-color:var(--1il6zln,revert)}
 .musae-3yd8hb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-color:var(--joftei,revert)}
@@ -309,13 +312,19 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1gkks1t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:50%}
 .musae-1682cnc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:0}
 .musae-fbisj7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:50%}
+.musae-15342hd:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){mix-blend-mode:normal}
+.musae-1sgbmat:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){mix-blend-mode:normal}
 .musae-1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
 .musae-1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
 .musae-w2k1ea:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translate(150%,-150%) rotate(45deg)}
 .musae-oivrgx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{translate:20px}
 .musae-170pinb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{visibility:visible}
 .musae-11srvyv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{visibility:visible}
+.musae-8b1qih:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){z-index:1}
+.musae-8dcoj0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){z-index:1}
 .musae-12maryy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:1}
+.musae-1oc29kk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){z-index:999}
+.musae-1g3ure4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){z-index:999}
 .musae-1p9jk5k:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-left-width:var(--musae-1aj7t22)}
 .musae-1wsn0xg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:100%}
 .musae-xt7thn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:12px}

package/dist/utils/colors.d.ts

@@ -1,4 +1,4 @@
-import { Palette } from "../components/theme/types";
+import type { ContextValue, Palette } from "../components/theme/types";
 /**
  * @description
  * theme token
@@ -36,9 +36,9 @@ export declare enum ColorToken {
     OnSurface = "on-surface",
     OnSurfaceVariant = "on-surface-variant",
     SurfaceDim = "surface-dim",
-    SurfaceContainer = "surface-container",
-    SurfaceContainerLow = "surface-container-low",
     SurfaceContainerLowest = "surface-container-lowest",
+    SurfaceContainerLow = "surface-container-low",
+    SurfaceContainer = "surface-container",
     SurfaceContainerHigh = "surface-container-high",
     SurfaceContainerHighest = "surface-container-highest",
     InverseSurface = "inverse-surface",
@@ -52,5 +52,10 @@ export declare enum ColorToken {
 /**
  * @description
  * convert palette to colors
+ *
+ * you will always be confused, there are to many color roles
+ * how do i use them
+ *
+ * here, musae provide some easy usage
  */
-export declare const toColors: (palette: Palette) => Record<ColorToken, string>;
+export declare const toColors: (palette: Palette, mode: ContextValue["mode"]) => Record<ColorToken, string>;

package/dist/utils/colors.mjs

@@ -36,9 +36,9 @@ var ColorToken;
     ColorToken["OnSurface"] = "on-surface";
     ColorToken["OnSurfaceVariant"] = "on-surface-variant";
     ColorToken["SurfaceDim"] = "surface-dim";
-    ColorToken["SurfaceContainer"] = "surface-container";
-    ColorToken["SurfaceContainerLow"] = "surface-container-low";
     ColorToken["SurfaceContainerLowest"] = "surface-container-lowest";
+    ColorToken["SurfaceContainerLow"] = "surface-container-low";
+    ColorToken["SurfaceContainer"] = "surface-container";
     ColorToken["SurfaceContainerHigh"] = "surface-container-high";
     ColorToken["SurfaceContainerHighest"] = "surface-container-highest";
     ColorToken["InverseSurface"] = "inverse-surface";
@@ -52,51 +52,57 @@ var ColorToken;
 /**
  * @description
  * convert palette to colors
+ *
+ * you will always be confused, there are to many color roles
+ * how do i use them
+ *
+ * here, musae provide some easy usage
  */
-const toColors = (palette) => {
+const toColors = (palette, mode) => {
+    const isLight = mode === "light";
     return {
-        [ColorToken.Primary]: palette.primary[40],
-        [ColorToken.OnPrimary]: palette.primary[100],
-        [ColorToken.PrimaryContainer]: palette.primary[90],
-        [ColorToken.OnPrimaryContainer]: palette.primary[10],
+        [ColorToken.Primary]: isLight ? palette.primary[40] : palette.primary[80],
+        [ColorToken.OnPrimary]: isLight ? palette.primary[100] : palette.primary[20],
+        [ColorToken.PrimaryContainer]: isLight ? palette.primary[90] : palette.primary[30],
+        [ColorToken.OnPrimaryContainer]: isLight ? palette.primary[10] : palette.primary[90],
         [ColorToken.PrimaryFixed]: palette.primary[90],
         [ColorToken.PrimaryFixedDim]: palette.primary[80],
         [ColorToken.OnPrimaryFixed]: palette.primary[10],
         [ColorToken.OnPrimaryFixedVariant]: palette.primary[30],
-        [ColorToken.Secondary]: palette.secondary[40],
-        [ColorToken.OnSecondary]: palette.secondary[100],
-        [ColorToken.SecondaryContainer]: palette.secondary[90],
-        [ColorToken.OnSecondaryContainer]: palette.secondary[10],
+        [ColorToken.Secondary]: isLight ? palette.secondary[40] : palette.secondary[80],
+        [ColorToken.OnSecondary]: isLight ? palette.secondary[100] : palette.secondary[20],
+        [ColorToken.SecondaryContainer]: isLight ? palette.secondary[90] : palette.secondary[30],
+        [ColorToken.OnSecondaryContainer]: isLight ? palette.secondary[10] : palette.secondary[90],
         [ColorToken.SecondaryFixed]: palette.secondary[90],
         [ColorToken.SecondaryFixedDim]: palette.secondary[80],
         [ColorToken.OnSecondaryFixed]: palette.secondary[10],
         [ColorToken.OnSecondaryFixedVariant]: palette.secondary[30],
-        [ColorToken.Tertiary]: palette.tertiary[40],
-        [ColorToken.OnTertiary]: palette.tertiary[100],
-        [ColorToken.TertiaryContainer]: palette.tertiary[90],
-        [ColorToken.OnTertiaryContainer]: palette.tertiary[10],
+        [ColorToken.Tertiary]: isLight ? palette.tertiary[40] : palette.tertiary[80],
+        [ColorToken.OnTertiary]: isLight ? palette.tertiary[100] : palette.tertiary[20],
+        [ColorToken.TertiaryContainer]: isLight ? palette.tertiary[90] : palette.tertiary[30],
+        [ColorToken.OnTertiaryContainer]: isLight ? palette.tertiary[10] : palette.tertiary[90],
         [ColorToken.TertiaryFixed]: palette.tertiary[90],
         [ColorToken.TertiaryFixedDim]: palette.tertiary[80],
         [ColorToken.OnTertiaryFixed]: palette.tertiary[10],
         [ColorToken.OnTertiaryFixedVariant]: palette.tertiary[30],
-        [ColorToken.Error]: palette.error[40],
-        [ColorToken.OnError]: palette.error[100],
-        [ColorToken.ErrorContainer]: palette.error[90],
-        [ColorToken.OnErrorContainer]: palette.error[10],
-        [ColorToken.Surface]: "#FEF7FF",
-        [ColorToken.OnSurface]: palette.neutral[10],
-        [ColorToken.SurfaceDim]: "#DED8E1",
-        [ColorToken.SurfaceContainer]: "#F3EDF7",
-        [ColorToken.SurfaceContainerLow]: palette.primary[100],
-        [ColorToken.SurfaceContainerLowest]: palette.neutral[100],
-        [ColorToken.SurfaceContainerHigh]: "#ECE6F0",
-        [ColorToken.SurfaceContainerHighest]: palette.neutral[90],
-        [ColorToken.OnSurfaceVariant]: palette.neutralVariant[30],
-        [ColorToken.InverseSurface]: palette.neutral[20],
-        [ColorToken.InverseOnSurface]: palette.neutral[95],
-        [ColorToken.InversePrimary]: palette.primary[80],
-        [ColorToken.Outline]: palette.neutralVariant[50],
-        [ColorToken.OutlineVariant]: palette.neutralVariant[80],
+        [ColorToken.Error]: isLight ? palette.error[40] : palette.error[80],
+        [ColorToken.OnError]: isLight ? palette.error[100] : palette.error[20],
+        [ColorToken.ErrorContainer]: isLight ? palette.error[90] : palette.error[30],
+        [ColorToken.OnErrorContainer]: isLight ? palette.error[10] : palette.error[90],
+        [ColorToken.Surface]: isLight ? palette.neutral[99] : palette.neutral[10],
+        [ColorToken.SurfaceDim]: isLight ? palette.neutral[90] : palette.neutral[10],
+        [ColorToken.SurfaceContainerLowest]: isLight ? palette.neutral[100] : palette.neutral[0],
+        [ColorToken.SurfaceContainerLow]: isLight ? palette.neutral[95] : palette.neutral[10],
+        [ColorToken.SurfaceContainer]: isLight ? palette.neutral[95] : palette.neutral[10],
+        [ColorToken.SurfaceContainerHigh]: isLight ? palette.neutral[95] : palette.neutral[10],
+        [ColorToken.SurfaceContainerHighest]: isLight ? palette.neutral[90] : palette.neutral[20],
+        [ColorToken.OnSurface]: isLight ? palette.neutral[10] : palette.neutral[90],
+        [ColorToken.OnSurfaceVariant]: isLight ? palette.neutralVariant[30] : palette.neutralVariant[80],
+        [ColorToken.InverseSurface]: isLight ? palette.neutral[20] : palette.neutral[90],
+        [ColorToken.InverseOnSurface]: isLight ? palette.neutral[95] : palette.neutral[20],
+        [ColorToken.InversePrimary]: isLight ? palette.primary[80] : palette.primary[40],
+        [ColorToken.Outline]: isLight ? palette.neutralVariant[50] : palette.neutralVariant[60],
+        [ColorToken.OutlineVariant]: isLight ? palette.neutralVariant[80] : palette.neutralVariant[30],
         [ColorToken.Shadow]: palette.neutral[0],
         [ColorToken.Scrim]: palette.neutral[0],
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@stylexjs/rollup-plugin": "^0.5.1",
     "@stylexjs/stylex": "^0.5.1",
+    "@types/dom-view-transitions": "^1.0.4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8.56.0",
@@ -66,5 +67,6 @@
     "extends": [
       "react-app"
     ]
-  }
+  },
+  "homepage": "https://aisz.dev/"
 }