@teammodlr/ui-kit 2.0.28 → 2.0.30

package/src/components/skeleton/Skeleton.css

@@ -1,73 +0,0 @@
-.m-skeleton {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 100%;
-    --skeleton-width: 100%;
-    position: relative;
-    display: flex;
-    background: linear-gradient(-90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
-    background-size: 400% 400%;
-    overflow: hidden;
-    white-space: nowrap;
-    vertical-align: middle;
-    justify-content: center;
-    align-items: center;
-    box-sizing: content-box;
-    border-radius: var(--skeleton-border-radius);
-    font-weight: 600;
-    user-select: none;
-    width: var(--skeleton-width);
-    height: var(--skeleton-height);
-}
-
-.m-skeleton--thumb {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 128px;
-    --skeleton-width: 500px;
-}
-
-.m-skeleton--heading {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 32px;
-    --skeleton-width: 500px;
-}
-
-.m-skeleton--line {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 20px;
-    --skeleton-width: 500px;
-}
-
-.m-skeleton--circle {
-    --skeleton-border-radius: 50%;
-    --skeleton-height: 40px;
-    --skeleton-width: 40px;
-}
-
-.m-skeleton--block {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 100%;
-    --skeleton-width: 100%;
-}
-
-.m-skeleton--pulse {
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-    -webkit-animation: skeleton-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes skeleton-pulse {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: -135% 0;
-    }
-}
-
-@-webkit-keyframes skeleton-pulse {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: -135% 0;
-    }
-}

package/src/components/textarea/TextArea.css

