@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/components/animations/Animations.module.css

@@ -1,253 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  @keyframes l2 {
-    0%,
-    25% {
-      background-position:
-        0 50%,
-        0 calc(50% - 2px),
-        0 calc(50% + 2px),
-        50% 50%,
-        50% calc(50% - 2px),
-        50% calc(50% + 2px),
-        100% 50%,
-        100% calc(50% - 2px),
-        100% calc(50% + 2px);
-      background-size:
-        8px 0,
-        8px 4px,
-        8px 4px,
-        8px 0,
-        8px 4px,
-        8px 4px,
-        8px 0,
-        8px 4px,
-        8px 4px;
-    }
-
-    50% {
-      background-position:
-        0 50%,
-        0 calc(0% - 2px),
-        0 calc(100% + 2px),
-        50% 50%,
-        50% calc(50% - 2px),
-        50% calc(50% + 2px),
-        100% 50%,
-        100% calc(50% - 2px),
-        100% calc(50% + 2px);
-      background-size:
-        8px 100%,
-        8px 4px,
-        8px 4px,
-        8px 0,
-        8px 4px,
-        8px 4px,
-        8px 0,
-        8px 4px,
-        8px 4px;
-    }
-
-    75% {
-      background-position:
-        0 50%,
-        0 calc(0% - 2px),
-        0 calc(100% + 2px),
-        50% 50%,
-        50% calc(0% - 2px),
-        50% calc(100% + 2px),
-        100% 50%,
-        100% calc(50% - 2px),
-        100% calc(50% + 2px);
-      background-size:
-        8px 100%,
-        8px 4px,
-        8px 4px,
-        8px 100%,
-        8px 4px,
-        8px 4px,
-        8px 0,
-        8px 4px,
-        8px 4px;
-    }
-
-    95%,
-    100% {
-      background-position:
-        0 50%,
-        0 calc(0% - 2px),
-        0 calc(100% + 2px),
-        50% 50%,
-        50% calc(0% - 2px),
-        50% calc(100% + 2px),
-        100% 50%,
-        100% calc(0% - 2px),
-        100% calc(100% + 2px);
-      background-size:
-        8px 100%,
-        8px 4px,
-        8px 4px,
-        8px 100%,
-        8px 4px,
-        8px 4px,
-        8px 100%,
-        8px 4px,
-        8px 4px;
-    }
-  }
-
-  .bars {
-    --c: linear-gradient(currentcolor 0 0);
-    --r1: radial-gradient(farthest-side at bottom, currentcolor 93%, #0000);
-    --r2: radial-gradient(farthest-side at top, currentcolor 93%, #0000);
-
-    aspect-ratio: 1;
-    background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2),
-      var(--c), var(--r1), var(--r2);
-    background-repeat: no-repeat;
-    animation: l2 1s infinite alternate;
-  }
-
-  @keyframes l4 {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-
-  .spinner {
-    --b: 8px;
-
-    aspect-ratio: 1;
-
-    background: conic-gradient(#0000 10%, currentcolor) content-box;
-    border-radius: 50%;
-
-    mask: repeating-conic-gradient(
-        #0000 0deg,
-        #000 1deg 20deg,
-        #0000 21deg 36deg
-      ),
-      radial-gradient(
-        farthest-side,
-        #0000 calc(100% - var(--b) - 1px),
-        #000 calc(100% - var(--b))
-      );
-
-    animation: l4 2s infinite steps(10);
-
-    mask-composite: destination-in;
-    mask-composite: intersect;
-  }
-
-  @keyframes loader {
-    from {
-      transform: translateX(calc(-100% * var(--multiplier)));
-    }
-
-    to {
-      transform: translateX(calc(100% * var(--multiplier)));
-    }
-  }
-
-  .loader {
-    --multiplier: 1;
-
-    & > div {
-      height: calc(0.125rem + 2px);
-
-      &::after {
-        animation: loader 1s cubic-bezier(0.65, 0, 0.45, 1) infinite;
-      }
-    }
-
-    :global([dir="rtl"]) & {
-      --multiplier: -1;
-    }
-  }
-
-  @keyframes check-stroke {
-    100% {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes check-scale {
-    0%,
-    100% {
-      transform: none;
-    }
-
-    50% {
-      transform: scale3d(1.1, 1.1, 1);
-    }
-  }
-
-  @keyframes check-fill {
-    100% {
-      box-shadow: inset 0 0 0 1em currentcolor;
-    }
-  }
-
-  .checkAnimation {
-    width: 1.5em;
-    height: 1.5em;
-
-    color: theme(colors.primary.DEFAULT);
-
-    box-shadow: inset 0 0 0 currentcolor;
-
-    fill: transparent;
-    stroke-miterlimit: 10;
-    stroke-width: 4px;
-
-    animation:
-      check-fill 0.4s ease-in-out 0.4s forwards,
-      check-scale 0.3s ease-in-out 0.9s both;
-    animation-delay: 0.75s;
-
-    & .circlePart {
-      fill: transparent;
-      stroke: currentcolor;
-      stroke-dasharray: 166;
-      stroke-dashoffset: 166;
-      stroke-miterlimit: 10;
-      stroke-width: 8px;
-
-      animation: check-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
-      animation-delay: 0.25s;
-    }
-
-    & .iconPart {
-      transform-origin: 50% 50%;
-
-      stroke: currentcolor;
-      stroke-dasharray: 48;
-      stroke-dashoffset: 48;
-
-      animation: check-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
-      animation-delay: 0.75s;
-    }
-  }
-}

package/src/components/animations/Animations.tsx

@@ -1,196 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import classNames from "classnames";
-import { useMemo } from "react";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import {
-  type AriaProps,
-  type ColorType,
-  type CssProp,
-  type PaletteType,
-} from "../../types";
-import { getColor, getColorClass } from "../../utils";
-import classes from "./Animations.module.css";
-
-export interface AnimationProps extends CssProp, AriaProps {
-  type?: "info" | "check" | "cross" | "question" | "exclaim";
-  /**
-   * icon color
-   */
-  color?: ColorType | PaletteType;
-  /**
-   * icon mark color
-   */
-  strokeColor?: ColorType | PaletteType;
-}
-
-export const AnimationIndicator = ({
-  className,
-  color,
-  strokeColor,
-  type,
-  ...aria
-}: AnimationProps) => {
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (color) {
-        s.color = getColor(color);
-      }
-      if (strokeColor) {
-        s.stroke = getColor(strokeColor);
-      }
-      return s;
-    },
-    [color, strokeColor],
-    "Animation styles",
-  );
-  const path = useMemo(() => {
-    if (type === "check") return "M14.1 27.2l7.1 7.2 16.7-16.8";
-    if (type === "cross") return "M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8";
-    if (type === "question")
-      return "M18.949 17.621c0.426-0.787 1.354-1.6 2.108-2.223 1.279-0.984 3.87-1.778 5.805-1.778 3.837 0 6.189 2.689 6.189 6.034 0 2.23-1.193 4.214-3.751 6.346-2.886 2.361-3.497 3.362-3.497 5.788v0c0-2.263 0.689-3.509 3.476-5.772 2.689-2.23 3.772-3.968 3.772-6.362 0-3.772-2.492-6.034-6.789-6.034-2.132 0-3.903 0.722-5.28 1.804-0.82 0.623-1.476 1.377-2.033 2.197zM26 41.329v0-2.948z";
-    if (type === "exclaim")
-      return "M26.611 10.873c-0.002 1.015-0.002 2.071-0.002 3.086v11.777c0 3.086 0.002 2.232 0 3.288h-0.018c-0.001-1.056 0-0.202 0-3.288v-11.777c0-1.015 0-2.071-0.002-3.086zM26.59 37.472h0.018v3.655h-0.018z";
-    return "M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z";
-  }, [type]);
-  /** ***************** component *******************/
-  return (
-    <svg
-      data-ref="animated-indicator"
-      className={classNames(
-        classes.checkAnimation,
-        className,
-        "inline-block rounded-full",
-        color && getColorClass(color),
-      )}
-      style={styles}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 52 52"
-      aria-hidden="true"
-      {...aria}
-    >
-      <circle className={classes.circlePart} cx="26" cy="26" r="25" />
-      <path
-        className={classNames(
-          classes.iconPart,
-          getColorClass(strokeColor ?? "invert"),
-        )}
-        d={path}
-      />
-    </svg>
-  );
-};
-
-export const AnimationBars = ({
-  color = "tint",
-  size = "2rem",
-}: {
-  color?: ColorType | string;
-  size?: number | string;
-}) => {
-  return (
-    <div
-      className={classNames(
-        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
-      )}
-    >
-      <div
-        className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
-        )}
-      >
-        <div
-          className={classNames(classes.bars, getColorClass(color + "-500/50"))}
-          style={{ width: size }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const AnimationSpinner = ({
-  color = "tint-700",
-  size = "2rem",
-}: {
-  color?: ColorType | string;
-  size?: number | string;
-}) => {
-  return (
-    <div
-      className={classNames(
-        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
-      )}
-      data-testid="spinner"
-    >
-      <div
-        className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
-        )}
-      >
-        <div
-          className={classNames(classes.spinner, getColorClass(color))}
-          style={{ width: size }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const Loading = () => {
-  return (
-    <div
-      className={classNames(
-        classes.loader,
-        "area-[loader] relative overflow-x-clip",
-      )}
-      data-testid="loading"
-    >
-      <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
-    </div>
-  );
-};
-
-export const Skeleton = ({ className, ...rest }: CssProp) => {
-  return (
-    <div
-      className={classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg")}
-      data-testid="skeleton"
-      {...rest}
-    >
-      <div className="bg-tint-100 rounded aspect-square h-12" />
-      <div className="flex-1 flex flex-col gap-2">
-        <div className="bg-tint-100 h-3 rounded-full" />
-        <div className="flex gap-2">
-          <div className="bg-tint-100 h-2 rounded-full basis-[30%]" />
-          <div className="bg-tint-100 h-2 rounded-full basis-[60%]" />
-        </div>
-        <div className="flex gap-2">
-          <div className="bg-tint-100 h-2 rounded-full basis-[30%]" />
-          <div className="bg-tint-100 h-2 rounded-full basis-[60%]" />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/avatar/Avatar.module.css

@@ -1,90 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  .avatar {
-    width: 1em;
-    height: 1em;
-
-    vertical-align: -0.125em;
-
-    border-radius: var(--rounding);
-    box-shadow: 0 0 1px theme(borderColor.base);
-
-    & > i,
-    & > svg,
-    & > img {
-      pointer-events: none;
-
-      overflow: hidden;
-      display: block;
-
-      width: 1em;
-      height: 1em;
-
-      line-height: 1;
-
-      object-fit: cover;
-      background-color: theme(backgroundColor.dimmed);
-      border-radius: inherit;
-
-      fill: currentcolor;
-    }
-
-    & > i::before {
-      line-height: 1;
-    }
-
-    & > .imagePlaceholder {
-      z-index: -1;
-    }
-  }
-
-  .avatarGroup {
-    & > .avatar {
-      box-shadow:
-        0 0 0 1px theme(borderColor.muted),
-        0 0 0 0.125em var(--fabric-bg);
-
-      &:not(:first-child) {
-        margin-inline-start: -0.125em;
-      }
-    }
-
-    & .avatarGroup--extra {
-      width: 1em;
-      height: 1em;
-      font-size: inherit;
-      border-radius: inherit;
-    }
-  }
-}
-
-@layer util {
-  .avatarGroup {
-    & > .avatar {
-      font-size: inherit;
-      border-radius: inherit;
-    }
-  }
-}

package/src/components/badge/Badge.module.css

@@ -1,165 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  @keyframes pinger {
-    0% {
-      transform: scale(1);
-      opacity: 0.7;
-    }
-
-    100% {
-      transform: scale(3);
-      opacity: 0;
-    }
-  }
-
-  .badge {
-    --tw-bg-opacity: 1;
-
-    box-sizing: content-box;
-    color: theme(textColor.base);
-    background-color: theme(colors.tint.200/var(--tw-bg-opacity));
-    outline: 0.5px solid theme(backgroundColor.base);
-
-    & > span {
-      font-size: 0.625em;
-      font-weight: 500;
-      line-height: 1;
-      vertical-align: 0.125em;
-    }
-
-    &[data-ping="true"] {
-      --translate: calc(50%);
-
-      &::before {
-        content: "";
-
-        position: absolute;
-        z-index: -1;
-        inset: 0;
-
-        background-color: inherit;
-        border-radius: 999px;
-
-        animation: pinger 1s linear infinite;
-      }
-    }
-
-    &:not([data-ping="true"]) {
-      --translate: 0.75rem;
-
-      min-width: 1em;
-    }
-
-    &[data-placement="top"] {
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &[data-placement="top-start"] {
-      top: 0;
-      inset-inline-start: 0;
-
-      :global([dir="ltr"]) & {
-        transform: translate(calc(var(--translate) * -1), -50%);
-      }
-
-      :global([dir="rtl"]) & {
-        transform: translate(calc(var(--translate) * 1), -50%);
-      }
-    }
-
-    &[data-placement="top-end"] {
-      top: 0;
-      inset-inline-end: 0;
-
-      :global([dir="ltr"]) & {
-        transform: translate(calc(var(--translate) * 1), -50%);
-      }
-
-      :global([dir="rtl"]) & {
-        transform: translate(calc(var(--translate) * -1), -50%);
-      }
-    }
-
-    &[data-placement="bottom"] {
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%, 50%);
-    }
-
-    &[data-placement="bottom-start"] {
-      bottom: 0;
-      inset-inline-start: 0;
-
-      :global([dir="ltr"]) & {
-        transform: translate(calc(var(--translate) * -1), -50%);
-      }
-
-      :global([dir="rtl"]) & {
-        transform: translate(calc(var(--translate) * 1), -50%);
-      }
-    }
-
-    &[data-placement="bottom-end"] {
-      bottom: 0;
-      inset-inline-end: 0;
-
-      :global([dir="ltr"]) & {
-        transform: translate(calc(var(--translate) * 1), -50%);
-      }
-
-      :global([dir="rtl"]) & {
-        transform: translate(calc(var(--translate) * -1), -50%);
-      }
-    }
-
-    &[data-placement="start"] {
-      top: 50%;
-      inset-inline-start: 0;
-
-      :global([dir="ltr"]) & {
-        transform: translate(-50%, -50%);
-      }
-
-      :global([dir="rtl"]) & {
-        transform: translate(50%, -50%);
-      }
-    }
-
-    &[data-placement="end"] {
-      top: 50%;
-      inset-inline-end: 0;
-
-      :global([dir="ltr"]) & {
-        transform: translate(50%, -50%);
-      }
-
-      :global([dir="rtl"]) & {
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-}