@scaleflex/ui-tw 0.0.1 → 0.0.2

package/core/upload-input/upload-input.styles.js

@@ -1,53 +0,0 @@
-import styled, { css } from 'styled-components';
-import { applyDisplayNames, generateClassNames } from '../../utils/functions';
-import IStyled from '../input/input.styles';
-var baseClassName = 'UploadInput';
-var FileInput = /*#__PURE__*/styled.input.attrs({
-  className: generateClassNames(baseClassName, 'FileInput')
-}).withConfig({
-  componentId: "sc-hwl9p2-0"
-})(["display:none;"]);
-
-// const UploadInput = styled.div.attrs({
-//   className: generateClassNames(baseClassName, 'root'),
-// })<WithTheme>(
-//   ({ theme }) => css`
-//     position: relative;
-//
-//     ${IStyled.Input} {
-//       padding: unset;
-//       width: 299px;
-//       column-gap: 0;
-//       transition: all 100ms ease-out;
-//
-//       &:hover {
-//         ${BStyled.Button} {
-//           background-color: ${theme.palette[PaletteColor.AccentPrimaryHover]};
-//           transition: all 100ms ease-out;
-//           border: none;
-//         }
-//       }
-//     }
-//
-//     ${IStyled.Base} {
-//       padding: 12px 8px 12px 12px;
-//     }
-//
-//     ${BStyled.Button} {
-//       border-radius: 0 4px 4px 0;
-//     }
-//   `,
-// )
-
-var UploadInput = /*#__PURE__*/styled.div.attrs({
-  className: generateClassNames(baseClassName, 'root')
-}).withConfig({
-  componentId: "sc-hwl9p2-1"
-})(function () {
-  return css(["position:relative;", "{padding:unset;width:299px;column-gap:0;transition:all 100ms ease-out;}", "{padding:12px 8px 12px 12px;}"], IStyled.Input, IStyled.Base);
-});
-var Styled = applyDisplayNames({
-  UploadInput: UploadInput,
-  FileInput: FileInput
-});
-export default Styled;

package/theme/entity/index.d.ts

@@ -1 +0,0 @@
-export type { Theme, ThemeOverride, WithTheme } from './theme';

package/theme/entity/index.js

@@ -1 +0,0 @@
-export {};

package/theme/entity/theme.d.ts

@@ -1,34 +0,0 @@
-import type { DefaultTheme } from 'styled-components'
-
-import type { With } from '../../utils/types'
-import type { Breakpoints } from '../roots/breakpoints'
-import type { ColorsMap } from '../roots/palette'
-import { ShadowsMap } from '../roots/shadows'
-import type { ShapeProps } from '../roots/shape'
-import type { TypographyProps } from '../roots/typography'
-
-export interface Theme {
-  readonly breakpoints: Breakpoints
-
-  readonly palette: ColorsMap
-
-  readonly typography: TypographyProps
-
-  readonly shape: ShapeProps
-
-  readonly shadows: ShadowsMap
-}
-
-export interface ThemeOverride extends Omit<Partial<Theme>> {
-  readonly breakpoints?: Theme['breakpoints']
-
-  readonly palette?: Partial<Record<Partial<Theme['palette']>>>
-
-  readonly typography?: TypographyProps
-
-  readonly shape?: ShapeProps
-
-  readonly shadows?: ShadowsMap
-}
-
-export type WithTheme<T = undefined> = With<T, { theme: DefaultTheme }>

package/theme/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export * from './use-theme';
-export * from './use-media-query';

package/theme/hooks/index.js

@@ -1,2 +0,0 @@
-export * from './use-theme';
-export * from './use-media-query';

package/theme/hooks/use-media-query.d.ts

@@ -1 +0,0 @@
-export declare function useMediaQuery(queryInput: string): boolean;

package/theme/hooks/use-media-query.js

