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

package/src/components/card/Card.module.css

@@ -1,152 +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 {
-  .cardWrapper.selected {
-    &::before {
-      content: "";
-
-      position: absolute;
-      z-index: 5;
-      top: -4px;
-      inset-inline-start: -4px;
-
-      border-top: 1rem solid theme(colors.accent.500);
-      border-bottom: 1rem solid transparent;
-      border-inline-start: 1rem solid theme(colors.accent.500);
-      border-inline-end: 1rem solid transparent;
-      border-start-start-radius: var(--rounding-cap);
-    }
-
-    &::after {
-      content: "✓";
-
-      position: absolute;
-      z-index: 5;
-      top: -4px;
-      inset-inline-start: -4px;
-
-      padding: 4px;
-
-      line-height: 1;
-      color: theme(colors.white);
-    }
-  }
-
-  .card {
-    background-color: var(--fabric-bg);
-    box-shadow: 0 0 0 1px theme(borderColor.muted);
-
-    & > * {
-      background-color: transparent;
-    }
-
-    & .cardCover {
-      &.inheritScheme:has([data-colorset="dark"]) > .cardCoverContent,
-      &.dark > .cardCoverContent {
-        color: var(--white);
-        text-shadow: 0 0 2px var(--black);
-        background-image: linear-gradient(to bottom, #0000 0, #0006 100%);
-      }
-
-      &.inheritScheme:has([data-colorset="light"]) > .cardCoverContent,
-      &.light > .cardCoverContent {
-        color: var(--black);
-        text-shadow: 0 0 2px var(--white);
-        background-image: linear-gradient(to bottom, #fff0 0, #fff6 100%);
-      }
-    }
-
-    & .cardBody {
-      padding: 1rem;
-    }
-
-    &.clickable {
-      box-shadow:
-        0 0 0 1px theme(borderColor.dimmed),
-        0 1px 2px 0 var(--fabric-shadow);
-      transition: box-shadow 0ms;
-
-      &:has(.cardBody:hover):not(:has([data-inner-clickable="true"]:hover)) {
-        box-shadow:
-          0 0 0 1px theme(borderColor.dimmed),
-          0 1px 4px 0 var(--fabric-shadow),
-          0 8px 16px 0 color-mix(in lab, var(--fabric-shadow) 35%, #0000);
-        transition-delay: 150ms;
-      }
-
-      &:has(.cardBody:active):not(:has([data-inner-clickable="true"]:hover)) {
-        transform: translateY(1px);
-        box-shadow: 0 0 0 1px theme(borderColor.dimmed);
-        transition-delay: 0ms;
-      }
-
-      & .cardBody {
-        cursor: pointer;
-
-        &::after {
-          pointer-events: none;
-          content: "";
-
-          position: absolute;
-          z-index: 5;
-          inset: 0;
-
-          background-image: linear-gradient(
-            175deg,
-            rgb(255 255 255 / 5%) 0%,
-            transparent 18%,
-            transparent 72%,
-            rgb(0 0 0 / 5%) 100%
-          );
-        }
-      }
-    }
-  }
-}
-
-@layer util {
-  .card {
-    & .cardBody {
-      & > * {
-        grid-area: unset;
-        background-color: transparent;
-      }
-    }
-
-    & .cardCover {
-      & > [data-ref="image"],
-      & > [data-ref="video"] {
-        position: absolute;
-        z-index: 0;
-        inset: 0;
-      }
-
-      & .cardCoverContent {
-        & > * {
-          flex: 0 0 auto;
-        }
-      }
-    }
-  }
-}

package/src/components/chip/Chip.module.css

@@ -1,118 +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 {
-  .chip {
-    --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
-
-    color: theme(colors.tint.500);
-    background-image: var(--blank-gradient);
-    outline: 1px solid color-mix(in lab, currentcolor 20%, var(--fabric-bg));
-    outline-offset: -1px;
-
-    & > .chipLabel {
-      padding: 0 0.5em;
-    }
-
-    & > .chipIcon {
-      & + .chipLabel {
-        margin-inline-start: -0.5em;
-      }
-    }
-
-    & > .chipRemove {
-      /* mayble add styles later */
-    }
-
-    &.clickable {
-      cursor: pointer;
-      background-image: var(--click-gradient);
-
-      &.disabled {
-        pointer-events: none;
-        opacity: 0.5;
-      }
-    }
-  }
-}
-
-@layer var {
-  .chip {
-    height: unset;
-    padding: unset;
-    background-color: color-mix(in lab, currentcolor 10%, var(--fabric-bg));
-
-    &[data-variant="outline"] {
-      outline-color: color-mix(in lab, currentcolor 50%, var(--fabric-bg));
-      box-shadow: 0 0 2px color-mix(in lab, currentcolor 50%, var(--tint)) inset;
-    }
-
-    > * {
-      color: color-mix(in lab, currentcolor 50%, var(--fabric-text));
-    }
-
-    &.clickable {
-      &:hover {
-        background-color: color-mix(in lab, currentcolor 20%, var(--fabric-bg));
-      }
-
-      &:active,
-      &[data-dropdown-open="true"] {
-        background-color: color-mix(in lab, currentcolor 15%, var(--fabric-bg));
-        background-image: var(--active-gradient);
-      }
-
-      &[data-dropdown-open="true"] {
-        pointer-events: none;
-      }
-    }
-
-    &[data-variant="solid"] {
-      background-color: color-mix(in lab, currentcolor 35%, var(--fabric-bg));
-      outline-color: color-mix(in lab, currentcolor 50%, var(--fabric-bg));
-
-      & > * {
-        color: color-mix(in lab, currentcolor 5%, var(--fabric-text));
-      }
-
-      &.clickable {
-        &:hover {
-          background-color: color-mix(
-            in lab,
-            currentcolor 45%,
-            var(--fabric-bg)
-          );
-        }
-
-        &:active,
-        &[data-dropdown-open="true"] {
-          background-color: color-mix(
-            in lab,
-            currentcolor 30%,
-            var(--fabric-bg)
-          );
-        }
-      }
-    }
-  }
-}

package/src/components/collapsable/Collapsable.module.css

@@ -1,30 +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 {
-  .collapsable {
-    & + & {
-      border-top: 1px solid theme(borderColor.base);
-    }
-  }
-}

package/src/components/icon/Icon.module.css

@@ -1,71 +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 {
-  .icon {
-    position: relative;
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.125em;
-
-    & > i,
-    & > svg,
-    & > img {
-      pointer-events: none;
-
-      overflow: hidden;
-      display: block;
-
-      width: 1em;
-      height: 1em;
-
-      line-height: 1;
-
-      object-fit: cover;
-      border-radius: inherit;
-
-      fill: currentcolor;
-    }
-
-    & > i::before {
-      line-height: 1;
-    }
-
-    &[data-clickable="true"] {
-      opacity: 0.75;
-
-      &:hover {
-        opacity: 0.9;
-        background-color: theme(colors.text/10%);
-      }
-
-      &:active {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  [dir="rtl"] .icon[data-flip="true"] {
-    transform: scaleX(-1);
-  }
-}

package/src/components/index.ts

@@ -1,62 +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.
- */
-
-export { ActionLabel } from "./actionLabel/ActionLabel";
-export {
-  AnimationBars,
-  AnimationIndicator,
-  AnimationSpinner,
-  Skeleton,
-  Loading,
-} from "./animations/Animations";
-export { Avatar } from "./avatar/Avatar";
-export { AvatarGroup } from "./avatar/AvatarGroup";
-export { Badge, getBadgeProps } from "./badge/Badge";
-export { Breadcrumbs } from "./breadcrumbs/Breadcrumbs";
-export { Button } from "./button/Button";
-export { ButtonGroup } from "./button/ButtonGroup";
-export { ConfirmButton } from "./button/ConfirmButton";
-export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
-export { Callout } from "./callout/Callout";
-export { Card } from "./card/Card";
-export { CardCover } from "./card/CardCover";
-export { Chip } from "./chip/Chip";
-export { Collapsable } from "./collapsable/Collapsable";
-export { Divider } from "./divider/Divider";
-export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
-export { DropdownTool } from "./dropdown/DropdownTool";
-export { EmptyContent } from "./empty/EmptyContent";
-export { Icon } from "./icon/Icon";
-export { Image, Video } from "./media/Media";
-export { ContextMenu } from "./menu/ContextMenu";
-export { Menu } from "./menu/Menu";
-export { MenuItem } from "./menu/MenuItem";
-export { Meter } from "./meter/Meter";
-export { Navigator } from "./navigator/Navigator";
-export { Panel } from "./panel/Panel";
-export { PanelGroup } from "./panel/PanelGroup";
-export { PanelStack } from "./panel/PanelStack";
-export { ProgressBar } from "./progress/ProgressBar";
-export { ProgressCircle } from "./progress/ProgressCircle";
-export { Tab } from "./tabpanel/Tab";
-export { TabPanel } from "./tabpanel/TabPanel";

package/src/components/media/Media.module.css

@@ -1,112 +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 {
-  .mediaContainer {
-    &.mediaReel {
-      &::after,
-      &::before {
-        content: "";
-
-        position: absolute;
-        inset-inline: 0;
-
-        height: 0.5rem;
-
-        background-image: linear-gradient(
-          to right,
-          #222c 0,
-          #222c 0.25rem,
-          #fff8 0.25rem,
-          #fff8 0.75rem,
-          #222c 0.75rem,
-          #222c 1rem
-        );
-        background-repeat: repeat-x;
-        background-position: center center;
-        background-size: 1rem;
-        border: 0.125rem solid #222c;
-      }
-
-      &::before {
-        top: 0;
-      }
-
-      &::after {
-        bottom: 0;
-      }
-    }
-
-    & .mediaPlaceholder {
-      /* might add styles later */
-    }
-
-    & .mediaControls {
-      & [data-ref="button"] {
-        margin: 0;
-
-        & > :first-child {
-          color: #fff;
-          background-color: theme(colors.black/50%);
-
-          &:hover {
-            color: theme(colors.primary.600);
-            background-color: theme(colors.black/80%);
-          }
-        }
-      }
-
-      & .mediaControlAction > :first-child {
-        background-color: theme(colors.black/70%);
-      }
-
-      & .mediaControlPlaceholder {
-        /* might add styles later */
-      }
-
-      & .mediaControlAction + .mediaControlAction {
-        margin-top: 8px;
-      }
-    }
-  }
-
-  .media {
-    /* might add styles later */
-  }
-}
-
-@layer util {
-  & .mediaControls {
-    &:hover {
-      & .mediaControlPlaceholder {
-        display: none;
-      }
-    }
-
-    &:not(:hover) {
-      & .mediaControlAction {
-        display: none;
-      }
-    }
-  }
-}