@react-fabric/core 1.0.0-beta.0

package/src/hooks/useStorage.ts

@@ -0,0 +1,76 @@
+/*
+ * 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 { useState } from "react";
+import { useClientService } from "./useClientService";
+import { useEffectDebugger } from "./useEffectDebugger";
+
+export const useLocalStorage = <T>(
+  key: string,
+  defaultValue: T,
+): [T, (value: T) => void] => {
+  const service = useClientService(localStorage);
+  const [value, setValue] = useState<T>(
+    JSON.parse(service?.getItem(key) ?? "null") ?? defaultValue,
+  );
+
+  useEffectDebugger(
+    () => {
+      setValue(JSON.parse(service?.getItem(key) ?? "null") ?? defaultValue);
+    },
+    [],
+    "useStorage initial value",
+  );
+
+  const changeValue = (value: T) => {
+    service?.setItem(key, JSON.stringify(value));
+    setValue(value);
+  };
+
+  return [value, changeValue];
+};
+
+export const useSessionStorage = <T>(
+  key: string,
+  defaultValue: T,
+): [T, (value: T) => void] => {
+  const service = useClientService(sessionStorage);
+  const [value, setValue] = useState<T>(
+    JSON.parse(service?.getItem(key) ?? "null") ?? defaultValue,
+  );
+
+  useEffectDebugger(
+    () => {
+      setValue(JSON.parse(service?.getItem(key) ?? "null") ?? defaultValue);
+    },
+    [],
+    "useStorage initial value",
+  );
+
+  const changeValue = (value: T) => {
+    service?.setItem(key, JSON.stringify(value));
+    setValue(value);
+  };
+
+  return [value, changeValue];
+};

package/src/hotkeys/HotKey.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { useEffectDebugger } from "../hooks/useEffectDebugger";
+import { useHotKeys } from "./HotKeyWrapper";
+import { type HotKeyProps } from "./commons";
+
+export const HotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
+  const { addHotKey, removeHotKey } = useHotKeys();
+  useEffectDebugger(
+    () => {
+      addHotKey?.(keyCombo, handler ?? (() => undefined), global);
+      return () => removeHotKey?.(keyCombo);
+    },
+    [addHotKey, global, handler, keyCombo, removeHotKey],
+    "HotKey add",
+  );
+  return null;
+};

package/src/hotkeys/HotKeyLabel.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 { useMemoDebugger } from "../hooks/useEffectDebugger";
+import { reduceHotKey, type HotKeyProps } from "./commons";
+
+export const HotKeyLabel = ({
+  keyCombo,
+}: Omit<HotKeyProps, "global" | "handler">) => {
+  const label = useMemoDebugger(
+    () => {
+      const item = reduceHotKey({ keyCombo });
+
+      const label = [];
+      if (item.alt) label.push("ALT");
+      if (item.ctrl) label.push("CTRL");
+      if (item.meta) label.push("META");
+      if (item.shift) label.push("SHIFT");
+      if (item.key.toLowerCase() === "tab") label.push("TAB");
+      else if (item.key.toLowerCase() === "space") label.push("SPC");
+      else if (item.key.toLowerCase() === "arrowleft") label.push("LEFT");
+      else if (item.key.toLowerCase() === "arrowright") label.push("RIGHT");
+      else if (item.key.toLowerCase() === "arrowup") label.push("UP");
+      else if (item.key.toLowerCase() === "arrowdown") label.push("DOWN");
+      else if (item.key.toLowerCase() === "enter") label.push("ENTER");
+      else if (item.key.toLowerCase() === "delete") label.push("DEL");
+      else if (item.key.toLowerCase() === "escape") label.push("ESC");
+      else if (item.key.toLowerCase() === "backspace") label.push("BKSPC");
+      else label.push(item.key.toUpperCase());
+      return [<span key="label">{label.join(" ")}</span>];
+    },
+    [keyCombo],
+    "HotKey label",
+  );
+
+  return (
+    <kbd className="hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1">
+      {label}
+    </kbd>
+  );
+};

package/src/hotkeys/HotKeyWrapper.tsx

@@ -0,0 +1,137 @@
+/*
+ * 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 {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useRef,
+  type FC,
+  type PropsWithChildren,
+} from "react";
+import { useEffectDebugger } from "../hooks/useEffectDebugger";
+import { reduceHotKey } from "./commons";
+
+/** @internal */
+export const HotKeysContext = createContext<{
+  addHotKey: (key: string, handler: () => void, global?: boolean) => void;
+  removeHotKey: (key: string) => void;
+}>({} as AnyObject);
+
+export const useHotKeys = () => useContext(HotKeysContext);
+
+export const HotKeyWrapper: FC<PropsWithChildren> = memo(
+  ({ children }: PropsWithChildren) => {
+    const refEl = useRef<HTMLDivElement>(null);
+    const keyList = useRef<KeyValue[]>([]);
+
+    const addHotKey = useCallback(
+      (keyCombo: string, handler: () => void, global = false) =>
+        (keyList.current = [
+          ...keyList.current.filter(({ _key }) => _key !== keyCombo),
+          reduceHotKey({ keyCombo, handler, global }),
+        ]),
+      [],
+    );
+    const removeHotKey = useCallback(
+      (key: string) =>
+        (keyList.current = [
+          ...keyList.current.filter(({ _key }) => _key !== key),
+        ]),
+      [],
+    );
+
+    const handler = useCallback((items: KeyValue[], event: KeyboardEvent) => {
+      if (items.length === 0) return;
+      const { key: keyCode, code, altKey, ctrlKey, metaKey, shiftKey } = event;
+      if (
+        keyCode !== "Enter" &&
+        keyCode !== "Esc" &&
+        ["INPUT", "TEXTAREA", "SELECT"].includes(
+          (event.target as HTMLElement).tagName,
+        )
+      )
+        return;
+      const find = items.find(
+        ({ key, alt, ctrl, meta, shift }: KeyValue) =>
+          (key.toLowerCase() === keyCode.toLowerCase() ||
+            key.toLowerCase() === code.toLowerCase()) &&
+          alt === altKey &&
+          ctrl === ctrlKey &&
+          meta === metaKey &&
+          shift === shiftKey,
+      );
+      if (find?.handler) {
+        find.handler();
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }, []);
+
+    const handleGlobal = useCallback(
+      (event: KeyboardEvent) => {
+        handler(
+          keyList.current.filter((i) => i.global),
+          event,
+        );
+      },
+      [handler],
+    );
+    const handleHotKey = useCallback(
+      (event: KeyboardEvent) => {
+        handler(
+          keyList.current.filter((i) => !i.global),
+          event,
+        );
+      },
+      [handler],
+    );
+
+    useEffectDebugger(
+      () => {
+        const el: HTMLElement | null | undefined = refEl.current?.parentElement;
+        if (el) {
+          el.tabIndex = 0;
+          el.addEventListener("keydown", handleHotKey);
+          document.addEventListener("keydown", handleGlobal);
+          return () => {
+            el.removeEventListener("keydown", handleHotKey);
+            document.removeEventListener("keydown", handleGlobal);
+          };
+        }
+      },
+      [handleGlobal, handleHotKey],
+      "HotKeyWrapper attach handlers",
+    );
+
+    return (
+      <HotKeysContext.Provider value={{ addHotKey, removeHotKey }}>
+        <div ref={refEl} style={{ display: "contents" }}>
+          {children}
+        </div>
+      </HotKeysContext.Provider>
+    );
+  },
+);
+HotKeyWrapper.displayName = "HotKeyProvider";

package/src/hotkeys/commons.ts

@@ -0,0 +1,74 @@
+/*
+ * 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 interface HotKeyProps {
+  /**
+   * Hot key combination
+   *
+   * ctrl, shift, alt, meta
+   * enter, space, escape, tab, backspace, delete
+   * left, right, up, down
+   */
+  keyCombo: string;
+  /**
+   * Global hot key
+   */
+  global?: boolean;
+  /**
+   * Callback handler
+   */
+  handler?: () => void;
+}
+
+export const reduceHotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
+  const item = {
+    key: "",
+    meta: false,
+    shift: false,
+    ctrl: false,
+    alt: false,
+    _key: keyCombo,
+    handler,
+    global,
+  };
+  keyCombo.split("+").forEach((e) => {
+    if (e.trim().toLowerCase() === "ctrl") {
+      item.ctrl = true;
+    } else if (e.trim().toLowerCase() === "alt") {
+      item.alt = true;
+    } else if (e.trim().toLowerCase() === "meta") {
+      item.meta = true;
+    } else if (e.trim().toLowerCase() === "shift") {
+      item.shift = true;
+    } else {
+      if (e.trim().toLowerCase() === "left") item.key = "arrowleft";
+      else if (e.trim().toLowerCase() === "right") item.key = "arrowright";
+      else if (e.trim().toLowerCase() === "up") item.key = "arrowup";
+      else if (e.trim().toLowerCase() === "down") item.key = "arrowdown";
+      else if (e.trim().toLowerCase().startsWith("del")) item.key = "delete";
+      else if (e.trim().toLowerCase().startsWith("esc")) item.key = "escape";
+      else item.key = e.trim().toLowerCase();
+    }
+  });
+  return item;
+};