@@ -1,173 +0,0 @@
-.m-textarea__container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.m-textarea {
-    --textarea-height: 40px;
-    --textarea-padding: 0 8px;
-    --textarea-font-size: 15px;
-    --textarea-border-radius: 4px;
-    --textarea-clear-size: 1.2rem;
-    --textarea-background-color: var(--white);
-    --textarea-border-color: var(--gray-200);
-
-    position: relative;
-    display: block;
-    align-items: center;
-    height: var(--textarea-height);
-    font-size: var(--textarea-font-size);
-    background-color: var(--textarea-background-color);
-    border: 1px solid var(--textarea-border-color);
-    box-shadow: none;
-    border-radius: var(--textarea-border-radius);
-    outline: 0;
-    cursor: text;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-textarea.m-textarea--disabled {
-    --textarea-border-color: var(--gray-300);
-    --textarea-background-color: var(--gray-100);
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.m-textarea.m-textarea--disabled textarea {
-    cursor: not-allowed;
-}
-
-.m-textarea:not(.m-textarea--disabled):focus-within {
-    --textarea-border-color: var(--blue);
-    box-shadow: 0 0 0 2px var(--blue-outline);
-}
-
-.m-textarea:not(.m-textarea--disabled):not(:focus-within):hover {
-    --textarea-border-color: var(--gray-400);
-}
-
-.m-textarea textarea {
-    flex: 1 0 0;
-    min-width: 0;
-    height: 100%;
-    padding: var(--textarea-padding);
-    font-size: inherit;
-    color: var(--gray-600);
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    border-radius: var(--textarea-border-radius);
-}
-
-.m-textarea__clearable {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 6px;
-}
-
-.m-textarea .m-textarea__clearable i.m-icon--close {
-    cursor: pointer;
-    width: var(--textarea-clear-size);
-    height: var(--textarea-clear-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    color: var(--gray-500);
-    background-color: transparent;
-    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-textarea .m-textarea__clearable i.m-icon--close:hover {
-    color: var(--gray-500);
-    background-color: var(--gray-150);
-}
-
-.m-textarea i.m-icon--close::before {
-    --close-icon-size: 16px;
-    background-color: currentColor;
-    content: "";
-    width: var(--close-icon-size);
-    height: var(--close-icon-size);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    -webkit-mask-position: center center;
-    mask-position: center center;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
-    mask-size: var(--close-icon-size) var(--close-icon-size);
-}
-
-.m-textarea--xs {
-    --textarea-height: 32px;
-    --textarea-padding: 0 8px;
-    --textarea-font-size: 13px;
-    --textarea-border-radius: 4px;
-    --textarea-clear-size: 1.2rem;
-}
-
-.m-textarea--sm {
-    --textarea-height: 36px;
-    --textarea-padding: 0 8px;
-    --textarea-font-size: 14px;
-    --textarea-border-radius: 4px;
-    --textarea-clear-size: 1.2rem;
-}
-
-.m-textarea--md {
-    --textarea-height: 40px;
-    --textarea-padding: 0 8px;
-    --textarea-font-size: 15px;
-    --textarea-border-radius: 4px;
-    --textarea-clear-size: 1.2rem;
-}
-
-.m-textarea--lg {
-    --textarea-height: 42px;
-    --textarea-padding: 0 8px;
-    --textarea-font-size: 16px;
-    --textarea-border-radius: 4px;
-    --textarea-clear-size: 1.2rem;
-}
-
-.m-textarea--xl {
-    --textarea-height: 46px;
-    --textarea-padding: 0 8px;
-    --textarea-font-size: 18px;
-    --textarea-border-radius: 6px;
-    --textarea-clear-size: 1.2rem;
-}
-
-.m-textarea__label {
-    margin-bottom: 5px;
-    color: var(--gray-600);
-    font-size: 15px;
-    font-weight: 600;
-}
-
-.m-textarea__help {
-    margin-top: 4px;
-    color: var(--gray-500);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-textarea__error {
-    margin: 4px 0 8px 0;
-    color: var(--red);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-form .m-form__textarea {
-    margin-bottom: 16px;
-}
-
-.m-form .m-form__textarea .m-textarea__error {
-    margin: 4px 0 0 0;
-}
-

package/src/components/toggle/examples/index.stories.ts

@@ -1,20 +0,0 @@
-import MToggle from "../Toggle.vue";
-import {
-    MToggleBasic,
-    MToggleSlot
-} from "./index";
-
-import {
-    createStory, sizeArgType, colorArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MToggle,
-    title: 'Components/Toggle',
-    argTypes: {
-        ...sizeArgType()
-    }
-}
-
-export const Basic = createStory(MToggleBasic);
-export const Slot = createStory(MToggleSlot);

package/src/components/toggle/examples/index.ts

@@ -1,3 +0,0 @@
-export { default as MToggleBasic } from './basic.vue';
-export { default as MToggleSlot } from './slot.vue';
-

package/src/components/toggle/style/Toggle.css.ts

@@ -1,136 +0,0 @@
-import {
-  createVar,
-  globalStyle,
-  style,
-  styleVariants,
-} from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-const sizes = {
-  xs: "14px",
-  sm: "16px",
-  md: "18px",
-  lg: "20px",
-  xl: "22px",
-};
-
-const vars = {
-  offBackground: createVar(),
-  onBackground: createVar(),
-  handleBackground: createVar(),
-  height: createVar(),
-};
-
-export const toggle = style({
-  vars: {
-    [vars.height]: sizes.md,
-    [vars.offBackground]: "#f0f0f0",
-    [vars.onBackground]: themeVars.color.blue[500],
-    [vars.handleBackground]: "#fff",
-  },
-  outline: 0,
-  display: "block",
-  width: `calc(${vars.height} * 2)`,
-  minWidth: `calc(${vars.height} * 2)`,
-  height: `calc(${vars.height} + 2px)`,
-  position: "relative",
-  cursor: "pointer",
-  userSelect: "none",
-  borderRadius: "2em",
-  padding: "2px",
-  background: vars.offBackground,
-  transition: "all .4s ease",
-  selectors: {
-    ["&:after"]: {
-      position: "relative",
-      display: "block",
-      content: '""',
-      width: `calc(${vars.height} - 2px)`,
-      height: "100%",
-      left: 0,
-      borderRadius: "50%",
-      background: vars.handleBackground,
-      transition: "all .2s ease",
-    },
-    ["&:before"]: {
-      position: "relative",
-      content: '""',
-      width: "50%",
-      height: "100%",
-      display: "none",
-    },
-  },
-});
-
-export const checked = style({
-  vars: {
-    [vars.offBackground]: vars.onBackground,
-  },
-  selectors: {
-    ["&:after"]: {
-      left: "50%",
-    },
-  },
-});
-
-export const base = style({
-  position: "relative",
-  display: "inline-flex",
-  alignItems: "center",
-  cursor: "pointer",
-  gap: themeVars.space["1.5"],
-});
-
-export const input = style({
-  position: "absolute",
-  opacity: 0,
-  cursor: "pointer",
-});
-
-export const disabled = style({
-  opacity: 0.5,
-  cursor: "not-allowed",
-});
-
-export const label = style({
-  marginLeft: themeVars.space["0.5"],
-  fontWeight: "500",
-  display: "inline-block",
-  fontSize: themeVars.fontSize.base,
-  wordBreak: "break-word",
-  cursor: "pointer",
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs
-        }
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm
-        }
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md
-        },
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg,
-        },
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl,
-        },
-    },
-});
-
-globalStyle(`${base} ${input}:focus + ${toggle}`, {
-    vars: {        
-    },
-    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
-});

package/src/components/toggle/style/index.ts

@@ -1 +0,0 @@
-export * from './Toggle.css'

package/src/components/tooltip/Tooltip.css

@@ -1,43 +0,0 @@
-.m-tooltip--wrapper {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-}
-
-.m-tooltip {
-    box-sizing: border-box;
-}
-
-.m-tooltip.m-tooltip--reverse .m-tooltip--content {
-    background-color: rgba(255, 255, 255, 0.9);
-    color: #000;
-}
-
-.m-tooltip .m-tooltip--content {
-    transition: opacity 0.3s ease;
-    font-size: 12px;
-    font-weight: normal;
-    color: #fff;
-    background-color: rgba(0, 0, 0, 0.75);
-    border-radius: 4px;
-    padding: 5px 10px;
-    pointer-events: none;
-    width: max-content;
-    max-width: 300px;
-}
-
-.m-tooltip[data-popper-placement^=top] {
-    padding: 5px 0 14px;
-}
-
-.m-tooltip[data-popper-placement^=bottom] {
-    padding: 14px 0 5px;
-}
-
-.m-tooltip[data-popper-placement^=left] {
-    padding: 0 8px 0 5px;
-}
-
-.m-tooltip[data-popper-placement^=right] {
-    padding: 0 5px 0 8px;
-}