@@ -1,27 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useEffect, useState } from 'react';
-export function useMediaQuery(queryInput) {
-  var query = queryInput.replace(/^@media( ?)/m, '');
-  var _useState = useState(function () {
-      return window.matchMedia(query).matches;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    match = _useState2[0],
-    setMatch = _useState2[1];
-  useEffect(function () {
-    var active = true;
-    var queryList = window.matchMedia(query);
-    var updateMatch = function updateMatch() {
-      if (active) {
-        setMatch(queryList.matches);
-      }
-    };
-    updateMatch();
-    queryList.addEventListener('change', updateMatch);
-    return function () {
-      active = false;
-      queryList.removeEventListener('change', updateMatch);
-    };
-  }, [query, matchMedia]);
-  return match;
-}

package/theme/hooks/use-theme.d.ts

@@ -1,2 +0,0 @@
-import type { Theme } from '../entity';
-export declare function useTheme(): Theme;

package/theme/hooks/use-theme.js

@@ -1,4 +0,0 @@
-import { useTheme as useSCTheme } from 'styled-components';
-export function useTheme() {
-  return useSCTheme();
-}

package/theme/index.d.ts

@@ -1,3 +0,0 @@
-export type { Theme } from './entity';
-export { default } from './theme-provider';
-export type { ThemeProviderProps } from './theme-provider';

package/theme/index.js

@@ -1 +0,0 @@
-export { default } from './theme-provider';

package/theme/roots/breakpoints/entity/breakpoints-map.d.ts

@@ -1,8 +0,0 @@
-import type { Values } from '../../../../utils/types'
-import { Breakpoint, BreakpointClass } from '../../../../utils/types/css'
-
-export type BreakpointsMap = Record<Values<typeof Breakpoint>, number>
-
-export type Breakpoint = Values<typeof Breakpoint>
-
-export type BreakpointClass = Values<typeof BreakpointClass>

package/theme/roots/breakpoints/entity/breakpoints.d.ts

@@ -1,73 +0,0 @@
-import { Breakpoint, BreakpointClass } from './breakpoints-map'
-
-export interface Breakpoints {
-  keys: Breakpoint[]
-  /**
-   * Each breakpoint (a key) matches with a fixed screen width (a value).
-   * @default {
-   *    // extra-small
-   *    xs: 0,
-   *    // small
-   *    sm: 600,
-   *    // medium
-   *    md: 900,
-   *    // large
-   *    lg: 1200,
-   *    // extra-large
-   *    xl: 1536,
-   * }
-   */
-  values: { [key in Breakpoint]: number }
-  /**
-   *    // extra-small
-   *    xs: '.sfx-breakpoint-xs',
-   *    // small
-   *    sm:'.sfx-breakpoint-sm',
-   *    // medium
-   *    md:'.sfx-breakpoint-md',
-   *    // large
-   *    lg:'.sfx-breakpoint-lg',
-   *    // extra-large
-   *    xl: '.sfx-breakpoint-xl',
-   *    // extra-extra-large
-   *    xxl: '.sfx-breakpoint-xxl',
-   *    // extra-extra-extra-large
-   *    xxxl: '.sfx-breakpoint-xxxl',
-   * }
-   */
-  classes: { [key in Breakpoint]: BreakpointClass }
-  /**
-   * @param width - A breakpoint width..
-   * @returns A breakpoint class ready to be used with styled components, it will be applied when it matches the nearest breakpoint intialized in the theme.
-   */
-  getBreakpointClass: (width: number, hideSelector?: boolean) => BreakpointClass
-  /**
-   * @param width - A breakpoint width.
-   * @returns A media query string ready to be used with styled components, which matches screen width greater than the screen size given by the breakpoint key.
-   */
-  up: (key: Breakpoint) => string
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc).
-   * @returns  A media query string ready to be used with styled components, which matches screen width less than the screen size given by the breakpoint key.
-   */
-  down: (key: Breakpoint) => string
-  /**
-   * @param start -  A breakpoint key (`xs`, `sm`, etc).
-   * @param end -  A breakpoint key (`xs`, `sm`, etc).
-   * @returns A media query string ready to be used with styled components, which matches screen width greater than the screen size given by the breakpoint key in the first argument and less than the screen size given by the breakpoint key in the second argument.
-   */
-  between: (start: Breakpoint, end: Breakpoint) => string
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc).
-   * @returns A media query string ready to be used with styled components, which matches screen width starting from the screen size given by the breakpoint key and stopping at the screen size given by the next breakpoint key.
-   */
-  only: (key: Breakpoint) => string
-}
-
-// export interface BreakpointsOptions extends Partial<Breakpoints> {
-//   /**
-//    * The unit used for the breakpoint's values.
-//    * @default 'px'
-//    */
-//   unit?: string | undefined;
-// }