package/src/i18n/ar.json

@@ -0,0 +1,21 @@
+{
+  "error": {
+    "title": "أُووبس! لقد كسرنا شيئا"
+  },
+  "action": {
+    "ok": "حسنا",
+    "add": "اضف جديد",
+    "save": "حفظ",
+    "more": "أظهر المزيد",
+    "less": "عرض أقل",
+    "back": "عودة",
+    "copy": "ينسخ",
+    "copied": "نسخ",
+    "close": "قريب",
+    "apply": "تطبيق",
+    "delete": "حذف",
+    "submit": "تقديم",
+    "cancel": "إلغاء",
+    "preview": "معاينة"
+  }
+}

package/src/i18n/en.json

@@ -0,0 +1,34 @@
+{
+  "locale": {
+    "en": "English",
+    "ar": "عربى",
+    "de": "Deutsche",
+    "es": "Español",
+    "fr": "Français",
+    "it": "Italiano",
+    "jp": "日本語",
+    "ko": "한국어",
+    "pt": "Português",
+    "ru": "Pусский",
+    "zh": "中国人"
+  },
+  "error": {
+    "title": "OOPS! We broke something"
+  },
+  "action": {
+    "ok": "OK",
+    "add": "Add New",
+    "save": "Save",
+    "more": "Show more",
+    "less": "Show less",
+    "back": "Back",
+    "copy": "Copy",
+    "copied": "Copied",
+    "close": "Close",
+    "apply": "Apply",
+    "delete": "Delete",
+    "submit": "Submit",
+    "cancel": "Cancel",
+    "preview": "Preview"
+  }
+}

