@soul-refiner/design-system 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/node_modules/zustand-x/dist/index.js

@@ -0,0 +1,217 @@
+'use strict';
+
+var immer = require('../../immer/dist/immer.js');
+var index_modern = require('../../react-tracked/dist/index.modern.js');
+var middleware = require('../../zustand/esm/middleware.js');
+var traditional = require('../../zustand/esm/traditional.js');
+var vanilla = require('../../zustand/esm/vanilla.js');
+require('../../lodash.mapvalues/index.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var immerMiddleware = (config) => (set, get, api) => {
+  const setState = (fn, actionName) => set(immer.produce(fn), true, actionName);
+  api.setState = setState;
+  return config(setState, get, api);
+};
+
+// src/utils/generateStateActions.ts
+var generateStateActions = (store, storeName) => {
+  const actions = {};
+  Object.keys(store.getState()).forEach((key) => {
+    actions[key] = (value) => {
+      const prevValue = store.getState()[key];
+      if (prevValue === value)
+        return;
+      const actionKey = key.replace(/^\S/, (s) => s.toUpperCase());
+      store.setState((draft) => {
+        draft[key] = value;
+      }, `@@${storeName}/set${actionKey}`);
+    };
+  });
+  return actions;
+};
+
+// src/utils/generateStateGetSelectors.ts
+var generateStateGetSelectors = (store) => {
+  const selectors = {};
+  Object.keys(store.getState()).forEach((key) => {
+    selectors[key] = () => store.getState()[key];
+  });
+  return selectors;
+};
+
+// src/utils/generateStateHookSelectors.ts
+var generateStateHookSelectors = (useStore, store) => {
+  const selectors = {};
+  Object.keys(store.getState()).forEach((key) => {
+    selectors[key] = (equalityFn) => {
+      return useStore((state) => state[key], equalityFn);
+    };
+  });
+  return selectors;
+};
+
+// src/utils/generateStateTrackedHooksSelectors.ts
+var generateStateTrackedHooksSelectors = (useTrackedStore, store) => {
+  const selectors = {};
+  Object.keys(store.getState()).forEach((key) => {
+    selectors[key] = () => {
+      return useTrackedStore()[key];
+    };
+  });
+  return selectors;
+};
+
+// src/utils/pipe.ts
+function pipe(x, ...fns) {
+  return fns.reduce((y, fn) => fn(y), x);
+}
+
+// src/utils/extendActions.ts
+var extendActions = (builder, api) => {
+  const actions = builder(api.set, api.get, api);
+  return __spreadProps(__spreadValues({}, api), {
+    set: __spreadValues(__spreadValues({}, api.set), actions)
+  });
+};
+
+// src/utils/extendSelectors.ts
+var extendSelectors = (builder, api) => {
+  const use = __spreadValues({}, api.use);
+  const useTracked = __spreadValues({}, api.useTracked);
+  const get = __spreadValues({}, api.get);
+  Object.keys(builder(api.store.getState(), api.get, api)).forEach((key) => {
+    use[key] = (...args) => api.useStore((state) => {
+      const selectors = builder(state, api.get, api);
+      const selector = selectors[key];
+      return selector(...args);
+    });
+    useTracked[key] = (...args) => {
+      const trackedState = api.useTrackedStore();
+      const selectors = builder(trackedState, api.get, api);
+      const selector = selectors[key];
+      return selector(...args);
+    };
+    get[key] = (...args) => {
+      const selectors = builder(api.store.getState(), api.get, api);
+      const selector = selectors[key];
+      return selector(...args);
+    };
+  });
+  return __spreadProps(__spreadValues({}, api), {
+    get,
+    use,
+    useTracked
+  });
+};
+
+// src/utils/storeFactory.ts
+var storeFactory = (api) => {
+  return __spreadProps(__spreadValues({}, api), {
+    extendSelectors: (builder) => storeFactory(extendSelectors(builder, api)),
+    extendActions: (builder) => storeFactory(extendActions(builder, api))
+  });
+};
+
+// src/createStore.ts
+var createStore = (name) => (initialState, options = {}) => {
+  var _a, _b;
+  const {
+    middlewares: _middlewares = [],
+    devtools,
+    persist,
+    immer: immer$1
+  } = options;
+  immer.setAutoFreeze((_a = immer$1 == null ? void 0 : immer$1.enabledAutoFreeze) != null ? _a : false);
+  if (immer$1 == null ? void 0 : immer$1.enableMapSet) {
+    immer.enableMapSet();
+  }
+  const middlewares = [immerMiddleware, ..._middlewares];
+  if (persist == null ? void 0 : persist.enabled) {
+    const opts = __spreadProps(__spreadValues({}, persist), {
+      name: (_b = persist.name) != null ? _b : name
+    });
+    middlewares.push((config) => middleware.persist(config, opts));
+  }
+  if (devtools == null ? void 0 : devtools.enabled) {
+    middlewares.push(
+      (config) => middleware.devtools(config, __spreadProps(__spreadValues({}, devtools), { name }))
+    );
+  }
+  middlewares.push(vanilla.createStore);
+  const pipeMiddlewares = (createState) => pipe(createState, ...middlewares);
+  const store = pipeMiddlewares(() => initialState);
+  const useStore = (selector, equalityFn) => traditional.useStoreWithEqualityFn(
+    store,
+    selector,
+    equalityFn
+  );
+  const stateActions = generateStateActions(store, name);
+  const mergeState = (state, actionName) => {
+    store.setState(
+      (draft) => {
+        Object.assign(draft, state);
+      },
+      actionName || `@@${name}/mergeState`
+    );
+  };
+  const setState = (fn, actionName) => {
+    store.setState(fn, actionName || `@@${name}/setState`);
+  };
+  const hookSelectors = generateStateHookSelectors(useStore, store);
+  const getterSelectors = generateStateGetSelectors(store);
+  const useTrackedStore = index_modern.createTrackedSelector(useStore);
+  const trackedHooksSelectors = generateStateTrackedHooksSelectors(
+    useTrackedStore,
+    store
+  );
+  const api = {
+    get: __spreadValues({
+      state: store.getState
+    }, getterSelectors),
+    name,
+    set: __spreadValues({
+      state: setState,
+      mergeState
+    }, stateActions),
+    store,
+    use: hookSelectors,
+    useTracked: trackedHooksSelectors,
+    useStore,
+    useTrackedStore,
+    extendSelectors: () => api,
+    extendActions: () => api
+  };
+  return storeFactory(api);
+};
+var createZustandStore = createStore;
+
+exports.createStore = createStore;
+exports.createZustandStore = createZustandStore;
+exports.extendActions = extendActions;
+exports.extendSelectors = extendSelectors;
+exports.generateStateActions = generateStateActions;
+exports.generateStateGetSelectors = generateStateGetSelectors;
+exports.generateStateHookSelectors = generateStateHookSelectors;
+exports.generateStateTrackedHooksSelectors = generateStateTrackedHooksSelectors;
+exports.immerMiddleware = immerMiddleware;
+exports.pipe = pipe;
+exports.storeFactory = storeFactory;

