@remember-web/mixin 0.1.7 → 0.1.8

package/dist/mixin/src/index.cjs.js

@@ -5,6 +5,7 @@ var utils = require('./colors/utils.cjs.js');
 var index = require('./mediaQuery/index.cjs.js');
 var _const$1 = require('./typography/const.cjs.js');
 var utils$1 = require('./typography/utils.cjs.js');
+var index$1 = require('./provider/index.cjs.js');
 var _const = require('./mediaQuery/const.cjs.js');
 
 
@@ -55,6 +56,8 @@ exports.TYPOGRAPHY_STYLES = _const$1.TYPOGRAPHY_STYLES;
 exports.ellipsis = utils$1.ellipsis;
 exports.getTypographyStyles = utils$1.getTypographyStyles;
 exports.textEllipsis = utils$1.textEllipsis;
+exports.RUIProvider = index$1.RUIProvider;
+exports.useRUI = index$1.useRUI;
 exports.DESKTOP_WIDTH = _const.DESKTOP_WIDTH;
 exports.PHONE_WIDTH = _const.PHONE_WIDTH;
 //# sourceMappingURL=index.cjs.js.map

package/dist/mixin/src/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/mixin/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from './colors';
 export * from './mediaQuery';
 export * from './typography';
+export * from './provider';
 //# sourceMappingURL=index.d.ts.map

package/dist/mixin/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

package/dist/mixin/src/index.esm.js