package/theme/roots/breakpoints/entity/create-breakpoints.d.ts

@@ -1,3 +0,0 @@
-import { Breakpoints } from '.';
-declare const createBreakpoints: (breakpoints: Partial<Breakpoints>) => Breakpoints;
-export default createBreakpoints;

package/theme/roots/breakpoints/entity/create-breakpoints.js

@@ -1,65 +0,0 @@
-import { defaultBreakpoints } from './default-breakpoints';
-var createBreakpoints = function createBreakpoints(breakpoints) {
-  var _breakpoints$values = breakpoints.values,
-    values = _breakpoints$values === void 0 ? defaultBreakpoints.values : _breakpoints$values,
-    _breakpoints$classes = breakpoints.classes,
-    classes = _breakpoints$classes === void 0 ? defaultBreakpoints.classes : _breakpoints$classes;
-  var unit = 'px';
-  var keys = Object.keys(values);
-  var up = function up(key) {
-    var value = typeof values[key] === 'number' ? values[key] : key;
-    return "@media (min-width:".concat(value).concat(unit, ")");
-  };
-  var down = function down(key) {
-    var value = values[key];
-    return "@media (max-width:".concat(value).concat(unit, ")");
-  };
-  var between = function between(start, end) {
-    var endIndex = keys.indexOf(end);
-    return "@media (min-width:".concat(values[start]).concat(unit, ") and (max-width:").concat(values[keys[endIndex]]).concat(unit, ")");
-  };
-  var only = function only(key) {
-    if (keys.indexOf(key) + 1 < keys.length) {
-      return between(key, keys[keys.indexOf(key) + 1]);
-    }
-    return up(key);
-  };
-  var getBreakpointClass = function getBreakpointClass(width, hideSelector) {
-    var removeSelector = function removeSelector(str) {
-      return str.slice(1);
-    };
-    if (width >= values.xs && width < values.sm) {
-      return hideSelector ? removeSelector(classes.xs) : classes.xs;
-    }
-    if (width >= values.sm && width < values.md) {
-      return hideSelector ? removeSelector(classes.sm) : classes.sm;
-    }
-    if (width >= values.md && width < values.lg) {
-      return hideSelector ? removeSelector(classes.md) : classes.md;
-    }
-    if (width >= values.lg && width < values.xl) {
-      return hideSelector ? removeSelector(classes.lg) : classes.lg;
-    }
-    if (width >= values.xl && width < values.xxl) {
-      return hideSelector ? removeSelector(classes.xl) : classes.xl;
-    }
-    if (width >= values.xxl && width < values.xxxl) {
-      return hideSelector ? removeSelector(classes.xxl) : classes.xxl;
-    }
-    if (width >= values.xxxl) {
-      return hideSelector ? removeSelector(classes.xxxl) : classes.xxxl;
-    }
-    return hideSelector ? removeSelector(classes.md) : classes.md;
-  };
-  return {
-    keys: keys,
-    values: values,
-    classes: classes,
-    getBreakpointClass: getBreakpointClass,
-    up: up,
-    down: down,
-    between: between,
-    only: only
-  };
-};
-export default createBreakpoints;

