@unifydev/flexilla/dist/index.mjs

Variants, shortcuts, utilities for flexilla

import { dataStateVariants } from '@unifydev/unify-variant';

const getAllVariants = (prefixState) => {
  const variants = [
    dataStateVariants({
      prefix: prefixState,
      variants: "visible|hidden|active|inactive|open|close|opened|closed|resize|minimize|maximaze|opened|closed|maximazed|resized|copied",
      selector: "data-state"
    }),
    dataStateVariants({
      prefix: prefixState,
      variants: "active",
      selector: "data-focus"
    }),
    dataStateVariants({
      prefix: prefixState,
      variants: "icon|label|description|kbd",
      selector: "slot"
    }),
    dataStateVariants({
      prefix: prefixState,
      variants: "x|y",
      selector: "data-ax"
    })
  ];
  return variants;
};

function flexillaPreset(options = { prefix: "fx" }) {
  return {
    name: "@unifydev/flexilla",
    variants: getAllVariants(options.prefix),
    shortcuts: {
      "ui-tabs-indicator": "absolute transform-origin-[0_0] w-[var(--un-tab-indicator-width)] h-[var(--un-tab-indicator-height)] top-[var(--un-tab-indicator-top)] left-[var(--un-tab-indicator-left)]",
      "ui-animated-modal-content": "animate-[var(--un-modal-animation)] animate-fill-both",
      "ui-animated-tab-panel": "animate-[var(--un-tab-show-animation)] animate-fill-both",
      "ui-overlay": "fixed inset-0"
    },
    rules: [
      [
        "ui-popper",
        {
          position: "fixed",
          left: "var(--fx-popper-placement-x)",
          top: "var(--fx-popper-placement-y)"
        }
      ]
    ]
  };
}

export { flexillaPreset };