@@ -3,5 +3,6 @@ export { getBrowserTheme, getColorVariableName, getHexFromRuiCssVariable, getRgb
 export { desktopOnly, getDeviceWidthMediaQuery, mobileOnly, phoneOnly } from './mediaQuery/index.esm.js';
 export { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './typography/const.esm.js';
 export { ellipsis, getTypographyStyles, textEllipsis } from './typography/utils.esm.js';
+export { RUIProvider, useRUI } from './provider/index.esm.js';
 export { DESKTOP_WIDTH, PHONE_WIDTH } from './mediaQuery/const.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/mixin/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/mixin/src/provider/index.cjs.js

@@ -0,0 +1,43 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var utils = require('../colors/utils.cjs.js');
+var styles = require('./styles.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RUIContext = /*#__PURE__*/react.createContext(null);
+
+/** theme과 setTheme은 사용하는 곳에서 주입,
+ * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */
+function RUIProvider(_ref) {
+  var children = _ref.children,
+    customMixins = _ref.customMixins,
+    forceTheme = _ref.forceTheme,
+    setTheme = _ref.setTheme;
+  var currentTheme = forceTheme !== null && forceTheme !== void 0 ? forceTheme : utils.getBrowserTheme();
+  var ruiContextValue = react.useMemo(function () {
+    return {
+      currentTheme: currentTheme,
+      setTheme: setTheme
+    };
+  }, [currentTheme, setTheme]);
+  return /*#__PURE__*/jsxRuntime.jsxs(RUIContext.Provider, {
+    value: ruiContextValue,
+    children: [/*#__PURE__*/jsxRuntime.jsx(styles.RUIGlobalStyle, {
+      customMixins: customMixins,
+      forceTheme: forceTheme
+    }), children]
+  });
+}
+function useRUI() {
+  var ruiContextValue = react.useContext(RUIContext);
+  if (ruiContextValue === null) {
+    throw new Error('useRUI must be used within RUIProvider');
+  }
+  return ruiContextValue;
+}
+
+exports.RUIProvider = RUIProvider;
+exports.useRUI = useRUI;
+//# sourceMappingURL=index.cjs.js.map

package/dist/mixin/src/provider/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/provider/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport type { ColorThemeType, ThemeType } from '@/colors';\nimport { getBrowserTheme } from '@/colors';\n\nimport { RUIGlobalStyle } from './styles';\n\nexport interface RUIContentProps {\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n  setTheme?: (theme: ThemeType) => void;\n}\n\nexport interface RUIContextValue {\n  currentTheme: ThemeType;\n  setTheme: RUIContentProps['setTheme'];\n}\n\nconst RUIContext = createContext<RUIContextValue | null>(null);\n\n/** theme과 setTheme은 사용하는 곳에서 주입,\n * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */\nexport function RUIProvider({\n  children,\n  customMixins,\n  forceTheme,\n  setTheme,\n}: { children: ReactNode } & RUIContentProps) {\n  const currentTheme: ThemeType = forceTheme ?? getBrowserTheme();\n  const ruiContextValue: RUIContextValue = useMemo(\n    () => ({ currentTheme, setTheme }),\n    [currentTheme, setTheme]\n  );\n\n  return (\n    <RUIContext.Provider value={ruiContextValue}>\n      <RUIGlobalStyle customMixins={customMixins} forceTheme={forceTheme} />\n      {children}\n    </RUIContext.Provider>\n  );\n}\n\nexport function useRUI() {\n  const ruiContextValue = useContext(RUIContext);\n\n  if (ruiContextValue === null) {\n    throw new Error('useRUI must be used within RUIProvider');\n  }\n\n  return ruiContextValue;\n}\n"],"names":["currentTheme","setTheme","value","customMixins","forceTheme"],"mappings":";;;;;;;;AAqBA;;AAEA;AACA;AACO;AAKuC;;;;;;;AAGjCA;AAAcC;;AAAU;AAInC;AACuBC;;AACHC;AAA4BC;;AACnC;AAGf;AAEO;AACL;;AAGE;AACF;AAEA;AACF;;;"}

package/dist/mixin/src/provider/index.esm.js

@@ -0,0 +1,40 @@
+"use client";
+import { useMemo, useContext, createContext } from 'react';
+import { getBrowserTheme } from '../colors/utils.esm.js';
+import { RUIGlobalStyle } from './styles.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RUIContext = /*#__PURE__*/createContext(null);
+
+/** theme과 setTheme은 사용하는 곳에서 주입,
+ * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */
+function RUIProvider(_ref) {
+  var children = _ref.children,
+    customMixins = _ref.customMixins,
+    forceTheme = _ref.forceTheme,
+    setTheme = _ref.setTheme;
+  var currentTheme = forceTheme !== null && forceTheme !== void 0 ? forceTheme : getBrowserTheme();
+  var ruiContextValue = useMemo(function () {
+    return {
+      currentTheme: currentTheme,
+      setTheme: setTheme
+    };
+  }, [currentTheme, setTheme]);
+  return /*#__PURE__*/jsxs(RUIContext.Provider, {
+    value: ruiContextValue,
+    children: [/*#__PURE__*/jsx(RUIGlobalStyle, {
+      customMixins: customMixins,
+      forceTheme: forceTheme
+    }), children]
+  });
+}
+function useRUI() {
+  var ruiContextValue = useContext(RUIContext);
+  if (ruiContextValue === null) {
+    throw new Error('useRUI must be used within RUIProvider');
+  }
+  return ruiContextValue;
+}
+
+export { RUIProvider, useRUI };
+//# sourceMappingURL=index.esm.js.map

package/dist/mixin/src/provider/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/provider/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport type { ColorThemeType, ThemeType } from '@/colors';\nimport { getBrowserTheme } from '@/colors';\n\nimport { RUIGlobalStyle } from './styles';\n\nexport interface RUIContentProps {\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n  setTheme?: (theme: ThemeType) => void;\n}\n\nexport interface RUIContextValue {\n  currentTheme: ThemeType;\n  setTheme: RUIContentProps['setTheme'];\n}\n\nconst RUIContext = createContext<RUIContextValue | null>(null);\n\n/** theme과 setTheme은 사용하는 곳에서 주입,\n * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */\nexport function RUIProvider({\n  children,\n  customMixins,\n  forceTheme,\n  setTheme,\n}: { children: ReactNode } & RUIContentProps) {\n  const currentTheme: ThemeType = forceTheme ?? getBrowserTheme();\n  const ruiContextValue: RUIContextValue = useMemo(\n    () => ({ currentTheme, setTheme }),\n    [currentTheme, setTheme]\n  );\n\n  return (\n    <RUIContext.Provider value={ruiContextValue}>\n      <RUIGlobalStyle customMixins={customMixins} forceTheme={forceTheme} />\n      {children}\n    </RUIContext.Provider>\n  );\n}\n\nexport function useRUI() {\n  const ruiContextValue = useContext(RUIContext);\n\n  if (ruiContextValue === null) {\n    throw new Error('useRUI must be used within RUIProvider');\n  }\n\n  return ruiContextValue;\n}\n"],"names":["currentTheme","setTheme","value","customMixins","forceTheme"],"mappings":";;;;;;AAqBA;;AAEA;AACA;AACO;AAKuC;;;;;;;AAGjCA;AAAcC;;AAAU;AAInC;AACuBC;;AACHC;AAA4BC;;AACnC;AAGf;AAEO;AACL;;AAGE;AACF;AAEA;AACF;;"}

package/dist/mixin/src/provider/styles.cjs.js

@@ -0,0 +1,43 @@
+"use client";
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styledComponents = require('styled-components');
+var theme = require('../colors/theme.cjs.js');
+var utils = require('../colors/utils.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RUIGlobalStyle = styledComponents.createGlobalStyle(function (_ref) {
+  var customMixins = _ref.customMixins,
+    forceTheme = _ref.forceTheme;
+  return styledComponents.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n    :root {\n      ", ";\n\n      @media (prefers-color-scheme: dark) {\n        ", "\n      }\n    }\n  "])), getThemeCssFragment({
+    theme: forceTheme || 'light',
+    customMixins: customMixins
+  }), getThemeCssFragment({
+    theme: forceTheme || 'dark',
+    customMixins: customMixins
+  }));
+});
+function getThemeCssFragment(_ref2) {
+  var theme$1 = _ref2.theme,
+    customMixins = _ref2.customMixins;
+  return Object.entries(_objectSpread(_objectSpread({}, theme.RUI_COLOR_THEME[theme$1]), customMixins === null || customMixins === void 0 ? void 0 : customMixins[theme$1])).map(function (_ref3) {
+    var _ref4 = _slicedToArray__default.default(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    return "".concat(key, ": ").concat(value, "; ").concat(key, "__rgb: ").concat(utils.hexToRgb(value), ";");
+  });
+}
+
+exports.RUIGlobalStyle = RUIGlobalStyle;
+//# sourceMappingURL=styles.cjs.js.map

package/dist/mixin/src/provider/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/provider/styles.ts"],"sourcesContent":["'use client';\n\nimport { createGlobalStyle, css } from 'styled-components';\n\nimport { RUI_COLOR_THEME } from '@/colors/theme';\nimport { hexToRgb, type ColorThemeType, type ThemeType } from '@/colors';\n\nexport const RUIGlobalStyle = createGlobalStyle<{\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n}>(\n  ({ customMixins, forceTheme }) => css`\n    :root {\n      ${getThemeCssFragment({ theme: forceTheme || 'light', customMixins })};\n\n      @media (prefers-color-scheme: dark) {\n        ${getThemeCssFragment({ theme: forceTheme || 'dark', customMixins })}\n      }\n    }\n  `\n);\n\nfunction getThemeCssFragment({\n  theme,\n  customMixins,\n}: {\n  theme: ThemeType;\n  customMixins?: ColorThemeType;\n}) {\n  return Object.entries({\n    ...RUI_COLOR_THEME[theme],\n    ...customMixins?.[theme],\n  }).map(\n    ([key, value]) => `${key}: ${value}; ${key}__rgb: ${hexToRgb(value)};`\n  );\n}\n"],"names":["customMixins","key","value"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;;AAWX;;;;AAE0DA;;;AAGCA;AAAa;AAAE;AAM5E;AAMG;;;AAKC;AAAEC;AAAKC;AAAK;AAAuD;AAEvE;;"}