package/src/i18n/index.ts

@@ -0,0 +1,50 @@
+/*
+ * 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.
+ */
+/* istanbul ignore file */
+
+import i18n from "i18next";
+import ar from "./ar.json";
+import en from "./en.json";
+
+/**
+ * add language bundles using bundle keys as namespaces
+ * @param key
+ * @param languageBundles: {en: {}, ar: {}}
+ */
+export const addTranslationBundle = (
+  key: string,
+  languageBundles: KeyValue,
+) => {
+  const callback = () => {
+    Object.keys(languageBundles).forEach((lang) => {
+      const bundle = languageBundles[lang];
+      i18n.addResourceBundle(lang, key, bundle, true, false);
+    });
+  };
+  if (i18n.isInitialized) {
+    callback();
+  } else {
+    i18n.on("initialized", callback);
+  }
+};
+addTranslationBundle("core", { en, ar });

package/src/index.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 * from "./components";
+export * from "./core";
+export { addTranslationBundle } from "./i18n";
+export { Flyout, Modal, Tooltip } from "./overlays";
+export * from "./typography";
+
+export * from "./hooks/useClientService";
+export * from "./hooks/useDebounce";
+export * from "./hooks/useEffectDebugger";
+export * from "./hooks/useIsDark";
+export * from "./hooks/useIsRtl";
+export * from "./hooks/useNavigator";
+export * from "./hooks/useOverlayService";
+export * from "./hooks/useResize";
+export * from "./hooks/useResizeObserver";
+export * from "./hooks/useStorage";
+
+export { HotKey } from "./hotkeys/HotKey";
+export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+
+export { CoreIcons } from "./types/icons";
+
+export {
+  ApplicationProvider,
+  useApplicationContext,
+  useGlobals,
+  useNotificationService,
+} from "./context/Global";

package/src/overlays/alert/Alert.module.css

@@ -0,0 +1,44 @@
+/*
+ * 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 {
+  .alert {
+    z-index: var(--z-overlay);
+
+    grid-template: "icon title" auto "icon message" auto "input input" auto "actions actions" auto / auto 1fr;
+    gap: 0.5rem 1rem;
+
+    margin-top: -100%;
+
+    opacity: 0;
+
+    transition:
+      margin 0.4s,
+      opacity 0.3s 0.2s;
+
+    &[data-show="true"] {
+      margin-top: 0;
+      opacity: 1;
+    }
+  }
+}