package/dist/src/common/colors.js

@@ -0,0 +1,140 @@
+'use strict';
+
+const COLORS = [
+    'inherit',
+    'page-bg',
+    'white',
+    'primary-blue-0',
+    'primary-blue-1',
+    'primary-blue-2',
+    'primary-blue-3',
+    'primary-blue-4',
+    'grey-0',
+    'grey-1',
+    'grey-2',
+    'grey-3',
+    'grey-4',
+    'grey-5',
+    'grey-6',
+    'grey-7',
+    'grey-8',
+    'grey-9',
+    'grey-10',
+    'red-0',
+    'red-1',
+    'red-2',
+    'red-3',
+    'red-4',
+    'red-5',
+    'red-6',
+    'red-7',
+    'red-8',
+    'red-9',
+    'red-10',
+    'green-0',
+    'green-1',
+    'green-2',
+    'green-3',
+    'green-4',
+    'green-5',
+    'green-6',
+    'green-7',
+    'green-8',
+    'green-9',
+    'green-10',
+    'blue-0',
+    'blue-1',
+    'blue-2',
+    'blue-3',
+    'blue-4',
+    'blue-5',
+    'blue-6',
+    'blue-7',
+    'blue-8',
+    'blue-9',
+    'blue-10',
+    'turquoise-0',
+    'turquoise-1',
+    'turquoise-2',
+    'turquoise-3',
+    'turquoise-4',
+    'turquoise-5',
+    'turquoise-6',
+    'turquoise-7',
+    'turquoise-8',
+    'turquoise-9',
+    'turquoise-10',
+    'purple-0',
+    'purple-1',
+    'purple-2',
+    'purple-3',
+    'purple-4',
+    'purple-5',
+    'purple-6',
+    'purple-7',
+    'purple-8',
+    'purple-9',
+    'purple-10',
+    'yellow-0',
+    'yellow-1',
+    'yellow-2',
+    'yellow-3',
+    'yellow-4',
+    'yellow-5',
+    'yellow-6',
+    'yellow-7',
+    'yellow-8',
+    'yellow-9',
+    'yellow-10',
+    'orange-0',
+    'orange-1',
+    'orange-2',
+    'orange-3',
+    'orange-4',
+    'orange-5',
+    'orange-6',
+    'orange-7',
+    'orange-8',
+    'orange-9',
+    'orange-10',
+    'hue-pink-1',
+    'hue-pink-2',
+    'hue-pink-3',
+    'hue-purple-1',
+    'hue-purple-2',
+    'hue-purple-3',
+    'hue-ocean-1',
+    'hue-ocean-2',
+    'hue-ocean-3',
+    'hue-mint-1',
+    'hue-mint-2',
+    'hue-mint-3',
+    'hue-blue-1',
+    'hue-blue-2',
+    'hue-blue-3',
+    'hue-orange-1',
+    'hue-orange-2',
+    'hue-orange-3',
+    'special-yellow-1',
+    'special-yellow-2',
+    'special-orange-1',
+    'special-orange-2',
+    'special-red-1',
+    'special-red-2',
+    'special-pink-1',
+    'special-pink-2',
+    'special-purple-1',
+    'special-purple-2',
+    'special-blue-1',
+    'special-blue-2',
+    'special-turquoise-1',
+    'special-turquoise-2',
+    'special-green-1',
+    'special-green-2',
+    'special-grape-1',
+    'special-grape-2',
+];
+const colorReference = Object.fromEntries(COLORS.map((item) => [item, `var(--color-${item})`]));
+
+exports.COLORS = COLORS;
+exports.colorReference = colorReference;