package/theme/roots/breakpoints/entity/default-breakpoints.d.ts

@@ -1,26 +0,0 @@
-export declare const defaultBreakpoints: {
-    keys: ("sm" | "md" | "xs" | "lg" | "xl")[];
-    values: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        xxl: number;
-        xxxl: number;
-    };
-    classes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        xxl: string;
-        xxxl: string;
-    };
-    getBreakpointClass: () => string;
-    up: () => string;
-    down: () => string;
-    between: () => string;
-    only: () => string;
-};

package/theme/roots/breakpoints/entity/default-breakpoints.js

@@ -1,22 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Breakpoint } from '../../../../utils/types/css';
-export var defaultBreakpoints = {
-  keys: [Breakpoint.Xs, Breakpoint.Sm, Breakpoint.Md, Breakpoint.Lg, Breakpoint.Xl],
-  values: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Breakpoint.Xs, 0), Breakpoint.Sm, 576), Breakpoint.Md, 768), Breakpoint.Lg, 1084), Breakpoint.Xl, 1342), Breakpoint.Xxl, 1600), Breakpoint.Xxxl, 1920),
-  classes: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Breakpoint.Xs, '.sfx-breakpoint-xs'), Breakpoint.Sm, '.sfx-breakpoint-sm'), Breakpoint.Md, '.sfx-breakpoint-md'), Breakpoint.Lg, '.sfx-breakpoint-lg'), Breakpoint.Xl, '.sfx-breakpoint-xl'), Breakpoint.Xxl, '.sfx-breakpoint-xxl'), Breakpoint.Xxxl, '.sfx-breakpoint-xxxl'),
-  getBreakpointClass: function getBreakpointClass() {
-    return '';
-  },
-  up: function up() {
-    return '';
-  },
-  down: function down() {
-    return '';
-  },
-  between: function between() {
-    return '';
-  },
-  only: function only() {
-    return '';
-  }
-};

package/theme/roots/breakpoints/entity/index.d.ts

@@ -1,3 +0,0 @@
-export type { BreakpointsMap, BreakpointClass } from './breakpoints-map';
-export type { Breakpoints } from './breakpoints';
-export * from './default-breakpoints';

package/theme/roots/breakpoints/entity/index.js

@@ -1,2 +0,0 @@
-export * from './default-breakpoints';
-export {};

package/theme/roots/breakpoints/index.d.ts

@@ -1,3 +0,0 @@
-export type { BreakpointsMap } from './entity';
-export type { Breakpoints } from './entity';
-export { defaultBreakpoints } from './entity';

package/theme/roots/breakpoints/index.js

@@ -1 +0,0 @@
-export { defaultBreakpoints } from './entity';

package/theme/roots/common-styles.d.ts

@@ -1,2 +0,0 @@
-declare const CommonStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
-export default CommonStyles;

package/theme/roots/common-styles.js

@@ -1,6 +0,0 @@
-import { createGlobalStyle /* , css */ } from 'styled-components';
-
-// Example with theme: ${({ theme }) => css``;
-
-var CommonStyles = /*#__PURE__*/createGlobalStyle(["@keyframes spinner{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.Menu-open{overflow:hidden;}.Modal-open{overflow:hidden;}.Drawer-open{overflow:hidden;}"]);
-export default CommonStyles;

package/theme/roots/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Typography } from './typography';
-export { default as CommonStyles } from './common-styles';

package/theme/roots/index.js

@@ -1,2 +0,0 @@
-export { default as Typography } from './typography';
-export { default as CommonStyles } from './common-styles';

package/theme/roots/palette/entity/colors-map.d.ts

@@ -1,4 +0,0 @@
-import type { Values } from '../../../../utils/types'
-import { Color } from '../../../../utils/types/palette'
-
-export type ColorsMap = Record<Values<typeof Color>, string>