package/dist/mixin/src/provider/styles.esm.js

@@ -0,0 +1,35 @@
+"use client";
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { createGlobalStyle, css } from 'styled-components';
+import { RUI_COLOR_THEME } from '../colors/theme.esm.js';
+import { hexToRgb } from '../colors/utils.esm.js';
+
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RUIGlobalStyle = createGlobalStyle(function (_ref) {
+  var customMixins = _ref.customMixins,
+    forceTheme = _ref.forceTheme;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :root {\n      ", ";\n\n      @media (prefers-color-scheme: dark) {\n        ", "\n      }\n    }\n  "])), getThemeCssFragment({
+    theme: forceTheme || 'light',
+    customMixins: customMixins
+  }), getThemeCssFragment({
+    theme: forceTheme || 'dark',
+    customMixins: customMixins
+  }));
+});
+function getThemeCssFragment(_ref2) {
+  var theme = _ref2.theme,
+    customMixins = _ref2.customMixins;
+  return Object.entries(_objectSpread(_objectSpread({}, RUI_COLOR_THEME[theme]), customMixins === null || customMixins === void 0 ? void 0 : customMixins[theme])).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    return "".concat(key, ": ").concat(value, "; ").concat(key, "__rgb: ").concat(hexToRgb(value), ";");
+  });
+}
+
+export { RUIGlobalStyle };
+//# sourceMappingURL=styles.esm.js.map

package/dist/mixin/src/provider/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/provider/styles.ts"],"sourcesContent":["'use client';\n\nimport { createGlobalStyle, css } from 'styled-components';\n\nimport { RUI_COLOR_THEME } from '@/colors/theme';\nimport { hexToRgb, type ColorThemeType, type ThemeType } from '@/colors';\n\nexport const RUIGlobalStyle = createGlobalStyle<{\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n}>(\n  ({ customMixins, forceTheme }) => css`\n    :root {\n      ${getThemeCssFragment({ theme: forceTheme || 'light', customMixins })};\n\n      @media (prefers-color-scheme: dark) {\n        ${getThemeCssFragment({ theme: forceTheme || 'dark', customMixins })}\n      }\n    }\n  `\n);\n\nfunction getThemeCssFragment({\n  theme,\n  customMixins,\n}: {\n  theme: ThemeType;\n  customMixins?: ColorThemeType;\n}) {\n  return Object.entries({\n    ...RUI_COLOR_THEME[theme],\n    ...customMixins?.[theme],\n  }).map(\n    ([key, value]) => `${key}: ${value}; ${key}__rgb: ${hexToRgb(value)};`\n  );\n}\n"],"names":["customMixins","key","value"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;;AAWX;;;;AAE0DA;;;AAGCA;AAAa;AAAE;AAM5E;AAMG;;;AAKC;AAAEC;AAAKC;AAAK;AAAuD;AAEvE;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/mixin",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "RUI Mixin",
   "homepage": "https://dramancompany.github.io/rui/",
   "author": "Remember",

package/src/index.ts

@@ -1,4 +1,4 @@
 export * from './colors';
 export * from './mediaQuery';
 export * from './typography';
-// export * from './provider';
+export * from './provider';