package/dist/src/common/date.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const THIS_YEAR = +new Date().getFullYear();
+const THIS_MONTH = +new Date().getMonth() + 1;
+exports.WEEKDAYS = void 0;
+(function (WEEKDAYS) {
+    WEEKDAYS["MON"] = "Mon";
+    WEEKDAYS["TUE"] = "Tue";
+    WEEKDAYS["WED"] = "Wed";
+    WEEKDAYS["THU"] = "Thu";
+    WEEKDAYS["FRI"] = "Fri";
+    WEEKDAYS["SAT"] = "Sat";
+    WEEKDAYS["SUN"] = "Sun";
+})(exports.WEEKDAYS || (exports.WEEKDAYS = {}));
+exports.MONTHS = void 0;
+(function (MONTHS) {
+    MONTHS["JAN"] = "Jan";
+    MONTHS["FEB"] = "Feb";
+    MONTHS["MAR"] = "Mar";
+    MONTHS["APR"] = "Apr";
+    MONTHS["MAY"] = "May";
+    MONTHS["JUN"] = "Jun";
+    MONTHS["JUL"] = "Jul";
+    MONTHS["AUG"] = "Aug";
+    MONTHS["SEP"] = "Sep";
+    MONTHS["OCT"] = "Oct";
+    MONTHS["NOV"] = "Nov";
+    MONTHS["DEC"] = "Dec";
+})(exports.MONTHS || (exports.MONTHS = {}));
+const CALENDAR_WEEKS = 6;
+
+exports.CALENDAR_WEEKS = CALENDAR_WEEKS;
+exports.THIS_MONTH = THIS_MONTH;
+exports.THIS_YEAR = THIS_YEAR;

package/dist/src/common/styles.d.ts

@@ -0,0 +1,24 @@
+import { BackgroundColor } from '../types/attributes';
+import { BorderRadius } from '../types/attributes';
+import { Color } from '../types/attributes';
+import { Elevation } from '../types/attributes';
+import { Flex } from '../types/attributes';
+import { Margin } from '../types/attributes';
+import { Padding } from '../types/attributes';
+import { Styleable } from '../types/attributes';
+import { TextClamp } from '../types/attributes';
+import { TypographyStyle } from '../types/attributes';
+import { TypographyWeight } from '../types/attributes';
+export declare namespace Styles {
+    const backgroundColor: import("styled-components").RuleSet<BackgroundColor>;
+    const borderRadius: import("styled-components").RuleSet<BorderRadius>;
+    const color: import("styled-components").RuleSet<Color>;
+    const elevation: import("styled-components").RuleSet<Elevation>;
+    const flex: import("styled-components").RuleSet<Flex>;
+    const margin: import("styled-components").RuleSet<Margin>;
+    const padding: import("styled-components").RuleSet<Padding>;
+    const styleable: import("styled-components").RuleSet<Styleable>;
+    const textClamp: import("styled-components").RuleSet<TextClamp>;
+    const typography: import("styled-components").RuleSet<TypographyStyle>;
+    const weight: import("styled-components").RuleSet<TypographyWeight>;
+}

