musae 0.1.8 → 0.1.10

package/dist/button/span.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
 /**
  * @author murukal
@@ -7,10 +7,10 @@ import { useTheme } from '../theme/hooks.js';
  * @description
  * content
  */
-const Span = styled.span(() => {
+const Span = styled.span(({ theme }) => {
     var _a, _b;
-    const theme = useTheme();
-    return Object.assign({ marginLeft: 8, marginRight: 8, color: "#fff" }, (_b = (_a = theme.typography) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.large);
+    const validTheme = useValidTheme(theme);
+    return Object.assign({ marginLeft: 8, marginRight: 8, color: "#fff" }, (_b = (_a = validTheme.typography) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.large);
 });
 
 export { Span as default };

package/dist/button/styled.js

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
-const Wrapper = styled.button(() => {
+const Wrapper = styled.button(({ theme }) => {
     var _a;
-    const theme = useTheme();
+    const validTheme = useValidTheme(theme);
     return {
         borderRadius: 999,
         padding: "10px 16px",
-        backgroundColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        backgroundColor: (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
         border: "none",
     };
 });

package/dist/checkbox/styled.js

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
-const Wrapper = styled.input(() => {
-    var _a, _b;
-    const theme = useTheme();
+const Wrapper = styled.input(({ theme }) => {
+    var _a;
+    const validTheme = useValidTheme(theme);
+    const primaryColor = (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary;
     return {
         margin: 0,
         visibility: "hidden",
@@ -24,8 +25,8 @@ const Wrapper = styled.input(() => {
         },
         "&[aria-checked=true]": {
             "::before": {
-                backgroundColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
-                borderColor: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
+                backgroundColor: primaryColor,
+                borderColor: primaryColor,
             },
             "::after": {
                 content: "''",

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

@@ -12,7 +12,7 @@ export interface InputProps {
     variant?: Variant;
     prefix?: ReactNode;
     suffix?: ReactNode;
-    type: "password" | "text";
+    type?: "password" | "text";
     value?: string;
     className?: string;
     onChange?: VoidFunction;

package/dist/{theme → components/theme}/hooks.d.ts

@@ -6,7 +6,14 @@ import type { Theme } from "./types";
  * we set some presets theme
  * let ui components display well
  */
-export declare const presets: Theme;
+export declare const DEFAULT_THEME: Theme;
+/**
+ * @author murukal
+ *
+ * @description
+ * use valid theme for components
+ */
+export declare const useValidTheme: (usedTheme: Theme) => Theme;
 /**
  * @author murukal
  *

package/dist/icons/hooks.js

@@ -1,9 +1,7 @@
 import { useMemo } from 'react';
-import { useTheme } from '../theme/hooks.js';
 
 const useIconProps = (props) => {
-    const theme = useTheme();
-    const size = useMemo(() => props.size || 24, [props.size, theme]);
+    const size = useMemo(() => props.size || 24, [props.size]);
     const color = useMemo(() => props.color || "white", [props.color]);
     return { size, color };
 };

package/dist/input/label.js

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
-const Label = styled.legend(({ isFocused }) => {
+const Label = styled.legend(({ isFocused, theme }) => {
     var _a, _b, _c;
-    const theme = useTheme();
-    return Object.assign(Object.assign(Object.assign({}, (_b = (_a = theme.typography) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.small), { 
+    const validTheme = useValidTheme(theme);
+    return Object.assign(Object.assign(Object.assign({}, (_b = (_a = validTheme.typography) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.small), { 
         // layout
         paddingInlineStart: 4, paddingInlineEnd: 4 }), (isFocused && {
-        color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
+        color: (_c = validTheme.colors) === null || _c === void 0 ? void 0 : _c.primary,
     }));
 });
 

package/dist/input/styled.js

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
-const Wrapper = styled.fieldset(({ isFocused }) => {
+const Wrapper = styled.fieldset(({ isFocused, theme }) => {
     var _a;
-    const theme = useTheme();
+    const validTheme = useValidTheme(theme);
     return Object.assign({ textAlign: "start", height: 56, margin: 0, paddingTop: 0, paddingBottom: 0, display: "flex", alignItems: "center", borderColor: "#79747e", borderWidth: 1, borderStyle: "solid", borderRadius: 4, boxSizing: "border-box" }, (isFocused && {
-        borderColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        borderColor: (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
         borderWidth: 2,
     }));
 });

package/dist/message/styled.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
 /**
  * @author murukal
@@ -24,10 +24,10 @@ const HolderWrapper = styled.div(() => {
  * @description
  * wrapper of message
  */
-const MessageWrapper = styled.div(() => {
+const MessageWrapper = styled.div(({ theme }) => {
     var _a;
-    const theme = useTheme();
-    return Object.assign({ marginTop: 8, marginBottom: 8, padding: "8px 12px", borderRadius: 6, backgroundColor: "#ffffff" }, (_a = theme.elevations) === null || _a === void 0 ? void 0 : _a[1]);
+    const validTheme = useValidTheme(theme);
+    return Object.assign({ marginTop: 8, marginBottom: 8, padding: "8px 12px", borderRadius: 6, backgroundColor: "#ffffff" }, (_a = validTheme.elevations) === null || _a === void 0 ? void 0 : _a[1]);
 });
 
 export { HolderWrapper, MessageWrapper };

package/dist/radio/styled.js

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
-const Wrapper = styled.input(() => {
+const Wrapper = styled.input(({ theme }) => {
     var _a;
-    const theme = useTheme();
+    const validTheme = useValidTheme(theme);
     return {
         visibility: "hidden",
         margin: 0,
@@ -25,7 +25,7 @@ const Wrapper = styled.input(() => {
         "&[aria-checked=true]": {
             "::after": {
                 borderWidth: "0.3rem",
-                borderColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+                borderColor: (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
             },
         },
     };

package/dist/switch/styled.js

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
-const Wrapper = styled.div(() => {
+const Wrapper = styled.div(({ theme }) => {
     var _a, _b;
-    const theme = useTheme();
+    const validTheme = useValidTheme(theme);
     return {
         width: "1.8rem",
         height: "1rem",
@@ -24,8 +24,8 @@ const Wrapper = styled.div(() => {
             transition: "all .2s",
         },
         "&[aria-selected=true]": {
-            borderColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
-            backgroundColor: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
+            borderColor: (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+            backgroundColor: (_b = validTheme.colors) === null || _b === void 0 ? void 0 : _b.primary,
             "::before": {
                 translate: "100%",
                 backgroundColor: "white",

package/dist/theme/hooks.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { useTheme as useTheme$1 } from '@emotion/react';
+import '@emotion/react';
+import { isEmpty } from '../utils/object.js';
 
 const palettes = {
     primary: {
@@ -85,7 +86,7 @@ const palettes = {
  * we set some presets theme
  * let ui components display well
  */
-const presets = {
+const DEFAULT_THEME = {
     colors: {
         primary: palettes.primary[40],
         secondary: palettes.secondary[40],
@@ -139,18 +140,12 @@ const presets = {
  * @author murukal
  *
  * @description
- * hook wrapper for emotion theme hook
- * because emotion theme has the default value
- * but the default value can not be changed
- * set the preset theme for musae ui component
+ * use valid theme for components
  */
-const useTheme = () => {
-    // emotion theme
-    const theme = useTheme$1();
-    // if theme is empty
-    const isThemeEmpty = useMemo(() => Object.keys(theme).length === 0, [theme]);
-    // when is empty, we always think there are not any theme. use presets!!!
-    return useMemo(() => (isThemeEmpty ? presets : theme), [theme, isThemeEmpty]);
-};
+const useValidTheme = (usedTheme) => useMemo(() => {
+    if (isEmpty(usedTheme))
+        return DEFAULT_THEME;
+    return usedTheme;
+}, [usedTheme]);
 
-export { presets, useTheme };
+export { DEFAULT_THEME, useValidTheme };

package/dist/utils/object.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @author murukal
+ *
+ * is empty
+ */
+export declare const isEmpty: (value?: Object | null) => boolean;

package/dist/utils/object.js

@@ -0,0 +1,12 @@
+/**
+ * @author murukal
+ *
+ * is empty
+ */
+const isEmpty = (value) => {
+    if (!value)
+        return true;
+    return Object.keys(value).length === 0;
+};
+
+export { isEmpty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",