package/dist/src/common/styles.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var styled = require('styled-components');
+var colors = require('./colors.js');
+
+exports.Styles = void 0;
+(function (Styles) {
+    Styles.backgroundColor = styled.css `
+    background-color: ${({ $backgroundColor }) => $backgroundColor ? colors.colorReference[$backgroundColor] : 'var(--page-bg)'};
+  `;
+    Styles.borderRadius = styled.css `
+    border-radius: ${({ $borderRadius }) => $borderRadius ? `var(--${$borderRadius})` : ''};
+  `;
+    Styles.color = styled.css `
+    color: ${({ $color }) => $color ? colors.colorReference[$color] : 'var(--color-grey-3)'};
+  `;
+    Styles.elevation = styled.css `
+    box-shadow: ${({ $elevation }) => $elevation ? `var(--elevation-${$elevation})` : 'none'};
+  `;
+    Styles.flex = styled.css `
+    align-items: ${({ $align }) => $align ?? 'normal'};
+    gap: ${({ $gap }) => $gap && typeof $gap === 'number'
+        ? `${$gap}px`
+        : $gap && typeof $gap === 'string'
+            ? `var(--${$gap})`
+            : '0px'};
+    flex: ${({ $flex }) => $flex ?? 'none'};
+    flex-flow: ${({ $flow }) => $flow ?? 'row'};
+    flex-direction: ${({ $dir }) => $dir ?? 'row'};
+    justify-content: ${({ $justify }) => $justify ?? 'normal'};
+  `;
+    Styles.margin = styled.css `
+    margin: ${({ $margin }) => $margin && typeof $margin === 'number'
+        ? `${$margin}px`
+        : $margin && typeof $margin === 'string'
+            ? `var(--${$margin})`
+            : '0px'};
+  `;
+    Styles.padding = styled.css `
+    padding: ${({ $padding }) => $padding && typeof $padding === 'number'
+        ? `${$padding}px;`
+        : $padding && typeof $padding === 'string' && $padding.includes('px')
+            ? $padding
+            : $padding && typeof $padding === 'string'
+                ? `var(--${$padding});`
+                : '0px'};
+  `;
+    Styles.styleable = styled.css `
+    ${({ sx }) => (sx ? sx : '')}
+  `;
+    Styles.textClamp = styled.css `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-box-orient: vertical;
+  `;
+    Styles.typography = styled.css `
+    font-style: ${({ $italic }) => ($italic ? 'italic' : 'normal')};
+    text-decoration: ${({ $strikethrough, $underline }) => $strikethrough ? 'line-through' : $underline ? 'underline' : 'none'};
+  `;
+    Styles.weight = styled.css `
+    font-weight: ${({ $bold, $semiBold, $mediumBold }) => $bold ? 700 : $semiBold ? 600 : $mediumBold ? 500 : 400};
+  `;
+})(exports.Styles || (exports.Styles = {}));

package/dist/src/components/actions/button/button.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconProps } from '../../../components/iconography/icon/icon';
+type NativeProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML' | 'onClick' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver' | 'onSubmit' | 'onKeyDown'> & {
+    value?: string;
+};
+type ButtonTypes = 'primary' | 'secondary' | 'outlined' | 'danger' | 'text' | 'raised' | 'special' | 'dropdown';
+type ButtonSize = 'small' | 'large';
+type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
+export interface ButtonProps extends NativeProps, React.PropsWithChildren {
+    as?: React.ElementType;
+    disabled?: boolean;
+    download?: boolean;
+    fluid?: boolean;
+    href?: string;
+    icon?: React.ReactElement | undefined;
+    isDropdownOpen?: boolean;
+    roundness?: ButtonShape;
+    size?: ButtonSize;
+    sx?: string;
+    type?: ButtonTypes;
+    className?: string;
+    showChevron?: boolean;
+    customDropdownIcon?: React.ComponentType<IconProps>;
+}
+export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, showChevron, customDropdownIcon, ...props }: ButtonProps) => React.JSX.Element;
+export {};